khleug35

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

Recommended Posts

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.  phaser-dude.png.1db03a5e0d13507f832051c27c4a967b.png
  2.  slash.png.5cc9e5c3f5866df6b71c2f15c03dfd96.png

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);

slashAAACCC.png.4727815f77f2f29774c023b454563be5.png

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;

 

1.PNG.ea9d539648ffe8fd7feea07fb094c475.PNG

 

 

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/

Share this post


Link to post
Share on other sites

 

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);

}

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.