에셋 그래프

에셋 그래프는 내보내기를 설계하는 곳이고, 내보내기 창은 그것을 실행하는 곳입니다. 에셋 단계는 스프라이트 목록을 파일로 바꾸며, 그 방식이 그래프입니다. 스프라이트 목록이 들어와 시트에 배치되고 파일로 나갑니다. 연결선은 이 세 종류이며 서로 섞일 수 없습니다. 목록은 배치하지 않고는 Sheet에 연결할 수 없고, 시트에는 태그를 달 수 없습니다.

입력은 Sprites 노드(외부 이미지라면 Image file 노드)이며, 각각 스프라이트 목록을 가져옵니다: 카메라가 본 액션 하나를, 스타일로 그리고, 파츠 세트를 적용하고, 프레임으로 자르고, 모든 레이어를 담은 것입니다. Sprites 노드는 이 모두를 고정해서 지정합니다. 창 헤더의 선택은 이 노드의 것이 아니므로, 에셋이 쓰는 내용은 우연히 화면에 보이는 것에 좌우되지 않습니다. 출력은 파일마다 노드 하나입니다. Sheet 노드는 메모리 속의 스프라이트 시트입니다. 노드 앞면에 시트를 보여 줄 뿐 아무것도 쓰지 않습니다. 모든 파일은 시트에서 연결된 File 노드입니다. 시트 자체는 PNG image, 그다음 JSON, .aseprite, Godot SpriteFrames, 노멀 맵. 스프라이트 시트를 내보내려면 Sheet → PNG로 연결하세요. 그래프에는 프로젝트가 쓸 파일 수만큼 각 노드를 둘 수 있습니다.

내보내기에 지정할 수 있는 것은 모두 노드에 있습니다. 어느 폴더로 갈지만 예외입니다. 그것은 내보내기 창이 정하며, 내보내기를 누르기 전에 그래프가 거기에 쓸 모든 파일을 이름과 종류별로 나열합니다. 그래프를 바꾸면 파일이 어떻게 달라지는지 가장 빨리 확인하는 방법입니다. 시트 프레임의 이름은 PNG 이미지 노드에서(인스펙터에서는 Sheet와 함께), 배치는 그것을 공급하는 Arrange에서 정하고, 시트가 쓰는 다른 파일은 각각 자체 설정(GIF의 배율, 동영상 속도, 어떤 그림자, 어떤 팔레트 변형)과 함께 그 시트에서 연결된 File 노드입니다. 그래프를 다시 연결한 적이 없는 프로젝트는 아무것도 저장하지 않습니다. 모든 스프라이트 목록이 담긴 시트 하나입니다.

이미지는 어떤 레이어든 보여 줄 수 있습니다. 여기서 Sheet의 이미지 아래에 있는 레이어가 그릴 레이어를 고릅니다. 따로 정하기 전에는 2D 뷰 자체의 레이어가 그리는 것을 따릅니다. 스프라이트, 선, 평면 색, 노멀, 깊이, 발광, 스타일의 추가 출력, 또는 모든 레이어를 한꺼번에 고를 수 있습니다. 프레임은 나란히, 목록은 한 행씩 보입니다.

처음 시작하는 그래프는 에셋 파이프라인 Main입니다:

Sprites (every action except Static)  →  Arrange  →  Sheet (sheet)  →  PNG image

창 헤더의 선택 항목

액션, 스타일, 에셋은 서로 독립된 파이프라인이며 각각 자체 그래프입니다. 작업 공간 탭 줄의 오른쪽 끝, 재생/일시정지 뒤에 선택 상자 네 개(카메라, 액션, 스타일, 에셋)가 있습니다. 각각 하나씩 고르며, 모든 단계에 걸쳐 적용됩니다.

단계 그리는 것
액션 선택한 카메라로 본 선택한 액션
스타일 선택한 카메라로 보고 선택한 스타일로 그린 선택한 액션
에셋 자체 그래프의 Sprites 노드가 지정한 것. 헤더의 선택이 아닙니다

스타일 목록(스타일 단계)과 에셋 목록(에셋 단계)은 헤더의 스타일·에셋 선택과 같은 선택지입니다. 어느 쪽을 클릭해도 같은 것이 표시됩니다. 내보내기 창은 헤더의 에셋 선택에서 고른 에셋 파이프라인으로 시작하며 그것만 씁니다. 파일 이름은 모든 에셋 파이프라인을 쓸 때와 같습니다(pxr render --pipeline all은 모두 씁니다).

스프라이트 목록이 오는 곳

스프라이트 목록은 여기서 Sprites 노드가 만들며, 여기서만 만듭니다. 어떤 액션이 시트에 들어갈지는 Sprites 노드가 가져가는 것으로만 정해집니다. Sprites 노드는 카메라, 액션, 스타일, 파츠 세트를 지정하고 자르기, 즉 액션의 움직임을 프레임으로 만드는 방식을 담습니다.

Action은 다음 중 하나입니다:

  • 정지 외 모두(every-one-except-static. 새 Sprites 노드, 프로젝트의 첫 에셋 파이프라인, 새 프로젝트가 쓰는 값): 액션 목록에서 기본 포즈로 가만히 서 있는 정지를 뺀 모든 액션. 다만 프로젝트에 다른 액션이 없으면(정지된 모델) 정지를 쓰므로 상자도 스프라이트를 얻습니다.
  • 모두(비워 두거나 *): 정지를 포함한 모든 액션.
  • 이름으로 지정한 액션(정지 포함): 그 액션 하나 또는 여러 개(pxr graph set에서 walk, attack). 모델의 클립은 Sprites 노드가 이름을 지정하면 프로젝트의 액션이든 아니든 그려집니다. 이름을 지정하면 그 프레임은 노드의 이미지에도, 노드가 공급하는 곳에도, 내보내기에도 항상 들어갑니다.

아무것도 가리키지 않는 이름(다른 곳에서 지우거나 이름을 바꾼 액션)은 노드에 쉬운 말로 표시됩니다: South가 보는 Sway의 프레임이 없습니다. Sprites 노드에서 프로젝트에 있는 액션과 카메라를 고르세요.

자르는 방식은 노드 앞면과 인스펙터에 있습니다:

  • 프레임/초(fps): 일정 초마다 프레임 하나. 따로 정하기 전에는 초당 12.
  • 남길 프레임(smart): 애니메이터처럼 고른 그만큼의 스마트 프레임. 움직임이 꺾이는 포즈를 고르고 빠른 곳에는 더 두며, 각 프레임은 다음 프레임까지 유지됩니다. 값이 0이면 꺼집니다. 앞면의 스마트 프레임으로 켜고, 프레임/초 사용으로 고른 간격으로 되돌립니다.
  • 선택한 프레임(picked): 손으로 고른 초 단위 시간입니다. Sprites 노드를 선택하면 에셋 그래프 뒤의 타임라인에 프레임이 보입니다. 키 줄을 클릭해 추가하거나 지우고, 키를 끌어 옮깁니다(각각 실행 취소 한 단계). 노드 앞면에는 타임라인에서 선택한 프레임 N개라고 표시됩니다.

선택한 프레임이 있으면 그것이 우선이고, 다음은 남긴 프레임, 다음은 초당 프레임입니다. 그래프에 추가한 Sprites 노드는 그래프의 첫 Sprites 노드와 같은 방식으로 잘린 채 시작합니다. 노드나 키로 만든 액션은 자체 프레임에서 잘립니다. 타임라인의 프레임 카운터 옆 홀드 (ms)는 보이는 프레임의 홀드를 정합니다(한 프레임을 더 길게 홀드하기 참고). 이는 액션의 홀드이므로, 그 클립을 받는 모든 Sprites 노드가 유지합니다. 이 모든 것이 액션 단계를 바꾸지는 않습니다. 액션 단계는 움직임 전체를 재생하고, 스프라이트 프레임은 잘린 시간에 놓입니다.

Sprites 노드와 배치 사이에는 목록을 자르는 노드가 들어갑니다.

노드 하는 일
프레임 범위 들어오는 것 중 from부터 to까지의 프레임만, 0부터 셉니다: 공격의 준비 동작을 별도 목록으로, 대기 동작의 한 프레임을 아이콘으로, 두 시트에 걸친 목록을. 범위는 각 프레임이 보여 준 것(클립 속 시간, 파츠 세트, 루트 이동)을 유지합니다. 범위의 범위는 들어온 것 기준으로 셉니다. 루프의 일부는 더는 반복하지 않으며, 끝을 넘는 범위는 마지막 프레임을 유지합니다.
홀드 모든 프레임을 그 배수만큼 길게 홀드합니다: 2이면 목록을 절반 속도로 재생합니다.
Sprites (South, attack, Pixel Art, smart 6) → Frame range (2 to 5) → Hold (×2) → Arrange → Sheet → PNG image

Sprites, Frame range 또는 Hold 노드를 고르면 2D 뷰가 그 노드가 내놓는 목록을 실제로 쓰일 때처럼 자르고, 나누고, 레이어를 겹친 상태로 재생합니다. 어느 노드도 렌더 비용이 들지 않습니다. 픽셀이 생기기 전에 어떤 프레임이 어디로 갈지 정할 뿐입니다.

체인을 다시 쓰려면 Sprites → 프레임 범위 → 홀드를 골라 그룹으로 묶고(Ctrl+G), 키트 저장…으로 그 그룹을 내 노드 아래 노드 키트로 보관하세요. 또는 에셋 파이프라인 전체를 키트로 저장합니다(에셋 파이프라인 참고).

렌더와 그 파일 이름

렌더는 프레이밍, 스타일, 각 클립을 자르는 방식입니다. Sprites 노드는 서로 일치하는 동안 렌더 하나를 공유합니다. 같은 스타일, 함께 프레이밍, 두 가지로 잘린 클립 없음이 조건입니다. 그래서 초당 8프레임의 걷기와 손으로 고른 공격은 렌더 하나, 시트 하나입니다. 걷기를 스마트 프레임으로 자르거나 다른 스타일로 그리는 두 번째 노드는 별도의 렌더입니다.

첫 번째 렌더는 그래프가 정한 이름으로 파일을 씁니다. 다른 렌더는 그 옆에 첫 번째와 다른 부분을 이름에 붙여 씁니다. 카메라, 스타일 이름, 그리고 다르게 자르는 각 클립의 자르기 방식입니다. 8fps(또는 12_5fps), smart6, picked4(직접 고른 네 프레임). 그래서 out/hero.png 다음에 out/hero_smart6.png, out/hero_Pixel_Art_2_8fps.png가 오며, 각각 자기 스타일의 팔레트를 씁니다. pxr names는 렌더마다 파일과 프레임 범위가 남기는 프레임을 나열하고, 한 파일을 두 번 쓰게 되는 두 렌더(같은 클립에서 네 프레임을 서로 다르게 고른 두 자르기 등)는 렌더링 전에 거부합니다: would be written twice.

스크립트에서:

pxr graph add game.pixor --which asset --node sprites --set action=attack --set smart=6   # node 4, merged in by node 5
pxr graph add game.pixor --which asset --node frame-range --set from=2 --set to=5 --alone --in frames=4   # node 6
pxr graph add game.pixor --which asset --node hold --set times=2 --alone --in frames=6                    # node 7
pxr graph wire game.pixor --which asset --from 7 --to 5 --slot frames2   # the cut attack into the Merge, in place of node 4
pxr graph set game.pixor --which asset --node frame-range --set to=6
pxr project set game.pixor --add-style portrait
pxr graph add game.pixor --which asset --node sprites --set action=walk --set style=portrait --set fps=8
pxr names game.pixor

프레임 범위와 홀드는 공격의 Sprites 노드와 Merge 사이에 들어가므로 공격만 자릅니다. --alone 없이 추가하면 Merge 뒤, Arrange 앞에 들어가 Merge가 합치는 모든 목록을 자릅니다.

pxr render --fps 8, --smart-frames 6, --keys 0,0.25,0.5는 모든 Sprites 노드의 자르기를 한꺼번에 정합니다. 블루프린트를 pxr run game.pixorblueprint --set hold.times=4로 실행하면 모든 에셋 파이프라인의 홀드 노드에 닿고, --set icons/hold.times=4는 icons 파이프라인에만 닿습니다.

패널

그래프가 저장되면 그 위의 2D 뷰가 선택한 출력이 쓰는 내용(테이크, 블록, 배치, 쌓기, 겹치기)을 파일을 쓰는 바로 그 코드로 그려 보여 줍니다. 그 전에는 액션과 방향마다 한 행이며, 드래그해서 순서를 바꿀 수 있습니다.

에셋 그래프는 에셋 단계의 패널로, 2D 뷰 아래에서 장면 그래프와 같은 캔버스를 씁니다: 상자, 연결선, 각 노드 앞면의 설정, 연결된 사슬에 노드를 넣는 더하기, 노드를 지우는 빼기, 전체를 보는 프레임, 다시 배치하는 정리, 메모를 붙이는 메모, 고른 노드를 그룹 하나로 만드는 그룹, 고른 그룹을(아무것도 고르지 않았으면 그래프 전체를) 키트로 보관하는 키트 저장…(에셋 그래프를 키트로 저장). 모든 그래프에 있는 막대와 모든 그래프에 있는 단축키입니다(작업하기). 왼쪽의 노드 라이브러리에는 입력과 출력, 프로젝트의 파이프라인과 내 파이프라인, 그다음 사이, 그리고 내 노드 아래에 직접 만든 키트가 있습니다. 캔버스 우클릭 › 시트 하나로 되돌리기는 원래 파일과 함께 시트 하나로 되돌립니다. 아이콘은 인벤토리 아이콘을 씁니다. 아래쪽 줄은 그래프가 무엇을 쓰는지 알려 줍니다. 막대 맨 앞의 생성된 파일은 파일 관리자에서 생성된 폴더를 엽니다.

에셋 단계: 2D 뷰의 시트, 인스펙터의 Sheet 노드, 아래의 에셋 그래프

모든 파일 노드에는 열기가 있습니다: 시스템이 그 종류의 파일을 여는 애플리케이션으로 노드의 파일을 엽니다. 시트는 이미지 편집기에서, .aseprite는 Aseprite에서, 동영상은 플레이어에서, 아카이브는 압축 관리자에서 열립니다(툴팁에 어느 앱인지 나옵니다). 아직 생성되지 않았거나 오래된 파일은 먼저 생성하며, 그동안 열기에 로딩 표시가 나옵니다.

에셋 노드의 모든 설정은 속성입니다(노드 참고): 왼쪽에 포트가 있는 행으로, 노드에서 설정하거나 값에서 연결합니다. Delete는 빼기처럼 고른 노드를 지웁니다. 파일을 쓰는 마지막 노드는 남습니다.

목록과 파일 사이의 모든 노드는 내보내는 것을 시트에 배치해 보여 줍니다: Layer 노드는 레이어를, Frame range는 프레임을, Flip은 뒤집은 모습을, Arrange는 시트를. 이미지는 창 헤더에 무엇이 보이든 Sprites 노드가 지정한 모든 것을 보여 줍니다: 모든 카메라, 액션, 스타일을 그것이 그려진 모든 렌더에서. 따로 프레이밍한 카메라(다른 뷰, 피치, 크기), 다른 스타일, 다르게 자른 클립은 각자 별도의 렌더로 별도 시트에 씁니다. 여러 개를 받는 이미지는 시트마다 블록 하나를 쓰일 파일 이름 아래에(hero.png, 그다음 hero_top.png) 그 시트의 행 순서대로 배치합니다. 2D 뷰가 보여 주지 않는 렌더는 뒤에서 하나씩 그려 프로젝트가 바뀔 때까지 보관합니다. 한 노드가 다른 노드의 이미지를 막는 일은 없습니다: 각 노드는 자기에게 들어오는 것만으로 배치됩니다. 배치할 수 없는 노드(아직 고르지 않은 이미지 파일, 아무것도 연결되지 않은 Merge)는 이미지 자리에 빨간 글씨로 이유를 표시하며, 그 노드가 공급하는 노드들도 마찬가지입니다. 나머지는 자기 이미지를 유지합니다. 이미지는 모든 목록을 통째로 그려 배치합니다. 고른 Frame range나 Hold가 2D 뷰에서 자기 목록 하나를 재생하는 동안에는 마지막으로 통째로 그린 목록을 유지하며, 그동안 추가한 노드도 거기서 이미지를 얻습니다. 그동안 바탕이 되는 무언가(아웃라이너에서 숨긴 파츠, 재질, 조명)가 바뀌면 2D 뷰 뒤에서 다시 그리며, 2D 뷰는 범위를 계속 재생합니다. 모든 파일 노드는 내보내기 전에 파일을 보여 줍니다. 내보내기와 같은 작성기로 만들며, 노드에는 그 이미지를, 노드를 고르면 2D 뷰에 전체를 보여 줍니다. PNG나 맵은 이미지로, GIF, APNG, 동영상은 재생으로, JSON, Godot 파일, 텍스트 파일은 텍스트로, ZIP은 담긴 파일 목록으로 보여 줍니다. 여러 파일을 쓰는 노드(클립마다 GIF, 파일마다 레이어)에는 뷰 위에 파일 목록이 있습니다.

빠른 파일, 그리고 생성

빨리 만들어지는 것은 그래프가 바뀌는 대로 보이고, 오래 걸리는 것은 노드의 생성을 기다립니다(D51). 빠른 것: 목록과 파일 사이의 모든 것, Sheet, 그리고 PNG 이미지, JSON, Godot SpriteFrames, 팔레트, 텍스트 파일, 발광 맵, 그림자 레이어, 선과 평면 레이어. 느린 것: 클립마다 GIF·APNG·동영상, Aseprite 파일, 노멀 맵과 깊이 맵, 팔레트 변형, 조명 키트, PICO-8 카트리지, 보고서, ZIP 압축 파일, 애니메이션 파일, 아이콘 — 모든 프레임을 다시 인코딩하거나 렌더링하는 것들입니다. (페이퍼 돌 레이어와 패럴랙스 레이어는 그 자체로 렌더이므로 내보내기 창이 만듭니다.)

오래 걸리는 노드는 파일 대신 생성을 보여 줍니다. 누르면 파일이 따로 만들어지고 — 버튼이 로딩 표시로 바뀌며 작업은 계속할 수 있습니다 — 그다음 노드에 그림이, 2D 뷰에 파일이 보이고 버튼은 다시 생성이 됩니다. 입력에 들어가는 무엇이든 바꾸면, 노드는 만든 것을 그대로 두고 다시 만드는 대신 오래됨이라고 표시합니다. 다시 생성이나, 먼저 생성하는 열기를 누르세요.

생성된 파일

생성과 열기가 만드는 것은 실제 파일이며, 열린 프로젝트의 임시 폴더(시스템 임시 폴더 아래, pixor-generated-와 프로젝트 이름으로 된 폴더)에 에셋 파이프라인마다 폴더 하나, 노드마다 폴더 하나로 들어갑니다. 막대의 생성된 파일로 열 수 있습니다. 알아서 정리됩니다. 노드를 지우면 그 파일이, 에셋 파이프라인을 지우면 그 폴더가, 프로젝트를 닫거나 Pixor를 종료하면 폴더 전체가 지워지며, 충돌로 남은 폴더는 다음에 Pixor를 시작할 때 제거됩니다. 내보내기가 쓰는 것은 결코 이 파일들이 아닙니다. 내보내기 창은 모든 파일을 새로 씁니다.

선택한 노드의 설정도 인스펙터에 있으며, 아무것도 선택하지 않았으면 그래프 자체의 Sheet 설정이 표시됩니다. 거기서 Sheet 설정 아래에는 쓸 수 있는 모든 파일이 토글로 있습니다. JSON이나 클립마다 동영상을 체크하면 시트에서 연결된 그 File 노드가 추가되고, 체크를 풀면 제거됩니다. 그래서 연결선을 건드리지 않고 몇 번의 클릭으로 내보내기를 설정할 수 있으며, 그래도 여전히 그래프입니다. 모든 토글은 눈에 보이고 자체 설정이 있는 노드입니다.

노드

N x N 노드. Layer, Frame range, Hold, Flip, Tag, Arrange, Place는 연결된 목록 수만큼 같은 일을 하고, 각 결과를 입력 맞은편의 자체 출력으로 내보냅니다. Layer 노드 하나가 스프라이트 목록 네 개의 노멀을 받아 목록 네 개를 내보내는 식입니다. 다음 목록을 위한 빈 입력이 항상 있습니다. Merge는 반대로, 목록을 몇 개든 받아 하나를 내보냅니다.

노드 입력 출력 하는 일
스프라이트 — 프레임 입력. 창 헤더에 무엇이 보이든 여기서 고정되는 스프라이트 목록: 장면이 여러 개면 고른 장면(또는 모두), 고른 카메라(또는 모두. 카메라 하나가 한 방향), 고른 액션(정지 외 모두, 모두, 또는 정지를 포함해 이름으로 하나)을 고른 스타일로 그리며(따로 정하기 전에는 각각 프로젝트의 첫 번째), 프레임/초, 남길 프레임 또는 선택한 프레임에 따라 자릅니다(스프라이트 목록이 오는 곳 참고). 카메라와 액션은 pxr graph set에서 쉼표로 구분한 목록(South, East, North)이나 링용으로 이름 앞부분과 *(turret*)도 받습니다. 프로젝트의 파츠 세트는 모든 프레임에 그 세트를 켠 채 모든 클립을 다시 렌더링합니다(장비, 손상 상태). 모든 레이어가 목록과 함께 오며, Layer 노드가 하나를 고릅니다. Layer 노드가 없으면 시트는 완성된 스프라이트입니다.
이미지 파일 — 프레임 입력: 외부 이미지를 자체 스프라이트 목록으로 가져옵니다. PNG(프레임 하나, 또는 프레임 너비 × 프레임 높이로 잘라 각각 매 프레임만큼 유지하는 띠나 격자), 또는 프레임, 지연 시간, 반복 여부가 담긴 GIF. 이름은 그 행의 이름입니다. 이미지는 시트의 팔레트를 따르며(각 픽셀은 가장 가까운 색으로, 절반 넘게 투명한 픽셀은 비움) 셀 가운데에 놓입니다. 셀보다 큰 프레임은 두 크기를 알려 주며 거부합니다. 노드가 연결된 시트에만 들어갑니다.
병합 프레임, … 프레임 연결된 모든 목록을 하나로: 여러 스프라이트 목록을 한 시트에.
레이어 프레임 × N 프레임 × N 각 목록의 레이어 하나: final, lines, flat, 또는 게임이 스프라이트를 비추는 데 쓰는 맵 중 하나(normal, depth, emission, 이 경우 그 레이어가 놓인 시트는 팔레트 인덱스가 아니라 색으로 된 그림이 됩니다), 또는 각 프레임이 드리우는 검은 그림자인 shadow(프로젝트의 그림자가 요청한 것, 없으면 접지 그림자)로, Overlay가 스프라이트 아래에 깝니다. 또는 스타일 그래프의 추가 출력 이름 하나이며, 이때 행 이름이 그 이름을 따릅니다(idle_South_rim). 렌더 자체의 그림도 레이어입니다. 소품이나 조각이 있으면 페이퍼 돌의 base와 이름으로 부르는 각 조각(idle_South_helmet), 패럴랙스 레이어가 있으면 layer0(가장 먼 것)부터 마지막까지. 각각은 Layer가 이름을 지정할 때만 pxr render가 렌더링하며, 앱의 내보내기 창이 실행하는 것도 이것입니다. 레이어마다 Layer 노드를 두어 각자의 Sheet로 보내 목록의 레이어를 나누고, Merge, Stack, Overlay로 합치세요.
프레임 범위 프레임 × N 프레임 × N 각 목록의 from부터 to까지의 프레임으로, 0부터 셉니다. 정지 이미지나 아이콘은 from=3 to=3(새로 만들면 첫 프레임인 from=0 to=0), 몇 프레임만이면 from=2 to=5. 파츠마다 Frame range를 두어 목록을 여러 시트로 나누세요.
홀드 프레임 × N 프레임 × N 각 목록의 모든 프레임을 times배 길게 유지합니다.
뒤집기 프레임 × N 프레임 × N 각 목록을 좌우로 뒤집어 다른 카메라 대신 씁니다. East의 Sprites 노드를 뒤집어 West로 쓰면 walk_East에서 그린 walk_West가 되며, 픽셀, 노멀, 히트박스, 루트 모션이 모두 뒤집힙니다. 대칭 모델은 반대쪽을 렌더링할 필요가 없습니다.
태그 프레임 × N 프레임 × N 행의 반복 여부(유지, 예 또는 아니요)와, 다르게 서는 클립을 위한 고유 피벗(셀 픽셀 단위 x,y). 반복하지 않는 클립은 JSON과 .aseprite에서 한 번만 재생되는 태그가 됩니다. 피벗은 JSON의 모든 프레임에 들어가고 피벗 슬라이스의 키가 됩니다.
배치 프레임 × N 시트 × N 시트 위의 각 목록: 격자 또는 띠, 여백, 확장, 2의 거듭제곱, 트리밍, 반복 프레임은 한 번만 저장, 행을 줄바꿈할 최대 너비, 넘으면 시트를 여러 페이지로 나누는 최대 높이(페이지마다 클립 전체가 들어가고 각 페이지가 별도 파일 세트), 그리고 밀착 인화지처럼 모든 클립을 앞 클립 뒤에 이어 붙이는 행당 프레임.
배치 시트 × N 시트 × N 각 시트를 이미지의 한 위치로 옮깁니다.
쌓기 시트, 시트 시트 시트 두 개를 하나로. 두 번째 시트를 첫 번째의 아래나 옆에 간격을 두고 놓습니다.
오버레이 아래, 위 시트 엔진이 레이어를 쌓듯 한 시트를 다른 시트 위에 정확히 겹칩니다. 위 시트의 빈 픽셀로 아래가 보입니다. 레이어마다 끄고 다른 레이어만 볼 수 있습니다. 둘은 프레임 단위로 맞아야 하며(같은 프레임이 같은 자리에), 그렇지 않으면 내보내기가 어느 프레임이 맞지 않는지 알려 줍니다.
시트 시트 파일 메모리 속 스프라이트 시트입니다. 직접 파일을 쓰지 않으며, 파일은 여기서 연결된 File 노드가 만듭니다. 이름은 시트의 이름입니다.
파일 시트 파일 출력: 디스크의 파일 하나. 연결된 Sheet에서 쓰며, 노드 앞면에 자체 설정이 있고, 열기로 파일을 열며, 만드는 데 오래 걸리는 경우에는 생성이 있습니다. PNG 이미지(시트 자체와 그 파일들의 이름: 파일 위치는 PNG를 쓰는 경로로, 다른 파일들이 이 이름을 따르며 내보내기 창에 지정한 폴더 아래에 놓입니다. 파일 이름은 프레임 이름을 짓는 템플릿으로, 아래에 첫 이름이 표시됩니다. 파일 속 레시피는 파일에 만든 방법을 담을지 정합니다. 자체 파일은 시트에 고유한 경로, 이름, 레시피를 주며, 끄면 파일이 프로젝트의 내보내기 위치로 갑니다. 인스펙터에서도 Sheet와 함께 이 설정이 보입니다), JSON, Aseprite 파일, Godot SpriteFrames, 노멀 맵, 깊이 맵, 발광 맵, 선과 평면 레이어, 팔레트, 조명 키트, PICO-8 카트리지, 보고서; 클립마다 GIF와 클립마다 APNG(배율); 클립마다 동영상(배율, 초당 프레임, 배경); 그림자 레이어(contact 또는 drop); 팔레트 변형(변형 목록); 페이퍼 돌 레이어(조각); 패럴랙스 레이어(레이어, 먼 레이어 흐리게). Sheet를 지우면 그 File 노드도 지워집니다.
텍스트 파일 시트 파일 출력: 프레임에 템플릿을 적용한 텍스트 파일(아래 참고).
애니메이션 파일 프레임 파일 출력: 연결된 각 스프라이트 목록의 애니메이션을 시트 없이 바로 냅니다. GIF, APNG, 또는 무압축 동영상(각 목록 방식)으로, 배율배 크게, 동영상은 배경 위에 초당 프레임으로 만듭니다. 저장 위치는 모든 파일 이름의 앞부분입니다. out/spin이면 out/spin_walk_South.gif를 씁니다.
아이콘 — 파일 출력: 모델의 인벤토리 아이콘. 스튜디오 조명 아래 ¾ 각도에서, 희귀도 색(또는 파일 이름에서)으로 외곽선을 두르고, 맞춤 여부에 따라, 크기마다 만듭니다. 크기마다 아이콘별 PNG와 아틀라스, JSON 색인을 저장 위치 폴더에 씁니다. 아이콘은 그 자체로 하나의 렌더이므로 입력을 받지 않습니다. pxr은 시트를 만든 뒤 내보내기 폴더에 아이콘을 만듭니다. 인벤토리 아이콘을 참고하세요.
ZIP 압축 파일 파일, … 파일 출력: ZIP 파일로, 여기에 연결된 파일 노드들의 파일을 묶습니다(끝은 저장 위치). Sheet를 연결하면 그 시트가 쓰는 모든 것이 들어가고, 아무것도 연결하지 않으면 내보내기가 쓴 모든 파일이 들어갑니다. 페이퍼 돌과 패럴랙스 레이어도 함께 들어갑니다. 같은 파일이면 바이트 단위까지 같은 압축 파일이 나옵니다. 다른 사람에게 건네거나 스토어에 올리는 파일입니다.

에셋 그래프: Sprites, Arrange, Sheet와 그것이 쓰는 PNG 이미지, 왼쪽에는 노드 라이브러리

렌더가 아니라 계획입니다. 그래프는 픽셀이 생기기 전에 어떤 프레임이 어디로 갈지 정합니다. 그래서 스타일 단계가 비어 있어도 에셋 단계가 작동하고, pxr names는 렌더링 없이 그래프가 쓸 모든 이름과 id를 출력합니다.

프레임은 정체성을 유지합니다. 시트를 다시 배치하면 사각형이 움직일 뿐 모든 프레임의 id는 그대로입니다(프레임의 이름과 정체 참고).

에셋 파이프라인

프로젝트에는 에셋 파이프라인을 원하는 만큼 둘 수 있습니다. 각각 이름이 붙은 자체 에셋 그래프입니다(캐릭터 시트, 아이콘 세트, 상점 페이지용 스틸 이미지). 내보내기 창은 고른 파이프라인을 씁니다(pxr render --pipeline all은 모두 씁니다). 에셋 단계 왼쪽의 에셋 목록과 헤더의 에셋 선택이 캔버스에 보일 파이프라인을 고릅니다. 목록 아래의 새 에셋 파이프라인은 지금 보이는 파이프라인을 복사해 그 이름을 딴 새 파이프라인(메인 2)을 만듭니다. 행의 우클릭 메뉴로 이름 바꾸기, 복제, 삭제(NAME 삭제…. 먼저 확인하며, 다른 파이프라인이 남아 있으면 첫 파이프라인도 지울 수 있습니다), 그리고:

  • 키트 저장…(에셋 파이프라인을 키트로 저장)은 파이프라인을 키트로 씁니다. 파이프라인 라이브러리(대화상자가 열리는 곳)에 저장하면 모든 프로젝트의 노드 라이브러리에 내 파이프라인 아래로 나열됩니다.
  • 키트 사용…(에셋 파이프라인 키트 사용), 또는 내 파이프라인 아래 항목을 클릭하면 다른 프로젝트에서 저장한 파이프라인이 이 프로젝트의 것이 됩니다. 그 이름들 — 파이프라인, 시트, 파일의 이름 — 은 여기에 아직 없는 이름으로 새로 지어집니다.
pxr project set game.pixor --add-pipeline icons
pxr graph set game.pixor --which asset --pipeline icons --node arrange --set layout=strip
pxr graph save game.pixor --which asset --pipeline icons --as-pipeline -o icons.pixorkit
pxr project set other.pixor --use-pipeline icons.pixorkit
pxr project set other.pixor --remove-pipeline icons

외부 이미지

이미지 파일 노드는 다른 곳에서 그린 것을 Pixor 시트에 넣습니다. 타이틀 시트의 로고, 손으로 그린 이펙트, 다른 도구의 프레임 같은 것이죠. 추가하고 PNG나 GIF를 선택…하면 병합을 거쳐 스프라이트 목록에 합류합니다. 따로 두려면 자체 시트에 연결하세요.

pxr graph add game.pixor --which asset --node image-file --set name=logo --set file=art/logo.png
pxr graph add game.pixor --which asset --node image-file --set name=spark --set file=art/spark.gif
pxr graph list game.pixor --which asset                                             # every node, numbered
pxr graph set game.pixor --which asset --node logo --set cell_w=16 --set cell_h=16   # a strip of 16 px frames
pxr graph set game.pixor --which asset --node logo --set own_colours=true            # keep its colours

--node는 pxr graph list에 나오는 노드 번호, 노드 이름(logo), 또는 그래프에 그 종류의 노드가 하나뿐이면 종류(frame-range)를 받습니다.

이미지는 시트의 팔레트를 따릅니다. 각 픽셀이 그중 가장 가까운 색이 됩니다. 자체 색에 체크하면 대신 자기 색을 유지합니다. 그 색들은 시트 팔레트 끝에 추가되므로(많이 쓰인 순서로, 팔레트에 자리가 있는 만큼), 시트의 모든 파일 — PNG, .aseprite, GIF, 팔레트 파일 — 에 담기고, 팔레트 변형도 그 색은 그대로 둡니다. 시트 자체의 프레임은 바뀌지 않습니다.

셀보다 큰 이미지는 그것이 들어가는 모든 파일의 셀을 키웁니다. 다른 프레임은 커진 셀 가운데에 놓이고, 피벗, 히트박스, 소켓도 함께 움직입니다.

한 번의 렌더로 여러 파일

그래프에는 Sheet 노드가 여러 개 있을 수 있고, 각각에서 PNG를 연결합니다. 그러면 렌더 한 번으로 캐릭터 시트, 아이콘 세트, 홍보용 스틸을 씁니다. PNG가 없는 Sheet는 이미지를 쓰지 않고 거기서 연결된 파일만 씁니다. 시트의 JSON만 쓰는 방법이 이것입니다. 두 번째 Sheet는 자체 목록에 연결될 때까지 첫 번째와 같은 것을 받습니다. 각 Sheet는 자체 경로, 이름 템플릿, 레시피를 가지거나 프로젝트의 것을 따르며, 옆의 파일들 — 그리고 그 그림자, 변형, 배율 — 은 File 노드입니다. 둘이 프로젝트의 것을 따르면 첫 번째가 프로젝트의 시트를 쓰고 다음 것은 그 옆에 자기 이름으로 씁니다(icons라는 Sheet는 out/hero_icons.png). 그래서 같은 것을 두 번 쓰지 않습니다. 둘이 같은 자체 경로를 지정하면 두 이름과 함께 거부됩니다. 스크립트로 추가한 Sheet는 앱에서처럼 다른 출력과 겹치지 않는 이름(sheet 2)을 받으며, pxr names는 렌더가 붙이는 이름으로 파일을 나열합니다.

뷰, 피치, 크기, 룩이 같은 카메라는 함께 프레이밍되어 카메라마다 한 행씩 시트 하나를 씁니다. 링으로 둘러선 방향들이 가지런히 맞습니다. 설정이 다른 카메라는 자체 시트를 쓰며, Sprites 노드는 쓰고 있는 그룹의 행을 가져갑니다. 두 그룹의 카메라(South, top)를 지정한 Sprites 노드는 대신 그것들을 파일 하나로 모아, 모든 카메라의 렌더가 끝난 뒤 프로젝트 시트 옆에 Sheet 노드의 이름으로 씁니다(out/hero_both.png). 행 이름은 카메라를 따릅니다(walk_South, walk_top). 시트 하나에는 프레임 크기와 팔레트가 하나뿐이므로, 다른 크기로 프레이밍하는 카메라들은 억지로 합치지 않고 거부합니다. 크기를 같게 맞추세요.

아이콘 격자는 노드 세 개입니다. South 카메라의 idle 액션을 받는 Sprites 노드, 띠로 놓는 배치, 그리고 PNG가 out/icons.png로 가는 Sheet입니다. 콘택트 시트는 여기에 패딩만 더한 것입니다. 기능이 아니라 그래프입니다.

스크립트에서:

pxr graph add game.pixor --which asset --node sprites --set action=idle --set camera=South --alone   # node 11
pxr graph add game.pixor --which asset --node arrange --set layout=strip --alone --in frames=11      # node 12
pxr graph add game.pixor --which asset --node sheet --set name=icons --set path=out/icons.png --set formats=png --alone --in sheet=12
pxr graph set game.pixor --which asset --node icons --set formats=json,godot   # its File nodes
pxr graph wire game.pixor --which asset --from 10 --to 12 --slot frames2       # the spark into the Arrange's spare input
pxr graph add game.pixor --which asset --node sheet --set name=sparks --set path=out/sparks.png --set formats=png --alone --in sheet=12.1   # output 1 of an N x N node
pxr graph list game.pixor --which asset          # every node, and every output's path
pxr graph drop game.pixor --which asset --node logo   # the logo's Image file node
pxr render game.pixor                            # out/game.png, out/icons.png (.json, .tres), out/sparks.png

portrait 스타일로 그린 걷기는 따로 프레임을 잡으므로 이것들 옆에 자체 시트를 씁니다: out/game_portrait_8fps.png. 자체 스타일이 없는 불꽃도 out/sparks_South_portrait_8fps.png에 다시 씁니다.

숫자는 이 페이지의 따라 하기에 나오는 것이며, pxr graph list로 프로젝트 자체의 숫자를 출력합니다. --alone은 아이콘 격자를 메인 시트의 체인에서 떼어 놓습니다. 거기에 idle 목록도 병합하면 같은 프레임이 두 번 들어가며, 이름 템플릿이 이를 거부합니다.

pxr graph add는 노드를 체인에 연결해 넣습니다. 프레임 범위나 홀드는 배치 앞에, 시트 노드는 그 뒤에, 두 번째 Sprites 노드는 병합을 거쳐 첫 번째 옆에 놓입니다. Sheet의 --set은 path, names, recipe를 받습니다. formats는 File 노드를 추가하고 제거합니다 — 내보내기 자체 목록처럼 PNG는 항상 포함되며, 아무것도 쓰지 않으려면 그 노드를 지웁니다 — 그리고 File 노드가 가진 설정의 단어로 그 노드를 만들고 설정합니다: shadow=drop, variants=hit-flash,hue:120, anim_scale=4, paper_doll=yes, pieces=helmet:Helmet,Visor, parallax=3, haze=none. File 노드 자체의 설정은 번호로 지정합니다: --node 5 --set fps=60.

색 옆의 선

시트에는 같은 목록의 레이어를 여러 개 실을 수 있습니다. Sprites 노드를 두 번 연결하세요 — 한 번은 곧바로, 한 번은 lines의 레이어를 거쳐서 — 그리고 배치 하나 앞에서 병합으로 합치거나, 각각 배치한 뒤 두 시트를 쌓기로 나란히 놓습니다. JSON은 선 행을 walk_South_lines로 부르며, 그 ID는 레이어 — 실제로 그것이 무엇인지 — 로 색 프레임과 구별됩니다. {layer}가 없는 템플릿도 그 프레임 이름에는 레이어를 붙이므로(hero_walk_South_00_lines.png) 두 프레임이 한 이름이 되는 일은 없습니다. 스프라이트 자체의 프레임은 이름이 그대로입니다. 파츠 세트의 Sprites 노드도 {set}으로 같은 일을 하며(hero_attack_South_00_bare.png), 세트는 그 프레임 ID의 일부입니다. 또는 엔진이 그릴 방식대로 오버레이로 둘을 정확히 겹치세요.

템플릿으로 만드는 텍스트 파일

Pixor가 모르는 엔진에는 디스크립터가 필요하며, 이는 JSON에 담긴 것과 같은 프레임 메타데이터로 만든 텍스트 파일입니다. 텍스트 파일 노드가 템플릿으로 이를 씁니다.

{sheet} {width}x{height}
{#frames}{name} {x} {y} {w} {h} {duration}{sep}
{/frames}

{#frames} ... {/frames}는 본문을 프레임마다 한 번씩 씁니다. 그 바깥의 단어는 시트의 것입니다: {project}, {object}, {sheet}(이미지 파일 이름), {width}, {height}, {cell_w}, {cell_h}, {pivot_x}, {pivot_y}, {frames}. 그 안의 단어는 프레임의 것입니다: {name}, {id}, {action}, {side}, {row}, {index}, {n}(시트에서 프레임 번호), {layer}, {x}, {y}, {w}, {h}, {source_x}, {source_y}, {duration}(밀리초), {pivot_x}와 {pivot_y}(태그가 클립에 피벗을 주었으면 그 피벗), {loop}(true 또는 false), {root_x}, {root_y}, {root_dx}, {root_dy}(JSON과 같은 루트 모션), {boxes}와 {sockets}(JSON으로), 그리고 {sep}은 마지막 프레임 뒤를 빼고는 쉼표로, JSON 목록을 만들기에 충분합니다. {index:3}은 숫자 앞을 0으로 채우고, {{와 }}는 중괄호를 씁니다.

템플릿은 프로젝트 옆 별도 파일에 둘 수도 있습니다. 노드에 템플릿 파일을 주면(스크립트에서는 --set file=frames.tpl) 출력을 쓸 때마다 읽으므로, 스튜디오는 다른 파일을 두는 곳에서 디스크립터를 편집할 수 있습니다.

조건문, 연산, 포함은 없습니다. 파일을 쓰는 방법이지 언어가 아닙니다. Pixor가 모르는 단어는 파일에 쓰이지 않고 템플릿을 입력할 때 거부됩니다.

그룹 하나로 쓰는 레이아웃

아이콘 격자, 콘택트 시트, 스튜디오 고유의 캐릭터 배치 방식: 그룹을 고르지 않은 채 막대의 키트 저장…은 에셋 그래프를 키트로 저장합니다(에셋 그래프를 키트로 저장). 레이아웃과 Sheet에 들어가는 것을, 스프라이트 목록을 받아(각 Sprites 노드가 입력이 됩니다) 시트를 내는 그룹 하나로 담습니다. Sheet와 거기 달린 파일은 프로젝트에 남습니다. + › 키트 사용…(키트를 그룹으로 추가)은 다른 프로젝트의 에셋 그래프에 그룹 하나로 넣어, 거기서 Sheet에 연결하거나 배치 대신 쓰게 합니다. 더블클릭하거나 제목의 화살표를 누르면 그 자리에서 열리고, 화살표로 다시 접습니다. 스크립트에서는:

pxr graph save hero.pixor --which asset -o icon-grid.pixorkit --name "Icon grid"
pxr graph add villain.pixor --which asset --kit icon-grid.pixorkit --alone --in 0=0   # fed by node 0
pxr graph swap villain.pixor --which asset --node arrange --kit icon-grid.pixorkit

하지 않는 것

  • 바이너리 형식은 코드로 남습니다. PNG, .aseprite, GIF, APNG, Godot SpriteFrames, 라이트 키트, .p8는 Sheet와 File 노드가 맡고, 템플릿은 텍스트를 씁니다.
  • 플러그인 바이너리도, 스크립트 노드도 없습니다. 다른 그래프와 마찬가지입니다.

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

브라우저에서 체험 Pixor 구매