完整範例

本章用於復現三個具體專案。標題為“僅本案例”的目錄、指令、坐標和補丁只用於相應範例。原始碼附件用於繼續開發，dist 附件用於運行或發佈；範例原始碼不包含作者的帳號憑證或 Post 綁定，發佈自己的版本時先 create。

H5 · 星星衝刺

45 秒內收集 5 顆星星，避開 2 個巡邏機器人，初始 3 點生命。WASD / 方向鍵移動，P 暫停，R 重玩，手機視口提供螢幕方向鍵。完整原始碼含免建置版與 Vite 工程。

下載並在本機運行

操作位置： 新建的 native-h5 資料夾與終端機。

操作： 下載本節原始碼附件，解壓到 native-h5，讓 package.json 直接位於該目錄根部。終端機進入這個目錄後，在下面兩條路線中選一條執行。

成功現象： 免建置版打開 8000，Vite 開發版打開 5173；均出現星星衝刺的開始界面。


python3 -m http.server 8000 --bind 127.0.0.1 --directory plain/dist


npm ci
npm run dev

本機範例目錄是桌面 Move to Combos/native-h5；解壓到其他位置時使用自己的路徑。瀏覽器打開免建置版 http://127.0.0.1:8000/ 或 Vite 開發版 http://127.0.0.1:5173/。

圖 05｜星星衝刺本機運行，先驗證開始、移動和收集計分。

圖 05｜星星衝刺本機運行，先驗證開始、移動和收集計分。

驗證、建置和發佈

操作位置： 本機瀏覽器、native-h5 根目錄終端機與 Combos 頁面。

操作： 點擊開始，移動到星星，檢查分數增加；收齊 5 顆顯示獲勝。驗證碰撞扣血、超時失敗、P 暫停和 R 重玩。Vite 路線停止 dev 後執行 build 和 preview，打開 4173；免建置路線直接使用 plain/dist。完成後按發布與更新發佈。

成功現象： 最終成品和線上版本都能運行核心玩法；保留自己的 combos.json 繼續修改。


npm run build
npm run preview

本次實際發佈 Vite 生成的 dist，平台聲明 pc,mobile，revision 1。打開星星衝刺；Canvas 搜索碼 07752。本機與線上鍵盤完整通關；手機方向鍵僅完成瀏覽器視口檢查，未計入手機實機驗收。

圖 06｜星星衝刺從 Combos 公開頁面運行並收集到第一顆星星。

圖 06｜星星衝刺從 Combos 公開頁面運行並收集到第一顆星星。

原始碼說明和附件

檔案	負責的內容
index.html / src/style.css	Canvas、HUD、按鈕、佈局和手機方向鍵
src/main.js	輸入、移動、收集、碰撞、倒計時、勝負和繪圖
package.json / vite.config.js	開發、建置、預覽和相對資源地址
plain/dist/	同一玩法的直接 HTML + JS 成品，無需編譯

下面說明案例如何計分，完整程式在原始碼附件中。它不是接入 Combos 的必需程式碼，也不是終端機指令。


if (!star.collected && Math.hypot(
  star.x - state.player.x, star.y - state.player.y
) < 35) {
  star.collected = true;
  state.score++;
}
if (state.health <= 0 || state.elapsed >= 45) show('lost');
else if (state.score === 5) show('won');

原始碼： 包含兩個製作版本和封面，適合跟做、修改。** 成品：** 兩個 dist ZIP 都可解壓後運行；根目錄直接有 index.html。

star-sprint-source.zip

star-sprint-html-dist.zip

star-sprint-vite-dist.zip

Unity 案例 · BoatAttack

使用 Unity 官方 BoatAttack，固定基線 91886a3ef1ac963aa10578fcaf1d59e9b6961ab3。原基線使用 6000.2.0b8，本例適配 Unity 6.3 LTS 6000.3.25f1（Apple Silicon ARM64）。保留原船隻、駕駛員、Island 場景、水面、物理、AI 和 C# 玩法。

獲取並適配這個範例

操作位置： 準備復現範例的空目錄和終端機。

操作： 安裝 Git LFS，克隆官方專案並切換到固定基線；執行 lfs pull 獲取大型資源。把本節適配包解壓到工程根目錄，檢查並應用補丁，再由 Unity Hub 打開。

成功現象： 模型和貼圖完整，工程能在範例指定編輯器中導入；補丁僅應用一次。


git clone https://github.com/Unity-Technologies/BoatAttack.git BoatAttack
cd BoatAttack
git checkout 91886a3ef1ac963aa10578fcaf1d59e9b6961ab3
git lfs pull
git lfs fsck
# 把本节适配包解压到这个全新工程根目录后：
git apply --check tracked-project-changes.patch
git apply tracked-project-changes.patch

已適配的本機工程不要再次應用補丁。自己的遊戲直接使用Unity 原生匯出的原生匯出流程。本適配包包含版本和兼容性修改、說明與許可證，不含大型原資產、Library 或 dist，也不安裝 Combos 外掛。

原生匯出並進入比賽

操作位置： Unity 編輯器、專案終端機與瀏覽器。

操作： 打開 main_menu.unity，Play 檢查菜單和單人比賽設置，再停止 Play。按Unity 原生匯出原生建置：Scene List 為 main_menu.unity（0）和 level_Island.unity（1），Default 模板、Gzip + fallback、Addressables 隨 Player 建置。輸出到 dist。

成功現象： 原生 Build 成功，網頁主菜單和 Island 比賽均可進入，動態船隻與 UI 正常載入。

圖 07｜BoatAttack 原工程在 Unity 中顯示主菜單。

圖 07｜BoatAttack 原工程在 Unity 中顯示主菜單。

圖 08｜BoatAttack 單人比賽設置；選 Island 後進入船隻配置。

圖 08｜BoatAttack 單人比賽設置；選 Island 後進入船隻配置。

本次原生按鈕 Build 於 18:21:57 開始、18:26:03 成功，耗時 246 秒。生成 27 個檔案、5 個 Addressables bundle；成品 127.36 MiB，最大單檔案 94.58 MiB，ZIP 124.88 MiB。整體和單檔案符合當前限制，ZIP 根部直接有 index.html。


python3 -m http.server 8001 --bind 127.0.0.1 --directory dist

瀏覽器打開 http://127.0.0.1:8001/。操作順序：RACE → SINGLEPLAYER → ISLAND（1 圈）→ NEXT → 船只配置 → RACE。等待開場和倒計時，點擊畫布取得鍵盤焦點；W / ↑ / 空格加速，A/D 轉向，R 重置，F 暫停與繼續。

上傳和線上驗證結果

首次發佈自己的版本時，截取實際比賽畫面保存 cover.png，按發布與更新創建。該範例使用 --platform pc --screen-orientation landscape；本機已綁定的同一遊戲則使用 update。本次以原生成品更新至 revision 2，回執已發佈且 submission_is_current=true。大包可按需增加 --timeout 10m。

打開 BoatAttack ；Canvas 搜索碼 08759。停止本機服務後，在兩個獨立瀏覽器會話從公開試玩頁和分享連結進入比賽，驗證加速、轉向、暫停與繼續，並在其中一個會話驗證 R 重置；試玩全程靜音。核心檔案和 5 個 bundle 從公開部署載入，未見遊戲運行錯誤。

圖 09｜BoatAttack 原生 Default 成品在 Combos 線上進入比賽並駕駛。

圖 09｜BoatAttack 原生 Default 成品在 Combos 線上進入比賽並駕駛。

驗證範圍為 PC 橫向單人比賽載入和駕駛；完整比賽獲勝、手機觸控與手機實機未計入本次驗收。載入器、引擎等仍有警告；外層頁面未登錄使用者 profile 的 401 與遊戲載入分開記錄。

保留了什麼，具體改了什麼

內容	本次處理
C#、船、人物、島嶼、物理、AI	保留原程式碼和資產，由 Unity 匯出；水面沿用原專案已有 WebGL 分支
網頁入口與模板	Unity 自帶 Default 自動生成；沒有改寫 loader 或新增 Combos 網頁模板
發佈場景、壓縮、Addressables	在 Unity 原生界面保存匯出配置
編輯器 / Input System / URP	範例版本適配及編輯器序列化變化，見完整補丁
UIPanelFade.shader	增加新版 uGUI 所需的 _MainTex 屬性，修復範例菜單材質
此前自定義建置工具	Editor 建置腳本、Combos 模板和 com.unity.pipeline 已移除


[PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}

適配補丁相對固定官方 commit 覆蓋 31 個已跟蹤檔案，包含 README-migration.md、WEBGL-MIGRATION.md、LOCAL_SETUP.md 和許可證。補丁是這個開源專案的復現材料，不是所有 Unity 遊戲的接入步驟。

boatattack-adaptation.zip

Roblox 案例 · Ball Game

原專案來源：Ball game open source ，以 ball game.rbxl 提供。本例保留 5 秒開場、推粉色球繞過三道錯位磚牆、接觸 WinPiece 後變金色並顯示 Winner 的規則。

運行原版，記錄人物與場景

操作位置： Roblox Studio。

操作： File → Open from File 打開原 .rbxl，Play / F5 試玩，再停止測試。Explorer 中讀取兩個 ServerScriptService 腳本 CreateBall 和 GetWinner，並檢視 Workspace 中的 Map1、WinPiece、SpawnLocation、Baseplate。

成功現象： 原規則、人物原型與場景參數能對應到實際畫面；原 .rbxl 保持不變。

圖 10｜Roblox 原版人物、草地、磚牆、灰色底板與終點。

圖 10｜Roblox 原版人物、草地、磚牆、灰色底板與終點。

圖 11｜原 GetWinner 原始碼監聽球與 WinPiece 的接觸。

圖 11｜原 GetWinner 原始碼監聽球與 WinPiece 的接觸。

兩個腳本負責開局造球和獲勝。渲染、人物、輸入、鏡頭、動畫、物理和伺服器端執行環境由 Roblox 提供。原球尺寸為 5×5×5 studs；草地為 18×1×74；三道障礙中心為 (22,17.5,34)、(32,17.5,15)、(21.5,17.5,-4)。這些數值僅屬於 Ball Game。


Ball.Touched:Connect(function(partTouching)
    if partTouching.Name == "WinPiece" then
        Ball.BrickColor = BrickColor.new("Gold")
        warn("Winner!")
        game.Workspace.Map1.PlayerWon.Value = true
    end
end)

需要檢查自己的簡單 Part 場景時，可停止 Play，在 Studio Command Bar 執行下面的只讀指令，檢視 Output。複雜 Mesh、貼圖或骨骼另行處理；這段指令只打印屬性，不會匯出一個可運行的 H5 遊戲。


for _, part in ipairs(workspace:GetDescendants()) do
    if part:IsA("BasePart") then
        print(part:GetFullName(), part.Position, part.Size,
            part.Material, part.Transparency)
    end
end

對照新的原始碼和還原效果

Roblox 中的來源	H5 原始碼	本例如何處理
CreateBall：wait(5)、Part、Neon	src/main.js	保留 5 秒等待；球的可見網格與動態物理剛體一起創建
GetWinner：Touched、PlayerWon	src/main.js	接觸終點後一次獲勝、球變金色、顯示 Winner
Map1、WinPiece、出生點等	src/level.js + main.js	讀取尺寸與坐標重建網格和碰撞體，保留透明擋牆的物理作用
草地、磚牆、金屬、泥地、天空	src/environment.js	用瀏覽器材質和本機紋理重建外觀
R15 Man / Pal Hair / 摩托衫 / 牛仔褲	src/avatar.js	按原型重建 15 個身體分段、發束、笑臉、衣物與白底鞋
Humanoid 與預設第三人稱鏡頭	main.js + avatar.js + camera.js	實現移動、跳躍、動作、跟隨、拖動旋轉與縮放
Message / Hint 等 UI	index.html + src/style.css	改為瀏覽器 HUD、開局、暫停和獲勝界面

人物由原版運行時載入帳號 Avatar。本例按外形原型用本機幾何和紋理重建，沒有直接導入 Roblox 官方網格。場景以簡單 Part 為主，按真實佈局重建；其他專案可以復用有權匯出的模型和貼圖。

圖 12｜H5 人物正面保留髮型、笑臉、藍黑上衣、深色褲子和白底鞋。

圖 12｜H5 人物正面保留髮型、笑臉、藍黑上衣、深色褲子和白底鞋。

圖 13｜H5 人物側面展示頭髮、身體分段和鞋的形體。

圖 13｜H5 人物側面展示頭髮、身體分段和鞋的形體。

本例約定 1 stud = 0.3m，原點取 Roblox (27,15,15)，球半徑因此是 0.75m。這個坐標換算、質量、摩擦、滾動阻尼和速度限制均屬於案例實現；自己的遊戲按自己的數據和物理體驗調整。

圖 14｜H5 完整關卡按原版數據恢復三道障礙、邊界和終點位置。

圖 14｜H5 完整關卡按原版數據恢復三道障礙、邊界和終點位置。


ballBody.addEventListener('collide', event => {
  if (event.body !== winPiece.body || state.mode !== 'playing' || state.won) return;
  state.won = true;
  state.phase = 'finished';
  pink.color.set('#fff000');
  pink.emissive.set('#fff000');
  glow.material.color.set('#fff54b');
  document.querySelector('#status').textContent = 'Winner!';
  show('won');
});

新增的瀏覽器能力包括觸屏方向鍵與跳躍、暫停與繼續、重玩、全屏、角色近距離檢視，以及 WebGL 不可用提示。Roblox 帳號、Robux、多人同步和雲存檔未遷移；本例不是 Roblox 運行時的完整兼容層。

下載完整原始碼並驗證

操作位置： 新建的 ball-game-h5 資料夾、終端機和瀏覽器。

操作： 下載本節原始碼附件，解壓後讓 package.json 位於根部，再進入該目錄執行 npm ci 和 npm run dev。原始碼包含 level.js、avatar.js、environment.js、camera.js、main.js、SOURCE-MAPPING.md 及 reference/ 下原 Lua 副本。

成功現象： 瀏覽器打開 5174 後出現開始界面；開局等待 5 秒，再出現粉色球、原型人物、草地、三道牆和終點。