Egret白鹭引擎实例开发之棍子英雄StickHero(四)开始场景

开始场景的效果图

image.png

1、在game目录下新建StartScene.ts文件,获取舞台的宽高,添加背景和标题

image.png

2、在initView()方法下实现开始按钮,按钮居中显示,同时上下缓慢移动,点击按钮后会进入游戏场景,通过回调函数startBtnCallback实现

image.png

按钮上下移动用到缓动动画Tween实现

image.png

3、添加台阶和切换按钮

image.png

先创建两个台阶,然后将英雄放在台阶上,第一个台阶放在屏幕中间,另外一个放在屏幕外,创建4个英雄放入到容器数组heroVector中

    //添加台阶
    private addHeroStage(){
        var stageH = this.stageH;
        var stageW = this.stageW;
        //先创建两个台阶
        var stage1 = new Stage();
        var stage2 = new Stage();
        stage1.stageSprite.scaleX = 40;
        stage2.stageSprite.scaleX = 40;
        stage1.x = stageW/2;
        stage1.y = stageH - stage1.height;
        stage2.x = stageW*1.5;
        stage2.y = stageH - stage2.height;
        this.addChild(stage1);
        this.addChild(stage2);
        //创建英雄
        var heroVector = [];
        for(var i = 1; i <= 4; i++){
            var hero = new Hero(i);
            heroVector.push(hero);
        }
        //将英雄放在台阶上
        stage1.addChild(heroVector[0]);
        stage1.addChild(heroVector[2]);
        heroVector[2].visible = false;
        this.stage1Hero = 0;
        stage2.addChild(heroVector[1]);
        stage2.addChild(heroVector[3]);
        heroVector[3].visible = false;
        this.stage2Hero = 1;
        this.stage1 = stage1;
        this.stage2 = stage2;
        this.heroVector = heroVector;
        //添加英雄简介1
        var heroLabel1 = new egret.TextField();
        stage1.addChild(heroLabel1);
        heroLabel1.textAlign = 'center';
        heroLabel1.text = '背负着理想和热血的棍子少年';
        heroLabel1.size = 36;
        heroLabel1.y = stage1.height*0.65;
        heroLabel1.width = stage1.width *0.25;
        heroLabel1.anchorOffsetX = heroLabel1.width/2;
        heroLabel1.anchorOffsetY = heroLabel1.height/2;
        //添加英雄简介2
        var heroLabel2 = new egret.TextField();
        stage2.addChild(heroLabel2);
        heroLabel2.textAlign = 'center';
        heroLabel2.text = '背负着理想和热血的棍子少年';
        heroLabel2.size = 36;
        heroLabel2.y = stage2.height*0.65;
        heroLabel2.width = stage2.width *0.25;
        heroLabel2.anchorOffsetX = heroLabel2.width/2;
        heroLabel2.anchorOffsetY = heroLabel2.height/2;
    }

点击切换按钮会移出当前台阶和英雄,然后移入新的台阶和英雄

    //切换按钮回调
    private heroBtnCallback(e:egret.TouchEvent):void{
        var stageW = this.stageW;
        var stage1 = this.stage1;
        var stage2 = this.stage2;
        if(!this.canChoose){
            return;
        }
        this.canChoose = false;
        //台阶1在屏幕中间,移出台阶1,移入台阶2
        if(this.curStage == 1){
            this.curStage = 2;
            var tw1 = egret.Tween.get(stage1);
            tw1.to({x:-stageW/2}, 500).call(()=>{stage1.x = stageW*1.5;});
            var tw2 = egret.Tween.get(stage2);
            tw2.to({x:stageW/2},500).call(this.choosenCallback,this);
        }
        //台阶2在屏幕中间,移出台阶2,移入台阶1
        else if(this.curStage == 2){
            this.curStage = 1;
            var tw3 = egret.Tween.get(stage2);
            tw3.to({x:-stageW/2},500).call(()=>{stage2.x = stageW*1.5});
            var tw4 = egret.Tween.get(stage1);
            tw4.to({x:stageW/2},500).call(this.choosenCallback,this);
        }
    }

点击切换按钮有四个英雄循环展示,所以台阶移出后,台阶上的英雄需要进行替换

    //英雄切换后回调
    private choosenCallback():void{
        if(this.curStage == 1){
            //移除英雄2,添加英雄4
            if(this.stage2Hero == 1){
                this.heroVector[1].visible = false;
                this.heroVector[3].visible = true;
                this.stage2Hero = 3;
            }
            //移除英雄4,添加英雄2
            else if(this.stage2Hero == 3){
                this.heroVector[3].visible = false;
                this.heroVector[1].visible = true;
                this.stage2Hero = 1;
            }
            //当前展示的英雄索引为下一个台阶上的英雄索引减1
            this.curHero = (this.stage2Hero - 1 + 4)%4 + 1;
        }else if(this.curStage == 2){
            //移除英雄1,添加英雄3
            if(this.stage1Hero == 0){
                this.heroVector[0].visible = false;
                this.heroVector[2].visible = true;
                this.stage1Hero = 2;
            }
            //移除英雄3,添加英雄1
            else if(this.stage1Hero == 0){
                this.heroVector[2].visible = false;
                this.heroVector[0].visible = true;
                this.stage1Hero = 0;
            }
            //当前展示的英雄索引为下一个台阶上的英雄索引减1
            this.curHero = (this.stage1Hero - 1 + 4)%4 + 1;
        }
        //可继续切换
        this.canChoose = true;
    }


发表评论

(必填)

(必填)

(以便回访)

博客已稳定运行: 访问量:115,554 views 网站备案号:闽ICP备17026396号-1