🎮 Byte Fisher 角色模板可视化指南

📏 角色比例参考

游戏像素 → 实际像素转换：
1 游戏像素 = 4 实际像素 (scale=1 时)

角色总高度: 96 游戏像素 = 384 实际像素
角色总宽度: 48 游戏像素 = 192 实际像素

🎨 角色分层图

层级 10: 天线/无人机 (最上层)
层级 9:  钓竿
层级 7:  护目镜
层级 6:  帽子/头盔
层级 5:  头部 + 躯干装饰
层级 4:  躯干 + 手臂
层级 3:  背包 + 腿部 + 靴子 (最下层)

🏗️ 角色骨架全视图

                    天线/无人机 (-20, -20)
                         |
                    ┌────┴────┐
                    │  帽子   │ (0, -40)
                    └────┬────┘
                    ┌────┴────┐
                    │  头部   │ (0, -32)
                    │ 24x24   │
                    └────┬────┘
                         |
    背包 (-24, 6)  ┌─────┴─────┐  肩膀 (12, 0)
         8x24      │   躯干    │      ↓
                   │   32x40   │   [手臂+钓竿]
                   │           │
                   └─────┬─────┘
                         |
                    ┌────┴────┐
                    │  大腿   │ (0, 32)
                    │ 24x24   │
                    └────┬────┘
                    ┌────┴────┐
                    │  小腿   │ (0, 48)
                    │ 24x24   │
                    └────┬────┘
                    ┌────┴────┐
                    │  靴子   │ (0, 56)
                    │ 32x16   │
                    └─────────┘

📐 精确坐标参考表

部件	X坐标	Y坐标	宽度	高度	锚点	图层
头部	0	-32	24	24	(0.5, 0.5)	5
帽子	0	-40	32	8	(0.5, 0.5)	6
护目镜	0	-24	28	8	(0.5, 0.5)	7
躯干	0	6	32	40	(0.5, 0.5)	4
内衣	0	6	16	32	(0.5, 0.5)	5
背包	-24	6	8	24	(0.5, 0.5)	3
左腿	-8	32	12	24	(0.5, 0)	3
右腿	4	32	12	24	(0.5, 0)	3
靴子	0	56	32	16	(0.5, 0)	3

🎯 关键测量点

顶点 (头顶):        Y = -44
眼睛高度:           Y = -32
肩膀高度:           Y = 0
腰部:               Y = 16
膝盖:               Y = 44
脚底:               Y = 64

左侧边缘:           X = -24
右侧边缘:           X = +24
中心线:             X = 0

🖼️ 装备升级对比图

靴子升级路线

Lv1: 基础鞋                Lv2: 重型靴                Lv3: 活塞靴
     ▁▁▁▁                       ▃▃▃▃                       ▅▅▅▅
     ████                       █▓▓█                       █▒▒█
                                █▓▓█                       █▓▓█
                                                           ┃┃┃┃ ← 活塞
                                                           ▔▔▔▔

Lv4: 喷射靴                Lv5: 反重力靴
     ████                       ▂▂▂▂▂▂▂▂
     █  █                       █  ◈  █ ← 悬浮装置
     ▼▼▼▼ ← 火焰               ▔▔▔▔▔▔▔▔
     🔥🔥                        ≋≋≋≋≋≋ ← 能量场

头部装备升级路线

Lv1: 基础帽                Lv2: VR护目镜              Lv3: 金色护目镜
     ▔▔▔▔▔▔                     ▔▔▔▔▔▔                     ▔▔▔▔▔▔
     ██████                     ██████                     ██████
     😐                         🕶️                          ✨🕶️✨

Lv4: 赛博眼镜              Lv5: 全息光环
     😎                          ╭─────╮
     ░░░░ ← 矩阵雨               │ ◯ ◯ │
                                 ╰─────╯
                                   ✨✨✨

钓竿升级路线

Lv1: 竹竿                  Lv2: 钢竿                  Lv3: 霓虹竿
     ━━━━━━━━                    ━━━━━━━━                    ━🌈━🌈━🌈
     ▏                          ▎                          ▏ ✨
                                ⚙️ ← 卷线器

Lv4: 等离子竿              Lv5: 量子竿
     ━💜━💜━💜                    ┄ ┄ ┄ ┄ ┄ ← 虚线
     ⚡⚡⚡                        ◉ ← 发光竿尖

📦 精灵图制作模板

基础画布设置

软件: Aseprite / Pyxel Edit
画布大小: 根据部件选择（见下表）
背景: 透明
色深: 32位 RGBA
导出格式: PNG

推荐调色板:
#050505 (黑)    #1a1a1a (深灰)  #333333 (灰)
#f0d0b0 (肤色)  #8b5a2b (棕)    #8B4513 (褐)
#39ff14 (绿)    #ff00ff (粉)    #00f3ff (青)
#fdfd00 (黄)    #ffd700 (金)    #ffffff (白)

各部件画布尺寸（实际像素）

部件	宽	高	说明
头部	96	96	居中绘制
帽子 Lv1-4	128	32	顶部对齐
帽子 Lv5	192	128	包含光环
躯干	128	160	居中
腿部	48	96	单条腿
靴子 Lv1-3	128	64	两只脚
靴子 Lv4-5	192	96	带特效
背包	32	96	单侧
无人机	64	32	独立浮动

🎬 动画帧参考

火焰动画（靴子 Lv4）

帧1:          帧2:          帧3:
  🔥            🔥🔥           🔥🔥
 🔥🔥          🔥🔥🔥         🔥🔥🔥

画布: 288x32 (96x32 × 3帧) FPS: 12 循环: 是

LED闪烁（天线 Lv3）

帧1:          帧2:
  ⚫            🔴
  ┃             ┃

画布: 64x128 (32x128 × 2帧) FPS: 2 循环: 是

✏️ 绘制步骤示例：头部

第1步：基础形状

██████
██████
██████
██████

第2步：添加五官

██████
█◯██◯█ ← 眼睛
██████
██▬▬██ ← 嘴巴

第3步：添加细节

██████
█◉██◉█ ← 高光
█▂▂▂▂█ ← 阴影
██──██

第4步：描边

┌────┐
│◉  ◉│
│▂▂▂▂│
│ ── │
└────┘

💡 制作技巧

1. 保持像素完美

❌ 避免半像素（抗锯齿）
✅ 每个像素都是完整的实心块

2. 使用轮廓线

没有轮廓:        有轮廓:
  ████            ┌──┐
  ████            │██│
  ████            │██│
  ████            └──┘

3. 考虑动画

留出2-4像素的安全边距
避免重要细节靠近边缘

4. 测试缩放

5x: 看不清细节?    调整对比度
0x: 标准大小       主要测试
0x: 放大显示       检查锯齿

🔍 常见问题

Q: 精灵图看起来模糊？

A: 确保导出时禁用了插值/平滑。在CSS中添加：

image-rendering: pixelated;

Q: 动画不播放？

A: 检查精灵图表索引配置是否正确，FPS是否设置。

Q: 颜色不匹配？

A: 使用吸管工具从现有像素艺术中提取颜色。

Q: 部件位置偏移？

A: 检查锚点设置，确保与文档中的坐标一致。

📚 推荐资源

学习资料

Lospec Palette List: https://lospec.com/palette-list
Pixel Art Tutorial: https://blog.studiominiboss.com/pixelart
Aseprite Docs: https://www.aseprite.org/docs/

工具

Aseprite (付费): https://www.aseprite.org/
Piskel (免费): https://www.piskelapp.com/
GraphicsGale (免费): https://graphicsgale.com/

🎯 快速启动清单

🤝 贡献你的设计

如果你创建了精美的角色精灵图，欢迎分享！

要求：

PNG格式，透明背景
符合上述尺寸规格
包含至少3个装备等级
提供源文件（.ase 或 .pxl）

让我们一起让 Byte Fisher 更加精致！🎮✨

Peilin Cai