cocos creator 視訊互動遊戲

無聊的小蟲發表於2018-10-29
遊戲

前段時間剛參加完cocos開發者沙龍-杭州站，聽完cocos技術總監panda對creator 2.0框架升級·效能優化·2.1版本3d渲染的介紹後，感覺creator的未來還是非常不錯的。今天就給大家分享下最近做的一個視訊與遊戲相結合的教育類遊戲。 如果對cocos creator不是很瞭解的可以訪問引擎的官方網站,api,論壇

先上個效果圖

cocos creator 視訊互動遊戲

如果在視訊上面實現遊戲呢？

creator的控制元件都是渲染在canvas上的，如果直接在視訊顯示的位置放置creator的ui控制元件，控制元件是會被視訊給蓋住的。當然如果自己寫button樣式放到cc.game.container下雖然是能顯示出來，不過這樣會存在很多未知的問題。所以這個方式被kill了，現在的做法是：
首先.需要修改引擎的程式碼CCMacro.js下面的引數ENABLE_TRANSPARENT_CANVAS設定為true。下面是該引數的說明：

cocos creator 視訊互動遊戲
順便說一下：creator2.0的引擎每次開啟編輯器會重新編譯引擎，所以修改程式碼後只需要重啟就能實現效果哦！
其實.修改完引擎後我們還需要把canvas的透明度設定成透明，程式碼：

    cc.Camera.main.backgroundColor = cc.color(0, 0, 0, 0);
複製程式碼

最後.再設定video與canvas的顯示層級就可以了

        let video0 = document.getElementsByClassName('cocosVideo')[0];
        video0.style.zIndex = 5;

        let gCanvas = document.getElementsByClassName('gameCanvas')[0];
        gCanvas.style.position = 'relative';
        gCanvas.style.zIndex = 10;
複製程式碼

現在你就可以在視訊上面放置任何你想放置的ui並且可以對他們進行操作了。效果圖：

cocos creator 視訊互動遊戲

遇到的問題

目前這種方式僅支援 Web，不同的瀏覽器核心播放視訊會有不同的效果，比如x5在播放視訊前會黑屏一會，所以如果在播放視訊的過程中需要切換視訊的話，效果會比較差，目前的做法是把視訊拼接成一個視訊，通過設定播放進度的方式讓視訊播放流暢。目前沒有找到好的處理方式。

最後

最後感謝cocos官方人員panda.pp_pro的幫助,希望creator越來越強大，越來越好用

相關文章