tinyswords-tilemap

Tiny Swords Tilemap

使用 Tiny Swords 资源包创建精美的分层 Tilemap，正确呈现高度、阴影和动态水面效果。

设计理念：以高度讲述视觉故事

Tilemap 不只是图像网格，而是营造深度和立体感的分层构图。Tiny Swords 瓦片集采用巧妙的分层系统，让阴影和高度相互配合，在 2D 平面上营造 3D 地形的错觉。

放置瓦片前，请先考虑：

• 这片区域需要哪些高度层级？
• 玩家的视线会被引向何处？
• 阴影如何强化高度感？
• 错帧播放的泡沫动画是否让水面显得生动？

核心原则：

1. 图层营造深度：每个高度层级都会增加阴影层和高地层。层层堆叠，构建视觉高度。
2. 阴影衬托高度：在可行走表面下方一个瓦片处添加阴影，让悬崖更显真实。
3. 动画打破单调：让水面泡沫精灵从不同帧开始播放，避免产生“壁纸效应”。
4. 颜色区分层级：为不同高度使用不同的地形颜色，帮助玩家迅速看懂地图。

瓦片规格

元素	尺寸	备注
标准瓦片	64x64 px	所有地形的基础网格单位
阴影精灵	128x128 px	放置在 64x64 网格上，并覆盖相邻瓦片
动画帧	64x64 px	精灵图中的水面泡沫帧

六种地形组件

1. 背景颜色 - 水面的背景填充（最底层）
2. 水面泡沫 - 地形与水面交界处的动态波浪
3. 平坦地面 - 与水面相邻的最低可行走地形
4. 阴影 - 放置在高地区域下方的深度精灵
5. 高地 - 带有悬崖边缘的抬高地形
6. 阶梯 - 连接不同高度层级的通道

图层顺序（从下到上）

┌─────────────────────────────────────────┐
│  Elevated Ground (Level N)              │  ← Repeat for each
│  Shadow (Level N)                       │    elevation level
├─────────────────────────────────────────┤
│  Elevated Ground (Level 2)              │
│  Shadow (Level 2)                       │
├─────────────────────────────────────────┤
│  Elevated Ground (Level 1)              │
│  Shadow (Level 1)                       │
├─────────────────────────────────────────┤
│  Flat Ground                            │
│  Water Foam (animated)                  │
│  BG Color (water background)            │
└─────────────────────────────────────────┘

阴影定位

阴影可以营造高度错觉。将每个阴影精灵放在其对应的可行走高地下方一个 64x64 瓦片处。

Grid visualization:
    ┌────┬────┬────┐
    │    │WALK│    │  ← Elevated walkable area
    ├────┼────┼────┤
    │    │SHAD│    │  ← Shadow positioned here (one tile down)
    └────┴────┴────┘

128x128 的阴影精灵放置在 64x64 网格上，因此可以覆盖相邻区域，营造柔和的深度过渡。

水面泡沫动画

水面泡沫是动态的，需要错开起始帧才能看起来自然。

实现模式：

// Each foam sprite instance starts at a random/offset frame
foamSprites.forEach((sprite, index) => {
  sprite.animationOffset = index % totalFrames;
  // OR
  sprite.animationOffset = Math.floor(Math.random() * totalFrames);
});

这样可以避免所有水面同步动画、产生“呼吸”效果。

阶梯配置

根据相邻地形，阶梯连接高度层级的方式有两种：

相邻地形	阶梯组件	说明
可行走地面	单个中央组件	简单连接
悬崖边缘	两个组件（顶部 + 底部）	带有悬崖过渡的完整阶梯

地形颜色变体

共有五种地形颜色（从 Tilemap_color1.png 到 Tilemap_color5.png）。为不同高度层级使用不同颜色，以增强视觉区分度：

Level 3: color5 (purple/dark)
Level 2: color3 (brown)
Level 1: color1 (green)
Flat:    color2 (sand/beach)

有意搭配颜色即可，无需遵循固定顺序；相邻层级之间的对比能提升可读性。

应避免的反模式

平面分层：将所有地形放在同一个图层上

• 不好之处：缺少深度，看起来像一张平面纹理
• 更好的做法：使用完整的图层结构并添加阴影

同步水面动画：所有泡沫精灵都从同一帧开始

• 不好之处：会产生不自然的“脉动”效果
• 更好的做法：错开动画起始帧

阴影错位：阴影紧贴高地正下方或放在其旁边

• 不好之处：破坏高度错觉
• 更好的做法：将阴影放在可行走表面正下方一个瓦片处

单调的高度层级：所有层级使用相同的地形颜色

• 不好之处：难以通过视觉辨别地图深度
• 更好的做法：为每个高度层级使用不同颜色

忽略悬崖类型：未根据环境选择合适的悬崖边缘

• 不好之处：地形交界处会出现视觉断层
• 更好的做法：水边使用朝向水面的悬崖，低地附近使用朝向地面的悬崖

变化指导

地图应根据场景变化：

• 岛屿地图：增加水面泡沫，减少海拔层级
• 山地地图：增加多个海拔层级，减少水域
• 混合地形：融合所有元素，并丰富色彩变化

避免总是采用：

• 所有内容始终使用 color1
• 每次都恰好使用 2 个海拔层级
• 阶梯位置模式完全相同
• 阴影密度一致

资源路径参考

完整的项目文件路径请参阅 references/asset-paths.md。

请记住

Tiny Swords 瓦片集专为分层景深而设计。每一道阴影、每个泡沫动画偏移量、每一种颜色选择，都能让地图更鲜活、更有立体感。请相信图层系统——正确使用时，它经过精心设计，能够打造出精美的效果。