零基礎Unity做一個中秋詩詞鑒賞網頁，提前祝您中秋快樂！
- 前言
- 一，環境搭建
- 1.1 安裝Unity
- 1.2 添加WebGl模塊
- 二，開發專案
- 2.1 匯入插件
- 2.2 專案搭建
- 2.3 邏輯處理
- 三，打包WebGl
- 3.1 打包WebGL設定
- 3.2 打開本地檔案問題
- 四，將倉庫轉為網頁
- 4.1 上傳GitHub
- 4.2 設定Pages
- 五，遇到的問題
- 5.1 單個檔案太大上傳失敗問題
- 5.2 視頻在WebGl不顯示問題
前言
本文你將學會，安裝一個版本Unity（本文2019.4.19）并且添加WebGl模塊，使用DoTween插件用于影片展示，將GitHub倉庫變成外部可訪問的網頁，
效果展示：
發布鏈接：https://czhenya.github.io/Mid-Autumn/
一，環境搭建
1.1 安裝Unity
打開UnityHub，左側欄選擇安裝，點擊右側安裝按鈕：
點擊后會彈出如下面板，可以選擇一個版本或者點擊上面藍字官方發布網站找到指定版本進行下載即可：
1.2 添加WebGl模塊
-
新安裝版本：選擇“WebGL Build Support”，點擊完成，等待安裝完成即可，
-
若是已安裝版本：
打開“Unity Hub”，左側安裝目錄，找到需要打WebGL包的已安裝版本Unity，點擊三個點“…”，選擇添加模塊：
選擇“WebGL Build Support”，點擊完成，等待安裝完成即可，
二，開發專案
2.1 匯入插件
將下載的DoTween插件匯入到Unity（直接拖拽到工程目錄即可），勾選下圖畫框的檔案夾，然后點擊Import按鈕匯入即可：
2.2 專案搭建
在Asset右鍵 --> Create --> Render Texture 命名為"MoveRenderTexture":
設定尺寸:
在Hierarchy面板右鍵創建Camera --> 設定TargetTexture 為創建的“MoveRenderTexture”:
右鍵創建RawImage并添加Video Player 面板設定如下：
右鍵創建Text 內容、字體、字號設定如下：（有幾首詩詞，就復制幾份）
2.3 邏輯處理
播放視頻邏輯：
使用DoTween插件處理文本影片：
PS：專案中使用詩句和視頻素材找自己喜歡的就好~
三，打包WebGl
3.1 打包WebGL設定
打開“Build Settings…” 面板，禁用壓縮格式，Compression Format設定為Disable
然后回到點擊“Build Settings…” 面板，”Build“，選擇打包路徑，然后等待打包完成即可：
打包成功后，會在剛剛指定的目錄得到如下檔案：
此時雙擊”index.html“就可以在瀏覽器中玩耍了，
3.2 打開本地檔案問題
打開提示：
釋義：
看起來你的瀏覽器不支持運行Unity WebGL內容從檔案:// url，請將它上傳到http服務器，或嘗試不同的瀏覽器，
PS：若你的瀏覽器可以打開”index.html“這個本地網頁，那么可以忽略這個問題，若不能打開，推薦使用”火狐瀏覽器“試試，不過即使打不開也沒有關系，反正我們后面要傳到GitHub上面，
四，將倉庫轉為網頁
4.1 上傳GitHub
步驟：創建遠程倉庫 （要設定為Public哦~）–> 將上打包出的WebGl檔案上傳 --> 重繪網頁驗證創建完成即可：
4.2 設定Pages
在GitHub上選擇“Settings” --> 左側標簽欄選擇“Pages” --> 然后將"Source"設定為“master” --> 最后點擊右側“Save”保存，等網頁重繪完成，即可看到下圖帶顏色背景框部分的URL，點擊此URL，即可訪問，
設定成功后即可進行訪問了，
PS：有時候會有些延時，重繪不出來就稍等會再試下（一般不會超過3分鐘），
五，遇到的問題
5.1 單個檔案太大上傳失敗問題
報錯資訊：
remote: error: File unityweb is 176.17 MB; this exceeds GitHub’s file size limit of 100.00 MB
解決方案：
- 先運行如下命令，將本地需要上傳的大檔案洗掉：
git rm --cached YOR-GIANT-FILE
git commit --amend -CHEAD
-
下載：Git Large Filehttps://git-lfs.github.com/
-
打開git-bash，在專案目錄下，執行以下命令：
git lfs install
- 然后添加選擇您希望Git LFS管理的檔案型別，這一步成功后會生成一個gitattributes檔案，之后也可以選擇在這個檔案內部直接進行編輯，
git lfs track "*.大檔案的擴展名"
- 添加.gitattributes檔案并commit,之后單獨push這個檔案到到遠程端，（如果之前已經添加過大型檔案，可以撤銷或者回退）
git add .gitattributes
git commit -m "add the .gitattributes"
git push origin main
最后就可以上傳成功了！
5.2 視頻在WebGl不顯示問題
問題描述：
在編輯器下運行正常的VideoPlayer視頻，發布WebGl之后在網頁上顯示不出來，
問題原因：
Unity2019自帶的VideoPlayer組件，如果在WebGL下，只可以直接通過URL地址播放視頻，如果用clip的方式會報錯，無法播放視頻，
解決方案：
將視頻放置在StreamingAssets目錄下，StreamingAssets目錄和在安卓平臺一樣，不會被打包，
在需要播放視頻視頻時，進行URL初始化，然后Play，即可解決，具體參考代碼如下：
videoPlayer.url = Application.streamingAssetsPath + "shipin.mp4";
videoPlayer.Play();
本文制作后效果鏈接：https://czhenya.github.io/Mid-Autumn/ 歡迎大家觀看，
最后，提前祝愿大家中秋快樂！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/300883.html
標籤：其他
上一篇：Unity封裝VideoPlyaer組件包含全屏+靜音+進度條+時長顯示
下一篇：業務邏輯漏洞總結