Spritesheet with different colors, index offset for same animations?

[BdR]

I'm working on a game where the player character can change into different colors, depending on which power-up he takes.

All animations are basically the same, except the sprite index is offset. The player sprites at index 0 through 7 are red, 8..15 are the same sprites but green, and 16..23 are blue. If the walking animation sprites are index 1,2,3 etc. for red, they are index 9,10,11 etc. for green (just add +8), and for blue add +16. See the sprite sheet example in the attachement (they are ripped and edited Megaman sprites, but that's just a placeholder graphic for now).

I can't change the frames array of an animation AFAIK, so should I just add all the separate animations for each color, so something like this?

    this.animations.add("walking_1", [ 1,  2,  3,  4], 6, true); // red
    this.animations.add("walking_2", [ 9, 10, 11, 12], 6, true); // green
    this.animations.add("walking_3", [17, 18, 19, 20], 6, true); // blue

    this.animations.add("jumping_1", [ 5,  6], 6, true); // red
    this.animations.add("jumping_2", [13, 14], 6, true); // green
    this.animations.add("jumping_3", [21, 22], 6, true); // blue

    // and then later
    this.animations.play("walking_" + this._powerup_idx); // red green or blue

The thing is, I want to expand it to 6, or maybe 8 power-ups and colors, so is there maybe a more clever way to handle this sort of sprite index offset in Phaser? Or is this the way to go? 

[stupot]

Yeah, I do it like this all the time but when I think that I will be adding/removing frames as the develpment goes then I would expand each frame index into a calculation so I wouldn't have to edit all the frames for every change... like this

var set1 = 0;   // red
var set2 = 1;   // blue
var set3 = 2;   // green
var setSize = 8;

var walkingIdx = 1; // walking offset into each set
var jumpingIdx = 5; // jumping offset into each set

this.animations.add("walking_1", [(set1 * setSize) + walkingIdx + 0, (set1 * setSize) + walkingIdx + 1, (set1 * setSize) + walkingIdx + 2, (set1 * setSize) + walkingIdx + 3], 6, true); // red
this.animations.add("walking_2", [(set2 * setSize) + walkingIdx + 0, (set2 * setSize) + walkingIdx + 1, (set2 * setSize) + walkingIdx + 2, (set2 * setSize) + walkingIdx + 3], 6, true); // green
this.animations.add("walking_3", [(set3 * setSize) + walkingIdx + 0, (set3 * setSize) + walkingIdx + 1, (set3 * setSize) + walkingIdx + 2, (set3 * setSize) + walkingIdx + 3], 6, true); // blue

this.animations.add("jumping_1", [(set1 * setSize) + jumpingIdx + 0, (set1 * setSize) + jumpingIdx + 1], 6, true); // red
this.animations.add("jumping_2", [(set2 * setSize) + jumpingIdx + 0, (set2 * setSize) + jumpingIdx + 1], 6, true); // green
this.animations.add("jumping_3", [(set3 * setSize) + jumpingIdx + 0, (set3 * setSize) + jumpingIdx + 1], 6, true); // blue

 

[drhayes]

If it looks good you should also look into the Phaser.Sprite#tint property. Draw your initial stuff in shades of gray then tint to the color you want.

[BdR]

7 hours ago, drhayes said:

If it looks good you should also look into the Phaser.Sprite#tint property. Draw your initial stuff in shades of gray then tint to the color you want.

Cool, I didn't know about the tint feature. However, I won't use it because it tints the entire sprite including the face so it's not quite the effect I'm going for.

Would be cool though if the tint-method only changed the grey colors and not other colors. Then you could use it to palette-swap a characters outfit to different colors like in Street Fighter, Bomberman, soccer games etc.

[in mono]

12 hours ago, BdR said:

Cool, I didn't know about the tint feature. However, I won't use it because it tints the entire sprite including the face so it's not quite the effect I'm going for.

Would be cool though if the tint-method only changed the grey colors and not other colors. Then you could use it to palette-swap a characters outfit to different colors like in Street Fighter, Bomberman, soccer games etc.

This wouldn't be hard to implement. Just load the source sprite into a BitmampData and do a loop for all the pixels. If a pixel has equal (or almost equal) R, G and B, you change its colour. After all the processing is done, change the key of the sprite so that it points to the new BitmapData and you should be okay.