Unity 之 發布WebGL并部署到GitHub供外部訪問
- 前言
- 一，準備作業
- 1.1 Unity環境配置
- 1.2 GitHub相關操作
- 二，發布WebGL
- 2.1 切換目標平臺
- 2.2 發布配置
- 2.3 打包WebGL
- 2.4 打開本地檔案問題
- 三，設定靜態網頁
- 3.1 上傳GitHub
- 3.2 設定Pages
- 3.3 成功訪問
- 相關拓展：內嵌到網站
前言
自己發布游戲到網頁是什么體驗？本文教你發布自己的網頁游戲，還不趕緊試試，讓好友也能在瀏覽器上玩到自己的游戲
點擊試玩：2048化學元素版
效果展示：
PS：解析度是根據打包設定來的哦~ ，我這個為什么把解析度做這么小，后面會說~
一，準備作業
1.1 Unity環境配置
打開“Unity Hub”，左側安裝目錄，找到需要打WebGL包的已安裝版本Unity，點擊三個點“…”，選擇添加模塊：
選擇“WebGL Build Support”，點擊完成，等待安裝完成即可，
1.2 GitHub相關操作
-
在GitHub上創建遠程倉庫
登陸GitHub官網（打不開的話需要Fan墻），點擊右上角“+”，選擇“New repository” 然后彈出如下界面，進行創建專案配置，圖中紅框分別表示：專案名稱，設定為共開（這樣別人才能訪問到），帶描述檔案，最后點擊下面的創建按鈕：
-
將遠程倉庫克隆到本地
這就不多說了，使用你的習慣的任何方式都可以，我用的是“Source Tree“，操作如下：在網頁中復制1中創建好的URL，“Source Tree“中點擊”新建“ 彈窗如下圖，按圖填寫完成，點擊克隆即可：
-
克隆成功
克隆成功后會在你填寫的目錄中看到有一個”README.md“的檔案，若你的電腦設定開啟了”顯示隱藏檔案“，應該還有”.git“這樣的檔案，
二，發布WebGL
2.1 切換目標平臺
兩種方式：1是打開時切換平臺，2是打開后在工程中切換
PS:若你還沒有預發布專案，只想測驗發布WebGl功能，那么就新建工程然后跟著操作即可，
-
打開時切換目標平臺
若你已經有了預發布的專案那么就直接把目標平臺修改為”WebGL“ 然后打開專案即可;
-
打開后切換目標平臺
若你的專案沒有按照第一步的方式使用”WebGL”平臺打開，那么需要在工程中“Build Settings…” --> 彈出面板選擇“WebGL” --> 點擊“Switch Platform” 等待切換平臺完成即可：
2.2 發布配置
打開"Project Settings"面板 --> 左側選項欄選擇”Player“：
-
基礎資訊配置
公司名，專案名，版本號，（沒有特殊需求的話默認也行）
-
解析度和顯示
找到下面”Resolution and Presentation“面板，設定解析度，若在不想再后臺運行，取消勾選”Run in Background“
PS：其他配置和發布其他平臺基本一致，沒特殊需求也不需要修改，
2.3 打包WebGL
打開“Build Settings…” 面板，點擊”Build“，選擇打包路徑，然后等待打包完成即可：
打包成功后，會在剛剛指定的目錄下得到兩個檔案：
此時雙擊”index.html“就可以在瀏覽器中玩耍了，
2.4 打開本地檔案問題
打開提示：
看起來你的瀏覽器不支持運行Unity WebGL內容從檔案:// url，請將它上傳到http服務器，或嘗試不同的瀏覽器，
若你的瀏覽器可以打開”index.html“這個本地網頁，那么可以忽略這個問題，若不能打開，推薦使用”火狐瀏覽器“試試，不過即使打不開也沒有關系，反正我們后面要傳到GitHub上面，
三，設定靜態網頁
3.1 上傳GitHub
還是和1.2一樣，使用你習慣的方式進行推送即可
將Unity打包出來WebGL檔案放到本地倉庫(1.2克隆的那個檔案夾)中，然后推送到遠程倉庫即可：
推送成功后，在網站上可以看到如下目錄：
3.2 設定Pages
在GitHub上選擇“Settings” --> 左側標簽欄選擇“Pages” --> 然后將"Source"設定為“master” --> 最后點擊右側“Save”保存，等網頁重繪完成，即可看到下圖帶顏色背景框部分的URL，點擊此URL，即可訪問，
3.3 成功訪問
本文示例的URL：https://czhenya.github.io/2048.github.io/ 點擊即可在線玩耍「2048化學元素版」
相關拓展：內嵌到網站
先說說在“前言”留下的問題，做所以做這么下，是為了… 看下圖吧，一圖勝千言
沒錯，是為了在這自定義區域可以玩耍，
不過好像官方并不允許這么做（第二天自定義模塊被清空了），所以我現在的主頁上也就沒有這個效果了，不過知識還是要學習的，有個人網站的小伙伴，可以嘗試下，將小游戲嵌入到自己的網站，
代碼如下：
<div align="center">
<iframe id="game" width="286" height="446" src="https://czhenya.github.io/2048.github.io/"></iframe>
</div>
上面代碼的“width”和“height”都可以根據游戲的寬高進行修改，而“src” 你可以在各種小游戲網站上找到后綴名是.html都可以，
相關推薦：
一文零基礎教你制作Unity 2048 ！【文末原始碼】
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/294568.html
標籤：其他
上一篇：用C語言實作三子棋游戲