cocos creator编写《皇家守卫军》开场UI之场景切换开关门动画

制作基本的UI界面

确认各个节点大小与适当位置

场景大小为700×600
logo，开始按钮，关于按钮需要通过查看图片像素定制好相应大小，如下图199×96。

制作各类根节点

使用父节点来管理子节点，方便以后管理UI动画
UI_ROOT、anchor_center、start_anim_root、loading_door 一个不同系列的动画用不同的父节点挂载

制作开关门UI动画

修改两扇门的锚点位置

制作开关门首先涉及到精灵节点坐标的移动，为了方便计算，首先需要把门的锚点修改一下，将左门的锚点放到右边中间位置，即Anchor(1，0.5)的位置，右门则镜像对称Anchor(0，0.5)

制作模块

属性状态

开门与关门的逻辑首先判断门的状态，即这是开门状态还是关门的状态。所以在代码的properties上我写了一个door_state的属性，并且为了方便以后的调试，加一个动画时间的属性duration

 properties: {
        door_state:0,//0为关门，1为开门
        duration:0.1, //控制动画时间
    },

查找两扇门的节点

onLoad () {
        this.l_door = this.node.getChildByName("l_door");
        this.r_door = this.node.getChildByName("r_door");
}

开门与关门

开门前需要判断门的状态，并且为了动画能顺利播放，在播放动画前设置两扇门的x位置，并且使用director的方法getWinSize()获取屏幕大小，利用cc.moveBy()编辑动画的速度与移动坐标，结束时执行end_fun()在以后游戏制作时切换场景的方法。门的开关各占一半大小，所以win_size.width*0.5

开门

 open_the_door:function(end_fun){
        if(this.door_state === 1){ 
            return;
        }
        this.door_state = 1;
        this.l_door.x = 2; //设置左门的位置
        this.r_door.x = -2; //设置右门的位置
        var win_size = cc.director.getWinSize();//获取屏幕大小
        var m1 = cc.moveBy(this.duration,-win_size.width*0.5-2,0);
        this.l_door.runAction(m1);
        var m2 = cc.moveBy(this.duration,win_size.width*0.5+2,0);
        var func = cc.callFunc(function(){
            if(end_fun){
                end_fun();
            }
        }.bind(this),this.r_door);
        var seq = cc.sequence([m2,func]);
        this.r_door.runAction(seq);
    },

关门

关门实质与开门的坐标移动相反

close_the_door:function(end_fun){
        if(this.door_state == 0){
            return;
        }
        this.door_state = 0;
        var win_size = cc.director.getWinSize();
        this.l_door.x = -win_size.width*0.5;
        this.r_door.x = win_size.width * 0.5;
        cc.log(this.l_door.x);
        var m1 = cc.moveBy(this.duration,(win_size.width*0.5)+2,0);
        cc.log(win_size.width*0.5+2);
       
        this.l_door.runAction(m1);
      
        var m2 = cc.moveBy(this.duration,(-win_size.width*0.5)-2,0);
        var func = cc.callFunc(function(){
            if(end_fun){
                end_fun(); 
            }
        }.bind(this),this.r_door);
        var seq = cc.sequence([m2,func]);
        this.r_door.runAction(seq);
    },

游戏开始时确定门的状态

默认开始时会从关门状态到开门

 _set_door_state:function(state){
        this.door_state = state;
        if(this.door_state == 1){
            var win_size = cc.director.getWinSize();
            this.l_door.x = -win_size.width * 0.5;
            this.r_door.x = win_size.width *0.5;
        }
        else if(this.door_state == 0){
            this.l_door.x = 2;
            this.r_door.x = -2;
        }
    },

绑定脚本文件与测试动画

将写好的脚本文件绑定到loading_door节点上

为了测试动画，使用脚本与按钮调用开门与关门动画的方法,利用cc.find()来查找节点和getComponent()方法获取节点组件，使用cc.find()时通过下图这个地方能准确查找到需要的节点

cc.Class({
    extends: cc.Component,

    properties: {
       
    },

   

     onLoad () {
        this.test_door = cc.find("UI_ROOT/anchor_center/loading_door").getComponent("loading_door");
        this.game_stated = false;
    },

    start () {
        //test
        this.test_door.open_the_door(function(){
            console.log("open door");
        });
    },

    game_started:function(){
        console.log("game_start_btn");
        if(this.game_stated){
            return;
        }
        this.game_stated = true;
        this.test_door.close_the_door(function(){
            console.log("close door");
        });
    },

    // update (dt) {},
});

效果

也可以加下Q群 一起讨论学习 点击下面链接即可加群
加群链接