好欸，期待 ：DD
嗨我是NA
每次見面的開頭都很想說好久不見
日常生活忙碌的關係，巴哈這邊都差不多要變成年更了qwq
前陣子因緣際會下，體驗了一週的Unity前端RD的工作內容
結束後還是回歸ㄌ設計師老本行
但還是想多學習Unity的東西，也順帶把練習的內容都丟上自己的itch.io做紀錄
因為有些流程預期會重複發生，所以想先筆記下來
未來可能也會不定期的增修內容
筆記的敘事結構主要會分為以下幾個部分：
一、itch.io簡介
二、Unity輸出設置
三、itch.io上傳說明
四、itch.io網頁外觀顯示設置(Optional)
一、itch.io簡介
一、itch.io簡介
Itch.io 是一個專為獨立開發者打造的平台，可以免費上傳與分享自己的遊戲，支援 WebGL 等多種格式，適合用來展示 Unity 製作的小遊戲或實驗作品。
考量到自己的練習也都是小規模的功能實作實驗，
所以一個可以簡易上傳+遊玩的平台，很符合我的需求。
另外假如有製作比較大量體內容的專案，這個平台也蠻適合作為DEMO免費遊玩展示的。
二、Unity輸出設置
前置作業：
要輸出為特定的Platform，會需要先安裝特定的Module。
在Unity Hub中，於Installs頁籤中，
點選對應Unity版本右方的齒輪，下拉選單中點擊Add modules
安裝下面圈起來的WebGL模組
安裝完畢後啟動專案，上方功能列點擊File>Build Project
開啟Build Profiles介面：
- 左側的頁籤請切換為Web，切換的時候要等一小段時間
- 右側上方有一個Player Settings頁籤，這個等等會用到
- Scene List：加入你需要輸出的Scene
- Platform Setting：我的設置主要用於服務上傳至itch.io，參考下圖
Platform Setting如果有其他需求的話可以參照下方補充說明，
或是還用不到的話可以先跳過以下區塊：
- Client Browser Type：
選擇 WebGL 運行時對不同瀏覽器的相容策略。
建議保持 System Default（系統預設）即可，Unity 會根據玩家使用的瀏覽器自動選擇適當的設定。
- Texture Compression：
控制輸出貼圖時的壓縮方式。
- Development Build：
如果勾選這個選項，會輸出包含 debug 資訊的版本（適合測試、除錯用）。
勾選時會顯示 console log 等除錯訊息，但不適合正式上線，因為檔案會比較大、效能稍差。
- Code Optimization：
控制 Unity 編譯時針對效能或建置時間的優化方向。
進入Player Settings頁籤
比較重要的是最下面的第三個區塊的內容。
上面兩個區塊的內容，在WebGL的預設架構下不會顯示；
且相關內容設置主要依賴itch.io的網頁設定。
但假如是要輸出為PC或其他平台的話，就會需要設置資訊；
或是為了方便管理，就算不輸出也可以記錄資訊。
Resolution and Presentation > Resolution
- Default Canvas Width / Height
設定 WebGL 畫布（Canvas）的解析度。
這會影響 WebGL 的顯示尺寸，建議設為常見的寬高比例（如 1920x1080）。
如果你希望遊戲在 itch.io 上以固定大小顯示，這兩個欄位會很重要。
- Run in Background
若打勾，當玩家切到其他分頁或視窗時，遊戲仍會繼續執行（例如音效或物理模擬不會暫停）。
若不勾選，切換視窗時會自動暫停遊戲，省資源。
- WebGL Template：
這是設定輸出後網頁的樣板外觀，一般情況下使用預設即可。
Default：Unity 標準樣板，含 Unity logo 與加載條
Minimal：簡化介面，幾乎沒有外觀裝飾
PWA：適用於 Progressive Web App，較進階的 Web 架構
以上都設置完畢後，回到Build Profiles頁面
點擊Build按鈕>選擇你想匯出的資料夾
就會開始Build專案了~需要等待一小段時間
Build完之後會產出紅框部分的內容。
請把它們都包在同一個資料夾中，壓縮成ZIP檔。
\\\到這邊，恭喜前置作業已完成///
接下來就可以準備上傳到itch.io了
三、itch.io上傳說明
雖然跳過帳號申請流程說明，但我就先假設大家都有itch.io帳號這樣
登入後，
點擊頁面右上角頭像>Upload new project
就會進到這個頁面
大部分的資訊就照著說明填寫就好了，
這邊記一些可能需要特別注意的項目。
附帶一提，上方的黃字提示還沒有設定匯款相關資訊，
不過我查了下，就算還沒設定匯款資訊，收到donate平台也會先扣住，
而且目前也還沒想在這平台有收益，就先放置不管了。
- Kind of project：記得要改成HTML，才可以在網頁中直接遊玩。
- Screenshots：選填，但有附上的話會在遊戲的頁面中或是網站的其他地方預覽顯示。
可以參考看看我之前參與的專案>>連結★
右下角那邊的GIF就是了
繼續往下拉
- Uploads區塊：上傳前置階段打包好的ZIP檔案。
記得勾選 This file will be played in the browser
下方的細部設定看專案需求，
我這邊都沒有動過
再繼續往下拉
大部分顯示資訊相關的項目，就順著說明填寫就好了~
中間框起來的Tag下方，
假如當前有活動，系統會詢問你要不要添加這個活動tag；
點擊紅色Label，就會自動幫你上活動Tag。
- Visibility & access
通常我會先上傳為Draft，看產出的網頁有沒有問題；
沒問題之後才會改成Public
全部都設置完畢後，記得要點擊SAVE
這樣上傳&讓其他人遊玩的流程
\\\都大功告成啦///
四、itch.io網頁外觀顯示設置(Optional)
以下內容主委加碼
上傳完畢後，點擊遊戲專案的網頁連結，
會發現畫面看起來很空，這很正常。
因為在itch.io每次上傳，都會需要重新設定一次該網頁頁面的CSS內容
不過基礎調整的方式不難，如果會寫CSS的人也可以import自己魔改過的版本。
這邊就先記錄基礎使用方式：
於上方頁籤，點擊Edit theme，開啟右側選單內容。
色票相關設置以及字體，
我個人覺得有設定這些顯示面就好蠻多的了。(跟預設全白背景+文字相比)
我自己的設置也如附圖，可以參考看看。
下方的圖片設置：
- Banner：
顯示在遊戲頁面上方的大型橫幅。
建議尺寸1024 x 300 px
- Background：
設定整個頁面的背景圖，會鋪滿整個頁面底層。
1920 x 1080 px 或更大（可重複或拉伸為佳）
- Embed BG
嵌入遊戲（WebGL）時顯示的背景圖，也就是 iframe 的背景。
建議尺寸為和遊戲輸出畫面相同，
但因為畫面通常不為透明，且會造成額外效能，所以目前我也沒用過
我個人覺得有加上banner就看起來完成度蠻高的
推薦使用
不知不覺寫了蠻多東西的
如果有其他相關經驗或想法都可以在留言區跟我說
之後有機會應該也會記錄一些學習日誌之類的吧
大概先這樣，有空再見///
Log：2025/04/13 add document
