[2020] 輕鬆製作網頁遊戲 – Unity 輸出WebGL並掛在Git Hub

如果你還沒安裝Unity或還不了解介面怎麼使用，可先到下面看看其他教學文喔!

1. Unity 基本安裝與註冊: https://faliangstudio.com/unity-installation/
2. 推薦 Unity 3D 線上課程：https://faliangstudio.com/online-video/
3. 推薦 Unity 3D 書籍：https://faliangstudio.com/unity-book/
4. Unity 實用操作小撇步：https://faliangstudio.com/category/unity/basic-unity/

步驟一：從Unity 輸出WebGL

開啟Unity Hub，檢查是否已有WebGL 發布功能

開啟Unity hub,到安裝檢查自己目前的Unity版本是否有安裝WebGL，很明顯可以看到亮亮是沒有安裝的，所以趕緊來安裝一下。

建立新專案，並在場景上隨意擺放一個方塊

我們主要是教學Unity 輸出WebGL以後掛在Github變成自己網頁遊戲，所以在此我們只要在場景上隨意放上一個方塊，先當示意唷!

將此專案轉檔成WebGL

到File → Build Setting → WebGL旁邊沒有Unity LOGO或是可以檢查專案左上角沒有顯示WebGL相關字樣的話，代表尚未將此專案轉換成WebGL模式喔！所以我們要選擇WebGL → Switch Platform(切換平台)，將此專案轉換成WebGL模式。

好了以後就會像下圖，Unity LOGO跑到WebGL選項了，接下來我們選擇Add Open Scenes，把目前要輸出的場景加入吧!

輸出WebGL

以上步驟都好了，我們就可以進行輸出喔!點選Build → 並看要儲存在哪兒，記得建立一個資料夾存放 → 選擇 [選擇資料夾] 的按鈕，就會開始進行輸出喔!

相信大家到這都輸出好了吧!輸出完的檔案只是普通的網頁檔案，無法給予朋友網址，讓他們玩你做的遊戲，所以接下來第二部分我們就要進行將發布出來的檔案放在GitHub囉!

不知道甚麼是GitHub嗎?可以來看看維基百科的解釋：https://zh.wikipedia.org/wiki/GitHub

步驟二：將Unity WebGL掛在GitHub

建立GitHub帳號

我們這次主要是將Unity 發布出來WebGL放至在GitHub，所以還沒有建立GitHub帳號的趕快點以下網址進行建立唷!

註冊GitHub連結：https://github.com/login?return_to=%2Fygtw%2FWalk-in-umbrella-with-Rain2%2Ftree%2Fmaster%2Fdata

完成註冊記得到信箱收發認證信，

就可以進行登入於首頁(點左上角的貓可以返回首頁)囉!

建立新的資料庫

點選右上角的+號 → New Repository(建立新資料庫)。

進入設定資料庫這個頁面，主要輸入幾個資訊：

1.建立資料庫的名稱，可以輸入遊戲名稱。

2.選擇你的檔案是否要進行公開。

今天我們只是簡單測試，所以直接輸入遊戲名稱，設定為公開，並按下綠色按鈕建立資料庫(Create repository)，如下圖。

接著我們要上傳我們的檔案，會看到有行字uploading an existing file. ，我們就點下去。

將Unity輸出的檔案拖入上傳區，如下圖。

在Commit Changes輸入First Upload，然後點選Commit Changes綠色按鈕。

上傳完成以後點選設定(Setting)，到設定頁面最下面找到GitHub Pages，原本Source是None→將此修改為Master branch。

然後點GitHub Page的網址，你的網頁遊戲就做好囉!!!大家快來試試看吧!!!

Ps.如果按下網址看到404，記得回上一頁重新整理以後再重新點入網址唷!

2021/10/04 更新操作影片：https://youtu.be/me76cl4Zp3E

如果你喜歡我的文章內容，可以幫我拍手、留言並分享給身邊的朋友，讓更多的人看見我的文章。
如果這篇文章有幫助到你，想借你的幾秒用google或FB登入，然後幫我拍手 Like 5次鼓勵。