# BEATDAY LITE - WebGL 安裝設定流程
## STEP1: 專案下載
先確定先安裝好 [GIT](https://git-scm.com/downloads) 環境，建議要對 GIT 操作有基本概念，比較好上手操作。

另外因為長路徑問題，建議先開啟長路徑設定

git config --global core.longpaths true

以下有兩種 Clone 方式：

### 方法一: 自動方式

**補充：<font color=#ff800 size=3>如果創建 bat 檔有問題，也可以向窗口索取對應項目的 bat 檔案。</font>**

先建立 text 檔案 (新文字文件.txt)，並將其副檔名改成 .bat，將以下內容複製並儲存 (**ex: BEATDAY_PROJ-NAME.bat**)：

@echo off
REM 修改窗口指定的 proj= 專案名稱 (避免 Clone 路徑有問題)，ex: proj=Monday
set proj=PROJ_NAME
set edlc=%proj%DLC
set git=https://git.viveoriginals.com/vo/beatday-2.0-team/%proj%

ECHO %git%

REM 主體 BEATDAY Unity 專案
git clone %git%/beatday.git Beatday%proj%

cd Beatday%proj%/Assets
mkdir _DLCs
cd _DLCs
echo chdir %cd%

REM 必要 DLC
echo clone CoreDLC
git clone %git%/coredlc.git CoreDLC

REM 項目 DLC
echo clone %edlc%
git clone %git%/%edlc%.git %edlc%

cd %~dp0
PAUSE

再將該 bat 檔案放置於想 Clone 的路徑目錄中，雙擊批次檔，即可自動下載，中途可能會需要輸入帳號密碼 (窗口會提供)。

### 方法二: 手動方式
根據窗口提供的資訊網址後，操作 GIT Clone 為以下：
1. 先 Clone 主專案 (BEATDAY LITE)。
2. 再 Clone DLCs <font color=#ff0000 size=3>(建議 DLC 結尾作為後墜為命名規則)</font>，歸屬於專案 \<**PROJ_NAME**\>/Assets/_DLCs/ 目錄下，主要與包含的 DLC 為以下：
- CoreDLC
- \<**PROJ_NAME**\>DLC

## STEP2: Unity 專案設定
1. 開啟 [Unity Hub](https://unity.com/cn/download)，確定 Unity 環境 [2022.3.59f1](https://unity.com/releases/editor/whats-new/2022.3.59#installs)，必需安裝以下：
- WebGL Build Support
- Windows Build Support (IL2CPP)
2. Visual Studio 環境需安裝 \[**C++ 的遊戲開發**\] 項目
3. 開啟專案
4. 切換 Platform 到 WebGL (如果還沒有環境，需要先安裝)
6. 重開專案 <font color=#ff0000 size=3>(強烈建議)</font>

## STEP3: HybridCLR (程式熱更新環境)
1. 安裝： Menu > HybridCLR > Installer
- 如果 Intalled Version 顯示 **Unknown** 或 **Version 不一致**，都必須按 Install 執行安裝
4. 確認 Hotfix DLL 列表
- Menu > HybridCLR > Settings... (確定已有指定該專案 **\<NAME\>.Hotfix.DLC.Runtime** 程序集)
6. Menu > HybridCLR > Generate > All
7. Menu > HybridCLR > OxGFrame With HybridCLR > Compile and Copy to HotfixCollector

**Note: 請確認 Console 視窗都沒有 Error，如果有錯誤，請將錯誤訊息回報對接技術人員**

## STEP4: 打包資源包
BEATDAY 資源結構是由許多不同資源包裹 (Packages) 進行資源跟代碼熱更的，所有的表演資產都是放在各自專屬 DLC 的目錄內，以下則是使用 Bundle Map JSON 進行包裹 (Package) 對應打包。
### 使用 Bundle Map JSON 進行打包 <font color=#ee82ee size=3>(推薦)</font>
- Menu > OxGFrame > Extensions > BuildTool > Build Bundles by Bundle Map JSON

打包參數說明 <font color=#ff0000 size=3>(很重要!!!，跟打包效率有關)</font>：

| 首次必須執行 | 平時開發打包 |
| :-: | :-: |
|  |  |
| ↑ 首次尚未執行 **Generate All** 前 ↓ | ↑ 首次已經執行 **Generate All** 後 ↓ |
| 勾選 **Generate All**，完整執行打包一次 | 取消 **Generate All**，極速加快打包效率 |
| <font color=#ff6600 size=3>※ 如果有錯誤一定要請求支援!!!</font> | <font color=#ff6600 size=3>※ 確保 Generate All 完成後，才能取消勾選</font> |

可以在專屬 DLC 目錄下找到預設幫忙配置好的 BuildBundle.json，依照以下圖示步驟 **(1)** 跟 **(2)** 進行 Bundle Map JSON 文件的加載。


JSON 內容載入後，即可按下以下圖示步驟 **(3)** 的按鈕進行打包。


### Bundle 資源在哪裡
根據預設給的 JSON 配置，打包完的 Bundle 資源皆在 Assets/StreamingAssets/**Sandbox** 目錄下，主程序啟動時會自動讀取內置資源，後續不管是任何內容製作、代碼更新，只需要重新打包即可，更新方式為以下：
1. 再次打包資源後 (參考 [STEP4](#STEP4-打包資源包))，再將 Assets/StreamingAssets 複製並覆蓋到打包好 **WebGL** 主程序文件夾中的 StreamingAssets 目錄下。
2. 或是使用 syslink (mklink /D ...) 直接 link 專案的 StreamingAssets 目錄取代至主程序中的 StreamingAssets 內置資源目錄。

## STEP5: 打包主程式 (頁面)
只需要編譯一次即可，除非後續有更新 BEATDAY 主專案的程序，或者載入新插件 (插件屬 AOT 工程)，不然不需要重新打包 **WebGL** (AOT)
- Menu > File > Build Settings > Build (Clean Build)


## STEP6: WebServer
需要一個網頁伺服器，才能開啟網頁服務，建議使用 [Simple Web Server](https://simplewebserver.org/zh-TW/)，簡單好操作。

下載安裝後，點選 "New Server"


Folder Path 選則打包 WebGL 主程序出來的目錄文件夾，PORT 可以使用常用預設的 80，或選一個沒使用的 PORT 埠號，如果需要給同網域 (LAN) 的其他電腦測試，需要勾選 Accessible on local network，確定後 "Create Server"


測試時，用網頁瀏覽器 (建議使用 Chrome) 輸入 http://localhost 或者 http://127.0.0.1 ，如果 PORT 設定非 80，則需要 PORT 號，例如 -> http://localhost:8080 (冒號 **:** 後面的數字為 PORT 號即連接埠 )

## STEP7: 開始編輯表演與測試

### 場景檔案
場景檔在 Assets/_DLCs/\<**NAME**\>DLC/Bundles/CoreFrame/US/DemoUS.unity

↑ 請直接改這個檔案即可 ↓

**Timeline** (TimelineCom) 物件為控制元件，不可刪除，具體操作方式請參照文件

### 限制
1. 除了平台道具/皮膚等，不然請將所有資料都放在專屬專案 DLC 目錄下 (ex: \<**NAME**\>DLC)
2. 腳本 (Script) 一定要放在專屬 DLC 的 _DLCs/\<**NAME**\>DLC/Scripts 目錄中，確保腳本路徑組織性

### 使用 Unity Editor 測試運行
開啟 Main 場景 (由主場景驅動進程)，按下 Play 執行


### 輸出 WebGL 網頁真機測試運行
- 想要使用真機調適，記得先編譯 **WebGL** 主程序參考 [STEP5](#STEP5-打包主程式-頁面)。
- 日常開發，不管是場景資源更新、還是新增更動代碼，只要直接執行 [STEP4](#STEP4-打包資源包) 打包流程 <font color=#9900cc size=3>(注意參數將會影響打包效率)</font>。

# 參考資料
1. [OxGFrame](https://oxgframe.ouhiyo.com/)
2. [HybridCLR](https://hybridclr.doc.code-philosophy.com/)
3. [YooAsset](https://www.yooasset.com/)