Forums » Help » I'm creating a game with a lot of customization...what's the best way to handle all of the sprites?

The game is going to have space ships which means users can choose a hull, wings, lasers, etc. What is the best way to handle all these different sprites having to line up with each other?

Should each part be a separate entity? As in the wings will be an entity, the hull will be an entity, lasers will be an entity, etc.

If so how should I handle all of these entities? How will I make sure each entity lines up?

Is there a tool for this?

Sorry for all of the questions, but any help is appreciated!!

You could have separate entities for all the different ship parts. And then have a "parent" entity which controls all the "child" parts.

So the parent entity could look like this:

EntityShip = ig.Entity.extend({
    hullEntity: null,
    leftWingEntity: null,
    rightWingEntity: null,
    weaponEntity: null,
    init: function(x, y, settings) {
        this.parent(x, y, settings);
        this.hullEntity = ig.game.spawnEntity(EntityHull, 0, 0);
        /* spawn the others parts here too */
    },
    update: function() {
        this.parent();
        // And then after updating the ship position in the above 
        // "this.parent()" call, we sync all the part positions.
        this.hullEntity.pos.x = this.pos.x;
        this.hullEntity.pos.y = this.pos.y;
        /* sync the other parts here too */
    }
});

Hmm okay, is it bad though to be spawning so many entities for each player? (There'll be a few players on screen)

I guess it's the only way though right? Because images can't be drawn with rotation:(

The above seems like a perfectly fine solution to me. If you run into issues with "too many entities", then you could try optimizing, but don't optimize until it's actually a problem because you'll often find things run better than you might expect.

Sweet! I'll do this then:) Thanks!

Although I feel like considering optimization early on is probably good practice

I released a plugin a few years back that does this. It's called 'VisualEquipment' and creates a paperdoll effect like what you describe. You can find it on Github:
https://github.com/lTyl/visualEquipment_Animation

And the demos:
http://labs.tderen.com/javascript/visualEquipment/
http://labs.tderen.com/javascript/visualEquipment_Animation/ (Animation)

It doesn't use entities for each part. Instead, it creates a new image canvas holding the sprite frame then layers those images ontop of each other to create the desired effect. Since it creates separate tiny canvases for each frame, you can handle the rotation requirement like any other HTML Canvas. I don't suggest using this as-in in a project, but it should provide a good starting point :)