建筑精灵规范

用 Agnes AI 生成建筑素材，按类别组织，每个地点一张专属图。

文件夹结构

public/assets/tiles/buildings/
├── residential/          # 住宅类
│   ├── house_a.png       # 通用住宅 A
│   ├── house_b.png       # 通用住宅 B
│   ├── house_c.png       # 通用住宅 C
│   ├── inn.png           # 旅店
│   └── home.png          # 家
├── commercial/           # 商业类
│   ├── shop.png          # 通用商店
│   ├── tavern.png        # 酒馆
│   ├── herb_shop.png     # 药草铺
│   ├── tailor.png        # 裁缝店
│   └── market.png        # 市集
├── public/               # 公共类
│   ├── building.png      # 通用公共建筑
│   ├── plaza.png         # 广场
│   ├── temple.png        # 神殿
│   ├── library.png       # 图书馆
│   ├── watchtower.png    # 瞭望塔
│   └── cemetery.png      # 墓地
├── industrial/           # 工业类
│   ├── building.png      # 通用工业建筑
│   └── workshop.png      # 锻造坊
└── nature/               # 自然/农业类
    ├── props.png         # 自然道具
    ├── forest.png        # 林间空地
    ├── farm.png          # 农场
    └── dock.png          # 码头

命名规范

{类别前缀}_{变体名}.png

类别前缀：residential, commercial, public, industrial, nature
变体名：小写下划线，描述性名称

变体命名示例

residential/house_a.png     # 住宅变体 A
residential/house_b.png     # 住宅变体 B
commercial/tavern.png       # 酒馆（唯一）
public/temple.png           # 神殿（唯一）

尺寸规范

建筑类型	尺寸 (px)	尺寸 (tiles)	备注
住宅	64×96	2×3	小型民宅
商业	96×128	3×4	店铺、酒馆
公共	96×128	3×4	图书馆、神殿
工业	96×96	3×3	锻造坊、仓库
自然	64×64	2×2	农场、码头

特殊尺寸

广场 (plaza)：128×128 (4×4) — 开放空间，无建筑主体
林间空地 (forest)：96×96 (3×3) — 以树木为主

Agnes AI 生成规范

通用 Prompt 前缀

每次生成建筑时都带上：

Dark pixel art style, top-down perspective, low saturation, muted dark tones,
clean pixel edges, no anti-aliasing, no blur, inspired by Stardew Valley,
dark blue-black background palette (#0b1220), transparent background PNG,
pixel perfect, game asset

各类建筑 Prompt 模板

住宅类

{通用前缀}

Cozy wooden cabin, 64x96 px, warm light from windows,
thatched roof, small garden fence, flower box,
pixel shadow below, warm brown wood tones (#8b5a2b)

商业类

{通用前缀}

Medieval tavern building, 96x128 px, two-story,
hanging sign, warm interior glow from door,
stone ground floor, wooden upper floor,
pixel shadow below, warm amber lighting

公共类

{通用前缀}

Ancient stone temple, 96x128 px, tall columns,
mystical blue glow from entrance, ivy on walls,
pixel shadow below, stone grey with blue accents

工业类

{通用前缀}

Blacksmith workshop, 96x96 px, stone forge,
chimney with smoke, anvil outside, wooden door,
pixel shadow below, dark metal and stone tones

自然类

{通用前缀}

Small farmstead, 64x64 px, wooden fence,
crop rows, scarecrow, small barn,
pixel shadow below, earthy green and brown tones

Prompt 技巧

技巧	说明
`pixel perfect`	防止模糊伪像素
`transparent background`	方便叠加到地图
`game asset`	让 AI 理解这是游戏素材
`top-down perspective`	统一俯视角
`pixel shadow below`	建筑底部有投影
指定色值	`#0b1220` 背景、`#8b5a2b` 木材
指定尺寸	`64x96 px` 等

Agnes API 调用

生成单张建筑

bash

curl https://apihub.agnes-ai.com/v1/images/generations \
  -H "Authorization: Bearer $AGNES_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "agnes-image-2.0-flash",
    "prompt": "Dark pixel art tavern building, 96x128 px, top-down perspective, medieval two-story, hanging sign, warm interior glow, stone ground floor, wooden upper floor, pixel shadow below, transparent background, pixel perfect, game asset, inspired by Stardew Valley, low saturation, muted dark tones",
    "size": "1024x1024",
    "extra_body": {
      "response_format": "url"
    }
  }'

生成后处理

// 1. 下载图片
// 2. 裁剪到目标尺寸（如 96×128）
// 3. 去除背景（如果不是透明的）
// 4. 保存到对应文件夹
// 5. 上传到 R2

图集打包

每个类别生成完后，用 TexturePacker 打成图集：

residential/
├── residential.png    # 合并图集
├── residential.json   # 帧数据
└── (原始单图保留备用)

TexturePacker 设置

json

{
  "format": "pixijs",
  "textureFormat": "png",
  "maxWidth": 1024,
  "maxHeight": 1024,
  "padding": 2,
  "extrude": 1,
  "allowRotation": false,
  "detectIdentical": true
}

spriteConfig.ts 映射

// src/utils/spriteConfig.ts

export const BUILDING_SPRITES: Record<string, {
  atlas: string;
  frame: string;
  category: BuildingCategory;
  width: number;
  height: number;
}> = {
  // 住宅类
  'house_a':    { atlas: 'residential', frame: 'house_a',    category: 'residential', width: 64, height: 96 },
  'house_b':    { atlas: 'residential', frame: 'house_b',    category: 'residential', width: 64, height: 96 },
  'inn':        { atlas: 'residential', frame: 'inn',        category: 'residential', width: 64, height: 96 },
  'home':       { atlas: 'residential', frame: 'home',       category: 'residential', width: 64, height: 96 },

  // 商业类
  'shop':       { atlas: 'commercial',  frame: 'shop',       category: 'commercial',  width: 96, height: 128 },
  'tavern':     { atlas: 'commercial',  frame: 'tavern',     category: 'commercial',  width: 96, height: 128 },
  'herb_shop':  { atlas: 'commercial',  frame: 'herb_shop',  category: 'commercial',  width: 96, height: 128 },
  'tailor':     { atlas: 'commercial',  frame: 'tailor',     category: 'commercial',  width: 96, height: 128 },
  'market':     { atlas: 'commercial',  frame: 'market',     category: 'commercial',  width: 96, height: 128 },

  // 公共类
  'plaza':      { atlas: 'public',      frame: 'plaza',      category: 'public',      width: 128, height: 128 },
  'temple':     { atlas: 'public',      frame: 'temple',     category: 'public',      width: 96, height: 128 },
  'library':    { atlas: 'public',      frame: 'library',    category: 'public',      width: 96, height: 128 },
  'watchtower': { atlas: 'public',      frame: 'watchtower', category: 'public',      width: 96, height: 128 },
  'cemetery':   { atlas: 'public',      frame: 'cemetery',   category: 'public',      width: 96, height: 128 },

  // 工业类
  'workshop':   { atlas: 'industrial',  frame: 'workshop',   category: 'industrial',  width: 96, height: 96 },

  // 自然类
  'forest':     { atlas: 'nature',      frame: 'forest',     category: 'nature',      width: 96, height: 96 },
  'farm':       { atlas: 'nature',      frame: 'farm',       category: 'nature',      width: 64, height: 64 },
  'dock':       { atlas: 'nature',      frame: 'dock',       category: 'nature',      width: 64, height: 64 },
};

export type BuildingCategory = 'residential' | 'commercial' | 'public' | 'industrial' | 'nature';

R2 存储结构

R2 桶: ai-world-sim-assets
└── buildings/
    ├── residential.png
    ├── residential.json
    ├── commercial.png
    ├── commercial.json
    ├── public.png
    ├── public.json
    ├── industrial.png
    ├── industrial.json
    ├── nature.png
    └── nature.json

前端加载：

const R2_BASE = 'https://assets.openserve.cloud/buildings';
await Assets.load(`${R2_BASE}/${category}.json`);

生成流程

1. 为每个地点编写 prompt（基于模板）
2. 调用 Agnes API 生成图片
3. 下载并裁剪到目标尺寸
4. 去背景处理（如果需要）
5. 按类别放入文件夹
6. TexturePacker 打成类别图集
7. 上传到 R2
8. 更新 spriteConfig.ts 映射
9. 前端从 R2 加载

📐 地图布局见地图设计 📐 AI Prompt 模板见 AI 出图 Prompt 指南 📐 美术总规范见 Art Bible

建筑精灵规范 ​

文件夹结构 ​

命名规范 ​

变体命名示例 ​

尺寸规范 ​

特殊尺寸 ​

Agnes AI 生成规范 ​

通用 Prompt 前缀 ​

各类建筑 Prompt 模板 ​

住宅类 ​

商业类 ​

公共类 ​

工业类 ​

自然类 ​

Prompt 技巧 ​

Agnes API 调用 ​

生成单张建筑 ​

生成后处理 ​

图集打包 ​

TexturePacker 设置 ​

spriteConfig.ts 映射 ​

R2 存储结构 ​

生成流程 ​

建筑精灵规范

文件夹结构

命名规范

变体命名示例

尺寸规范

特殊尺寸

Agnes AI 生成规范

通用 Prompt 前缀

各类建筑 Prompt 模板

住宅类

商业类

公共类

工业类

自然类

Prompt 技巧

Agnes API 调用

生成单张建筑

生成后处理

图集打包

TexturePacker 设置

spriteConfig.ts 映射

R2 存储结构

生成流程