Update functions

[meanderingleaf]

Hello all,

 

I've been tooling around with phaser 1.0 JS, and looking through all examples, I see nothing that shows a good way to have an "update" function for all of my Sprites (similar to how Flixel worked). Right now I have been adding every sprite to a group, and adding a "for each" function that calls a method on each of those sprites.

 

This seems like a hack though, is there a better way?

[rich]

Not 100% sure I understand what you mean - try to explain it another way (or with some code) and I'm sure I can help.

[meanderingleaf]

Sure thing, I was a bit rushed with that post...

 

For instance, in Flixel I could create a class that extended FlxSprite, and then write a method in it like this:

override public function update() {        super.update();       //runs once per tick}

I tried for a long time to create a class that had Phaser.Sprite as its prototype, but quickly found that to be too much of a pain. But I still want my individual game objects to have their own unique update functions. My solution, thus far, has been this:

 

Inside of player.js:

//function to make the playerfunction makePlayer() {    var p = game.add.sprite(game.stage.width * .5 - 50, 200, "entities");        p.body.drag.x = 20;    p.anchor.setTo(0.5, 0.5);    p.animations.add('idle', [1]);    p.animations.add('walk', [ 4, 5, 6, 7, 8, 9, 10 ], 10, true, false);    p.updat = playerUpdate;        group.add(p);        return p;}//player's update functionfunction playerUpdate() { // console.log(this);    if(  game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) ) {        this.body.velocity.x = 50;        this.scale.x = 1;        this.animations.play("walk");    } else if ( game.input.keyboard.isDown(Phaser.Keyboard.LEFT) ) {        this.scale.x = -1;        this.body.velocity.x = -50;    }}

Inside of main.js (these are the create and update functions for Phaser...):

 function create(){        //make the player, add to group        group = game.add.group();        makePlayer();   }        function update(){         //use that group to run a method on each sprite added         group.forEach(updateEntities);    }function updateEntities(ent) {       //run the "update" function (noticed sprites had an update function, named it different just to be safe)        ent.updat();    }

Hopefully this helps! 1. Create group 2. Add everything to it 3. Use that group to call an method every tick.

[rich]

Ahh right, gotcha. Give me a bit, I'll work through some samples on how best to do it.

[rich]

Ok grab the latest build and then the following will work:

//  Here is a custom game objectMonsterBunny = function (game, x, y) {    Phaser.Sprite.call(this, game, x, y, 'bunny');};MonsterBunny.prototype = Phaser.Utils.extend(true, Phaser.Sprite.prototype, PIXI.Sprite.prototype);MonsterBunny.prototype.constructor = MonsterBunny;/** * Automatically called by World.update */MonsterBunny.prototype.update = function() {    this.angle++;};(function () {    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });    function preload() {        game.load.image('bunny', 'assets/sprites/bunny.png');    }    function create() {        var wabbit = new MonsterBunny(game, 400, 300);        wabbit.lifespan = 3000;        wabbit.anchor.setTo(0.5, 0.5);        game.add.existing(wabbit);    }})();

[meanderingleaf]

Works perfectly. Thanks much!

[meanderingleaf]

Perhaps I spoke too soon... not a huge issue for what I am hacking on right now, but trying to use this new set of files with the line:

        game.load.atlasJSONHash('entities', 'assets/textures/entities.png', 'assets/textures/entities.txt');

Appears to cause some issues... perhaps I just need to sleep on it though.

[rich]

Are you using that from within your own class? Post the code up. I wouldn't expect that to work inside of a class that extended Sprite., but not sure what you're trying atm

[meanderingleaf]

Its inside your example:

game.load.atlasJSONHash('entities', 'assets/textures/entities.png', 'assets/textures/entities.txt'); //I tried this lin        //game.load.image('bunny', 'assets/textures/entities.png'); //this was your line

I get this error when I try it:

 

1. Uncaught TypeError: Cannot call method 'loadFrameData' of undefined Sprite.js:45

Was having some problems with the animationFrames as well, earlier. Still, I'm on the bleeding edge. Don't want to distract you or anything.

[rich]

Get the latest version, it fixes that.

[meanderingleaf]

Here to cause trouble again, though I think I have a fix. The sample code will have all sprites rotating around, not just monster bunny.

 

Something weird seems to be happening with the extend feature, where the prototype's update is not unique to the extended entitity. I think I have a fix for it though: move the update function into the constructor.

MonsterBunny = function (game, x, y) {    Phaser.Sprite.call(this, game, x, y, 'bunny');    this.body.acceleration.y = 250;       this.update = function() {        this.angle++; //now only monster bunny rotates, and normal sprites/images do no    }    };

Still, I am no javascript master. Perhaps there's a better way.

[rich]

Let me prepare a better example for you next week.