色彩绽放AI · Claude 3.5

核心玩法循环与机制

Color Bloom 是一款为儿童设计的休闲填色游戏，通过简单的点击填色机制提供令人满足的创作体验。

逐帧玩法

1. 玩家在屏幕中央看到一幅黑白线稿图（动物或花朵）
2. 屏幕左侧出现一个含 10 种鲜艳颜色的调色板
3. 玩家点按某个颜色以选中它（选中的颜色会获得边框或光晕等视觉指示）
4. 玩家点按图中不同区域，用选中的颜色填充它们
5. 每个区域可随意反复上色——没有错误，只有创意选择
6. 满意后，玩家点按"下一张"按钮以查看下一幅图
7. 播放一段简短的庆祝动画，展示完成的作品
8. 出现一幅新的未上色图，循环继续

进程与吸引力

• 无失败状态：这是纯粹的创作体验，没有错误答案
• 无尽模式：图片在可用合集中循环，允许无限填色
• 即时满足：每次点按都立即为区域填色，提供令人满足的反馈
• 合集多样性：10 幅不同的图片（5 种动物、5 种花朵）保持体验新鲜
• 重玩性：玩家每次都能以不同方式为同一幅图上色

吸引力所在

• 创作自由：儿童可以毫无评判地表达自我
• 令人满足的反馈：对每次点按都有即时视觉响应
• 愉悦的美学：明亮的色彩与可爱的主题营造出欢乐氛围
• 放松的节奏：没有时间压力或计分，让人无压力地游玩
• 契合年龄：简单的机制非常适合幼童

起步范围

初始实现应包含：

必备（首个版本）：

• 调色板中 10 种鲜明、鲜艳的颜色
• 5 幅动物图（蝴蝶、猫、大象、鱼、兔子）
• 5 幅花朵图（向日葵、郁金香、玫瑰、雏菊、莲花）
• 带清晰视觉反馈的点击选色机制
• 带泛洪填充的点击填色机制
• 用于前进到下一幅图的"下一张"按钮
• 前进时的简单庆祝动画（闪光或彩纸屑）
• 图片以随机顺序呈现以保持多样性
• 清晰、粗犷的线稿，便于儿童在其中填色

可后续添加：

• 保存／分享完成的作品
• 撤销／重做功能
• 混色或自定义颜色
• 带渐变的更复杂图片
• 填色动作的音效
• 背景音乐
• 查看过往作品的画廊
• 可添加到图片的贴纸或图章

游戏视角

固定画面 视角，所有 UI 元素一次性可见：

• 调色板固定于左侧（纵向排列）
• 大面积填色区位于中央（主焦点）
• "下一张"按钮位于底部
• 无需滚动——一切都容纳于 720×1280 视口内

游戏世界与关卡设计

屏幕布局（720×1280）

调色板（左侧：0-120px 宽）

• 含 10 个颜色按钮的纵向条带
• 每个按钮：96×96 像素（利于触摸）
• 颜色纵向堆叠，间隙较小
• 选中的颜色带白色边框或光晕效果
• 位置便于左手拇指触及

填色画布（中央：120-720px 宽）

• 用于放置图片的大面积区域（约 600×900 像素）
• 图片在此空间内居中
• 白色或浅粉彩背景
• 图片缩放至舒适容纳并带内边距

下一张按钮（底部）

• 居中按钮（200×80 像素）
• 位于底部（y: 约 1180px）
• 明亮、诱人的颜色（绿色或彩虹渐变）
• 清晰的"下一张"文字或箭头图标

图片合集

动物（5 幅）：

1. 蝴蝶 —— 带鲜明分区的对称翅膀
2. 猫 —— 坐姿，简单的身体分区（脸、身体、尾巴、爪子）
3. 大象 —— 侧视，含鼻子、耳朵、身体、腿
4. 鱼 —— 侧视，含鱼鳍、身体、尾巴分区
5. 兔子 —— 坐姿，含长耳朵、身体、蓬松尾巴

花朵（5 幅）：

1. 向日葵 —— 大花心，花瓣向外辐射
2. 郁金香 —— 简单的杯状造型，带茎与叶
3. 玫瑰 —— 层叠花瓣，带茎与叶
4. 雏菊 —— 花心配简单花瓣与茎
5. 莲花 —— 盛开的层叠花瓣

每幅图应具备：

• 8-15 个鲜明的可填色区域
• 清晰、粗厚的黑色轮廓（5-8 像素）
• 简单、可辨识的形状
• 契合儿童的比例（略显可爱／卡通）

调色板

10 种颜色应鲜艳且鲜明：

1. 红 —— 明亮樱桃红（#FF3333）
2. 橙 —— 暖橙（#FF9933）
3. 黄 —— 阳光黄（#FFDD33）
4. 绿 —— 草绿（#33DD33）
5. 蓝 —— 天蓝（#3399FF）
6. 紫 —— 宝紫（#9933FF）
7. 粉 —— 泡泡糖粉（#FF66CC）
8. 棕 —— 巧克力棕（#996633）
9. 黑 —— 纯黑（#000000）
10. 白 —— 纯白（#FFFFFF）

编辑模式设计

编辑模式允许用户在维持核心简洁性的同时自定义游戏体验。

可编辑属性

调色板自定义：

• 用户可修改 10 种颜色中的任意一种
• 每个颜色槽显示一个颜色选取器
• 颜色在调色板中即时更新
• 可用重置按钮恢复默认颜色

图片合集：

• 用户可添加自己的线稿图（须为黑白且分区清晰）
• 用户可从轮换中移除图片
• 用户可重新排序哪些图片先出现
• 至少需要 3 幅图片以防止空游戏

UI 自定义：

• 画布区域的背景色／图案
• "下一张"按钮的文字与颜色
• 庆祝动画风格（闪光、彩纸屑、爱心、星星）

约束

• 调色板必须始终恰好有 10 种颜色（不多不少）
• 颜色须足够鲜明以便区分（最低对比度检查）
• 至少 3 幅图片须处于活跃轮换中
• 用户上传的图片须校验格式是否正确（白色／透明背景上的黑色轮廓）
• 图片须容纳于画布区域内（过大则自动缩放）

编辑模式界面

处于编辑模式时：

• 调色板在每种颜色上显示小编辑图标
• 图片列表以缩略图及添加／移除按钮呈现
• 用于 UI 自定义的设置面板
• 用于保存前测试更改的"预览"按钮
• 每个板块的"重置为默认"选项

控制设计

Color Bloom 采用为触摸优化的简单点击式控制，并完整支持桌面鼠标。

移动端控制（主要）

选色：

• 点按左侧调色板中的任意颜色按钮以选中它
• 选中的颜色显示视觉反馈（白色边框、略微放大）
• 无需拖动——单次点按即可选中

填色：

• 点按图中任意区域，用选中的颜色填充它
• 每次点按填充一个连通区域（泛洪填充算法）
• 点按已上色的区域会将其改为新选中的颜色
• 无拖动或涂抹——只需点按填充

导航：

• 点按底部的"下一张"按钮以前进到下一幅图
• 无需滑动手势

触摸处理：

• 追踪触摸 ID 以防止意外的多点触摸干扰
• 忽略始于 UI 元素（调色板、下一张按钮）的触摸对画布的影响
• 触摸时提供即时视觉反馈（填充前略微高亮）

桌面端控制（次要）

鼠标控制：

• 点击颜色按钮以选中（同点按）
• 点击图片区域以填充（同点按）
• 点击"下一张"按钮以前进
• 交互元素上的悬停效果以便发现

键盘（可选增强）：

• 数字键 1-0 选择颜色 1-10
• Enter／空格前进到下一幅图
• 核心玩法并非必需

控制实现说明

• 无需复杂输入——纯点按／点击界面
• 无摇杆、无拖动、无多点触摸手势
• 所有交互元素最小 96×96 像素（利于触摸）
• 所有交互均有清晰的视觉反馈
• 阻止已用输入的默认浏览器行为
• 窗口失焦时清除输入状态

美术风格与视觉主题

Color Bloom 采用愉悦、契合儿童的美术风格，亲切而不令人生畏。

整体美学

• 风格：简洁、带粗犷轮廓的卡通线稿
• 氛围：明亮、愉悦、活泼、鼓舞人心
• 目标受众：3-8 岁儿童，但老少皆宜

视觉元素

线稿图：

• 粗犷的黑色轮廓（5-8 像素厚）
• 简单、可辨识的形状
• 略带风格化／可爱的比例（动物的大眼睛、友善的表情）
• 清晰的区域分隔以便上色
• 白色或透明背景
• 高对比度以便清晰可见

调色板：

• 吸引儿童的鲜艳、饱和的颜色
• 颜色显示为实心圆或圆角方块
• 选中的颜色带白色边框与轻微光晕
• 以悦目的类彩虹顺序纵向排列

UI 元素：

• 所有按钮与面板均带圆角
• 用于营造纵深的柔和阴影
• "下一张"按钮采用活泼字体（圆润、友善）
• 粉彩或浅中性色背景（奶油色、浅蓝或柔黄）

庆祝动画：

• 前进时的彩色彩纸屑或闪光
• 简短（1-2 秒）且令人愉悦
• 不遮挡完成的作品
• 对完成一幅图的正向激励

色彩搭配

• 背景：柔和奶油色（#FFF9E6）或浅天蓝（#E6F3FF）
• UI 点缀：温暖、诱人的颜色
• 轮廓：纯黑（#000000）
• 阴影：细微、柔和（#00000020）

资产尺寸

• 线稿图：800×800 像素（缩放以适应画布）
• 颜色按钮：96×96 像素
• 下一张按钮：200×80 像素
• 图标：48×48 像素

一致性说明

• 所有线稿应具有相同的轮廓厚度
• 所有动物与花朵应具有相似的风格化程度
• 调色板应在所有屏幕间保持一致
• UI 元素应共享相同的圆角半径（16px）