Help adding a baddie in the 'making your first game' tutorial

[AMBG]

Hi

 

I'm a completely noob when it comes to Javascript and Phaser so I imagine my question is a pretty simple one. I've completed the 'make your first game' tutorial from the Phaser website. 

 

I wanted to have a mess about adding some extra elements to it as it suggests at the end of the tutorial. 

 

So I've successfully managed to add the 'baddie' sprite into the game and make it move right.

 

However, for some reason it's showing all four frames of the sprite sheet rather than the ones allocated to the 'right' animation.

 

Also I'm wanting it to move along the floor from right to left. So although I can get it to move right, I was wondering how to get it to move back to the left once it gets to the boarder of the screen and then do the same when it gets to the board of the left side of the screen.

 

Here's my code for the animation.

baddie = game.add.sprite(100, game.world.height - 95, 'baddie');        game.physics.arcade.enable(baddie);        baddie.body.gravity.y = 350;    baddie.body.collideWorldBounds = true;        baddie.animations.add('left', [0,1], 10, true);    baddie.animations.add('right', [2, 3], 10, true);          //  The score    scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });    //  Our controls.    cursors = game.input.keyboard.createCursorKeys();    }function update() {    //  Collide the player and the stars with the platforms    game.physics.arcade.collide(player, platforms);    game.physics.arcade.collide(baddie, platforms);    game.physics.arcade.collide(stars, platforms);    //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function    game.physics.arcade.overlap(player, stars, collectStar, null, this);    //  Reset the players velocity (movement)    player.body.velocity.x = 0;    if (cursors.left.isDown)    {        //  Move to the left        player.body.velocity.x = -150;        player.animations.play('left');    }    else if (cursors.right.isDown)    {        //  Move to the right        player.body.velocity.x = 150;        player.animations.play('right');    }    else    {        //  Stand still        player.animations.stop();        player.frame = 4;    }        //  Allow the player to jump if they are touching the ground.    if (cursors.up.isDown && player.body.touching.down)    {        player.body.velocity.y = -300;    }    baddie.body.velocity.x = 100;    baddie.animations.play('right');   

Thanks in advance.

[tsphillips]

In your preload function, are you using game.load.spritesheet('baddie', 'filename.png', frameWidth, frameHeight)  ?

 

The spritesheet function is what lets Phaser know how big a single frame is.

 

Tom

[AMBG]

Update:

 

You helped me work out that the height frame for the 'baddie' spritesheet was the same as the 'dude'. I checked the height of the asset and realised it was '32'. As soon as I changed that I got the baddie entering and running right.

 

I still don't know how to get it to then start running left once it gets to the edge of the screen. And then do the same thing when it gets to the edge of the left screen?

____________

 

I went to the preload function and had the baddie asset down as an image rather than sprite sheet. Which is why it wasn't playing the 'right' animation. But once I changed it to a sprite sheet it completely disappeared from the game world.

 

Here's the code:

function preload() {    game.load.image('sky', 'assets/sky.png');    game.load.image('ground', 'assets/platform.png');    game.load.image('star', 'assets/star.png');    game.load.spritesheet('baddie', 'assets/baddie.png', 32, 48);    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

[releasethekraken]

There's a full tutorial with example code at pixelsizzle.com. It features a moving killable baddie and score counter.

Heres the link

pixelsizzle.com/tutorials/phaser/phaser-example-with-baddies/