Workboard Game

组合式 Workboard 如何渲染游戏化 Agent 世界

Workboard 组合出游戏化的 Agent 活动地图。atlas、room、inspector 与像素精灵这些 renderer 都是这一组合的内部部件，并不是独立公开组件，因此不要单独 import 它们。

游戏地图配置

@downcity/ui 在游戏这块只导出一个地图构造函数。传入与 board 相同的输入即可得到 DowncityWorkboardGameMapConfig：

import { buildWorkboardGameMapConfig, type DowncityWorkboardBoardSnapshot } from "@downcity/ui";

const gameMap = buildWorkboardGameMapConfig({
  board,
  activeZoneId: "active",
  selectedAgentId,
});

选项	类型	含义
`board`	`DowncityWorkboardBoardSnapshot`	当前 board 快照
`activeZoneId`	`DowncityWorkboardZoneId`	要聚焦的分区
`selectedAgentId`	`string`	当前选中的 agent

返回的 DowncityWorkboardGameMapConfig 描述 zones、actors、corridors、patrols 与 points of interest。Workboard 内部会自行构建它；只有在你需要复用同一套几何信息做自己的覆盖层时，才直接调用这个构造函数。

渲染游戏视图

渲染 board，并由它接管游戏模式、HUD、分区导航与 motion：

import { Workboard } from "@downcity/ui";
import "@downcity/ui/styles.css";

<Workboard
  board={board}
  selectedAgentId={selectedId}
  onSelectAgent={(id) => setSelectedId(id)}
/>

公开的游戏类型

以下类型用于配置和标注地图。atlas、room、inspector 与精灵 renderer 在内部消费它们。

类型	用途
`DowncityWorkboardGameMapConfig`	构造函数返回的完整游戏地图配置
`DowncityWorkboardGameZone`	地图上的一个分区
`DowncityWorkboardGameActor`	一个带位置与路线的 agent actor
`DowncityWorkboardGameRoute`	patrol 或 corridor 路径
`DowncityWorkboardGamePointOfInterest`	地图上的具名点位
`DowncityWorkboardGameAreaLabel`	地图上渲染的区域标签

游戏地图配置

渲染游戏视图

公开的游戏类型

相关阅读