HexTrails/assets/GENERATION.md

美术素材记录

本文件保留素材迭代记录，当前使用清单以 Design.md 和下方“当前图标与面板”章节为准。生成素材使用内置 image_gen；原始 PNG 保留在工作区，图集使用源矩形采样，与 Cocos SpriteFrame 的用法一致。

资源

• tiles-candy-v2.png：1254×1254，RGBA，四种厚边塑料六角棋子。箭头独立绘制，方向变化不会旋转光照。
• background-candy-v2.png：历史竖屏背景，当前已改用纯色背景。
• logo-candy-v2.png：历史透明立体标题，当前游戏顶部不显示 Logo。
• ../src/sprites.js：四个棋子的源矩形及顶面锚点，可转换为 Cocos SpriteFrame。

设计借鉴休闲手游的鲜艳玩具材质、紧凑关卡 HUD、大触摸按钮与底部道具栏。参考产品：Voodoo Block Jam 官方商店页面。未使用现有游戏的贴图、品牌或 UI 截图。

最终提示词

tiles

Use case: stylized-concept. Asset type: production mobile casual puzzle GAME SPRITE ATLAS, transparent background. Create ONE 1024x1024 transparent PNG sprite sheet, clean 2 by 2 grid of four identical size hexagonal game tokens, centered respectively at (256,256), (768,256), (256,768), (768,768). Each token occupies at most 400x400 pixels, never crosses its 512px grid cell. Tokens are flat-top regular hexagons: sharp left/right points, horizontal upper and lower edge, with softly rounded corners. Top face viewed straight overhead, visually undistorted regular hexagon; thick extruded lower side wall visibly projects DOWN by 45 pixels, like a premium chunky plastic toy button. Strong broad bevel rim, softly domed smooth face, beautiful soft plastic specular highlights from upper left, subtle ambient occlusion in side wall. Four colors: top left electric sky blue, top right candy coral pink, bottom left golden apricot orange, bottom right violet purple. Same geometry and fixed upper-left lighting for all four. Center faces totally blank, NO arrow, no text, no number, no symbol. White arrows will be drawn by game code. Style: polished approachable 3D casual mobile puzzle game art, playful glossy toy assets at quality of leading mobile casual game studios. TRUE transparent alpha around all tokens, no checkerboard illustration, no background panel, no ground plane, no floor. Keep plenty of transparent margin, crisp silhouette. This is a usable sprite atlas, not a UI mockup.

background

Use case: stylized-concept. Asset type: portrait casual mobile puzzle game BACKGROUND, production asset. A very polished soft 3D toy-world background with cool blue-lavender colors. Portrait 1024x1536. Central 85 percent of the canvas is beautifully uncluttered pale periwinkle gradient, near-white lavender in center, slightly richer lavender along edges. ONLY at very outer edges and corners, a few softly blurred chunky pastel plastic hexagons, small fluffy cloud puffs, rounded abstract pebble forms in blue, lilac, and peach. Gentle upper-left studio lighting, subtle magical floating atmosphere, rich yet calm rendered material. Design for a colorful hypercasual puzzle game, with strong mobile game character, not a website. Most central space will be overlaid by interactive game board and UI. No characters, no board, no buttons, no tiles in center, NO text, NO logos, no watermarks, no fake UI controls. Full bleed vertical background image.

logo

Use case: logo-brand. Asset type: transparent title-logo sprite for a polished colorful 3D casual mobile puzzle game. Exact text: "HEX" on first line and "TRAILS" on second line. Wide compact two-line stacked lettering, thick rounded playful block capitals, bold white fronts with light ice-blue bevels, saturated periwinkle-blue extruded sides, thin deep-indigo outline, soft dimensional shadow. Attractive mobile puzzle game title, legible at small 160px width. Letters slightly bouncy but orderly. Add one small glossy blue hexagonal toy token subtly tucked behind upper-right of HEX; no other symbols. Fully transparent background, no rectangle, no checkerboard. Square 1024x1024 image, logo centered, wide composition filling 85% width and 65% height, generous alpha margins, no watermark. Consistent friendly premium toy aesthetic with blue, purple, pink and orange game tokens. Original branding; do not copy any existing game logo.

V3：平滑棋子与图片 UI（2026-09-08）

使用内置 image_gen.imagegen 生成；完整初始提示词见 prompts-v3.json。PNG 原图未经脚本重绘或裁切；网页和 Cocos 使用 SpriteFrame 矩形采样。

• tiles-candy-v3.png ← exec-069fc427-2abf-414e-961c-6c9f2e204a90.png
• ui-icons.png ← exec-817387b2-7cd4-4085-bc70-a0b63f39ba6b.png
• board-tray.png ← exec-6307d99d-cd3f-4b01-b982-6aaec1bf5424.png
• ui-panels.png ← exec-1b7c96a8-0445-4807-b17c-e7a2bc173dc7.png

面板编辑提示词：

Edit this exact 1024x1536 sprite sheet. Preserve the six rounded button shapes, colors, positions and sizes exactly. REMOVE ALL background and ALL colored glow outside the six buttons. Real fully transparent alpha=0 everywhere outside their rounded silhouettes, including between them. No dark backdrop, no gradient background, no ambient glow, no shadows outside buttons. Buttons themselves fully opaque. Clean production transparent PNG UI atlas.

该版本生成器未完全移除外部光晕，当时通过内部矩形采样使用；当前已替换为 token 输出的纯色面板，不再引用这些旧面板和旧图标。另一次无参考图尝试仍有光晕，未采用。

V4：严格顶视角（2026-09-08）

内置 image_gen 生成 tiles-candy-v4.png，完整提示词见 prompt-v4.txt。源图 exec-6aa596e4-1074-4c02-96a0-3c4e73457664.png 为 1347×1167；未修改原始像素。运行时 Sprite 显示宽高比固定为 2:√3，中心锚点为 (0.5,0.5)，半径为格子半径的 0.985；网页与 Cocos 共用参数。取消圆形底盘和底格侧面厚度。

V6：明快哑光色（2026-09-08）

内置 image_gen 生成 tiles-matte-v6.png，完整提示词见 prompt-v6.txt。采样原图 exec-a36f3ce3-18ba-4bf3-a354-a183dd970cf9.png，1347×1167。湖蓝、蜜桃粉、杏黄、柔紫，小圆角，无侧面厚度。替代未采用的灰暗 V5。背景改为暖米色纯色 #e2ddd2。

V7：提高纯度和背景对比（2026-09-08）

内置 image_gen 生成 tiles-matte-v7.png，完整提示词见 prompt-v7.txt。原图 exec-e756eb74-154c-4712-8705-6f044e0dc5b5.png，1293×1217，未经脚本修改像素。纯蓝、玫粉、橙黄、紫色，提高饱和度；保留哑光和小圆角。裁切参数由网页和 Cocos 共用。

边缘杂点处理

两次 image_gen 清理尝试分别生成了不透明棋盘格和仍有杂点的边缘，均未接入。最终继续使用 V7 的内部干净色块；tileSample 只采样中央 20%，roundedHex 在网页和 Cocos 中提供一致的渲染遮罩。源 PNG 未做脚本像素修改。此方案修复游戏显示，不代表原始整张 PNG 的边缘已被清理。

最终内部色块取自清理版 tiles-matte-clean-v8.png（RGB，1293×1216），原图外围有不透明棋盘格，但只采样中央颜色区域并施加轮廓遮罩，保证内部完全不透明且外围无杂点。V7 内部 alpha 也存在不均匀，故不再使用 V7 作为采样来源。

当前图标与面板（2026-09-08）

用户选定的扁平图标使用内置 image_gen.imagegen 文生图模式生成，无参考图片。返回源图 exec-64bcb2ee-fa31-48f9-9a7e-3e2c8c327520.png 为 1254×1254；逐字节复制为 ui-icons-generated.png。提示要求的 1024×1024 是请求尺寸，实际渲染与裁切采用返回尺寸。当前不引用此前代码重绘的 ui-icons-flat.png。

完整生成提示词：

Flat minimal game UI icon atlas, 1024x1024, precise 4 columns x 4 rows of equal 256px cells. Each icon centered EXACTLY in its own cell with balanced optical weight, bounds maximum 160x160. TRUE transparent alpha background, no checkerboard. Monochrome SOLID WHITE icons, clean thick consistent vector-like silhouettes with subtly rounded line joins. NO 3D, no shine, no bevel, no outlines, no shadow, no glow, no gradients, no noise. Row1: gear, four-square grid, left chevron, X close. Row2: counterclockwise circular arrow, clockwise circular arrow, undo bent left arrow, restart circular arrow. Row3: lightbulb, five-point star, pencil, right-facing play triangle. Row4: straight up arrow, eraser, smooth S curve, regular hexagon. Exactly sixteen independent icons. No buttons or panels, no text.

网页与 Cocos 共用 src/ui-skin.js 中按主图形边界测量的正方形裁切，等比居中显示，不做颜色滤镜或造型替换。原 PNG 未做像素清理，透明区仍可能有边缘噪点；当前裁切以实际 UI 可见效果验收。

ui-surfaces.png 是由 scripts/build-design.mjs 直接按语义颜色 token 输出的 416×32 纯色 PNG，含 13 个 32×32 色块。它是确定性颜色数据资产，不属于生成图片，也没有修改生成图标。颜色规范见 ../Design.md，数值来源为 ../src/design-tokens.js。