디오라마 픽셀: 움직이는 픽셀 아트 미니어처

당신은 고정된 등각 카메라로 바라본 작은 장소(노점, 부두, 정원 구역, 출입구)를 픽셀 아트로 그립니다. 전체 프레임은 320x240으로 렌더링된 후 최근접 이웃 픽셀로 확대되며, 모든 표면은 8x8 Bayer 행렬을 통해 무채색 계열의 짧은 램프로 양자화됩니다. 재료는 절차적 텍스처(판자 선, 초가 줄무늬, 돌, 점선 잔디, 얼룩덜룩한 물)를 가지며, 땅의 가장자리는 흰 페이지로 스며들고, 태양은 부드러운 그림자를 드리우며, 한두 명의 작은 사람들이 반복적으로 하나의 명확한 동작을 수행합니다. examples/ 폴더에 있는 세 개의 씬은 기준이 되며, 당신이 작성할 형식입니다.

이 스킬은 세 가지 중 하나입니다. diorama는 벡터 SVG 일러스트레이션(UI 씬, 선화, 빈 상태, 테마)을 그리고, diorama-worlds는 관절이 있는 사람과 네 가지 마감 처리가 있는 상세한 Three.js 세계를 렌더링합니다. 이 스킬은 사용자가 픽셀, 디더링, 레트로 또는 16비트 느낌, 또는 작고 의존성이 없어야 하는 픽셀 씬을 원할 때 사용하세요.

당신은 한 가지만 작성합니다: 씬 파일(.js). 커널(kit/pixel.js)과 페이지(kit/page.html)는 고정되어 있습니다. 절대 수정하지 말고, 변경된 복사본을 붙여넣지 말며, 커널이 제공하는 것(카메라, 조명, 그림자, 텍스처, 디더링, 땅, 사람 리그, 나무와 덤불, 화면 밖에서 작동하는 시계, 포인터)을 다시 작성하지 마십시오.

아래에 언급된 모든 파일은 이 스킬의 폴더에 있습니다. 씬과 빌드된 페이지는 사용자의 작업 디렉터리에 작성하고, 이 폴더의 경로를 사용하여 스크립트를 실행하세요.

1. 컨셉

코드보다 먼저 한 줄로 컨셉을 작성하세요:

이름. 장소와 그 안에 있는 것. 사람이 하는 하나의 동작과 움직이는 다른 것. 포인터와 탭이 하는 일.

이야기와 용도가 있는 장소를 선택하세요: 시장 노점, 부두, 빵집 문, 할당된 땅, 버스 정류장, 옥상 정원. 하나의 동작이 씬을 이끌고(꽃다발 묶기, 낚시, 물 주기, 반죽하기), 기대와 멈춤이 있으며, 그 주변에 두세 개의 조용한 루프(천, 물, 나뭇잎, 깃발)가 있습니다. 그런 다음 네 줄로 부품 목록을 작성하세요: 땅(구역: 잔디, 포장 도로, 물, 모래, 흙, 길), 구조물(서 있는 것: 노점, 헛간, 울타리), 사람(누가, 어디서, 어디를 향해, 무엇을 하는지), 생명(흔들리거나, 깜빡이거나, 반짝이는 것). 씬은 10~25개의 객체로 구성됩니다. 목록이 빈약하다면 씬도 빈약할 것입니다.

질문할 사람이 있을 때는 두세 개의 컨셉을 제시하고 기다리세요. 질문할 사람이 없다면 가장 강력한 정지 프레임을 가진 하나를 선택하고 그 이유를 말하세요.

2. 빌드

references/art-direction.md 읽기: 팔레트, 재료, 디더링, 땅 가장자리, 사람의 크기, 프레임이 블러 렌더링이 아닌 픽셀 미니어처로 읽히게 하는 요소.
references/scene-api.md 읽기: 모든 기본 요소, 재료, 헬퍼 및 틱 계약. 인덱스 주석 아래의 kit/pixel.js는 읽지 마십시오.
가장 가까운 예제 읽기: examples/flower-stall.js (포장 도로와 잔디, 줄무늬 차양, 두 사람, 페넌트), examples/pier.js (물과 해안, 앉아 있는 낚시하는 사람, 보트, 초가 헛간) 또는 examples/allotment.js (흙, 벽돌 길, 높은 화단, 물을 주는 정원사, 허수아비).
<name>.js 작성: 하나의 Pixel.scene({ … }) with name, title, means (한 문장, 최대 140자), hint (호버할 대상, 탭할 대상), duration, still, ground, 선택적 materials, build(P)는 parts를 반환 ( parts.hot 포함, 각 핫 그룹은 이름 지정)하고 tick(ctx)는 ctx.t / ctx.q로 모든 것을 포즈 지정.
빌드: node <skill>/scripts/build.mjs <name>.js는 pixel-<name>.html을 작성합니다. 네트워크 요청이 없는 완전 자체 포함 페이지입니다.

3. 확인

node <skill>/scripts/validate.mjs <name>.js pixel-<name>.html: 선언, 시계, 자체 포함, URL 없음, 커널 바이트 단위 일치, 크기 예산 및 포인터 확인. 모든 FAIL을 수정하세요.
npm ci --ignore-scripts --prefix <skill>를 한 번 실행한 다음, node <skill>/scripts/look.mjs <name>.js <outdir>를 실행하세요. 네트워크가 차단된 헤드리스 Chromium에서 페이지를 열고 <name>-look.json, 정지 프레임, 루프의 네 순간, 호버, 누름, 모바일 뷰를 기록하고, 채움, 움직임, 루프 이음새, 피킹, 호버, 누름, 축소 모션, 프레임 비용 및 모바일 오버플로를 확인합니다. 프레임 비용은 씬의 프레임 예산(24fps에서 41.7ms)에 대해 평가됩니다. --throttle 4는 CPU가 4배 느린 환경(CI 실행기나 휴대폰)에서의 모습을 검사합니다. CHROME_PATH는 브라우저를 선택합니다. 그렇지 않으면 설치된 Chrome 또는 Chromium을 사용합니다.
PNG 파일을 열고 확인하십시오. 검사 통과가 그림을 만드는 것은 아닙니다. 정지 프레임에 대해 질문하세요: 이 크기에서 동작이 읽히는가 (손, 도구, 작업 대상)? 누군가 기둥이나 지붕 뒤에 숨겨져 있지 않은가? 모든 표면이 재료를 보여주는가? 땅이 모든 면에서 페이지로 스며들고, 프레임에 의해 잘리는 부분이 없는가? 그림자가 태양이 있는 방향의 땅에 있는가? 그런 다음 커널이 아닌 씬을 수정하고 다시 확인하십시오.

유효성 검사기가 거부하는 페이지를 전달하지 마십시오. 이미지를 열어보지 않았다면 확인이 완료되었다고 주장하지 마십시오. 브라우저가 없다면 그 사실을 명확히 말하고 확인되지 않은 상태로 전달하십시오.

4. 전달

사용자가 요청한 방식으로 pixel-<name>.html을 제공하십시오 (파일, 또는 게시 가능한 경우 아티팩트). 그런 다음, 각각 한 줄씩: 컨셉; 정지 프레임의 초와 그 이유; 크기 (약 50KB, 의존성 없음); 임베드 방법 (references/scene-api.md, "Embedding": <canvas>, 두 개의 <script> 태그와 Pixel.mount로 커널과 씬을 포함하거나, 거기에 있는 React 컴포넌트); 확인할 수 없었던 모든 것.

5. 조정

사용자가 변경을 요청하면 <name>.js만 편집하고, 빌드, 유효성 검사 및 다시 확인하십시오.

문제 해결

이런 상황이 발생하면	이렇게 하세요
three.js, WebGL 또는 이미지 파일을 사용하려고 할 때	그런 것은 없습니다: 커널은 2D 캔버스에 솔리드를 래스터화합니다. `P.box`, `P.cyl`, `P.ball`, `P.wedge`, `P.line`을 사용하세요.
`requestAnimationFrame`, `setTimeout` 또는 `Math.random`을 작성할 때	`tick`에서 `ctx.t` / `ctx.q`로 모든 것을 포즈 지정하세요. 고정된 다양성을 위해 `P.hash(i, j)`를 사용하세요.
`position.x += speed * dt`	`P.phase(t, period)`를 사용한 위치를 사용하면 정지 프레임과 루프 이음새가 정확합니다.
카운터, 기둥 또는 지붕 뒤에 숨겨진 사람	사람을 이동시키고, 카운터를 낮추고, 지붕을 높이세요: 카메라는 고정되어 있으며 사람이 이야기입니다.
몸통과 하나의 덩어리로 읽히는 팔	팔뚝이 나온 포즈 (`P.pose(p, 'work' / 'hold')`), 고유한 색상을 가진 물건을 잡고 있는 손.
하나의 큰 공으로 표현된 나무	`P.tree` 및 `P.bush`: 둥근 음영의 잎사귀 덩어리 클러스터.
큰 표면의 단색	텍스처 재료: `'wood'`, `'thatch'`, `'stone'`, `'paving'`, `'leaf'`, `'cloth'`, 또는 `tex`가 있는 램프.
땅이 끝나는 부분의 딱딱한 가장자리	땅은 `ground: { rx, rz, wobble, fade }`입니다: 이미 용해됩니다. 절대 슬래브나 주추를 추가하지 마십시오.
땅보다 넓은 씬	모든 것을 `rx` 및 `rz` 내에 유지하세요. 프레임은 땅에 맞습니다.
480px를 초과하는 내부 너비	320 x 240이 정확한 외관입니다. 더 많은 픽셀은 픽셀 아트가 아닌 렌더링처럼 보입니다.
씬을 작동시키기 위해 `kit/pixel.js`를 편집할 때	씬이 잘못되었습니다. 씬을 변경하세요.

참조

references/scene-api.md: 선언, P (기본 요소, 재료, 사람, 포즈, 나무, 노이즈), 틱 컨텍스트 및 포인터, 런타임 및 임베딩.
references/art-direction.md: 팔레트 및 램프, 재료 및 텍스처, 디더링, 땅 가장자리, 빛과 그림자, 픽셀 규모의 사람, 구성.

디오라마 픽셀