TileSet

精灵图图集。所有 tile 从一张大图切割。

规范

• Tile 尺寸： 32×32 px
• 图集尺寸： 1536×1024 px（48 列 × 32 行）
• 格式： PNG + PixiJS Rectangle 切割
• 路径： /sprites/tileset.png
• Padding： 2px
• Extrude： 1px
• 帧率： FPS 15（全局统一）

布局

左列 (0~512):     地形 → 道路 → 自然 → 水域 → 道具
中列 (512~1024):  建筑 → 室内 → 特效 → 小地图
右列 (1024~1536): 角色 → 表情 → 载具 → UI → 图标

分类

分类	坐标范围	内容
Terrain	cols 0-7, rows 1-2	草地/泥地/石板/沙地
Road	cols 0-7, rows 7-8	沥青/人行道/斑马线
Nature	cols 0-7, rows 13-15	树木/灌木/花朵/蘑菇
Water	cols 0-7, rows 19-22	水面/沙滩/灯塔
Props	cols 0-7, rows 25-28	椅子/桌子/围栏/路灯
Buildings	cols 0-32, rows 14-28	17 栋建筑（96×128）
Interior	cols 13-31, rows 19-22	地板/墙壁/家具
Characters	cols 35-47, rows 1-9	四方向 × 8 帧角色
Icons	cols 35-47, rows 25-28	心/盾/剑/币/星

渲染层级

地形瓦片 → 道路瓦片 → 水域瓦片 → 自然装饰 → 建筑 → 道具 → 角色/载具 → 动态特效 → UI层

切割配置

// src/utils/spriteConfig.ts
export const TILE = 32;
export const ATLAS_W = 1536;
export const ATLAS_H = 1024;
export const TILESET_PATH = '/sprites/tileset.png';

每个 sprite 用 PIXI.Rectangle(x, y, w, h) 定义位置。

---

📐 详细图集规范见 Design — TileSet Spec 📦 资源管线流程见 Design — Asset Pipeline