Search the Community

Hi all, I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this: What I have so far is just a test of one of the sprites I put together: mae.mp4 The sprite is made using just one layer, at the moment. Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that. So, examples/tutorials/advice I'm looking for regards: -Building multiple menus of images, each accessible by clicking on relevant category titles. -Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc) -Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time) -How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?) Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too.

Hi all, Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour. The layers so far are added like so: Cat Body Pupil Face/Eye shape Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct. This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this: This is the relevant code to trigger the event: facekey = 'catfacegoth'; create function; player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');}); update function: player.anims.play('default', true); //body animation if(facekey == 'catfacegoth'){ playerface.anims.play('gothblink', true); // face/eye shape playereyes.anims.play('blink', true); //this is the pupil layer } if(facekey == 'catface'){ playerface.anims.play('faceblink', true); // face/eye shape playereyes.anims.play('blink', true); // pupil } My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame. Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?