[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次鼓勵。

在〈“[2020] 輕鬆製作網頁遊戲 – Unity 輸出WebGL並掛在Git Hub”〉中有 6 則留言

  1. 不好意思,想問最後一個步驟,Source裡面沒有master branch的選項。
    是漏掉什麼部分了嗎?
    感謝教學!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *