🎨 Byte Fisher 角色编辑器使用指南

📦 两种使用方式

1. 游戏内集成编辑器（Terminal内）

如何访问:

启动游戏
点击右上角的 TERMINAL 按钮
在Terminal界面点击 角色编辑器 标签页

特点:

✅ 无需额外工具，直接在游戏内编辑
✅ 实时预览角色效果
✅ 方便快速调整
⚠️ 功能相对基础

2. 独立本地编辑器（推荐）

文件位置: character-editor-standalone.html

如何使用:

双击 character-editor-standalone.html 文件
浏览器会自动打开编辑器
无需安装任何软件，纯前端运行

功能特点:

✅ 完整的像素艺术工具集
✅ 多图层支持
✅ 撤销/重做历史记录
✅ 导入图片自动像素化
✅ 批量导出PNG
✅ 快捷键支持
✅ 实时预览
✅ 专业调色板（30种颜色）
✅ 更大的画布和更友好的UI

🎨 独立编辑器完整功能

工具栏

工具	快捷键	说明
✏️ 笔	1	绘制像素
🧹 擦	2	擦除像素
🪣 填	3	填充区域（洪填充算法）
💉 取	4	取色器（从画布选取颜色）
↶ 撤销	Z / Ctrl+Z	撤销上一步操作
↷ 重做	Y / Ctrl+Y	重做操作
🗑️ 清空	-	清空当前图层
↔️ 水平翻转	-	水平镜像翻转
↕️ 垂直翻转	-	垂直镜像翻转

画布控制

缩放: 4x - 32x 可调（滑块控制）
网格: 按 G 或勾选复选框切换显示
拖拽: 按住 Space + 鼠标拖动（未来功能）

调色板

预设颜色: 30种精选赛博朋克配色

基础灰度: 9种从黑到白
鲜艳色: 红、橙、黄、绿、青、蓝、紫、粉
特殊色: 霓虹绿 #39ff14、霓虹青 #00f3ff、金色 #ffd700 等

自定义颜色: 使用颜色选择器输入任意颜色

图层系统

✅ 多图层支持（未来功能扩展）
✅ 图层预览缩略图
✅ 图层切换
✅ 新建图层

部件列表

基础部件 (5个):

头部 (24×24px)
躯干 (32×40px)
衬衫 (16×32px)
大腿 (12×24px)
小腿 (12×24px)

装备部件 (14个):

头部装备 (5级):

Lv1: 帽子 (32×8px)
Lv2: VR眼镜 (28×8px)
Lv3: 金色护目镜 (28×8px)
Lv4: 赛博眼镜 (28×8px)
Lv5: 光环 (48×32px)

靴子 (5级):

Lv1: 基础鞋 (32×8px)
Lv2: 重型靴 (32×16px)
Lv3: 活塞靴 (48×24px)
Lv4: 喷射靴 (48×24px)
Lv5: 反重力靴 (72×24px)

背包 (4个):

Lv2: 背包 (8×24px)
Lv3: 天线 (16×64px)
Lv4: 卫星 (24×32px)
Lv5: 无人机 (16×8px)

导入/导出

导出单个部件:

选择要导出的部件
点击 💾 导出当前部件 PNG
文件名格式: 部件id_宽x高.png

批量导出:

点击 📦 导出全部部件 ZIP
一次性导出所有已编辑的部件
（需要引入 JSZip 库，当前为占位功能）

导入图片:

点击 📂 导入图片
选择任意PNG/JPG图片
自动缩放并像素化到当前部件尺寸
适合从参考图快速转换

💡 使用技巧

像素艺术绘制技巧

先画轮廓
- 使用深色画出外轮廓
- 保持线条简洁
填充基础色
- 使用填充工具快速填充大块区域
- 选择中间色调作为基础
添加阴影和高光
- 阴影用更深的颜色
- 高光用更亮的颜色
- 只需2-3个明度级别
细节修饰
- 使用笔刷工具添加细节
- 不要过度细节化，保持像素风格
使用对称
- 绘制一半后使用水平翻转
- 然后手动调整细节

配色建议

赛博朋克风格:

主色: 霓虹青 #00f3ff + 霓虹粉 #ff00ff
辅色: 霓虹绿 #39ff14 + 紫色 #9333ea
底色: 深灰 #1a1a1a + 中灰 #555555

科技感:

主色: 蓝色系 #0099ff #00ffff
金属感: 灰色系 + 白色高光
发光效果: 使用对比色边缘

尺寸参考

头部: 24×24px - 足够细节表现五官
躯干: 32×40px - 可以画夹克、装饰
装备: 尺寸随等级增加，高级装备更大更复杂

🚀 工作流程示例

创建一套完整角色

第1步: 规划

确定角色主题（科技、朋克、未来战士等）
选择主色调（2-3个主要颜色）
参考赛博朋克美术风格

第2步: 绘制基础部件

头部 - 脸部特征
躯干 - 身体轮廓
衬衫 - 服装细节
腿部 - 裤子/腿部装甲

第3步: 绘制装备（按等级）

Lv1-2: 简单基础装备
Lv3-4: 添加科技细节、发光元素
Lv5: 复杂特效、更大尺寸

第4步: 导出

导出所有部件PNG
按照规格说明组织文件
在游戏中测试效果

📁 文件组织建议

your-character-art/
├── base/
│   ├── head_24x24.png
│   ├── torso_32x40.png
│   ├── torso_detail_16x32.png
│   ├── leg_upper_12x24.png
│   └── leg_lower_12x24.png
├── headgear/
│   ├── headgear_lv1_32x8.png
│   ├── headgear_lv2_28x8.png
│   ├── headgear_lv3_28x8.png
│   ├── headgear_lv4_28x8.png
│   └── headgear_lv5_48x32.png
├── boots/
│   └── ...
└── backpack/
    └── ...

🔧 技术说明

编辑器技术栈

纯 HTML + CSS + JavaScript
Canvas API 2D 绘图
无任何外部依赖
完全离线可用

浏览器兼容性

✅ Chrome/Edge 90+
✅ Firefox 88+
✅ Safari 14+
✅ 任何支持 HTML5 Canvas 的现代浏览器

性能

流畅的 60 FPS 绘制
低内存占用
支持撤销历史记录（最多50步）
即时导出PNG

❓ 常见问题

Q: 如何在游戏中使用导出的PNG？

A: 参考 SPRITE_SPECIFICATIONS.md 文档，使用 SpriteManager 加载精灵图。

Q: 可以导入AI生成的图片吗？

A: 可以！导入后会自动像素化到部件尺寸。但建议手动调整以获得最佳像素艺术效果。

Q: 为什么高级装备尺寸更大？

A: 高级装备需要更多细节和特效，较大的尺寸提供了更多绘制空间。

Q: 可以改变部件尺寸吗？

A: 当前不建议。部件尺寸已经过精心设计以匹配游戏渲染系统。

Q: 如何实现发光效果？

A: 使用明亮的颜色（如 #00f3ff）绘制，游戏会自动添加发光渲染。

🎯 下一步

测试编辑器: 双击 character-editor-standalone.html 开始创作
阅读规格: 查看 SPRITE_SPECIFICATIONS.md 了解详细规格
参考模板: 查看 CHARACTER_TEMPLATE_GUIDE.md 的视觉指南
创作角色: 开始设计你的赛博角色！

📝 更新日志

v1.0 (2026-01-29)

✅ 完整的像素编辑器
✅ 19个可编辑部件
✅ 30色调色板
✅ 导入/导出PNG
✅ 撤销/重做历史
✅ 图层系统
✅ 快捷键支持
✅ 实时预览

🎮 Happy Creating! 开始创作你的赛博角色吧！

Peilin Cai