企业官网建设流程全解析

• 游戏开发
• 图形学

spine-runtimes 仓库中的 spine-ts/spine-construct3 是 Spine 官方为 Construct 3 提供的运行时插件，其example/control-bones目录下附带了一个完整的、可直接用 Construct 3 / Construct Animate 打开的演示工程。本文以该示例工程为标本，系统拆解 Construct 项目（.c3proj）的文件组织方式——包括主工程文件的职责、各子文件夹的用途与命名规范、事件表与布局的存储形式，以及编辑器 UI 状态文件的取舍；读完你可以独立读懂任何 Construct 工程（尤其是 Spine 相关工程）的目录结构，并为 AI/LLM 工具正确解析这类项目提供依据。

概述：Construct 项目是一堆 JSON 与媒体的组合

Construct 3 与 Construct Animate 是两款基于浏览器的游戏/动画制作工具，二者共用完全相同的项目文件格式。一个 Construct 工程本质上是一个包含project.c3proj主文件与若干子文件夹的目录：主文件以 JSON 形式充当"内容索引"，子文件夹则按类型存放对象定义、图片、布局、事件表、脚本、音频等资源。需要说明的是，example/control-bones目录中的 llm-context.md 本身就是一个面向 LLM 的项目格式说明，本文将其与仓库实际文件一一对照展开。

整个control-bones示例的目录结构如下（与文档描述的子文件夹一一对应）：

spine-ts/spine-construct3/example/control-bones/ ├── project.c3proj # 主工程文件（JSON 索引 + 元数据） ├── llm-context.md # 面向 LLM 的项目格式说明 ├── objectTypes/ # 对象类型定义（Spine、Mouse、Sprite、Text 等） ├── images/ # 对象类型使用的图片 ├── layouts/ # 布局定义（含编辑器 UI 状态子目录） ├── eventSheets/ # 事件表定义 ├── files/ # 通用附加文件（stretchyman 的 atlas/skel/png） ├── flowcharts/ # 流程图（对话树、状态机） ├── icons/ # 应用图标与启动画面 └── timelines/ # 时间线（标题画面等时序动画）

主工程文件 project.c3proj：JSON 索引与元数据

文档明确指出，名为project.c3proj的文件是项目的主工程文件：它采用 JSON 格式，充当项目全部内容的索引，同时保存基础的项目元数据，例如项目名称、视口尺寸等。打开 project.c3proj 可以验证这一点：

{ "projectFormatVersion": 1, "savedWithRelease": 48703, "name": "control-bones", "runtime": "c3", "useWorker": "auto", "bundleAddons": false, "usedAddons": [ { "type": "plugin", "id": "EsotericSoftware_SpineConstruct3", "name": "Spine", "author": "Esoteric Software", "bundled": false, "version": "4.3.7", "sdkVersion": 2 } ], "objectTypes": { "items": ["Spine", "Mouse", "Sprite", "Text", "Text2"] }, "layouts": { "items": ["Layout 1"] }, "eventSheets": { "items": ["Event sheet 1"] }, "timelines": { "items": ["Timeline 1"] }, "flowcharts": { "items": ["Flowchart 1"] }, "viewportWidth": 854, "viewportHeight": 480 }

几点值得注意的字段：

• usedAddons：声明工程依赖的插件清单。本工程声明了 Esoteric Software 出品的EsotericSoftware_SpineConstruct3（Spine 插件，版本 4.3.7），这正是objectTypes中出现Spine对象类型的原因。仓库中插件的官方身份信息（ID、名称、版本号）可在 addon.json 中核对。
• objectTypes/layouts/eventSheets/timelines/flowcharts：分别列出各子文件夹中实际存在的条目名称，相当于"索引目录"。例如layouts指向Layout 1，对应 layouts/Layout 1.json。
• viewportWidth/viewportHeight：视口宽高（854 × 480），配合properties中的fullscreenMode、framerateMode等渲染相关设置共同定义游戏的呈现方式。
• properties：包含工程级属性，如description、version、orientations（本工程为landscape）、fixedFramerate（30）、sampling（trilinear）等。注意这些字段会随 Construct 版本演进变化，读取时应以实际文件为准。

从源码角度看，Spine 插件实例在运行时就是通过_getInitProperties()按索引读取工程中存储的实例属性（atlas 文件、skeleton 文件、加载缩放、皮肤、动画等），见 src/c3runtime/instance.ts；而这些属性最终都序列化在布局文件中（见下文），印证了project.c3proj作为"索引 + 元数据"、真正内容存放在子文件夹中的分层设计。

子文件夹：每一类内容的存储约定

文档逐一说明了各子文件夹的用途。以下结合control-bones的真实文件进行验证与展开。

objectTypes：对象类型定义

objectTypes存放项目的对象类型（如PlayerSprite）定义，JSON 格式。在control-bones中可以看到 5 个对象类型：Mouse.json、Spine.json、Sprite.json、Text.json、Text2.json。以 Spine.json 为例：

{ "name": "Spine", "plugin-id": "EsotericSoftware_SpineConstruct3", "sid": 764031656247129, "isGlobal": false, "instanceVariables": [], "behaviorTypes": [], "effectTypes": [] }

plugin-id将该对象类型绑定到 Spine 插件，其余字段（实例变量、行为、效果）保持空数组。从插件源码看，运行时对象类型注册为C3.Plugins.EsotericSoftware_SpineConstruct3，其Instance被绑定到SpineC3Instance（见 src/c3runtime/instance.ts），事件表、布局中凡是objectClass: "Spine"的条目都会路由到该实例类执行。

images：对象图片与动画帧

images存放使用图片或动画的对象类型的图像。文档给出了两条命名规则：

• 单图对象（Tiled Background、9-patch 等）直接使用小写对象名作为文件名，例如tiledbackground.png；
• 动画对象（Sprite）使用对象名-动画名-帧号格式，帧号零填充到三位，例如player-default-000.png。

control-bones的 images/ 目录中有一个sprite-animation 1-000.png（250×250），正是第二条规则的实例：对象类型Sprite、动画名Animation 1（见布局中 Sprite 实例的initial-animation: "Animation 1"）、帧号000，空格保留在文件名中。该图片被动态创建用于"附加到骨骼"演示（见下文事件表分析）。

families：对象类型分组

families存放工程的 family（本质上是对象类型的分组），JSON 格式。control-bones工程未使用 family，因此 project.c3proj 中families.items为空数组。文档也提示"有些子文件夹可能因未使用而缺失"。

layouts：布局与对象排布

layouts存放工程的布局（layout），由图层（layer）和图层上的对象排布构成，用于菜单、关卡设计等，JSON 格式。control-bones只有一个布局 Layout 1.json，其中包含：

• 两个 Spine 实例（uid 2、uid 3），属性如spine-atlas-file（指向files/stretchyman-pma.atlas的 sid218860951970219）、spine-skeleton-file（指向files/stretchyman-pro.skel的 sid218772187982069）、spine-loader-scale: 1、spine-animation: "idle"、spine-bounds-provider: "setup"等；
• 一个 Sprite 实例（uid 5）与两个 Text 实例（uid 6、7），文本分别为Using "Add handle" action和Using a combination of lower level actions and conditions.，用于标注两种骨骼控制演示方式。

布局文件中的eventSheet: "Event sheet 1"字段把该布局与事件表绑定。Spine 实例的这些属性与 src/c3runtime/instance.ts 中properties数组的解析顺序严格对应（atlas → skeleton → loaderScale → skin → animation → debug → collision → boundsProvider …），是从文件到运行时的一条完整链路。

eventSheets：可视化事件块

eventSheets存放工程的事件表（event sheet），由 Construct 的可视化事件块构成，作为传统编程语言的替代品，JSON 格式。control-bones的 Event sheet 1.json 是理解 Spine 插件"条件（conditions）/动作（actions）"模型的最佳样例：

• 条件块on-skeleton-loaded+has-tags（标签"action"）：在骨架加载完成后，为back-arm-ik-target、back-leg-ik-target、front-arm-ik-target、front-leg-ik-target四个骨骼依次执行add-handle动作（type 为bone、radius 为6、debug: true）。这正是插件源码中addDragHandle(type, name, radius, debug)动作（src/c3runtime/actions.ts）的可视化落盘形式，而对应的拖拽句柄渲染逻辑在 src/c3runtime/instance.ts 的renderDragHandles。
• 标签"manual"分支下：使用低层条件/动作组合，先create-object（System 动作）创建 Sprite 实例，再对同一批骨骼执行attach-object-to-bone（带 offset 参数），对应插件动作AttachObjectToBone（src/c3runtime/actions.ts），其底层实现attachInstanceToBone记录 UID 与骨骼的绑定关系（src/c3runtime/instance.ts）。
• Mouse条件on-click（左键点击）嵌套is-inside-bone-radius条件：若鼠标位于某骨骼句柄半径内，则change-tags添加对应骨骼名标签；
• Mouse条件on-movement嵌套has-tags条件：对被点中的骨骼执行set-bone-pose（mode 为game、apply-mode 为once、坐标为Mouse.X("Layer 0")/Mouse.Y("Layer 0")），实现"拖着手臂/腿的 IK 目标骨骼跟随鼠标"的效果，对应运行时setBonePose的game模式（src/c3runtime/instance.ts）；
• Mouse条件on-button-released：对所有四个骨骼执行change-tags的remove动作，松开鼠标后释放控制。

这一事件表把"条件 = 判断、动作 = 执行"的 Construct 逻辑模型完整呈现出来，也是理解aces.json（插件向 Construct 暴露条件/动作/表达式清单）与 conditions.ts、actions.ts、expressions.ts 一一对应关系的入口。

scripts：JavaScript / TypeScript 脚本

scripts存放工程使用的 JavaScript 或 TypeScript 脚本文件。control-bones工程未使用脚本（project.c3proj 中rootFileFolders.script.items为空），因此该文件夹缺失——这与文档"有些子文件夹可能未使用而缺失"的说明一致。

sounds / music、videos、fonts、icons、files

• sounds与music：音频文件，WebM Opus 格式；
• videos：视频文件，通常为 MPEG-4 H.264 格式；
• fonts：Web 字体，WOFF 格式；
• icons：图标与启动画面，PNG 格式。control-bones的 icons/ 中实际包含icon-16.png至icon-512.png共 6 个尺寸的应用图标（purpose: "app-icon"）以及loading-logo.png（purpose: "loading-logo"），对应 project.c3proj 中rootFileFolders.icon的清单；
• files：项目可能用到的任意附加文件。control-bones的 files/ 中存放的正是 Spine 骨骼资源三件套：stretchyman-pma.atlas（图集描述）、stretchyman-pma.png（图集纹理 512×512）与stretchyman-pro.skel（二进制骨骼数据）。这三个文件被 project.c3proj 的rootFileFolders.general登记，并被布局中两个 Spine 实例的spine-atlas-file/spine-skeleton-file属性以 sid（218860951970219/218772187982069）引用。这也解释了为什么 Spine 工程要把.atlas/.skel放到files：它们不是对象类型的图片，而是供 Spine 插件加载的通用资源。

timelines 与 flowcharts

• timelines：时间线，由随时间变化的一系列改动构成（例如控制标题画面动画），JSON 格式。control-bones中有一个 Timeline 1.json；
• flowcharts：流程图，由一系列连接节点构成（用于对话树、有限状态机等），JSON 格式。control-bones中有一个 Flowchart 1.json。这两个文件夹在工程中即便存在空/默认条目，也不影响 Spine 演示本身的运行。

3dmodels：3D 模型

3dmodels存放工程的 3D 模型，JSON 格式。Construct 支持导入 GLTF（.gltf与.glb）模型，导入过程中会处理并保存为 JSON，其格式与 GLTF 相似但不保证完全相同。control-bones的models3d为空，符合文档"部分子文件夹可能缺失"的说明。

UI 状态文件（.uistate.json）：编辑器专用，可安全忽略

Construct 工程还包含许多扩展名为.uistate.json的文件，例如control-bones中的 layouts/uistate/Layout 1.instancesBar.json。文档明确指出：

• 这些文件存储 Construct 编辑器用户界面状态（如对象面板的折叠/展开、实例栏布局等）；
• 它们不影响工程的运行；
• 对于工具或 LLM 而言，最好直接忽略它们。

这意味着解析 Construct 工程时，可以把.uistate.json文件排除在语义分析之外——真正的逻辑内容在project.c3proj、objectTypes/、layouts/、eventSheets/等文件中。

给解析工具 / LLM 的实用建议

综合文档与control-bones工程的实际形态，可以归纳出解析 Construct 项目的几条可操作经验：

1. 从 project.c3proj 入手：先读取projectFormatVersion、name、usedAddons（判断是否为 Spine 工程）、objectTypes/layouts/eventSheets的条目清单，再按清单进入对应子文件夹读取 JSON。
2. 布局与事件表是核心逻辑载体：Spine 对象实例的动画、皮肤、资源文件引用都在 layouts/Layout 1.json 中；交互逻辑（如本示例的骨骼拖拽）全部以条件/动作块的形式落在 eventSheets/Event sheet 1.json。这两类文件分别对应"场景状态"与"行为逻辑"。
3. Spine 资源定位：Spine 插件的 atlas/skel 资源统一放在files/，通过 sid 被布局属性引用；配合 addon.json 与 aces.json 可以反向还原每个插件条件/动作的参数含义。
4. 忽略.uistate.json：它们只描述编辑器界面，无运行语义。
5. 区分"索引"与"内容"：project.c3proj只登记名称与元数据，具体对象、布局、事件内容必须到对应子文件夹中查找；而像families、scripts、3dmodels等文件夹在未使用时整目录缺失，是正常现象而非工程损坏。

小结

Construct 3 / Construct Animate 的项目格式遵循一种清晰的分层约定：project.c3proj是 JSON 索引与元数据，子文件夹按objectTypes、images、families、layouts、eventSheets、scripts、sounds/music、videos、fonts、icons、files、timelines、flowcharts、3dmodels分类存放内容，.uistate.json则是可安全忽略的编辑器 UI 状态。Spine 的control-bones示例工程完整展示了这套约定在真实场景中的应用——从files中的 atlas/skel 资源，到布局中的 Spine 实例属性，再到事件表中add-handle、set-bone-pose、attach-object-to-bone等条件/动作的可视化落盘形式。读懂这套格式，无论是人工排查问题、还是让 LLM 工具解析工程，都能快速定位到正确的文件与字段。

• 游戏开发
• 图形学