最近小游戲比較火，騰訊放開了入口，而騰訊與之相關(guān)的建設(shè)也完善起來。

雖然有現(xiàn)成的解決方法，但要自己重頭搭起來還是要踩不少坑的，所以抽時間擼了一個腳手架工具?？梢詷O大減化上手成本。

Puerts Cli.jpg

項目地址：https://github.com/sbfkcel/puerts_cli

開箱即用的 PuerTS 腳手架工具，通過本工具可以將 Puerts 快速接入并應(yīng)用于項目中。

功能特點：

• 基于 SWC 構(gòu)建的編譯環(huán)境，快如閃電
• 無需再手動搭建 Typescript、Webpack 相關(guān)編譯及打包環(huán)境
• 開箱即用的 Souremap、Hot reload、斷點調(diào)試 等配置集成
• 快速編譯 Puerts WebGL 運行時，并能自動完成與Web或微信小游戲項目的對接
• Web、微信小游戲工程擁有編譯與預(yù)覽一體的環(huán)境，無需自行再搭建預(yù)覽環(huán)境

現(xiàn)階段僅支持 Unity 項目

安裝

確保本地已經(jīng)安裝 Node.js 16.15.0+

# 使用npm安裝
npm install @puerts/cli -g

# 使用yarn安裝
yarn global add @puerts/cli

# 輸出版本號，檢查是否安裝成功
puer -v

幫助手冊

Puerts Cli 自帶幫助手冊，通過添加 --help 參數(shù)來查看每個命令及相關(guān)參數(shù)的幫助說明。

# 查看當前可用的命令
puer -h

# 查看 build 命令使用參數(shù)
puer build -h

# ...

新手教程

• 使用 Unity 2021+ LTS 創(chuàng)建一個空項目
• 在項目中添加 Puerts
  • 下載 Puerts
  • 解壓并將 Puerts 目錄復(fù)制到項目的 Assets/ 目錄下，即：Assets/Puerts/
  • 注意：由于 Puerts 支持多系統(tǒng)多平臺，需要手動指定好哪些文件適用于哪些平臺，否則可能運行或編譯出現(xiàn)異常，具體操作方法如下：
    • UnityEditor的資源管理器中找到: Assets -> Puerts -> Plugins -> xx系統(tǒng) -> xx 直到具體的文件，選中目錄下所有文件
    • 然后在 Inspector 面板勾選對上的平臺并點擊 Apply 按鈕（至少保證當前 Editor 環(huán)境有選擇對，其它如果不知道則全都不選就好，之后等需要編譯對應(yīng)平臺的時候再來這里設(shè)置）
    • 設(shè)置完之后，建議關(guān)掉 UnityEditor 重開一次
  • 下載 PuertsWebGL 并解壓
  • 在解壓目錄內(nèi)找到 package 目錄并重命名為 PuertsWebGL
  • 將重命名好的 PuertsWebGL 目錄復(fù)制到項目的 Assets/ 目錄下，即：Assets/PuertsWebGL/
• 在項目中添加 微信小游戲轉(zhuǎn)換工具（無需支持 Web、微信小游戲可以忽略）
  • 下載微信小游戲轉(zhuǎn)換工具Unity插件
  • 雙擊 minigame.xxx.unitypackage 將插件導入到項目
• 初始化 Puerts 項目
  • 終端進入到創(chuàng)建好的 Unity項目 目錄中
  • 終端執(zhí)行 puer init 初始化一個 Puerts 項目
• 將項目色彩空間改為 Gamma（無需支持 Web、微信小游戲可以忽略）
  • UnityEditor菜單 -> Editor -> Project Settings -> Player -> Other Settings -> Color Space -> Gamma
• 允許不安全代碼（Blittables 需要用到）
  • UnityEditor菜單 -> Editor -> Project Settings -> Player -> Other Settings -> Allow 'unsafe' Code
• 使用 Puerts 生成關(guān)聯(lián) Code
  • UnityEditor菜單 -> PuerTS -> Clear Generated Code
  • UnityEditor菜單 -> PuerTS -> Generated Code
  • UnityEditor菜單 -> PuerTS -> Generated index.d.ts (global.CS style)
• 編譯 Puerts 項目
  • 終端進入到創(chuàng)建好的 Unity項目 目錄中
  • 終端執(zhí)行 puer build，工具會將項目所有的 TS 文件編譯為 JS
• 預(yù)覽項目
  • 使用 Unity Editor 打開項目
  • 雙擊 Assets/Scenes/App.unity 場景
  • 點擊 Play 即可看到運行效果
• 進入開發(fā)模式
  • 終端進入到創(chuàng)建好的 Unity項目 目錄中
  • 終端執(zhí)行 puer dev，此時工具會監(jiān)聽項目中的 TS 文件是否有修改，如有修改則會實時將其編譯為 JS 文件

編譯為Web或微信小游戲工程

• 導出 Web 或 微信小游戲工程
  • 確保 UnityEditor 有安裝 Unity-WebGL-Support
  • 確保項目已經(jīng)有安裝 PuertsWebGL、微信小游戲轉(zhuǎn)換工具
  • 添加需要導出的 Scene
    • UnityEditor 打開需要導出的場景
    • UnityEditor菜單 File -> Build Settings -> Add Open Scenes
  • UnityEditor菜單 微信小游戲 -> 轉(zhuǎn)換小游戲 在彈出的轉(zhuǎn)換窗口中填寫以下信息
    • 游戲appid，在微信公眾平臺中申請
    • 小游戲項目名稱，隨便填寫
    • 游戲資源CDN，填寫 http://localhost:10000（這也是 cli 工具默認的 Web 項目預(yù)覽地址，CDN資源也就是這里的資源）
    • 導致路徑，這里建議與 puer.config.js 中的 minigameOutputDir 配置項目保持一致
      • puer.config.js 文件在執(zhí)行 puer init 時會自動創(chuàng)建，文件默認位置：項目/TS/puer.config.js
      • minigameOutputDir 默認為 桌面/項目目錄名稱/
    • 點擊 導出WEBGL并轉(zhuǎn)換為小游戲（常用按鈕） 導出項目
      • 如果導出遇到錯誤，請根據(jù) UnityEditor Console 面板中的提示排除故障
• 編譯 puerts 運行時并對接
  • 終端 cd Unity項目目錄
  • 終端 puer build --target minigame --browse
    • 腳手架會編譯 puerts運行時 以及項目中的 TS 并自動接好相關(guān)入口
    • 不出意外終端會輸出瀏覽器預(yù)覽地址，直接訪問即可預(yù)覽效果
    • 如果 puer.config.js 中的 minigameOutputDir 配置項與 微信小游戲轉(zhuǎn)換工具 導出目錄不一致則需要根據(jù)提示自行手動接入

建議：微信小程序、小游戲技術(shù)生態(tài)都是基于Web之上的，所以要先保證瀏覽器上可正常運行，之后再打開小游戲工程來預(yù)覽調(diào)試

參與開發(fā)

參與改進本工具或二次開發(fā)本請閱讀 Developer Guide。

補充說明

• 建議使用 PuerTS_Nodejs 運行時，因為可以直接使用 Node 現(xiàn)成的模塊
  • 注意：引入 node_modules、node 自帶模塊，請使用 require 方法引入
    • PuerTS目前未實現(xiàn)完整 import 支持，import 目前只支持本地模塊
    • 項目要兼容 Web、微信小游戲，使用 Node 模塊需要自行處理好兼容
• 著色器對 WebGL 做兼容支持
• 不建議直接使用引擎自帶資源，例如：Shader.Find("Particles/Standard Unlit")
• 引入相對模塊請以 ./、../ 開頭，否則編譯器可能無法找到模塊

項目發(fā)起者

Tencent @zombieyang、4399 Game @sbfkcel

相關(guān)項目及資料

• Puerts
• puerts_unity_demo
• puerts_unity_webgl_demo
• minigame-unity-webgl-transform
• 微信小游戲開發(fā)者文檔-快速上手
• Unity WebGL 微信小游戲適配