Sprite composed of sprites or Group composed of Sprites

[Michael Prescott]

Just starting up with Phaser, so it could be I just need pointers to the right terms.

 

I want to compose a character from several images, and be able to manipulate the state of those parts independently.   I also want to be able to easily position and manipulate the character via an API I define or extend; probably based on Phaser's Sprite or Group. 

 

Initially, I looked at extending Sprite, but I think that is the wrong approach because to inherit from Sprite, I need to Phaser.Sprite.call() and pass just one texture key.  So, I started looking at Group, and the setup for that is a bit better for what I have in mind; however, positioning of sprites within the group seemingly needs to be maintained because coordinates are global positions.  ie. I move the parent/container group, and must also explicitly update positions of sprites within the group.   I'm relating much of this to experience with DisplayObjects, many years ago, so it's quite likely I don't understand the architecture yet.

 

Also, I've come across notes about performance of Groups and SpriteBatches (PIXI).   So, it's also in mind, I need to be wary about creating a composition like this.

 

Can someone advise on the best approach for composing images and animations into a single object, sprite of sprites, group of sprites, or something else?

 

 

[Michael Prescott]

Actually, I had an improper setup.  With the groups, I can do transformations on the parent group, and all the children move with it.   I am still curious though, if this is the right, and best performant approach.

[Michael Prescott]

Because I'm learning, and part of what I have is working, I'm holding onto the idea that my character should be a Phaser.Group composed of Sprites.  However, I attempted to add simple arcade physics, to have the character track the mouse pointer, and found that the Phaser.Group doesn't have a body itself.  The sprites within get bodies, but not the group.  This means when setting up the tracking, I'm only able to enable physics on one of the characters parts:

this.game.physics.arcade.enable(this.avatar.head);

[jpdev]

You should try this:

 

this.player.addChild

 

with player beeing a sprite itself. (don't use any groups.)

 

Example that works perfect for me:

 

    player = game.add.sprite(350, 500, 'rabbit');    var childSprite = game.add.sprite(0, 0, 'rabbit');    childSprite.scale.x = 0.5;    childSprite.scale.y = 0.5;    game.physics.p2.enable(player); //optional, only if you use p2 physics, but do it before addChild!    player.addChild(childSprite);

Important, if you use p2 physics, enable the physics on the player BEFORE adding the childSprite.

(If you do it the other way around, the child sprite will have it's own physics and not behave like you would expect.)

(The childsprite can of course be any sprite, it does not have to be the same image as the main sprite)

 

hope this helps!

[Videlais]

Can someone advise on the best approach for composing images and animations into a single object, sprite of sprites, group of sprites, or something else?

 

As somewhat of a non-answer, I'll write that it depends entirely on what you trying to simulate or model. It might make more sense to have a body (group) composed of parts (sprites) if they are similar in nature. However, it could also make sense to have a single unit, the body (sprite), and some extra parts (like a sword or gun) be part of the unit but their own sprites too for separate animation or collision purposes.

 

JavaScript allows you to bind new properties at nearly any time. You are allowed to give sprites groups. And Groups can both contain and have sprites too.

 

For example, in the following code I copied from a project of mine, I give all Soldiers a 'bulletGroup' that contains all of their bullets. In my model, it makes sense that Soliders have their own bullets

function Soldier(game, x, y, cacheKey) {  Phaser.Sprite.call(this, game, x, y, cacheKey);    this.game.physics.enable(this);  this.bulletGroup = this.game.add.group();  this.bulletGroup.enableBody = true;  this.bulletGroup.physicsBodyType = Phaser.Physics.ARCADE;  this.bulletGroup.createMultiple(13, 'enemyBullet');  this.bulletGroup.setAll('checkWorldBounds', true);  this.bulletGroup.setAll('outOfBoundsKill', true);  ... }Soldier.prototype = Object.create(Phaser.Sprite.prototype);Soldier.prototype.constructor = Soldier;

However, I can also see the case for creating a 'spawner' object that had certain properties that was an object that extended Phaser.Group. Maybe it spawns but contains some other objects.

function Spawner(game, squad) {    Phaser.Group.call(this, game);};Spawner.prototype = Object.create(Phaser.Group.prototype);Spawner.prototype.constructor = Spawner;Spawner.prototype.update = function() {  // Call the super.update() first  Phaser.Group.prototype.update.call(this);  // Do you own stuff};

One of the advantages Phaser.Group has is its setAll, callAll, and forEach (family) of functions. Groups are designed to iterate over the items within them.

[jpdev]

Example of my addChild solution:

 

http://jppresents.net/static/yavi/ (use view source)

 

Yes, it's cheesy but it demonstrates it perfectly: The text on each heart is a child sprite, because I wanted to tint it differently.

 

The child sprite automatically

- holds it's position relative to the parent-sprite

- is correctly scaled

- is correctly rotated

 

It's like it's one sprite. Add the child and forget about it.. (until you want to manipulate it)