cocos creator 視頻交互遊戲

前段時間剛參加完cocos開發者沙龍-杭州站，聽完cocos技術總監panda對creator 2.0框架升級·性能優化·2.1版本3d渲染的介紹後，感受creator的將來仍是很是不錯的。今天就給你們分享下最近作的一個視頻與遊戲相結合的教育類遊戲。 若是對cocos creator不是很瞭解的能夠訪問引擎的官方網站,api,論壇

先上個效果圖

若是在視頻上面實現遊戲呢？

creator的控件都是渲染在canvas上的，若是直接在視頻顯示的位置放置creator的ui控件，控件是會被視頻給蓋住的。固然若是本身寫button樣式放到cc.game.container下雖然是能顯示出來，不過這樣會存在不少未知的問題。因此這個方式被kill了，如今的作法是：
首先.須要修改引擎的代碼CCMacro.js下面的參數ENABLE_TRANSPARENT_CANVAS設置爲true。下面是該參數的說明：

順便說一下：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而且能夠對他們進行操做了。效果圖：

遇到的問題

目前這種方式僅支持 Web，不一樣的瀏覽器內核播放視頻會有不一樣的效果，好比x5在播放視頻前會黑屏一會，因此若是在播放視頻的過程當中須要切換視頻的話，效果會比較差，目前的作法是把視頻拼接成一個視頻，經過設置播放進度的方式讓視頻播放流暢。目前沒有找到好的處理方式。

最後

最後感謝cocos官方人員panda.pp_pro的幫助,但願creator愈來愈強大，愈來愈好用