# 網頁遊戲開發環境設定與專案建立 基本說明 - - - - ## 開發環境設定 ### 提示 ````bash $> 此畫面為 command line interface (console 終端機) ```` ### 相關需求 - nodejs v12.x.x [下載](https://nodejs.org/dist/latest-v12.x/) - git [下載](https://git-scm.com/downloads) 確認是否安裝完成，請參考如下畫面 ````bash $> node --version v12.x.x $> git --version git version x.x.x ```` 確認上面步驟完成後 ### 專案用工具程式 - grunt-cli 安裝步驟如下 ````bash $> npm install -g grunt-cli $> grunt --version grunt-cli v1.3.2 ```` 確認上面步驟完成後 ### 安裝 game framework game framework 根目錄說明 ````bash . ├── builder [產生設定檔用] ├── CHANGELOG.md [更動歷程] ├── dependence [程式庫] ├── developer [專案測試用工具程式] ├── favicon.ico ├── Gruntfile.js [專案開發流程設定檔] ├── node_modules ├── package.json [使用的程式庫與工具程式的清單] ├── package-lock.json ├── project [專案存放路徑] ├── README.md [說明] ├── schema ├── server [測試用服務器] ├── systemjs [管理 javascript 用] ├── tasks [自動化流程用] ├── template ├── tools ├── updateManager.sh ```` 在 game framework 根目錄 , 如下輸入 ````bash $> npm install ```` 確認上面步驟完成後，即可建立新專案 ### game framework 命令說明 下面命令 , 須在 game framework 根目錄下輸入 ````bash - grunt serve [啟動測試用伺服器,所有專案共用一個服務] - grunt create [建立新專案用] ```` ## 啟動測試用伺服器 所有專案共用一個服務, 在不同專案間切換時,也不需要重新啟動 開啟新的 console 後(在 game framework 根目錄) 輸入下面命令 ````bash $> grunt serve ```` 開啟瀏覽器 輸入網址 http://localhost:3000/developer/agent/index.html ## 建立新專案 ### 範例 - 主專案 https://git.astrocorp.com.tw/gti-demo/game-client/demo/sample - 附屬專案 https://git.astrocorp.com.tw/gti-demo/game-client/demo/jackpot ### 產生新專案 在game framework 根目錄下 步驟如下所示 ````bash $> grunt create "webgame" template notes: 新專案 Please answer the following: [?] group (slot) [輸入群組名稱,如果是 slot 則可直接按下 <enter鍵>] [?] Project name (sample) [輸入專案名稱後按下 <enter鍵>] [?] package [直接按下 <enter鍵>] [?] Do you need to make any changes to the above before continuing? (y/N) [直接按下 <enter鍵>] ```` 完成後, 可看到如下面所示 ````bash Initialized from template "webgame". 專案建立完成 Done, without errors. Done. ```` 完成後, 專案會產生在 project 之中 在 game framework 根目錄下 , 如下輸入,進入專案目錄 ````bash $> cd project $> cd <群組名稱> $> cd <專案名稱> ```` ### 專案目錄說明 ````bash . ├── app [自動產生, public 模式用] ├── ci [CI 用] ├── config [自動產生, build public 模式用] ├── content.config.yml [專案設定檔]] ├── data [自動產生, public 模式用] ├── debug [自動產生, debug 模式用] ├── gamecard [遊戲卡片圖檔] ├── Gruntfile.js [自動化流程設定檔] ├── raw [grunt filelist 命令用, 產生資源設定檔用] ├── readme.md [專案說明] ├── release [自動產生, build public 模式用] ├── res [遊戲資源存放位置] ├── res.config.yml [遊戲資源設定檔] ├── src [程式碼存放位置] ├── system.set.yml [程式碼設定檔] ├── template [遊戲設定檔] ├── test [測試網路封包用] ├── tmp [暫存] └── tsconfig.json [typescript 用] ```` ## 專案開發流程 相關命令, 以下命令須在專案資料夾下才行使用 ````bash - grunt makeres [產生指定語言的資源檔,預設為英文] - grunt source [產生除錯版] - grunt build [產生最佳化版, 預設值為不顯示 log] - grunt public [產生公開版, 預設值為不顯示 log] - grunt filelist [產生資源檔清單] - grunt clean [清除暫存檔用] - grunt report [產生程式碼分析報告] - grunt test [產生測試用程式碼] - grunt tag [自動產生專案版本標籤] ```` ### 產生除錯版 輸入下面命令 ````bash $> grunt source ```` 完成後,即可看到除錯用的版本 ### 產生最佳化版 輸入下面命令 ````bash $> grunt build ```` 完成後,即可看到最佳化用的版本 ### 產生公開版 輸入下面命令 ````bash $> grunt public ```` 完成後,即可看到公開用的版本 ### 本機測試用網址 開啟瀏覽器 輸入網址 (http://localhost:3000/developer/agent/index.html) ### 產生資源設定檔 輸入下面命令 ````bash $> grunt filelist ```` 修改輸出設定請參考 gruntfile.js 的 filelist 部份 專案 template 定義了三個場景設定 - main (主場景) - sub (次要場景) 所以產生資源檔命令有下面四種產生方式 ````bash $> grunt filelist [產生全部場景資源設定] $> grunt filelist:main [產生主場景資源設定] $> grunt filelist:sub [產生次要場景資源設定] ```` ### 產生程式碼分析報告 ````bash $> grunt report ```` 輸入上面命令完成後會在專案根目錄下, 產生 statistics.html 檔案, 用瀏覽器開啟即可。 ### 自動產生專案版本標籤 根據專案設定檔 content.config.yml 的 version 屬性,自動產生版本標籤,然後上傳至預設定 gitlab server , 輸入下面命令即可 ````bash $> grunt tag ```` grunt tag 命令, 是執行 git tag -a '文字描述' -m '文字描述' 與 git push --tags 的組合 ## 專案間切換 ### 當專案是主專案時 在專案的根目錄下 (project/<群組名稱>/<專案名稱>) 輸入下面其中一個命令即可 ````bash $> grunt source $> grunt build $> grunt public ```` 完成後 重新更新網頁 http://localhost:3000/developer/agent/index.html 就可以看要指定的專案 ### 當專案為附屬專案或子專案時 需要修改專案的 context.config.yml 檔 , 將 下面的註解取消 ````bash #excluded: # autoTest: true ```` 改為如下所示即可 ````bash excluded: autoTest: true ````