Diorama Pixel 是 diorama 系列三个技能之一,专门用于制作像素风格的小型等距微缩场景。它使用固定等距相机,将整个画面以 320×240 渲染,再用最近邻像素放大,使画面保持清晰的像素感而非模糊的渲染效果。每个表面都通过 8×8 Bayer 矩阵进行有序抖动,并量化到一组简短的低饱和色阶;材质带有程序化纹理,如木板线条、茅草条纹、石块、点描草地和斑驳水面。地面边缘会渐隐到白色页面中,阳光投射柔和阴影,一两个小人物在循环中完成一个清晰动作。
用途方面,该技能适合制作带有故事和使用场景的小型像素场景,例如市集摊位、码头、面包店门口、菜地、公交站或屋顶花园。场景以一个动作为核心(绑花束、钓鱼、浇水、揉面),包含预备动作和停顿,周围环绕两三个安静的循环(布料飘动、水波、树叶、旗帜)。官方示例包括 flower-stall.js(铺地与草地、条纹遮阳篷、两个人物、一面三角旗)、pier.js(水面与岸边、坐着持竿的人、小船、茅草棚)和 allotment.js(土壤、砖路、抬高的种植床、浇水园丁、稻草人)。
主要能力包括:在一个 .js 文件中通过 Pixel.scene({…}) 声明场景,包含名称、标题、说明、提示、时长、静帧、地面、可选材质,以及返回部件的 build(P) 和根据 ctx.t / ctx.q 摆放所有物体的 tick(ctx);使用 P.box、P.cyl、P.ball、P.wedge、P.line 等基本图元;使用 'wood'、'thatch'、'stone'、'paving'、'leaf'、'cloth' 等纹理材质;使用 P.tree 和 P.bush 生成成簇的圆润树冠;使用 P.pose(p, 'work' / 'hold') 摆放人物姿势;使用 P.phase(t, period) 保持静帧和循环接缝精确;使用 P.hash(i, j) 产生固定不随时间的随机变化。
使用方式:先写一行概念(名称、场所及其中内容、人物的一个动作和其他运动、指针和点击的效果),再列出四行部件清单(地面分区、结构、人物、生命细节),场景通常包含 10–25 个对象。然后阅读 references/art-direction.md 和 references/scene-api.md,参考最近的示例,编写 <name>.js。使用 node <skill>/scripts/build.mjs <name>.js 构建出 pixel-<name>.html,这是一个无网络请求的自包含页面。使用 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、静帧、循环的四个时刻、悬停、按下和移动端视图,并检查填充、运动、循环接缝、拾取、悬停、按下、减少运动、帧成本和移动端溢出。帧成本以场景帧预算(24 fps 下 41.7 ms)衡量,--throttle 4 可在四倍慢的 CPU 上检查;CHROME_PATH 可选择浏览器。
检查完成后需打开 PNG 查看画面效果,确认动作在该尺寸下可读、没有人物被遮挡、每个表面显示材质、地面各边渐隐入页面且无裁切、阴影位置符合光源方向。交付时给出 pixel-<name>.html,并逐行说明概念、静帧秒数及原因、尺寸(约 50 KB,无依赖)、嵌入方式(一个 <canvas>、内核和场景放在两个 <script> 标签中并调用 Pixel.mount,或使用 React 组件)以及任何无法验证的内容。修改时只编辑 <name>.js,重新构建、校验并查看。
限制与注意事项:不要使用 three.js、WebGL 或图像文件;内核在 2D canvas 上光栅化实体。不要写 requestAnimationFrame、setTimeout 或 Math.random;在 tick 中根据 ctx.t / ctx.q 摆放所有物体。不要用 position.x += speed * dt,而应使用 P.phase(t, period)。人物不要被柜台、柱子或屋顶遮挡。不要用单个大球表示树,应使用 P.tree 和 P.bush。大表面不要用纯色,应使用纹理材质。地面本身已渐隐,不要添加石板或底座。所有内容保持在 rx 和 rz 范围内,内部宽度不要超过 480 px。不要编辑 kit/pixel.js,而应修改场景。若没有浏览器,需明确说明外观未经校验。该技能不提供收费、价格或平台信息。