16 February 2015

Using Group.countLiving() to delay Instance creation in Phaser

Few days ago for the first time I decided to check out Phaser, HTML5/JavaScript game engine. My first impressions are very good, I'm pleasantly surprised with all the energy people are investing into this engine.

I have completed two intro tutorials, Making your first Phaser game by PhotonStorm which I'm extending here a little bit and another one Let's make a Game with Phaser video tutorial by Gabe Hollombe from JSConf Asia 2014 which I'll talk about later.

My tools for this time included Notepad++ as code editor, Mongoose free web server and Chrome. I actually started with Firefox but something went wrong while refreshing edited code and I couldn't figured out what is happening so I switched to Chrome to save time and speed things up. Chrome made me no problem.

Tutorial is well explained and easy to understand. Step by step instructions gives nice first time overview of how Phaser actually works. Not too many details but just enough to make things interesting. Here, I'm just going to explain some minor modifications I made with already existing code.

Resources I used here are this background by Louis Vest and free platform graphic by Kenney - thanks good people!

Inside preload function one line is added:

game.load.image('diamond', 'assets/diamond.png');

since there was already diamond.png file, but I also renamed my new images so I don't have to change code.

I have two new variables:

var diamonds;
var diamondok;

This is important. Since I'm going to create a diamond only after all stars are killed I need to do it inside update function and since I want to do this only once I need logical variable diamondok which will block all further attempts to make more diamonds after one I need is created. I don't need infinite diamonds when all stars die (this could be good song :).

Now for the create function also few additions:

// Add a diamonds group
diamonds = game.add.group();
diamonds.enableBody = true;

// set diamondok variable to true
diamondok = true;

For update function first I had to include collision detection:

// Check to see if the player overlaps with diamond, if he does call collectDiamond function game.physics.arcade.overlap(player, diamonds, collectDiamond, null, this);

and finally here I use countLiving method and my condition to create diamond (level exit) is when there are no stars and if diamondok is true, which is set at start.

// check if all stars are dead
if (stars.countLiving() < 1 && diamondok)
    // create a diamond at position
    var diamond = diamonds.create(50, 400, 'diamond');
    diamond.scale.setTo(1, 1);
    diamond.body.immovable = true;
    // lets lock diamondok to prevent making them forever
    diamondok = false;

That's all, we just have one more function:

function collectDiamond (player, diamond) {
    // Removes the diamond from the screen

    //  Add and update the score
    score += 30;
    scoreText.text = 'Score: ' + score + '   YOU WON!!!';


and this one adds some points to the score and write appropriate message to scoreTest.

Happy to learn that with such small modification change game a lot and it will be really interesting to dive into Phaser's docs further and see more tutorials.




template by blogger templates