# Sprite Character Builder Layers & Anims

**URL:** <https://phaser.discourse.group/t/sprite-character-builder-layers-anims/11727>\
**Category:** Phaser 3\
**Created:** [May 19, 2022, 4:22pm UTC](https://phaser.discourse.group/t/sprite-character-builder-layers-anims/11727 "2022-05-19T16:22:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vimlee](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/vimlee/32/6554_2.png) [@Vimlee](https://phaser.discourse.group/u/Vimlee)\
**Post date:** [May 19, 2022, 4:22pm UTC](https://phaser.discourse.group/t/sprite-character-builder-layers-anims/11727/1 "2022-05-19T16:22:56Z")

</div>

_New to Phaser (and game dev in general)_

I’d like to be able to randomly generate NPC sprites from a collection of character builder sprites with layers and anims. Each “layer” is a separate spritesheet for skinTone, shirt, pants, etc. I’m thinking the best way to go about this is a `GameObject.Factory` that handles the textures RNG so I can easily add/pool, `scene.add.npc(x, y, forcedTextures = {hairColor: 'brown', hairStyle: 'pony'})` (or something like that). And minimize atlas’ and anim definitions since the frames are all consistent.

I’m not quite sure where to start with layer/group/container/nesting sprites to retain and sync animations. The source package I’m using includes a ton of sprite sheets for character styling, but ideally I can just `npc.anims.play('walk-left')` and each child layer anims in sync.

How would you go about achieving something like this? Container? Group? GameObjectLayer? Can Aseprite help?  
Or am I thinking about it all wrong?

Any advice/tutorial/examples would be appreciated!  
(note: this is a personal project that will only be run locally, so I’m not _incredibly_ worried about performance)

Sprite source: [ThatCoolSprite by Chocolate4](https://chocolate4.itch.io/thatcoolsprite)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 19, 2022, 6:33pm UTC](https://phaser.discourse.group/t/sprite-character-builder-layers-anims/11727/2 "2022-05-19T18:33:09Z")

</div>

👋

Probably a Container of multiple sprites (and multiple animations) or a CanvasTexture where you compose the images directly.

With multiple sprites you’ll still have to define one animation per spritesheet.