sunny-bird-tanghulu-game

Community@rain/sunny-bird-tanghulu-game
Community skill — not reviewed. It was shared by caramel pudding and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: sunny-bird-tanghulu-game. Run `npx -y @neta-art/neta-search-cli@latest skills use @rain/sunny-bird-tanghulu-game --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @rain/sunny-bird-tanghulu-game
Summary

Make a playful web game where you stack treats on a skewer and spin the result in 3D.

  • Tap buttons to add cat sugar discs and strawberries to a bamboo stick, then wrap the stack in milk skin to finish.
  • Each piece slides down with a bounce and sugar sparkles. Drag the finished skewer to spin it around and see every angle.
  • Works from a reference image of the finished skewer or its pieces: the cat face, strawberries, and milk skin wrapper.
  • Best with clear, frontal images on white background showing texture and color: the cat's violet hair and halo, red strawberries with seeds, creamy milk skin.
  • Delivers a shareable web page with the game running in 3D, playable on phone or desktop with touch or mouse.
SKILL.md
# 晴天鸟鸟冰糖葫芦串串 · 游戏制作

做一个可以玩的冰糖葫芦串串网页游戏。玩家点底部三个按钮：**萌物**（向日葵猫头糖片）、**草莓**（冰糖草莓），把糖葫芦一颗颗串上竹签；**奶皮**只能在串上至少一颗后点，点了就铺在整串后面收尾。做完的糖葫芦自动旋转，可以拖动 360° 转着看。整串最多 4 颗。背景是浅蓝到浅绿的渐变。

## 最终形态（对齐参考图）

成品串从下到上：草莓 → 萌物 → 草莓 → 萌物，奶皮铺在整串后面，像一张竖直的奶油纸。这个顺序在游戏里被识别为「招牌串 · 和图里一模一样！」。任何顺序都允许串，最多 4 颗，串错可以「撤回」。

## 五步流程

### 1. 美术素材（Neta 生成 + 抠图）

以一张"成品串"参考图（或参考图里的元素）为风格锚点，生成三张单件白底图，再用 BiRefNet 抠成透明 webp：

| 素材 | 内容 | 用途 |
| --- | --- | --- |
| 单萌物 | 正面猫头糖片：淡紫头发、尖耳、星星眼、腮红、右侧向日葵、头顶金色光环 | 萌物按钮 / 进度点 / 加载图 / 3D 头片正脸来源 |
| 单草莓 | 直立冰糖草莓：亮红、黄籽、糖衣高光、绿叶蒂 | 草莓按钮 / 进度点 |
| 单奶皮 | 竖直奶油色奶皮纸：撕裂毛边、气泡纹理、焦糖斑点 | 奶皮按钮 / 3D 奶皮贴图来源 |

- 生成时用 `--ref-file` 挂参考图，提示词强调：单件、居中、纯白背景、四周留白、无竹签无影子、无文字。
- 生成后先做拼图检查（风格、构图、完整性），确认再抠图。
- 奶皮可以直接用用户提供的素材图。
- 抠图后做"深色底检查"：把三个按钮图拼在深蓝底上，确认无白边、无残留。

### 2. Blender 建模（导出 GLB）

竹签是竖直的（Blender Z-up），素材在 `assets/` 下，产出 `assets/model/model-*.glb` + `.blend` 源文件。建模要点：

- **萌物糖片**：有厚度的"枕头"曲面。从抠图的 alpha 通道描出轮廓网格（150 列网格、距离场做圆角厚度、前后两半焊接），正面贴绘制的脸，背面贴淡紫头发色 + 保留焦糖描边。**光环不进轮廓**：从 alpha 里挖掉光环区域（量好椭圆中心和长短轴），单独建一个金色 torus，浮在头顶、平躺微倾。导出前把轮廓做 10 轮拉普拉斯平滑。
- **草莓**：UV 球变形（肩宽顶尖、五瓣微凸、顶部压平给叶蒂），顶点色做"深红尖→亮红肩"渐变，约 90 颗黄金螺旋分布的小籽（贴面朝外），叶蒂 = 7 片放射状叶片 + 中心小杯，叶片加 Solidify 厚度。
- **竹签**：圆柱 + 顶端削尖圆锥 + 底部斜切，贴程序化竹纹。
- **奶皮**：竖直平面网格，顶点做出向后弯的弧度 + 两层正弦波，贴奶皮图，alpha clip，双面。
- **布局契约**：根节点下放两个空节点 `tpl_moe` / `tpl_strawberry`（各自挂自定义属性 `stack_bottom` / `stack_top` / `kind`），运行时克隆它们叠放；再放 `stack_base` / `stick_tip` 空节点标定签底和签尖；签子最高点 = 最大堆叠高度 + 0.2，奶皮总高 = 最大堆叠 + 0.55。
- 用 Cycles 渲四视图（正/侧/背/3/4）做 QA，确认轮廓、贴图、光环角度都像参考图再进下一步。

### 3. 网页运行时（Three.js + GLB）

静态页：`index.html` + `style.css` + `main.js` + 本地 `vendor/`（three.module + OrbitControls + GLTFLoader + RoomEnvironment，importmap 引入，无 CDN）。

- 加载：GLB → 隐藏两个模板 → 记下 stack_bottom/top → 奶皮重新锚定到底部 pivot（便于展开动画）→ 相机 fit 到签子全长。
- 串糖葫芦：克隆模板 → 从签尖上方出现（回弹缩放）→ 旋转滑落到累计高度处（`y_i = y_{i-1} + top_{i-1} - 0.07` 重叠堆叠）→ 落地挤压回弹 + 糖色粒子。
- 粒子按口味换色：萌物淡紫金、草莓红黄绿、奶皮奶金。同时最多 3 组，`prefers-reduced-motion` 时缩短动画。
- 奶皮：从底部 pivot 展开（scaleY 0→目标），高度按当前堆叠顶+0.22 缩放。
- 完成：自动旋转 + 完成面板（再做一串 / 暂停旋转），检测招牌串给特别标题，计数存 localStorage，完成时播一声猫叫。
- 拒绝反馈：没串就点奶皮、串满第 5 颗、裹完奶皮再串——都摇按钮 + toast + 低音提示音。
- WebGL 失败兜底：加载屏显示"这台设备不支持 3D 显示"。

### 4. 页面与交互

- 背景 `linear-gradient(170deg, 浅蓝 → 浅绿)`；标题白字描边。
- 进度条 = 4 个圆点，串上后显示对应按钮小图（萌物/草莓可区分）。
- 三个按钮等宽一排（可以按 70% 缩小的尺寸），各带底色：萌物淡紫、草莓淡红、奶皮淡蓝绿（浅色奶皮图需要深一点的底衬托）。奶皮锁定态降饱和，可点态发光。
- 舞台提示气泡随状态换文案；签子旁常驻「↔ 拖动 360° 旋转」提示（完成时出现 3 秒）。
- 安全区：`env(safe-area-inset-*)` + `viewport-fit=cover`。

### 5. QA 与发布

- Playwright 多视口跑核心回路：加载 → 空签点奶皮被拒 → 草莓萌物草莓萌物 → 串满被拒 → 撤回 → 奶皮收尾 → 拖拽旋转（azimuth 变化）→ 再做一串 → 短串（1 萌物 + 奶皮）。每步截图。
- 视口：390×844、1440×900、844×390（横屏）、360×640（小屏）。横屏时按钮列换到右侧，完成面板变成右列。
- 检查：无 console 错误、无失败请求、无滚动条、标题不换行、按钮不被遮挡。
- Cycles 渲染四视图对照参考图。
- 发布为可分享的 web work（`neta work init/publish`），发布后再对线上 URL 跑一遍触控回路。

## 素材与文件布局

```
assets/
  source/    生成的白底原图 + 参考图（保留）
  cutout/    透明抠图（按钮与建模共用）
  ui/        按钮用 webp（480×480）
  textures/  Blender 用贴图（脸/头发背/奶皮/竹纹）
  model/     GLB
  audio/     背景音乐 + 完成音效
blender/     建模脚本 + .blend
qa/          Blender 渲染、按钮深底检查、页面截图、asset-metrics
index.html / style.css / main.js / vendor/
```

## 常见调参

| 症状 | 调什么 |
| --- | --- |
| 光环看着"竖"了 | torus 绕 X 的倾角减到 20–25°（让环面朝上平躺） |
| 头片轮廓有台阶感 | 增加网格列数 / 再跑几轮边界平滑 |
| 草莓太瘦 | STRAW_R、STRAW_HH 各 +0.03 |
| 奶皮盖不住整串 | sheet_h = 堆叠最大高度 + 0.55 以上 |
| 完成标题换行 | 标题只写「萌物 ×N · 草莓 ×N」，"完成一串"放 kicker 行 |
| 桌面端串太小 | fitDist 系数（0.92）微调 |