3

How do I equip clothes to a sprite in Phaser? Say I use the following:

http://opengameart.org/sites/default/files/human_base.png

http://opengameart.org/sites/default/files/styles/medium/public/16x18hair-clothingpack_preview2.png

The only way I can think of is making a image with each sprite on. There must be a different way, like overlaying or something perhaps?

1
  • Wrong forum, a mod will correct that. But yes, you would overlay the "style" on the character. As long as the overlays are transparent, it would be fine. To optimize you could "cache" the character with the overlay applied. But again, wrong forum, and have no clue what Phaser is. Oct 7, 2014 at 0:24

2 Answers 2

5

You should check this project: https://github.com/makrohn/Universal-LPC-spritesheet.

And for the integration in Phaser, try Something like that:

function preload() {
    game.load.spritesheet('female_body', 'sprites/body/female/light.png', 64, 64);
    game.load.spritesheet('female_hair', 'sprites/hair/female/pixie/blonde.png', 64, 64);
    game.load.spritesheet('female_torso', 'sprites/torso/tunics/female/teal_tunic.png', 64, 64);
    game.load.spritesheet('female_legs', 'sprites/legs/pants/female/teal_pants_female.png', 64, 64);
}

function create() {
    var group = game.add.group();
    group.add(game.add.sprite(200, 200, 'female_body', 13 * 9));
    group.add(game.add.sprite(200, 200, 'female_hair', 13 * 9));
    group.add(game.add.sprite(200, 200, 'female_torso', 13 * 9));
    group.add(game.add.sprite(200, 200, 'female_legs', 13 * 9));
    group.callAll('animations.add', 'animations', 'walk', Phaser.ArrayUtils.numberArrayStep(13 * 9, 13 * 9 + 9));
    group.callAll('animations.play', 'animations', 'walk', 9, true);
}
1

You can use Phaser.Sprite#addChild to attach cloth sprites to your player sprite.

// Player sprite
var player = game.add.sprite(0, 0, 'player-sprite');

// Cloth sprite
var cloth = game.add.sprite(0, 0, 'cloth-sprite');

// Tweak anchor position to correctly align clothing over player 
cloth.anchor.setTo(0.5, 0.5);

player.addChild(cloth);

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.