메뉴
Use when testing Cocos Creator code as a standalone HTML without the IDE.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when installing Cocos Creator 3.x and setting up a headless test bootstrap.
Use when setting up a GUI-free CLI build pipeline for Cocos Creator 3.x.
Use when building code-driven scrollable UI panels in Cocos Creator 3.x.
Use when code-driven UI nodes in Cocos Creator 3.x fail to render text or colors.
Use when Cocos Creator 3.x CLI build fails with scene or library errors.
Use when installing Cocos Creator 3.x and debugging scene import errors.
| name | cocos-standalone-test |
| description | Use when testing Cocos Creator code as a standalone HTML without the IDE. |
佛心項目嘅遊戲用 Cocos Creator 3.x 開發，需要 Cocos Creator IDE 先可以 compile TypeScript。但好多時候我哋唔方便開 IDE，或者想快速驗證邏輯先再做正式 build。
呢個 workflow 提供一個快速測試方法。
師兄想測試某個遊戲功能。如果只係邏輯層面（劇情引擎、選擇系統、功德系統等），可以用 standalone HTML 做快速驗證。
喺 BuddhaHeart_Game/build/web-mobile/ 建立 test-story.html（或 test-xxx.html），做以下轉換：
TypeScript → JavaScript 轉換規則：
| TypeScript（Cocos） | JavaScript（Standalone） |
|---|---|
import { ... } from 'cc' | 移除，改用純 JS |
@_decorator.ccclass('X') | 移除，用 class / object |
@_decorator.property(...) | 移除，直接初始化 |
Component, Node, Label, Button, tween | 用 DOM API + CSS 動畫代替 |
this.node.emit(...) | 用自訂 EventTarget / callback |
| TypeScript type annotation | 移除 |
| Cocos 元素 | HTML 對應 |
|---|---|
| Scene node | <div id="app"> |
| Label | <div> or <p> with CSS font styling |
| Button | <button> with CSS |
| Sprite / color | CSS background, color |
| tween | CSS transition + animation |
| Button.EventType.CLICK | element.addEventListener('click', ...) |
cd BuddhaHeart_Game/build/web-mobile && python3 -m http.server 8080
然後用 browser 打開 http://localhost:8080/test-story.html
process(action='kill', session_id='...').ts 檔案中test-story.html 可以保留或刪除Cocos Creator 項目改 code 後，commit 前必須做 TypeScript compile check：
node_modules/typescript 已安裝：npm install typescripttypes/cc.d.ts 存在（mock Cocos 3.x 類型宣告，因 cocos-creator-3d 不在 npm registry）tsconfig.phase6.json 存在（獨立 config，用 typeRoots 指向 types/，只 include 新 code 排除舊 code）npx tsc --noEmit -p tsconfig.phase6.json常見 TS error 同修復：
| Error | 原因 | 修復 |
|---|---|---|
cc.Vec3 not found | 用咗舊 Cocos 2.x cc.xxx 語法 | 改用 ES6 import + Vec3 |
'scale' not in Partial<Node> | Tween type 唔夠闊 | 在 cc.d.ts 加 TweenProps interface |
property X not exist | spread 咗唔喺 interface 嘅 field | as any cast |
?? unreachable | ?. operator 順序問題 | 改用明確變量 + if-else |
cc namespace）大嘅 standalone 測試頁（SocialUI + 控制邏輯，>30KB）好容易超出模型 output 上限。解決方法：分步寫入法
一次性寫 HTML head、body 結構、style block、DOM element 骨架。呢 part 約 8-15KB。
JS block（inline adapter、managers、控制邏輯）佔最大篇幅。用多個 patch 命令分段加入：
咁樣每個 patch 約 8-12KB，遠低於 output 上限，唔會爆長度。