CODEWITHSUNDEEP
javascriptphaser-framework
user7474176
user7474176

Reputation:

Animate once Phaser

I am working with Phaser. Here is my code :

 // var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });
var game = new Phaser.Game(1000, 500, Phaser.AUTO, 'phaser-example', {
        preload: preload,
        create: create,
        update: update
    });

var bmd;
var map;
var layer;
var marker;
var currentTile = 0;
var cursors;
var player;
var facing = 'left';
var jumpTimer = 0;
var jumpButtonSpacebar;
var sizeOfPlayer = 0.5;

function preload()
{
    game.load.atlasJSONHash('kisameSprite', 'assets/sprites/kisameSpriteSheet/kisameSpriteSheet.png', 'assets/sprites/kisameSpriteSheet/kisameSpriteSheet.json');
    game.load.image('back', 'assets/images/back.jpg');
}

function create()
{
    game.add.tileSprite(0, 0, 1000, 600, 'back');

    //  Creates a blank tilemap
    map = game.add.tilemap();

    //  This is our tileset - it's just a BitmapData filled with a selection of randomly colored tiles
    //  but you could generate anything here
    bmd = game.make.bitmapData(32 * 25, 32 * 2);

    var colors = Phaser.Color.HSVColorWheel();

    var i = 0;

    for(var y = 0; y < 2; y++)
    {
        for(var x = 0; x < 25; x++)
        {
            bmd.rect(x * 32, y * 32, 32, 32, colors[i].rgba);
            i += 6;
        }
    }

    //  Add a Tileset image to the map
    map.addTilesetImage('tiles', bmd);

    //  Creates a new blank layer and sets the map dimensions.
    //  In this case the map is 40x30 tiles in size and the tiles are 32x32 pixels in size.
    layer = map.create('level1', 50, 50, 32, 32);

    //  Populate some tiles for our player to start on
    map.putTile(30, 2, 10, layer);
    map.putTile(30, 3, 10, layer);
    map.putTile(30, 4, 10, layer);

    map.setCollisionByExclusion([0]);

    //  Create our tile selector at the top of the screen
    createTileSelector();

    player = game.add.sprite(64, 100, 'kisameSprite', 'stance/0.png');
    player.scale.setTo(sizeOfPlayer);
    game.physics.arcade.enable(player);
    game.physics.arcade.gravity.y = 350;

    player.body.bounce.y = 0.1;
    player.body.collideWorldBounds = true;

    player.animations.add('attack', Phaser.Animation.generateFrameNames('attack/', 0, 5, '.png', 1), 10, false, true);
    player.animations.add('left', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true);
    player.animations.add('idle', Phaser.Animation.generateFrameNames('stance/', 0, 3, '.png', 1), 10, true, true);
    player.animations.add('right', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true);
    player.animations.add('jump', Phaser.Animation.generateFrameNames('jump/', 0, 3, '.png', 1), 10, false, true);

    cursors = game.input.keyboard.createCursorKeys();
    jumpButtonSpacebar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

    game.input.addMoveCallback(updateMarker, this);

}

function update()
{
    game.input.keyboard.onDownCallback = somethingWasPressed;

    game.physics.arcade.collide(player, layer);

    player.body.velocity.x = 0;

    if(cursors.left.isDown)
    {
        player.body.velocity.x = -150;

        if(facing != 'left')
        {
            player.scale.setTo(-sizeOfPlayer, sizeOfPlayer);
            player.animations.play('left');
            facing = 'left';
        }
    }
    else if(cursors.right.isDown)
    {
        animateRunRight();
    }
    else
    {
        if(facing != 'idle')
        {
            player.animations.play('idle');

            if(facing == 'left')
            {
                player.frame = 5;
            }
            else
            {
                player.frame = 5;
            }

            facing = 'idle';
        }
    }

    if(jumpHasToOccur())
    {
        player.body.velocity.y = -250;

        player.animations.play('jump');

        game.time.events.add(Phaser.Timer.SECOND * 1.450, function(){player.animations.play('idle');}, this);

        jumpTimer = game.time.now + 750;
    }

}

function somethingWasPressed(keyCode)
{
    if(keyEqualTo(keyCode, "a"))
    {animateAttack();}
}

function keyEqualTo(keyCode, key)
{
    var equalKey = (keyCode.key == key);
    return equalKey;
}

function beIdle()
{
    if(facing != 'idle')
    {
        player.animations.play('idle');

        if(facing == 'left')
        {
            player.frame = 5;
        }
        else
        {
            player.frame = 5;
        }

        facing = 'idle';
    }
}

function animateAttack()
{
    player.animations.play('attack');
}

function animateJump()
{
    player.body.velocity.y = -250;

    player.animations.play('jump');

    game.time.events.add(Phaser.Timer.SECOND * 1.450, function(){player.animations.play('idle');}, this);

    jumpTimer = game.time.now + 750;
}

function animateRunRight()
{
    player.body.velocity.x = 150;

    if(facing != 'right')
    {
        player.scale.setTo(sizeOfPlayer, sizeOfPlayer);
        player.animations.play('right');
        facing = 'right';
    }
}

function animateRunLeft()
{
    player.body.velocity.x = -150;

    if(facing != 'left')
    {
        player.scale.setTo(-sizeOfPlayer, sizeOfPlayer);
        player.animations.play('left');
        facing = 'left';
    }
}

function jumpHasToOccur()
{
    var jumButtonClicked = cursors.up.isDown || jumpButtonSpacebar.isDown;
    var alreadyOnFloor = player.body.onFloor() && game.time.now > jumpTimer;
    return jumButtonClicked && alreadyOnFloor;
}

function pickTile(sprite, pointer)
{

    var x = game.math.snapToFloor(pointer.x, 32, 0);
    var y = game.math.snapToFloor(pointer.y, 32, 0);

    currentTileMarker.x = x;
    currentTileMarker.y = y;

    x /= 32;
    y /= 32;

    currentTile = x + (y * 25);

}

function updateMarker()
{

    marker.x = layer.getTileX(game.input.activePointer.worldX) * 32;
    marker.y = layer.getTileY(game.input.activePointer.worldY) * 32;

    if(game.input.mousePointer.isDown && marker.y > 32)
    {
        map.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y), layer);
    }

}

function createTileSelector()
{

    //  Our tile selection window
    var tileSelector = game.add.group();

    var tileSelectorBackground = game.make.graphics();
    tileSelectorBackground.beginFill(0x000000, 0.8);
    tileSelectorBackground.drawRect(0, 0, 800, 66);
    tileSelectorBackground.endFill();

    tileSelector.add(tileSelectorBackground);

    var tileStrip = tileSelector.create(1, 1, bmd);
    tileStrip.inputEnabled = true;
    tileStrip.events.onInputDown.add(pickTile, this);

    //  Our painting marker
    marker = game.add.graphics();
    marker.lineStyle(2, 0x000000, 1);
    marker.drawRect(0, 0, 32, 32);

    //  Our current tile marker
    currentTileMarker = game.add.graphics();
    currentTileMarker.lineStyle(1, 0xffffff, 1);
    currentTileMarker.drawRect(0, 0, 32, 32);

    tileSelector.add(currentTileMarker);

}

When I press a on keyboard I want animation attack to play once, but it plays infinitely. What is wrong with my code? I read documentation and as said over there I use false flag when create new animation, but still it does`not work.

Upvotes: 0

Views: 2577

Answers (1)

Kamen Minkov
Kamen Minkov

Reputation: 3712

Try changing your animateAttack() to this:

function animateAttack()
{
    player.animations.play('attack', 60, false);
}

The first parameter is (like in your code) the animation to play, the second is the frame rate (60 is the default), the third is whether to loop the animation or not. The documentation says that if not supplied, the previous value of loop is used, so even you've set it to false for this animation, it might've stuck to true for some reason.

Upvotes: 2

Related Questions