이미지와 글자
3D 모델에서 오지 않는 콘텐츠가 두 가지 있습니다. 이미 가진 이미지와 글자입니다. 둘 다 끝에 덧칠하는 것이 아니라 장면의 일부로 파이프라인 처음에 들어가므로, 선, 외곽선, 오클루전, 그림자, 팔레트가 새 처리 하나 없이 모두 적용됩니다.
장면 속 이미지
장면 단계에서 아웃라이너의 + 메뉴, 이미지 › 이미지 파일에서…는 이미지를 평면에 올립니다: 빌보드 잎, 먼 나무, 간판, 불 켜진 창, 그린 배경막. 아웃라이너의 행, 인스펙터의 Transform 블록과 자체 설정을 갖춘 다른 파츠와 같은 파츠이며, 장면 그래프의 Picture 노드입니다. 행과 노드는 같은 것이고, 설정도 노드에 있으며, 뒤에 오는 Row나 Ring이 이를 반복합니다.
| 설정 | 하는 일 |
|---|---|
| 방향 | 세움, 땅에 평평하게, 스프라이트(스프라이트 공간에서), 또는 데칼(둘 다 아래 참고). |
| 반전됨 | 좌우로 뒤집습니다. 비용이 들지 않고 두 번째 파일도 필요 없습니다. |
| 기울기 | 뒤로 기울인 각도(도). |
| 90도 회전 | 세로축을 중심으로 돌린 각도. 90도 단위만 됩니다. 그 사이 각도는 필터링이 필요하고, 필터링은 픽셀 아트를 흐리게 합니다. |
| 픽셀당 미터 | 이미지 픽셀 하나가 덮는 월드의 크기. |
| 장면의 빛 받기 | 기본은 꺼짐: 이미지는 보통 그린 사람이 이미 음영을 넣었으므로, 다시 음영을 넣으면 빛의 방향이 둘이 됩니다. |
| 둘레의 선 | 다른 파츠 둘레와 마찬가지입니다. |
| 아래 잘라내기 | 이만큼 투명한 픽셀은 구멍이 되므로, 오려 낸 잎이 제대로 됩니다. |
| 구도에 포함 | 라벨에는 끄세요: 기사 위의 "GAME OVER" 배너 때문에 기사가 작아져서는 안 됩니다. |
| 패럴랙스 레이어 | 뒤에서부터 센 소속 레이어. 그래서 그린 아트와 3D가 한 레이어 스택을 공유합니다. |
버튼 두 개로 선명하게 만들며, 둘 다 표시된 카메라를 씁니다:
- 정수 픽셀은 이미지 픽셀 하나가 스프라이트 픽셀 정수 개를 덮도록 크기를 맞춥니다. 그 밖의 크기는 리샘플링됩니다.
- 카메라를 향하기는 그 카메라의 피치만큼 기울입니다. 내려다보는 카메라는 세운 카드를 짧아 보이게 하므로 행이 빠지고 글자가 뭉개집니다.
명령줄에서:
pxr project set game.pixor --add-picture bush.png:-1.1,0,-0.3:0.05
pxr project set game.pixor --add-picture bush.png:1,0,0.2:0.035 --mirror
pxr project set game.pixor --add-picture sky.png:0,0,-8:0.2 --layer 0 --unframed스프라이트 공간에서 이미지는 카드가 아닙니다. 장면을 그린 뒤 그 위치가 닿는 스프라이트 픽셀 위에 이미지를 얹습니다. 그래서 모든 카메라를 향하며(빌보드처럼, 시트의 모든 방향에서 같은 덤불), 카메라와 상관없이 이미지 픽셀 하나가 정수 개의 스프라이트 픽셀이 됩니다(스프라이트 픽셀, 기본값 1). 정확한 글자에 필요한 성질입니다. 위치의 깊이를 유지하므로 그 앞에 선 것은 여전히 이미지를 가리고, 카드처럼 파츠이므로 선, 정리, 팔레트가 하나의 파츠로 다룹니다. 세운 카드처럼 아래 가장자리 가운데를 위치에 두고 섭니다. 구도에 포함이 켜져 있으면 위치가 프레이밍에 반영됩니다.
pxr project set game.pixor --add-picture bush.png:-0.8,0,1.1 --facing sprite
pxr project set game.pixor --add-text "+12" --text-at 0.25,0.35,0.9 \
--facing sprite --picture-pixels 2 --font pixor-5데칼은 세운 카드가 놓일 자리에서 평면의 도달 거리(미터 단위, 양쪽) 안에 있는 표면이면 어디든 칠해집니다: 벽의 간판, 금, 그을음. 뒤로 4분의 1 바퀴 눕히면 바닥의 웅덩이나 러그가 됩니다. 자체 지오메트리도 파츠도 없습니다. 프레임에 그려진 표면이 데칼 상자 안에 들어오면 그 자리에서 이미지의 색을 받되 자체 빛, 선, 외곽선은 유지하므로, 벽의 간판은 벽과 똑같이 음영이 집니다.
pxr project set game.pixor --add-text "OPEN" --text-at 0,0.3,0.45 \
--text-size 0.03 --facing decal --decal-reach 0.25 --font pixor-5팔레트에 맞춥니다. 프로젝트에 고정 팔레트가 있으면 이미지를 가져올 때 프로젝트 팔레트로 옮기고, 렌더가 픽셀 몇 개가 바뀌었는지 알려 줍니다.
picture bush: 330 of 330 pixels moved to the palette (100.0%)--keep-colours는 색을 그대로 둡니다. 자동 팔레트를 쓰는 프로젝트는 아직 맞출 팔레트가 없으므로(팔레트는 카드를 포함해 장면에 있는 것으로 만들어집니다) 파이프라인 뒤쪽에서 맞춥니다.
PNG인가요, JPEG인가요? 오려 낸 그림에는 PNG의 투명도가 필요하고, 배경용 사진은 대개 JPEG입니다.
여러 프레임으로 된 이미지. 프레임을 나란히 놓은 이미지(네 프레임으로 깜빡이는 횃불, 여섯 프레임으로 펄럭이는 깃발)는 프레임을 설정한 이미지 하나입니다(--picture-frames 4). 카드는 한 프레임 너비이며 첫 프레임을 보여 줍니다. Pixor에서 만든 클립이 어떤 프레임을 보여 줄지 키로 정하므로(picture:NAME, frame), 그려 넣은 깜빡임도 다른 것처럼 시트에서 재생됩니다. 반전됨은 순서를 유지한 채 각 프레임을 제자리에서 뒤집습니다.
프레임은 띠 하나 대신 각각 별도 파일이 될 수 있습니다. 프레임마다 파일 하나, --picture-sequence: 지정한 파일이 첫 번째인 flame_0001.png이고, 그 뒤의 번호가 같은 자릿수 채우기로 이어집니다. 모든 프레임은 첫 프레임과 크기가 같습니다. 또 스스로 재생할 수도 있습니다. 스스로 재생, --picture-plays: 클립이 어느 프레임을 보일지 키로 정하지 않는 한, 시트가 무엇을 보이든 그 아래에서 한 프레임씩 계속 돕니다. 다른 움직임이 없으면 이것이 곧 애니메이션이며, picture라는 루프가 됩니다.
pxr project set game.pixor --add-picture flame_0001.png:0.7,0,0.8 \
--picture-frames 4 --picture-sequence --picture-plays --facing sprite하늘
하늘은 모든 것 뒤, 아무것도 그려지지 않은 픽셀에 놓입니다. 그래서 모델은 하늘이 없을 때의 외곽선을 그대로 유지합니다. 하늘은 띠 — 위 색과 아래 색, 그 사이 정수 개의 단계로, 섞지 않습니다 — 이거나 그린 이미지 — 프레임 위쪽에 고정되어 가운데 놓이고, 이미지 픽셀 하나가 스프라이트 픽셀 정수 개이며, 가장자리는 양옆 너머로 이어집니다 — 입니다. 색은 팔레트에 정확히 들어가므로 띠는 요청한 색 그대로입니다. 하늘은 월드의 일부입니다: 아웃라이너의 + 메뉴, 월드 › 하늘, 또는 pxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4'(또는 --sky dusk.png:2), 그리고 --no-sky.
장면 속 글자
텍스트 카드는 이미지를 읽는 대신 그리는 카드이므로, 글자가 카드의 방향, 회전, 배율, 오려내기, 선을 덤으로 얻습니다. 앱에서는 아웃라이너의 + 메뉴 이미지 › 텍스트가 모델 위에 하나를 놓습니다 — 장면 그래프의 텍스트 노드 — 폰트 픽셀 하나가 스프라이트 픽셀 하나입니다. 인스펙터에는 글자, 글꼴, 글자 배율, 잉크, 외곽선, 그리고 그 아래 카드 자체의 설정이 있습니다. 글자는 앱에서든 스크립트에서든 레이블입니다. 샷의 구도를 정하지 않으므로 앱은 글자를 프레임 위쪽 바로 안에 놓습니다. 대신 글자를 포함해 구도를 잡으려면 구도에 포함을 켜세요. 스크립트에서는:
pxr project set game.pixor --size 128
pxr project set game.pixor --add-text "GAME OVER" \
--text-at 0,2.3,0 --text-size 0.033 --tilt -45 \
--text-colour '#f4ecf2' --text-outline '#1a1620'--text-size는 글꼴 픽셀 하나당 미터 수입니다. 이 값이 스프라이트 픽셀 하나 이상이 되어야 글자가 읽힙니다. 렌더는 시트의 미터당 픽셀 수를 출력합니다(--size 40의 기사 프로젝트에서 약 128, 0.033 × 40 ≈ 1.3. 이 페이지의 덤불과 이미지를 넣으면 37로 여전히 1보다 큽니다). 64 px에서는 약 24로 글꼴 픽셀당 한 픽셀이 안 되어 글자가 깨집니다.
| 옵션 | 하는 일 |
|---|---|
--font NAME|FILE |
pixor-11, pixor-5, 또는 직접 준비한 폰트 파일: Pixor 자체 형식이나 .bdf. |
--align left|middle|right |
각 선의 위치. |
--wrap PIXELS |
이 너비에서 줄을 바꿉니다. 너무 긴 단어는 통째로 둡니다. 쪼개진 단어는 튀어나온 줄보다 읽기 어렵습니다. |
--letter-spacing N, --line-spacing N |
추가 픽셀(정수). |
--text-colour, --text-outline, --text-shadow |
잉크, 1픽셀 외곽선, 픽셀 그림자. |
--text-scale N |
픽셀 하나가 N×N이 됩니다. 정수 배만 가능합니다. |
--facing sprite, --picture-pixels N |
스프라이트 공간에서 글꼴 픽셀 하나당 스프라이트 픽셀 N개, 모든 카메라에서. |
배치는 어디서나 정수로만 합니다. 글자 폭과 줄 높이는 정수 픽셀이고, 셰이핑도 서브픽셀 위치 지정도 없으므로, 문자열은 어느 컴퓨터에서나 같은 픽셀을 냅니다. 글꼴에 없는 글자는 상자가 아니라 빈칸이 됩니다. 스프라이트에서는 상자가 빈칸보다 나쁘기 때문입니다.
글자는 기본적으로 레이블입니다. 장면의 구도를 정하는 데 관여하지 않습니다. 스프라이트 공간에서는 기울거나 카메라에 맞춰 크기가 바뀌지 않고 모든 방향에서 정확합니다: --facing sprite.
도형이 된 글자
글자 도형은 단어를 쓰고 폰트의 각 픽셀을 블록으로 돌출시키므로, 글자가 다른 지오메트리처럼 조명, 띠, 외곽선, 팔레트를 받습니다. 간판, 깃발, 묘비 등:
pxr shapes -o sign.glb --shape letters:2,0.5,0.25
pxr project set game.pixor --add-shape letters:1.2,0.3,0.1:0,3,0 --words HELLO3 m 높이에 두면 글자가 기사의 투구에 겹치지 않습니다. 다른 도형처럼 글꼴 픽셀 하나에 스프라이트 픽셀 하나 이상이 있어야 읽히며, --size 128의 기사가 그 크기를 줍니다.
이웃에 가려지지 않는 면만 만들므로 단어 하나가 삼각형 수백 개이며, 글자는 디센더가 차지하는 빈 공간이 아니라 잉크 위에 섭니다.
폰트
Pixor에는 Pixor를 위해 그린 글꼴 두 개가 들어 있습니다. 인터페이스를 그리는 글꼴인 pixor-11과, 대문자 5픽셀에 대부분의 글자가 3픽셀인 pixor-5입니다. pixor-5는 스프라이트 위의 숫자, 라벨, HUD처럼 큰 글꼴이 가리키는 대상보다 무거워 보일 곳에 씁니다. letters 도형은 인스펙터의 글꼴로 둘 중 하나를 고릅니다. 직접 만든 글꼴은 같은 모양의 텍스트 파일이며, 보이는 그대로 간단합니다:
== A
.###.
#...#
#####
#...#
#...#== C 줄은 문자를 지정하고(입력할 수 없는 문자는 == U+00E9), 이어서 그 행들이 옵니다. #은 잉크, .은 빈칸입니다. 읽기 쉽고, diff가 되며, 폰트 라이브러리가 필요 없습니다.
BDF 파일은 그대로 쓸 수 있습니다. 픽셀 폰트를 공유할 때 가장 많이 쓰는 형식입니다. 글리프는 폰트의 어센트와 디센트로 된 한 셀 위에 놓이고, 각 글리프의 폭은 폰트가 지정한 전진 폭과 같아서, 디자이너가 고른 간격이 유지되며 Pixor는 간격을 더하지 않습니다.
이미지에서 팔레트 만들기
팔레트 파일은 이미지일 수도 있습니다. 참고 이미지, 원하는 느낌의 게임 스크린샷, 색 견본 띠 같은 것이죠.
pxr render hero.glb --palette reference.png색이 16개 이하인 이미지는 정확히 그 색들을 일정한 순서로 줍니다. 그보다 많으면 가장 대표적인 색을 최대 16개까지 줍니다(구별하기 힘들 만큼 가까운 색은 하나로 합칩니다). 같은 이미지는 어느 컴퓨터에서든 같은 팔레트를 줍니다.