Is this a smart way to code the player slash function?

[khleug35]

Hello everyone, I would like to create a platform game like Castlevania.

 Here is my full code of the example. This following code can achieve the slash effect, but I do not know is this  a smart way?? Thanks

 https://jsfiddle.net/4m3uv052/

First, I prepared two image, One for main character , one for slash.

1.  
2.  

The last position of slash.png is blank

The purpose is when finish slash.png animation, the slash.png will disappear, no residue

 slash.animations.add('slash_attack', [0, 1, 2, 3 ,4], 20, false);

Firstly, Make the slash not visible.

If I make the slash image visible, when I run the game, it will show on game.

slash.visible = false;

 

 

 

Add the player slash logic in function update()

  if (player_sword_attack == false) {
		if (attackButton.isDown) {
			player_sword_attack = true;
		}
	} 
  if (player_sword_attack == true) {
        attack();
        game.time.events.add(Phaser.Timer.SECOND * 0.2, attack_stop, this);
	}

 

fix the slash effect positon

function attack() {
    slash.animations.play('slash_attack');   
    slash.body.x = sprite.body.x-5; //fix the slash effect positon
    slash.body.y = sprite.body.y-36;
}
function attack_stop() {
    player_sword_attack = false;
}

 

is this a smart way to code the player slash function? i am sorry for my poor english? Thank you very much

https://jsfiddle.net/4m3uv052/

[samid737]

 

There are A number of ways to optimize the code. You can add the slash as A child of the sprite instead of repositioning the slash each time you attack. 
You could set the invisible frame (4) as the first animation frame, so technically you don't really need to manually set the visibilty of the animation, but your case does help with rendering performance. The player_sword_attack looks A bit redundant at the moment, You could ause animation events to trigger the visibility or you could use slash.isplaying() instead of using the player_sword_attack flag.  Otherwise the code looks fine already.

The above improvements:

 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
	preload: preload,
	create: create,
	update: update,
	render: render
});

function preload() {

	game.load.image('phaser-dude', 'http://examples.phaser.io/assets/sprites/phaser-dude.png');
	game.load.spritesheet('slash', 'http://i.imgur.com/TvXiB7q.png', 110, 129);

}

var sprite;
var slashAnim;

function create() {

	game.physics.startSystem(Phaser.Physics.ARCADE);

	game.stage.backgroundColor = '#000000';

	sprite = game.add.sprite(400, 300, 'phaser-dude');
	sprite.anchor.set(0.5);

	game.physics.enable(sprite, Phaser.Physics.ARCADE);

    //set the sprite frame to the invisible frame
	slash = game.add.sprite(10, 20, 'slash', 4);
	slash.visible = false;
	slash.anchor.setTo(0.5, 0.5);
    //play invisible frame first
	slashAnim = slash.animations.add('slash_attack', [4, 0, 1, 2, 3, 4], 20, false);

	//to set visibility
	slashAnim.onStart.add(function () {slash.visible = true}, this);
	slashAnim.onComplete.add(function () {slash.visible = false}, this);

	sprite.addChild(slash);
	game.physics.enable(slash, Phaser.Physics.ARCADE);

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

function update() {
	//movement controll
	sprite.body.velocity.x = 0;

	if (cursors.left.isDown) {
		sprite.body.velocity.x = -250;
	} else if (cursors.right.isDown) {
		sprite.body.velocity.x = 250;
	}

	if (attackButton.isDown) {
		attack();
	}
}

function attack() {
	if (!slashAnim.isPlaying) {
		slashAnim.play('slash_attack');
	}
}

function render() {
	game.debug.text(slash.visible, 32, 32);

}

 

[khleug35]

13 hours ago, samid737 said:

 

There are A number of ways to optimize the code. You can add the slash as A child of the sprite instead of repositioning the slash each time you attack. 
You could set the invisible frame (4) as the first animation frame, so technically you don't really need to manually set the visibilty of the animation, but your case does help with rendering performance. The player_sword_attack looks A bit redundant at the moment, You could ause animation events to trigger the visibility or you could use slash.isplaying() instead of using the player_sword_attack flag.  Otherwise the code looks fine already.

The above improvements:
..................................

Oh!!!Thank you for your help and guidance !! Your code is clear and efficient.