Recently, I just attended the CoCOS Developer Salon — Hangzhou Station. After listening to the introduction of Creator 2.0 framework upgrade, performance optimization and 3d rendering version 2.1 by Panda, the technical director of CoCOS, I feel that creator has a very good future. Today, I will share with you an educational game that combines video and games recently. If you don’t know much about Cocos Creator, you can visit the engine’s official website, API, and forum

Let’s start with the renderings

What if you implement a game on top of a video?

The controls of Creator are all rendered on canvas. If the UI control of Creator is placed directly at the position shown by the video, the control will be covered by the video. Of course, if you write a button style and put it in cc.game.container, it can be displayed, but there are a lot of unknown problems. So this method has been killed, and now it’s done: First. You need to change the ENABLE_TRANSPARENT_CANVAS parameter under the engine code ccmacro.js to true. The following is a description of this parameter:


    cc.Camera.main.backgroundColor = cc.color(0, 0, 0, 0);
Copy the code

Finally, it is ok to set the display hierarchy of video and 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;
Copy the code

Now you can put whatever UI you want on top of the video and manipulate it. Effect:

Problems encountered

At present this way only supports the Web, play video on browser kernel will have different effects, such as the x5 before playing the video will be black screen for a while, so if in the process of playing the video need to switch video, the effect will be more bad, the current approach is to put the video joining together into one video, by setting the broadcast pace to smooth video playback. There is no good way to deal with it.

The last

Finally, I would like to thank panda.pp_pro, the official staff of COCOS, for your help. I hope Creator will become more and more powerful and useful