스타일 그래프

스타일 단계의 모든 설정은 패스의 손잡이입니다: 셰이딩, 선, 메시 모서리, 정리, 시트가 나오는 색. 스타일 단계가 바로 그 그래프입니다. 패스가 상자로 놓이고 그 사이를 연결선이 잇습니다. 상자마다 자신이 만드는 그림을 보여 주고 자체 설정을 지니므로, 결과만이 아니라 처리 과정이 보입니다. 패스의 순서를 바꾸거나, 하나를 마스크에 통과시키거나, 둘을 섞을 수 있습니다.

모델의 색에서 완성된 시트까지 이어지는 이미지 사슬이 곧 파이프라인의 설명입니다. 느린 컴퓨터에서는 눈 버튼으로 끌 수 있습니다.

캔버스에서 작업하지 않아도 됩니다. 노드를 고르면 오른쪽 인스펙터에 같은 설정이 표시되므로 슬라이더는 언제나 손닿는 곳에 있습니다. 아무 노드도 고르지 않으면 인스펙터는 색을 담은 Palette 노드를 보여 줍니다.

스타일. 프로젝트에는 스타일을 원하는 만큼 둘 수 있으며, 각각 이름과 자체 스타일 그래프를 가지고 어느 것도 특정 카메라에 속하지 않습니다. 캔버스에 보이는 것은 스타일 목록이나 창 헤더의 스타일 선택에서 고른 스타일로, 헤더의 카메라와 액션을 그립니다. 목록 아래의 새 스타일은 보이는 스타일을 복사해 그 이름을 딴 이름(Pixel Art 2)을 붙입니다. 행의 우클릭 메뉴로 이름을 바꾸거나, 복제하거나, 삭제하거나(NAME 삭제…, 먼저 확인을 묻습니다. 다른 스타일이 남아 있다면 첫 번째 스타일도 지울 수 있습니다), 키트 저장…(스타일을 키트로 저장)으로 그래프와 팔레트를 담은 키트로 쓰거나, 키트 사용…(스타일 키트 사용)으로 다른 프로젝트에서 저장한 스타일을 이 프로젝트의 것으로 만듭니다. 행을 위아래로 끌어 목록 순서를 바꿉니다. 파이프라인 라이브러리에 저장하면 노드 라이브러리의 내 파이프라인 아래에 나열되고, 프로젝트 자체의 스타일은 픽셀화 노드 옆 파이프라인 아래에 있습니다.

모든 그래프는 왼쪽에 자체 노드 라이브러리가 있습니다(패널이 충분히 넓을 때). 장면, 액션, 스타일, 에셋 그래프 모두 같습니다. 그래프에 넣을 수 있는 모든 것을 입력과 출력부터, 그다음 나머지를 그룹별로 나열하며 각각 무엇을 하는지 한 줄로 설명합니다. 찾기에 입력해 범위를 좁히세요. 클릭하면 그래프가 정한 자리에 연결된 채로 추가되고, 캔버스로 끌어다 놓으면 놓은 자리에 들어갑니다.

노드를 한 번도 바꾸지 않은 프로젝트는 여전히 그래프를 저장하지 않으며 예전과 똑같이 렌더링됩니다.

처음 시작하는 그래프

Pixor 자체의 파이프라인을 연결한 것입니다:

처음 시작하는 스타일 그래프: Camera가 Layered Render로, 그 레이어가 빛과 그림자와 선 작업으로 들어가 합쳐지고, 정리된 뒤 팔레트에 맞춰져 Output으로 갑니다

작업이 일어나는 순서대로 왼쪽에서 오른쪽으로 배치해, 연결선이 앞으로 흐르고 최대한 덜 겹치게 합니다.

  • Camera는 그래프가 시작되는 곳으로, 이 스타일이 그려 주는 카메라입니다. 스타일을 가리키는 카메라마다 자기 방향에서 그래프를 한 번씩 실행합니다.

  • Layered Render는 카메라를 받습니다: 이 프레임에서 액션을 렌더링한 결과로, 픽셀 아트 처리 전이며 여덟 레이어가 각각 자체 출력으로 나옵니다. albedo, normals, depth, part, material, coverage, key light, shadow. 셰이딩은 normals와 shadow를, 선은 depth, normals, part를 읽습니다. 기본 노드의 그룹이므로 열면 Render 노드(레이어가 있는 프레임 하나)와 각자 고른 레이어를 프레임에서 꺼내는 Layer 노드 여덟 개를 담은 틀이 됩니다. 연결선은 무엇이 무엇을 읽는지 보여 주며 실제로 작동합니다. Noise field를 Light and shade의 shadow에 연결하면 그림자가 그 노이즈가 됩니다. 연결하지 않으면 각 처리 단계는 카메라의 렌더를 직접 읽습니다.

  • 팔레트는 프레임의 색을 고르는 곳입니다. 기본 색과 명암 띠의 수, 디더링, 자체 팔레트, 색조 이동을 정합니다. 출력은 아무것도 전달하지 않으며, 그 자체가 프레임입니다.

  • Light and shade는 빛을 각 픽셀 색상 램프의 한 단계로 바꿉니다. 직접 쓸 수도 있는 기본 노드들의 그룹이며, 순서는 다음과 같습니다: Light bands(각 픽셀이 속한 주광의 띠. 경계에서 디더링하고, 경계 근처에서는 프레임 사이에 유지), World light(조명, 물결선, 구름 그림자, 빛줄기, 해안 거품), Highlights, Glow, Ramp shifts(그리고 색 순환), 그다음 셰이딩을 색으로 바꾸는 Shading colours. 그 사이의 연결선은 셰이딩, 즉 각 픽셀의 램프와 그 램프 위의 단계를 나릅니다.

  • Line work는 실루엣, 안쪽 선, 주름을 찾습니다. 이것도 그룹이며 Silhouette, Edges(안쪽 선, 주름, 볼록한 접힘), Tidy lines(짧은 조각 제거, 모서리와 이중 선 정리), Line colours로 이루어지고, 그 사이를 선 연결선이 잇습니다.

그룹의 파라미터는 안에 든 기본 노드들의 설정입니다. 노드에서든 스크립트에서든 하나를 설정하면 그 설정을 가진 안쪽의 모든 기본 노드에 적용됩니다(pxr graph set my.pixor --node light-and-shade --set dither=0.5, --node line-work --set min_inner_line=3). 그래서 기본 노드로 직접 만든 그룹도 기본 제공 그룹과 같은 방식으로 설정됩니다. 그룹을 (제목 밖에서) 더블클릭하거나 제목의 화살표를 누르면 열어서 무엇으로 이루어졌는지 보거나 다시 연결할 수 있습니다.

  • 와이어프레임 룩을 켜면 와이어프레임도 나타나며, Combine의 세 번째 입력으로 들어갑니다. 원자 노드 두 개로 된 그룹입니다. 연결선 경로(메시의 모서리가 프레임을 지나는 곳, 그리고 표면 뒤의 모서리를 뺄지, 점선으로 할지, 어둡게 할지), 그다음 와이어 색입니다.
  • Combine은 이들을 겹치고, 연결선 아래에 무엇이 오는지 정하며, 선끼리 맞닿는 곳을 가늘게 합니다.
  • Cleanup은 떠도는 픽셀을 없애고 선 모서리를 부드럽게 합니다. 기본 노드 두 개로 된 그룹입니다: Stray pixels(남기기엔 너무 작은 한 색 덩어리와, 이를 찾는 패스 횟수), 이어서 Smooth corners(선의 어떤 모서리를 램프 한 단계 아래로 부드럽게 할지).
  • 출력은 그래프가 만드는 것입니다. 액션의 이 순간에 이 카메라가 보는 스프라이트로, 이를 에셋 그래프의 Sprites 노드가 스프라이트 목록으로 자릅니다. 설정은 없으며, 색은 그 앞의 팔레트에서 정합니다.

이 노드들은 파이프라인과 똑같은 코드를 호출하므로, 처음 시작하는 그래프는 전과 정확히 같은 픽셀을 만듭니다. Pixor 자체 골든 테스트는 매번 두 방식으로 렌더링해 비교합니다.

작업하기

모든 그래프는 같은 방식으로 작동합니다. 장면, 액션, 스타일, 에셋 그래프 모두 같은 막대, 같은 우클릭 메뉴, 같은 단축키와 동작을 씁니다. 이 표가 네 그래프 모두의 전부입니다. 노드 이동을 포함해 편집 하나가 기록의 한 단계이며(Ctrl+Z로 되돌립니다), 단축키는 포인터가 그래프 위에 있을 때 작동합니다.

할 일 끝
가운데 버튼으로 드래그 (또는 Alt와 왼쪽 버튼) 뷰 이동
스크롤 (또는 핀치) 포인터를 중심으로 4분의 1 크기에서 두 배까지 확대·축소. 한 칸은 3D 뷰, 2D 뷰와 같은 단계. 맞추기와 그래프를 처음 볼 때 전체에 맞춥니다
프레임 또는 Home 모든 노드를 화면에 표시
노드 제목 클릭 선택: 설정이 인스펙터에도 나타나고, 가운데에 그 노드가 만드는 것이 표시됩니다. 노드가 겹친 곳에서는 맨 위 노드
노드 Shift 클릭 추가로 선택하거나 해제
배경 드래그 상자: 닿는 모든 노드가 선택됩니다(Shift를 누르면 이미 선택된 것은 유지)
노드 드래그 이동, 함께 선택한 모든 노드도
+ 또는 캔버스 우클릭 › 노드 추가 노드 라이브러리 목록, 그룹별: 선택한 것이 들어갑니다. 오른쪽 클릭으로는 클릭한 곳에. 맨 위의 키트 사용…(키트를 그룹으로 추가)는 키트를 그룹 하나로 넣습니다
왼쪽 아래로 이어지는 라이브러리 한 줄 클릭하면 그래프가 정한 자리에 연결된 채 추가되고, 캔버스로 끌면 놓은 곳에 놓입니다
노드 오른쪽의 둥근 점에서 다른 노드 왼쪽의 점으로 드래그 연결. 끄는 동안 연결선이 맞는 모든 점에 고리가 표시됩니다
연결선을 빈 캔버스 위에서 놓기 맞는 노드 메뉴: 입력해서 좁히고, Enter로 첫 항목 선택
입력 점을 끌어 떼기 연결 끊기. 다른 입력에 놓으면 연결선이 그리로 옮겨집니다
연결선을 클릭한 뒤 Delete 자르기. 포인터 아래의(또는 선택한) 연결선 가운데에 ×도 표시되어 한 번 클릭으로 자릅니다
F2 또는 노드 제목 더블클릭 이름 바꾸기: 제목에 자체 이름이 표시됩니다(그룹은 그룹 이름). 비우면 다시 원래 종류 이름이 됩니다
Ctrl+D 선택한 노드를 그 아래에 복제. 연결은 그대로, 읽던 것도 그대로 읽습니다
Ctrl+C, Ctrl+V 선택한 노드를 복사해 포인터 아래에 붙여 넣기. 같은 종류의 어느 그래프에든 됩니다: 다른 스타일, 다른 액션, 다른 에셋 파이프라인, 그룹 내부. 한 종류의 그래프 노드는 다른 종류에 들어가지 않으며, 상태 줄이 그렇게 알려 줍니다
−(선택한 노드 삭제), 또는 Delete 선택한 노드 삭제. 그 노드를 읽던 노드는 그 노드가 읽던 것을 읽으므로 체인은 체인으로 남습니다
그룹 또는 Ctrl+G 선택한 노드들(과 고른 노드)이 열린 그룹 하나가 됩니다
그룹 제목 오른쪽의 화살표, 또는 제목이 아닌 그룹 위를 더블클릭 제자리에서 펼치기, 또는 다시 접기
키트 저장… 선택한 그룹을 키트로, 또는 그룹을 고르지 않았으면 그래프 전체를(대화 상자 제목에 표시)
정리 모든 노드를 작업이 일어나는 순서대로 왼쪽에서 오른쪽으로 다시 배치
메모 선택한 노드 둘레, 또는 보이는 곳에 메모 놓기
눈 아이콘, 또는 오른쪽 클릭 › 노드 이미지 각 노드가 만드는 이미지 표시 또는 숨기기
캔버스 오른쪽 클릭 위의 모든 것과 그 단축키, 그리고 그래프마다 따로 있는 것: 스타일 그래프의 프리셋이 설정하는 것만 표시, 모든 노드의 설정 표시, 프리셋의 그래프로 되돌리기, 장면 그래프의 사본 하나로 되돌리기, 에셋 그래프의 시트 하나로 되돌리기

노드의 그림이 무엇인지는 그래프마다 다릅니다. 스타일 그래프에서는 노드가 만드는 픽셀, 장면 그래프에서는 노드가 넘기는 오브젝트를 위에서 본 모습, 액션 그래프에서는 노드의 출력이 한 번 도는 동안 하는 일(아래 참고), 에셋 그래프에서는 목록이 넘기는 프레임, 또는 노드가 쓰는 시트나 파일입니다.

액션 그래프에서 노드는 종류마다 자신을 가장 잘 설명하는 이미지를 가집니다:

노드 그림
Clip, Keyframes, Routine, Action 재생하는 것의 고르게 나뉜 네 순간의 모델을 왼쪽에서 오른쪽으로(루프는 한 주기, 마지막 순간은 다시 시작하기 직전). 모든 포즈가 들어가는 카메라 하나로, 표시된 카메라의 각도에서 봅니다
회전, 위아래 흔들기, 흔들기, 맥동, 슬라이드, 물결, 노이즈, 램프, 장면 시간 실제로 바뀌는 숫자마다 최솟값에서 최댓값까지의 곡선: Spin은 경사, Bob은 파동. 똑같이 바뀌는 숫자는 한 선으로(Pulse의 크기 셋)
필터, Apply to, Output, 그룹 넘기는 것으로: 세 개보다 많은 숫자를 움직이면 포즈(클립, 회전과 병합된 클립, 2프레임씩 홀드), 모션 하나면 곡선(Spin 위의 Step은 계단을 그림)

곡선은 종류별로 색이 다릅니다. 위치는 파랑, 회전은 호박색, 크기는 초록, 나머지는 분홍이며, 가장 크게 움직이는 것 최대 여섯 개까지 보입니다. 포인터를 그림 위에 올리면 각 선의 이름과 몇 개가 더 있는지 알려 줍니다. 움직이는 것이 모델의 일부가 아니면(카메라, 조명) 포즈 대신 곡선으로 보여 줍니다. 아무것도 바꾸지 않는 노드(Constant, 없는 클립)는 그림 자리에 움직임 없음이라고 표시합니다. 곡선을 가로지르는 선이나 포즈 아래의 막대는 재생 중 타임라인의 시간을 따라갑니다.

이미지는 Pixor 자체 CPU 래스터라이저가 별도 스레드에서 작게 그리며, 선택한 노드를 먼저 그립니다. 그래프는 이를 기다리지 않습니다. 노드는 다음 이미지가 준비될 때까지 기존 이미지를 유지하므로 깜빡이지 않으며, 노드가 넘기는 것을 바꾸지 않는 편집은 다시 그리지 않습니다. 노드 하나에 기사 모델로 약 25 ms, 휴머노이드 FBX 픽스처로 약 40 ms가 걸리므로, 편집 후 1초 안에 노드 스무 개가 모두 그려집니다.

메모는 노드 뒤에 놓이는 상자로, 위쪽에 직접 쓴 글이 들어갑니다. 그래프의 이 부분이 무엇을 하는지, 다음에 무엇을 시도할지 같은 것이죠. 바로 입력하면 됩니다. 왼쪽 위 손잡이는 메모를 그 안의 모든 노드와 함께 옮기므로, 메모는 큰 그래프의 일부를 설명하는 동시에 한데 묶어 두는 방법이기도 합니다. 오른쪽 아래 모서리로 크기를 바꾸고, 빼기 버튼으로 없앱니다(노드는 남습니다). 메모는 픽셀을 하나도 바꾸지 않습니다.

노드의 슬라이더를 끄는 동안에는 그 노드의 이미지를 먼저 다시 만들고, 다음에 선택한 노드, 그다음 나머지를 차례로 만듭니다. 그래서 보고 있는 곳에 변화가 바로 나타납니다.

연결선 종류마다 색이 달라, 읽지 않아도 무엇이 어디에 맞는지 보입니다: 팔레트 색의 layer, mask, 픽셀마다의 number, normal, ramp, palette, camera, render, shading, lines, wire paths, 그리고 값(켜기/끄기, 숫자, 글자). 아무것도 연결되지 않았는데 무언가 필요한 입력은 빨간 테두리가 생기고, 아래쪽 줄이 무엇이 잘못됐는지 알려 줍니다. 종류가 맞지 않는 연결선과 그래프를 빙글 돌게 만드는 연결선은 놓는 순간 거부됩니다.

노드란 무엇인가

라이브러리와 노드 추가 메뉴는 이 그룹들 아래에 나열합니다:

그룹 노드
입력 Camera, Render, Layer(렌더의 albedo, 노멀, 깊이, 파츠 ID, 재질 ID, 덮는 정도, 주광 또는 그림자), Picture, Fill light, Motion, Surface dither, Loop phase, Ramp of the colour, Ramp position, 재질 채널인 Metallic, Roughness, Emissive, Occlusion, See-through, 그리고 Edge pixels(메시 자체의 모서리가 모든 것 앞에서 프레임을 지나는 곳)
패스 셰이딩, 선, 메시 모서리, Combine, 정리, 팔레트로 — 각각 패스 전체를 상자 하나에 담았습니다
셰이딩 Light bands, World light, Highlights, Glow, Ramp shifts, Shading colours, 그리고 손그림 마무리: Shapes, Unband, Glint, Soften bands, Hatch
선 실루엣, 가장자리, 선 정리, 선 색, 색 경계, 선 굵기
와이어프레임 연결선 경로, 와이어 색
정리 떠도는 픽셀, 모서리 부드럽게, 실루엣 정리
색 팔레트, 가장 가까운 색(램프와 무관하게 모든 픽셀을 가장 가까운 팔레트 색으로), 램프 단계 이동, 마스크된 곳 단계 이동, 평탄화, 팔레트 디더링, 램프 맵, 타일 색, 서브픽셀 움직임
마스크 임계값, 파츠별, 재질별, 방향별, 노이즈, 패턴, 단단한 픽셀, NOT, 그리고, OR
혼합 Choose by mask, Dither mix, Layer over
수학 숫자, 추가, 빼기, 곱하기, 나누기, 더 작게, 더 크게, 부호 없이, 비율, 정수, 사이 홀드, 다시 매핑, 혼합, 단계 위치, 부드러운 계단, 일치도, 길이, 숫자로, 노이즈 필드(노이즈 마스크가 문턱값으로 자르는 노이즈를 숫자로)
Space 오프셋, 흐림, 경사, 키우기, 줄이기, 오목한 곳 — 각각 한 픽셀 주변을 얼마나 멀리 보는지 알려 주며, 이것이 타일 이음매를 정확하게 지켜 줍니다
값 모든 속성은 입력입니다 참고
그룹 그룹 안의 포트인 In과 Out
출력 출력, CRT(스프라이트가 아니라 보기 위한 이미지)

그 위에 라이브러리는 파이프라인(프로젝트의 스타일과 픽셀화), 내 파이프라인, 내 노드를 나열합니다.

이미지는 직접 준비한 레이어입니다: 종이 결, 패턴, 그린 하늘이나 로고. 각 픽셀은 이미지 색에 가장 가까운 팔레트 색이 되며, 놓은 위치부터 스프라이트 자체 픽셀 위에 얹히거나 프레임 전체에 타일로 깔립니다. Choose by mask는 원하는 곳에 놓고, Layer over는 맨 위에 얹습니다. 이미지는 한 번 읽어 노드에 보관하므로 저장한 룩이나 키트에 함께 담깁니다. 스크립트에서는:

pxr graph add my.pixor --node picture --set file=logo.png --set tile=false   # node 8 on a new project
pxr graph add my.pixor --node layer-over --in under=4 --in over=8             # node 9: the logo over the palette's frame
pxr graph wire my.pixor --from 9 --to 5 --slot layer                          # into the Output

섞어도 새로운 색은 생기지 않습니다. Pixor는 팔레트 인덱스 공간에서 작업하므로 섞기는 둘 중 한 픽셀을 고르는 것이며, 두 색을 팔레트에 없는 세 번째 색으로 혼합하지 않습니다. Dither mix는 A와 B를 규칙 패턴으로 배치합니다. 픽셀 아티스트가 색을 섞는 방식입니다.

손으로 그린 듯한 마무리

어떤 노드는 음영이 생긴 뒤 픽셀 아티스트가 손으로 하는 일을 합니다. 처음 그래프에는 하나도 없으니 원하는 것을 추가하세요. 셰이딩에 작용하는 노드는 램프 이동과 음영 색 사이에(빛과 그림자 그룹을 여세요) 아래 순서대로, 선에 작용하는 노드는 가장자리와 선 색 사이에(선 작업을 여세요) 들어갑니다. 이 노드들이 까는 무늬는 모두 표면에 붙어 있어 모델 위를 기어 다니지 않고 모델과 함께 움직이며, 이들이 만드는 것은 팔레트를 벗어나지 않습니다. 일부러 그러는 CRT만 예외입니다. 픽셀 주변이나 표면 위치로 판단하는 노드(도형, 반짝임, 해칭, 띠 해제)는 이전 프레임 이후 표면이 움직이지 않은 곳에서 그때 내린 판단을 유지하므로 깜박임을 더하지 않습니다. 이런 노드가 있는 그래프를 지나는 루프 클립은 먼저 한 바퀴를 돌아, 첫 프레임이 마지막 프레임에 이어지게 합니다.

노드 연결하기 하는 일 설정
도형 셰이딩 → 셰이딩 빛과 그림자 모양을 손으로 그린 것처럼 정리합니다. 한 명암 띠의 모양이 가장 작게보다 작으면 주변 대부분이 속한 띠를 따르고, 이어서 각 픽셀은 매끄럽게 범위 안의 픽셀 대부분이 속한 띠를 따릅니다. 그러면 그만한 폭의 혀 모양 돌출이 사라지고 경계가 매끄러워집니다. 같은 파츠, 같은 램프의 픽셀끼리만 서로 계산에 들어가며, 띠가 바뀌려면 픽셀 주변 대부분이 필요하므로 고유한 색의 점 하나는 떠도는 픽셀에 맡깁니다. 표면이 움직이지 않고 빛도 같은 픽셀은 이전 프레임에서 받은 띠를 유지합니다. 가장 작게, 매끄럽게
띠 해제 셰이딩(+ 선) → 셰이딩 실루엣, 파츠 가장자리, 선을 따라 일정 거리로 이어지는 띠 경계 — 베개처럼 부풀어 보이는 모양 — 를 손으로 계단을 놓듯 구간마다 한 픽셀씩 엇갈리게 합니다. 2분의 1이면 따라가며 네 픽셀 중 두 픽셀이며, 표면 위에서 세므로 계단이 표면과 함께 움직입니다. 범위 안 (가장자리에서의 픽셀 수), 양
반짝임 셰이딩(+ 마스크, + 빛) → 셰이딩 마스크가 설정된 곳에서 파츠(프레임 어디에 있든 렌더의 파츠)마다 의도한 하이라이트 하나를, 가장 밝은 명암 띠에서 가장 밝은 픽셀에 둡니다. 똑같이 밝은 곳이 둘이면 이전 프레임의 자리를 유지합니다. 파츠별로 더 많이 요청할 수 있으며, 각각 다른 것과 최소 간격만큼 떨어집니다. 연결하지 않으면 빛은 주광입니다. 크기 (1 또는 2), 파츠별, 간격, 반짝임만 (그곳의 다른 하이라이트는 맨 위 띠로 내려감)
띠 부드럽게 셰이딩 → 셰이딩 두 명암 띠 사이 계단의 모서리를 부드럽게 합니다. 두 단계 이상 건너뛰는 띠 사이(드리운 그림자, 조명, 하이라이트)에서는 모서리가 그 중간 단계를 받습니다. 바로 이웃한 띠 사이에서는 디더링을 켜면 표면에 깔린 체크무늬의 한쪽 색에 놓인 모서리가 다른 띠를 받습니다. 팔레트 안에서 디더링된 중간 단계가 되며, 정리 단계도 이를 건드리지 않습니다. 양쪽, 디더링
해칭 셰이딩 → 레이어 음영의 색에, 맨 위 띠 아래의 각 띠마다 사선, 교차 해칭, 점을 띠가 어두울수록 촘촘하게, 한 단계 아래 색이나 선 색으로 겹칩니다. 해칭한 띠는 디더링 구역처럼 패턴이므로 정리 단계가 획 사이의 픽셀을 건드리지 않습니다. 음영 색을 대신합니다. 패턴, 선 색으로
오목한 곳 (normals, depth) → 숫자 표면이 안쪽으로 얼마나 접히는지 나타냅니다. 주름에서는 0보다 크고 능선에서는 0보다 작습니다. Threshold를 걸어 Step where masked에 −1로 연결하면 주름이 한 단계 어두워집니다. 연결하지 않으면 렌더를 읽습니다. 반지름, 깊이 차이
색 경계 (선, albedo) → 선 한 파츠 안에서 칠한 색이 바뀌는 곳의 선으로, 어두운 쪽에 그려 1픽셀 폭이 되며 주름과 같은 색으로 칠합니다(그러니 선 색에 주름 색을 주세요). 선 정리 앞에 두면 선에 모서리와 겹침이 생기지 않습니다. 연결하지 않으면 모델 자체의 색을 읽습니다. 대비
선 굵기 선 → 선 빛 반대쪽의 실루엣을 2픽셀 두께로 그리고, 그 둘레에 외곽선 고리 테두리를 바깥 선의 색으로, 또는 자체 색을 켜면 색(팔레트에서 가장 가까운 색)으로 두릅니다. 안쪽 선이 실루엣과 만나는 곳은 1픽셀로 남습니다. 그림자 쪽, 테두리, 자체 색, 색
실루엣 정리 레이어 → 레이어 외곽선의 1픽셀 돌기(가는 파츠의 끝은 제외)는 떼어 내고, 1픽셀 홈과 구멍은 주변 색으로 채웁니다. 외곽선 색으로 채우면 2픽셀 두께가 되는 곳에서는 외곽선 색을 쓰지 않습니다. 돌기, 홈
팔레트 디더링 레이어(+ 빛) → 레이어 각 픽셀 자체의 표면 색을 연결된 계수로 밝힌 것(1이면 그대로)을, 그 색에 가장 가깝게 섞이는 팔레트 색 쌍으로(Yliluoma 디더링) 표면의 임계값에 따라 깝니다. 선은 남고, 나머지는 정리가 건드리지 않는 디더링이 됩니다. 쌍 퍼짐: 높을수록 가까운 쌍만 남깁니다
램프 맵 숫자(+ 램프) → 레이어 이미지 띠에서 읽은 아티스트의 램프입니다. 숫자 0~1로 그 위에서 어두운 쪽부터 밝은 쪽까지 고릅니다. 여러 행으로 된 띠는 램프마다 자기 행을 줍니다. 이미지가 없으면 색 자체의 띠를 씁니다. 주광을 다시 매핑을 거쳐 연결하세요. 파일
타일 색 레이어 → 레이어 프레임을 왼쪽 위부터 타일로 나누고, NES가 8×8 타일 3개를 배치하듯 각 타일을 정해진 색 수로 제한합니다. 가장 많이 쓴 색이 남고(이웃 셋이 반대하는 픽셀은 이웃의 색으로 세므로, 래스터라이저의 가장자리 픽셀이 선택을 흔들지 않습니다), 나머지는 그중 가장 가까운 색을 따르며, 자기 색에 홀로 남은 픽셀은 타일 안 이웃의 색을 따릅니다. 타일, 색
서브픽셀 움직임 레이어(+ 움직임) → 레이어 한 프레임에 여전히 아래 픽셀보다 적게 움직이는 파츠(숨쉬기, 흔들림)는 그 움직임을 가장자리 픽셀로 보여 줍니다. 일부만 덮인 픽셀은 램프에서 한 단계 내려가고, 파츠가 스며드는 빈 픽셀은 4분의 1이 덮이면 그 색을 띱니다. 그래프 어디에 두어도 됩니다. 가장자리는 렌더의 것이므로 Combine 뒤에서도 작동하며, 외곽선은 그대로 두고 그 안의 가장자리 픽셀만 바뀝니다. 여전히 아래, 단계
CRT 레이어 → 레이어 그림은 화면 속 프레임입니다. 주사선, 섀도 마스크, LCD 격자가 픽셀 하나에 화면 픽셀 몇 개로 들어갑니다. 이 그림은 팔레트 밖이므로 보기용과 스틸용일 뿐입니다. 레이어는 그대로 스프라이트로 이어지며, 어떤 시트나 내보내기에도 화면이 담기지 않습니다. 이 노드를 고르면 2D 뷰가 화면을 보여 주며, 처음에는 정수 배율입니다. pxr stages MODEL --style KIT --node crt는 이를 crt.still.png로 씁니다. 맨 끝, Output 앞에 두세요. 화면, 크기

스크립트에서, 다른 노드와 똑같이:

pxr graph add my.pixor --node tidy-silhouette --in layer=3   # node 8, after Cleanup
pxr graph wire my.pixor --from 8 --to 4 --slot layer         # and into the palette

반짝임을 비롯해 셰이딩을 받는 노드는 셰이딩이 있는 빛과 그림자 안에 들어갑니다(그룹 밖에서는 그룹이 완성된 레이어를 줍니다). 앱에서 그룹을 열어 그 안에 추가하거나, 그룹을 키트로 저장해 편집한 뒤 pxr graph swap --kit로 다시 넣으세요.

각각 골든 케이스가 있습니다(tests/golden/cases.txt, hand-*): 룩이 시작하는 그래프와 넣은 노드로, pxr render --style이 읽는 스타일 그래프 키트입니다.

모든 속성이 입력입니다

노드의 설정은 속성입니다. 노드 안의 행으로, 각각 왼쪽에 포트가 있습니다. 노드에서 직접 정하거나 값을 연결하면, 행이 회색으로 바뀌고 연결선이 가져오는 값을 보여 줍니다. 값은 그 자체로 노드이며, 라이브러리의 값 아래에 있습니다: 숫자 값, 켜기/끄기, 각도, 글자, 그리고 이를 계산하는 노드(값 더하기, 값 빼기, 값 곱하기, 값 나누기, 더 작은 값, 더 큰 값, 보다 큼, 반대, 둘 다 켜짐, 하나라도 켜짐, 값 고르기)로, 피연산자도 속성입니다. 켜기/끄기 하나를 노드 세 개에 연결하면 셋을 한꺼번에 켜고 끕니다.

속성은 이름 붙은 그룹으로 묶입니다(Remap의 시작과 끝, Edges의 색과 찾는 방법). 그룹 이름을 클릭하면 접힙니다. 접힌 속성으로 들어가는 연결선은 그룹 이름에 닿습니다.

그룹의 속성은 값 입력입니다. 값으로 속성을 받는 노드들을 그룹으로 묶으면 각 값이 그룹의 입력이 됩니다. 입력 이름은 그 값이 들어가는 속성 이름을 따르고, 그룹의 다른 입력 뒤에 나열됩니다. 그룹 상자의 한 행으로, 거기서 설정하거나(그 값에 연결된 안쪽 속성이 모두 설정됩니다) 바깥에서 연결합니다.

스타일의 섹션이 정하는 그룹(빛과 그림자, 선 작업, 와이어프레임, 정리)은 그 섹션들과 그 안의 기본 노드 속성이 함께 정합니다. 팔레트는 프레임의 색이며, 색 섹션이 정합니다.

재질마다 한 번, 파츠마다 한 번

노드는 따로 지정하지 않으면 프레임 전체에 한 번 실행됩니다. 노드를 선택하고 인스펙터에서 실행을 재질마다 한 번이나 파츠마다 한 번으로 정하면, 각각에 대해 한 번씩 실행되며 매번 나머지 프레임이 비어 있는 것처럼 그 하나만 봅니다. 조각들은 픽셀 단위로 다시 합쳐집니다. 그러면 노드 제목에 각 재질 또는 각 파츠라고 표시됩니다.

그래서 흐림, 키우기, 외곽선, 정리가 한 파츠에서 다음 파츠로 넘어가지 않습니다. 파츠마다 실행하는 Lines 노드는 모든 파츠 둘레에 선을 그리고, 같은 노드를 한 번 실행하면 모델 전체 둘레에 선 하나를 그립니다. 이렇게 설정한 그룹은 안의 모든 것을 이 방식으로 실행합니다. 파츠마다 실행하는 노드는 이전 프레임을 보지 않으므로 깜박임 히스테리시스가 없습니다.

명령줄이나 룩 파일에서 같은 설정은 노드의 scope입니다: pxr graph set my.pixor --which style --node cleanup --set scope=object (frame, material, object 중 하나).

노드의 이미지를 별도 레이어로

스프라이트는 출력 노드가 받는 것이지만, 어느 노드의 이미지든 쓸 수 있습니다. 노드를 고르고 인스펙터의 추가 출력에 이름을 입력하세요. 그러면 노드 제목에 layer와 그 이름이 표시되고, 모든 내보내기가 이를 lines와 flat 옆에 함께 담습니다. layers 내보내기에서는 그 이름을 딴 별도 시트(hero_rim.png)가 되고, .aseprite에서는 숨은 레이어가 되어 다시 굽기 때 Pixor의 다른 레이어처럼 교체됩니다. 림 라이트, 셰이더가 읽는 마스크, 한 파츠의 선 등 노드가 만드는 것이면 무엇이든 됩니다. 이름을 지우면 더는 출력이 아닙니다. 시트가 이미 가진 이름(final, lines, flat, normal, depth, emission 등)이나 다른 추가 출력의 이름은 쓸 수 없습니다.

스크립트에서는 pxr graph extra my.pixor --node line-work --name rim로 추가하고, --drop으로 뺍니다.

예시: 낡은 페인트

셰이딩을 평평하게 한 뒤, 노이즈 마스크로 셰이딩된 버전과 평평한 버전 중 하나를 고르면 표면이 군데군데 벗겨진 칠처럼 보입니다:

 Light and shade --+---------------+
                   |               +--> Choose --> Combine --> ...
                   +--> Flatten ---+
 Noise ----------------------------+
  1. 평탄화를 추가하고 빛과 그림자를 연결하세요.
  2. 노이즈를 추가하고 크기를 5픽셀 정도로 정하세요.
  3. 마스크로 선택을 추가하세요: 빛과 그림자를 A에, 평탄화를 B에, 노이즈를 마스크에 연결합니다.
  4. Combine의 shading 입력에서 연결선을 끌어 떼고, 대신 Choose by mask를 연결하세요.

그룹: 열어 볼 수 있는 상자 하나

그룹은 노드 하나로 쓰는 그래프입니다. Pixor에는 위의 파이프라인 전체를 상자 하나에 담은 픽셀화(라이브러리의 파이프라인 아래)와, 처음 시작하는 그래프를 이루는 그룹 — 레이어 렌더, 빛과 그림자, 선 작업, 와이어프레임, 정리 — 이 들어 있습니다. 이 그룹들이 여러 단계로 하는 일을 상자 하나로 하는 셰이딩과 선 패스와는 이름이 다릅니다. 어느 것도 특권을 가진 내장 기능이 아닙니다.

그룹은 모든 그래프에서 제자리에서 열립니다. 제목 밖을 더블클릭하거나 헤더 오른쪽의 화살표를 누르면(화살표가 있는 노드는 그룹뿐입니다) 그룹 자체가 그 안의 그래프를 둘러싼 틀이 됩니다. 열린 그룹 안의 그룹도 같은 방식으로 그 틀 안에서 열립니다. 헤더는 위를 가로지르고, 파라미터는 왼쪽 아래로 그대로 있으며, 이미지가 있던 자리에 안쪽 노드들이 같은 그래프 안에 배치됩니다. 연결선은 틀의 양옆으로만 드나듭니다. 그룹에 들어오는 것은 왼쪽의 입력에 도착하고, 각 입력 오른쪽의 앵커(닫힌 상자의 테두리가 있던 곳)에서 나와 그것을 읽는 안쪽 노드로 갑니다. 각 출력은 틀의 오른쪽 테두리에 놓인 앵커로, 안에서 그것을 만드는 노드와 같은 높이에 있으며, 그 출력을 읽는 모든 것은 거기서 연결됩니다. 안쪽의 어떤 것도 틀 밖으로 나가지 않고, 뒤쪽 노드들은 자리를 내주려 옆으로 비킵니다. 화면에서만 그럴 뿐 그래프는 원래 위치를 기억합니다. 안쪽 노드는 다른 노드처럼 설정, 이미지, 연결선, 이름을 편집합니다. 틀 안에 붙여 넣거나 놓은 노드는 그룹에 들어갑니다. 화살표를 다시 누르면 상자와 이미지로 접힙니다. 어떤 그룹이 열려 있는지는 프로젝트가 아니라 창이 기억합니다.

직접 그룹 만들기. 넣을 노드를 고르세요(상자로 둘러 끌거나 Shift+클릭. 이미 선택한 노드도 포함됩니다). 그다음 그룹(또는 Ctrl+G)을 누르면 하나의 상자가 됩니다. 들어오는 연결선마다 입력이 생기고, 그래프의 나머지가 읽던 결과가 출력이 됩니다. 바로 열리며 F2로 이름을 붙입니다. 막대의 키트 저장…은 고른 그룹을 직접 만든 키트로 보관합니다(그룹을 키트로 저장. 파일 대화 상자는 라이브러리가 내 노드 아래에 나열하는 폴더에서 시작합니다). 그러면 라이브러리가 모든 프로젝트에서 같은 종류의 그래프에 그 키트를 나열합니다. 그룹을 고르지 않았으면 그래프 전체를 보관합니다(스타일 그래프를 키트로 저장). 모든 그래프의 키트 저장…이 이런 뜻입니다.

그룹은 다른 룩처럼 키트로 옮겨지며, pxr graph flatten look.pixorkit은 그룹을 그것이 나타내는 일반 노드로 풀어 쓰므로 블랙박스가 아니라 차이(diff)로 읽힙니다.

저장한 룩도 그룹입니다. + › 키트 사용…은 스타일의 키트 저장…이나 pxr graph save로 쓴 룩을 화면의 그래프에 그룹 하나로 넣습니다. 그 Output 노드가 상자의 출력(레이어)이 되므로 원하는 곳에 연결하세요. 예를 들어 Layer over로 그래프 자체 결과 위에 얹거나, Choose by mask에 넣어 모델의 한 부분에만 다른 룩을 줄 수 있습니다. 더블클릭하면 안의 룩을 보고 바꿀 수 있습니다.

만들 때 쓸 수 있는 재료

패스 외에도 라이브러리에는 룩을 구성하는 작은 노드들이 있습니다. 위의 입력, 수학, 공간, 마스크, 색, 혼합 노드입니다.

기본 제공 그룹인 빛과 그림자, 선 작업, 와이어프레임, 정리는 각각 몇 가지 손잡이로 한 가지 일을 하는 기본 노드로 이루어집니다. 명암 띠, 안쪽 선의 최소 길이, 모델 자체의 모서리, 이어진 모양으로 찾아내는 떠도는 픽셀 등입니다. 이들이 대신하는 통째 처리 노드도 상자 하나를 원하는 그래프를 위해 라이브러리에 남아 있습니다. 어느 것이든 직접 만든 체인으로 바꿀 수 있습니다. 주광을 다시 매핑, 단계 위치, 팔레트로에 연결하면 나만의 음영을 만든 것이고, 가장자리 픽셀을 플랫 룩과 한 단계 위 룩 사이의 마스크로 선택의 마스크로 넣으면 와이어프레임을 직접 그린 것입니다.

룩 공유하기

스타일의 키트 저장…과 키트 사용…은 룩을 한 프로젝트에서 다른 프로젝트로 옮깁니다. 모델, 클립, 내보내기는 그대로입니다. 스타일 키트는 그래프도 담으므로, “게임의 모든 에셋이 어울린다”는 말이 연결된 룩까지 포함합니다.

캔버스 오른쪽 클릭 › 프리셋 그래프로 되돌리기는 그래프를 버리고 Pixor의 파이프라인으로 돌아갑니다. 그러면 프로젝트에는 그래프가 전혀 저장되지 않습니다.

모든 그래프에는 같은 막대가 있습니다: 보여 주는 대상(파이프라인 이름, 루틴에서 돌아가는 길), 그다음 +(노드 추가), −(고른 노드 삭제), 프레임, 정리, 메모, 그룹, 키트 저장…, 그리고 노드 이미지를 보이거나 숨기는 눈 아이콘. 모두 모든 그래프에서 작동합니다.

하지 않는 것

  • 스크립트 노드도, GPU 노드도 없습니다. 모든 노드는 입력에 대한 고정된 함수이므로, 같은 프로젝트는 오늘이든 10년 뒤든 언제나 같은 픽셀을 냅니다(다른 컴퓨터에서도 거의 항상 그렇습니다. FAQ 참고).
  • 노드는 몰래 바뀌지 않습니다. 그래프는 각 노드의 어느 버전으로 만들어졌는지 기록하고, 예전 동작은 예전 버전으로 Pixor에 그대로 남습니다.
  • 범용 이미지 편집기가 아닙니다. 이것들은 Pixor 고유의 패스로, 말이 되는 것끼리만 연결되도록 타입이 정해져 있습니다. 페인팅, 필터, 임의의 수식은 페인트 프로그램의 몫입니다.

노드 레퍼런스

네 그래프의 모든 노드: 하는 일, 받는 것과 주는 것, 각 설정의 범위와 기본값.

스타일 그래프

카메라렌더레이어이미지보조광모션표면 디더링반복 위상색의 램프금속성거칠기발광차폐투과가장자리 픽셀셰이딩램프 위치선명암 띠월드 조명하이라이트글로램프 이동음영 색실루엣가장자리선 정리떠도는 픽셀연결선 경로와이어 색모서리 부드럽게선 색메시 모서리Combine정리팔레트로팔레트램프 단계 이동마스크된 곳 단계 이동평탄화임계값파츠별재질별방향별노이즈노이즈 필드가장 가까운 색패턴단단한 픽셀NOT그리고OR마스크로 선택디더링 혼합위에 겹칠 레이어페인트숫자추가빼기곱하기나누기더 작게더 크게부호 없이비율정수사이 홀드다시 매핑혼합단계 위치부드러운 계단일치도길이숫자로오프셋흐림경사키우기줄이기도형띠 해제반짝임띠 부드럽게해칭오목한 곳색 경계선 굵기실루엣 정리팔레트 디더링램프 맵타일 색서브픽셀 움직임CRT출력숫자 값켜기/끄기각도글자값 더하기값 빼기값 곱하기값 나누기더 작은 값더 큰 값위에 있음반대둘 다 켜기하나라도 켜짐값 고르기레이어 렌더빛과 그림자선 작업

액션 그래프

클립키프레임루틴액션장면 시간상수물결노이즈램프회전위아래 흔들기흔들기맥동슬라이드수학블렌드병합시퀀스시간 이동속도잘라내기반복반전지연단계한계이름 바꾸기선택인스턴스적용 대상출력숫자 값켜기/끄기각도글자값 더하기값 빼기값 곱하기값 나누기더 작은 값더 큰 값위에 있음반대둘 다 켜기하나라도 켜짐값 고르기

에셋 그래프

스프라이트이미지 파일병합레이어프레임 범위홀드뒤집기태그배치배치쌓기오버레이시트파일JSONAseprite 파일Godot SpriteFrames노멀 맵깊이 맵발광 맵선과 평면 레이어팔레트클립마다 GIF클립마다 APNG클립마다 동영상조명 키트PICO-8 카트리지보고서그림자 레이어팔레트 변형페이퍼 돌 레이어패럴랙스 레이어텍스트 파일ZIP 압축 파일타일셋아이콘애니메이션 파일타일셋 JSONGodot TileSetTiled 타일셋이중 격자 시트GameMaker 오토타일RPG Maker 오토타일Unity RuleTileLDtk 프로젝트타일 팔레트 변형맵 미리보기숫자 값켜기/끄기각도글자값 더하기값 빼기값 곱하기값 나누기더 작은 값더 큰 값위에 있음반대둘 다 켜기하나라도 켜짐값 고르기

장면 그래프

가져오기오브젝트링행격자흩뿌리기바라보기변화재생병합보는 카메라차이합치기이동미러세분화변위높이 필드베벨바닥에 놓기표면 위점 위에도형 설정속성선택출력도형이미지텍스트볼륨조명이펙트아이템소품스프링지형잔가지잎물구름하늘바람빛줄기시간대청크숫자 값켜기/끄기각도글자값 더하기값 빼기값 곱하기값 나누기더 작은 값더 큰 값위에 있음반대둘 다 켜기하나라도 켜짐값 고르기

이 페이지에서 설명하는 내용은 정식 버전에 있습니다. 무료 브라우저 데모는 기본 룩과 PNG 시트만 지원합니다.

브라우저에서 체험 Pixor 구매