cocoscreator - 视频播放器在 Cocos Creator 中总是排在首位？

Question

我正在开发一款游戏，我希望我的纹理图像保持在视频播放器的顶部，但目前视频播放器始终保持在所有视图的顶部？我正在使用 CocosCreator 框架和打字稿。

标签： cocoscreator

Answer 1

VideoPlayer, EditBox and WebView Component are appended in cc.game.container so these component will add as last child and These will appear on the top.

By following these steps you can change the order or appearance.

1. If you wan to put something like a video player Behind the canvas and want to put other component above it, So first you will have to make your canvas transparent. You can do this by setting the flag of engine file "/engine/cocos2d/core/platform/CCMacro.js"

Change the flag ENABLE_TRANSPARENT_CANVAS to true

2. You need the change the ZOrder of canvas and video component class in the start of the script responsible for video player.

           start: function () { 
            cc.director.setClearColor(new cc.Color(0, 0, 0, 0))
            let videoElement = document.getElementsByClassName('cocosVideo')[0];
            videoElement.style.zIndex = 2;
            let gameCanvas = document.getElementsByClassName('gameCanvas')[0];
            gameCanvas.style.position = 'relative';
            gCanvas.style.zIndex = 4;
       },

3.Here is the complete script to play a video over canvas.

cc.Class({
    extends: cc.Component,

    properties: {
        video:{
            default: null,
            type: cc.VideoPlayer
        }
    },

    // use this for initialization
    onLoad: function () {
        this.videoPlayer = this.node.getComponent(cc.VideoPlayer);
        this.videoPlayer.node.on('ready-to-play', this.callback, this);
    },
    
    start: function () { 
        cc.director.setClearColor(new cc.Color(0, 0, 0, 0))
        let videoElement = document.getElementsByClassName('cocosVideo')[0];
        videoElement.style.zIndex = 2;
    
        let gameCanvas = document.getElementsByClassName('gameCanvas')[0];
        gameCanvas.style.position = 'relative';
        gCanvas.style.zIndex = 4;
    },

    callback () {
        console.log("video ready to play")
        this.videoPlayer.play();
     },

    // called every frame
    update: function (dt) {

    },
});