Html5游戏之KiwiJs3-按键、动画

创建左右按键控制NPC行走并释放技能动画。

先准备一张NPC连播动画图和一张技能连播图

Kiwi.js中创建NPC动画是通过AnimationManager的

`add`

(

name
cells
speed
[loop=false]
[play=false]
[addToAtlas=true]

)

方法来实现

//创建背景
            this.bgSprite = new Kiwi.GameObjects.StaticImage(this,this.textures.background,1000,600);
            this.bgSprite.x = 0;
            this.bgSprite.y = 0;
            this.addChild(this.bgSprite);
            //创建游戏npc
            this.snakeSprite = new Kiwi.GameObjects.Sprite(this,this.textures.snake,150,117);
            //创建动作，制定显示帧、帧时长等

            this.snakeSprite.animation.add("idle",[0,1],0.3,true,true);
            this.snakeSprite.animation.add("walking",1,2,3,4,5,6],0.2,false);
            this.snakeSprite.animation.add("spawn",[1,2],false,false);
            this.snakeSprite.x = 100;
            this.snakeSprite.y = 370;
            this.snakeSprite.speed = 2;
            this.addChild(this.snakeSprite);

完整的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title>Kiwi.js-游戏精灵</title>
    <script src="assets/kiwi.js"></script>
    <script type="text/javascript">
        var options = {width:1280,height:600};
        var myGame = new Kiwi.Game("","myGame",null,options);
        //创建游戏场景
        var helloState = new Kiwi.State("HelloState");
        helloState.preload = function () {
            Kiwi.State.prototype.preload.call(this);
            this.addImage("background","assets/bg.png");
            this.addSpriteSheet("snake","assets/snake.png",117);
            this.addSpriteSheet("snakeSkill","assets/skill.png",76,36);
        };

        helloState.create = function () {
            Kiwi.State.prototype.create.call(this);
            //创建背景
            this.bgSprite = new Kiwi.GameObjects.StaticImage(this,false);
            this.snakeSprite.x = 100;
            this.snakeSprite.y = 370;
            this.snakeSprite.speed = 2;
            this.addChild(this.snakeSprite);

            //键盘
            this.leftKey = this.game.input.keyboard.addKey(Kiwi.Input.Keycodes.A);
            this.rightKey = this.game.input.keyboard.addKey(Kiwi.Input.Keycodes.D);
            this.skillKey = this.game.input.keyboard.addKey(Kiwi.Input.Keycodes.J);

            this.game.input.keyboard.onKeyUp.add(this.onKeyboardUp,this);
            this.game.input.keyboard.onKeyDownOnce.add(this.onKeyboardDownOnce,this);
        };
        //创建NPC精灵类
        var SnakeSkill = function(state,x,y,scaleX){
            Kiwi.GameObjects.Sprite.call(this,state,state.textures.snakeSkill,false);
            this.speed = 9;
            this.scaleX = scaleX;
            //NPC自动加载动画
            this.animation.add("spawn",3],true);
            //自动销毁技能对象
            SnakeSkill.prototype.selfDestroy = function(){
                console.log("skill destroy");
                //state.removeChild(this);
                //this.destroy(true);
                this.exists = false;
            };
            //技能运动
            SnakeSkill.prototype.update = function(){
                if(this != undefined){
                    Kiwi.GameObjects.Sprite.prototype.update.call(this);
                    this.x += scaleX * this.speed;
                }
            }
            //技能动画播放完自动销毁
            this.animation.onStop.add(this.selfDestroy,this);
        };

        Kiwi.extend(SnakeSkill,Kiwi.GameObjects.Sprite);

        //按键
        helloState.onKeyboardDownOnce = function(keyCode,key){
            //按下A,D(左,右)按键播放行走动画
            if(this.leftKey == key || this.rightKey == key){
                this.snakeSprite.animation.play("walking");
                this.snakeSprite.isspawning = false;
            }
            //改变方向
            if(this.leftKey == key && this.snakeSprite.scaleX == 1){
                this.snakeSprite.scaleX = -1;
            }
            if(this.rightKey == key && this.snakeSprite.scaleX == -1){
                this.snakeSprite.scaleX = 1;
            }
            //放技能按键
            if(this.skillKey == key && !this.snakeSprite.isspawning){
                this.snakeSprite.animation.play("spawn");
                this.snakeSprite.animation.onStop.add(this.spawnSnakeSkill,this);
                this.snakeSprite.isspawning = true;
            }
        };
        //创建技能
        helloState.spawnSnakeSkill = function(){
            var snakeSkill = new SnakeSkill(this,this.snakeSprite.x-40+(1+this.snakeSprite.scaleX)*this.snakeSprite.width/2,this.snakeSprite.y+50,this.snakeSprite.scaleX);
            this.addChild(snakeSkill);
            this.snakeSprite.animation.play("idle");
            this.snakeSprite.isspawning = false;
        };
        //按键松开停止行走动画
        helloState.onKeyboardUp = function(keyCode,key){
            if(this.leftKey == key || this.rightKey == key){
                this.snakeSprite.animation.play("idle");
            }
        };

        helloState.update = function(){
            Kiwi.State.prototype.update.call(this);
            if(this.leftKey.isDown){
                this.snakeSprite.x -= this.snakeSprite.speed;
            }

            if(this.rightKey.isDown){
                this.snakeSprite.x += this.snakeSprite.speed;
            }

        };


        myGame.states.addState(helloState);

        myGame.states.switchState("HelloState");



    </script>
</head>
<body STYLE="PADDING:0;MARGIN:0;">

</body>
</html>

效果图

Html5游戏之KiwiJs3-按键、动画

add

相关推荐

`add`