Beginner Guidance for building a Character Creator in Phaser 3

[syntaxidermy]

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:

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.
 

 

 

[syntaxidermy]

An update here if anybody else is looking for guidance on building menus of the style above, here's what I did to make mine. Hope this helps.

This is how it looks from the code below, more or less;

With pages:

https://imgur.com/TlpNWcJ

 

Here is the relevant code, it's a lot, but I hope that whatever you might need is given somewhere as an example here:

 

    function preload ()
    {
        //bgs
	this.load.image('bg', 'assets/bg.png');
	
        //bodies
        this.load.spritesheet('catbody', 'assets/catbody.png', { frameWidth: 297, frameHeight: 397 });

        //eye sprites
        this.load.spritesheet('cateyes', 'assets/catpupils.png', { frameWidth: 297, frameHeight: 397});
        this.load.spritesheet('catface', 'assets/catface.png', { frameWidth: 297, frameHeight: 397});
        this.load.spritesheet('catfacegoth', 'assets/catfacegoth.png', { frameWidth: 297, frameHeight: 397});
        this.load.spritesheet('catfaceshifty', 'assets/catfaceshifty.png', { frameWidth: 297, frameHeight: 397});

        //arrows
        this.load.image('leftarrow','assets/arrowleft.png');
        this.load.image('rightarrow', 'assets/arrowright.png');

        //tiles
        this.load.image('tile', 'assets/tile.png');
        this.load.image('smalltile', 'assets/tilesmall.png');

        //text menu
        this.load.image('bodytext', 'assets/textbody.png');
        this.load.image('eyestext', 'assets/texteyes.png');
        this.load.image('toptxt', 'assets/texttop.png');
        this.load.image('bottomtxt', 'assets/textbottom.png');
        this.load.image('accessoriestxt', 'assets/textaccessories.png');
        this.load.image('bgtext', 'assets/textbg.png');

    }


    function create ()
    {

        tiles = this.physics.add.staticGroup();
        arrows = this.physics.add.staticGroup();
        smalltiles = this.physics.add.staticGroup();
        text = this.physics.add.staticGroup();

	this.add.image(500,300,'bg');

        //text menu options
        bodytxt = text.create(500, 170, 'bodytext').setInteractive();
        eyestxt = text.create(500, 220, 'eyestext').setInteractive();
        toptxt = text.create(530, 270, 'toptxt').setInteractive();
        bottomtxt = text.create(530, 320, 'bottomtxt').setInteractive();
        accessoriestxt = text.create(530, 370, 'accessoriestxt').setInteractive();
        bgtext = text.create(530, 420, 'bgtext').setInteractive();

        //arrows
	leftArrow = arrows.create(650,290, 'leftarrow').setInteractive();
        rightArrow = arrows.create(950,290, 'rightarrow').setInteractive();


        //colour tile objects
        red = smalltiles.create(695, 470, 'smalltile').setTint(0x85251B).setInteractive();      
        orange = smalltiles.create(725, 470, 'smalltile').setTint(0x874E0F).setInteractive();
        yellow = smalltiles.create(755, 470, 'smalltile').setTint(0xB2B037).setInteractive();
        green = smalltiles.create(785, 470, 'smalltile').setTint(0x4C7940).setInteractive();
        lightblue = smalltiles.create(815, 470, 'smalltile').setTint(0x7F9293).setInteractive();        
        darkblue = smalltiles.create(845, 470, 'smalltile').setTint(0x383A4B).setInteractive();
        purple = smalltiles.create(875, 470, 'smalltile').setTint(0x6F5F78).setInteractive();
        pink = smalltiles.create(905, 470, 'smalltile').setTint(0xD6A16B).setInteractive();     
        
        //player layers
	player = this.physics.add.sprite(200, 370, 'catbody').setInteractive();
        playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive();
        playerface = this.physics.add.sprite(260,350,facekey).setInteractive();
        //playershirt;
        //playerpants;
        //playershoes;
        //playeraccessories;
        //playerbg;


        //MENU ICONS

        //eyes
        normaleyeicon = this.add.image(735,185,'catface').setScale(0.35).setInteractive();
        gotheyeicon = this.add.image(812,185, 'catfacegoth').setScale(0.35).setInteractive();
        shifteyeicon = this.add.image(893,185, 'catfaceshifty').setScale(0.35).setInteractive();


        //MOUSE INTERACTIONS

        //click colour tiles
        red.on('pointerdown', function (pointer, red) { colour = 0x85251B; });
        orange.on('pointerdown', function (pointer, orange) { colour = 0x874E0F;  });
        yellow.on('pointerdown', function (pointer, yellow){ colour = 0xB2B037; });
        green.on('pointerdown', function(pointer, green){ colour = 0x4C7940; });
        lightblue.on('pointerdown', function(pointer, lightblue){ colour = 0x7F9293; });
        darkblue.on('pointerdown', function(pointer, darkblue){ colour = 0x383A4B;  });
        purple.on('pointerdown', function(pointer, purple){ colour = 0x6F5F78;  });
        pink.on('pointerdown', function(pointer, pink){ colour = 0xD6A16B; });
        
        //click menu text
        bodytxt.on('pointerdown', function (pointer, bodytxt) { selection = 1; page =0; });                
        eyestxt.on('pointerdown', function (pointer, eyestxt) { selection = 2; page = 0; playereyes });   
        toptxt.on('pointerdown', function (pointer, toptxt) { selection = 3; page = 0; });   
        bottomtxt.on('pointerdown', function (pointer, bottomtxt) { selection = 4; page = 0; });   
        accessoriestxt.on('pointerdown', function (pointer, accessoriestxt) { selection = 5; page = 0; });   
        bgtext.on('pointerdown', function (pointer, bgtext) { selection = 6; page = 0;});   
        

        //click item icons
        normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'faceblink'; playereyes.anims.stop(); playerface.anims.stop(); });
        gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'gothblink'; playereyes.anims.stop(); playerface.anims.stop(); });
        shifteyeicon.on('pointerdown', function (pointer, shifteyeicon){ facekey = 'shiftyblink'; playereyes.anims.stop(); playerface.anims.stop(); });

        //click arrows
        leftArrow.on('pointerdown', function(pointer, leftArrow){ page -= 1; });
        rightArrow.on('pointerdown', function(pointer, rightArrow){ page += 1; });

        //ANIMATIONS
        var keys = ['cat', 'pupil', 'faceblink', 'gothblink', 'shiftyblink'];
        var spritesheets = ['catbody','cateyes', 'catface', 'catfacegoth', 'catfaceshifty'];

        for(var i = 0; i < keys.length; i++){
            this.anims.create({
                key: keys[i],
                frames: this.anims.generateFrameNumbers(spritesheets[i], { start: 0, end: 13 }),
                frameRate: 10,
                repeat: -1
            });
        }
    }
    //end create

 

 

    //custom functions

    //helper function, sets individual icon to active/visible to inactive/invisible
    function setActivity(icon, bool){
        icon.input.enabled = bool;
        icon.setVisible(bool);
    }


    //Sets each item icon in an array to active/visible or inactive/invisible
    function setAllActivity(array, bool){    
        for(var i = 0; i < array.length; i++){
            setActivity(array[i], bool);
        }
    }

    //Displays the desired item menu icons as listed in the current page
    function setJustOne(all, desired, page){
        //i = icon category index
        for(var i = 0; i < all.length; i++){
            //j = array for each page of icons
            for(var j = 0; j < all[i].length; j++){
                if(all[i] != desired || j != page){
                    setAllActivity(all[i][j], false);
                }
                if(all[i] == desired && j == page){
                    setAllActivity(all[i][j], true);
                }
            }
        }
    }


    //tints text icon and clears tint from all other text icons
    function selected(icon, array){
        for(var i = 0; i < array.length; i++){
            if(array[i] != icon){
                array[i].clearTint()
            }
            if(array[i] == icon){
                array[i].setTint(0xff0000);
            }
        }
    }

    //plays the animation key given to the player body
    function playBody(bodyKey){
        player.anims.play(bodyKey, true);
    }

    //plays the animation key given to the player's face
    function playFace(facekey){
        playerface.anims.play(facekey, true);
        playereyes.anims.play('pupil', true);
    }

    //helper function for menuOptions(). Ensures page index does not go out of bounds.
    function pageCtrl(page, max){
        if(page >= max){
            this.page = max;
        }
        if (page <= 0){
            this.page = 0;
        }
    }


    //When user clicks any text section it triggers displaying of relevant item icons.  
    function menuOptions(selection){
        
        //icon arrays 
        //2D, bodyIcons[0] = first page array, bodyIcons[0][0] = first item on first page 
        var bodyIcons = [ [], [], [] ];
        var eyeIcons = [[normaleyeicon, gotheyeicon, shifteyeicon], [], [] ];
        var topIcons = [ [], [], [] ];
        var bottomIcons = [ [], [], []];
        var accessoriesIcons= [ [], [], []];
        var bgIcons= [ [], [], [] ];

        //3D array 
        //allIcons[0] = bodyIcons, allIcons[0][0] = First page, allIcons [0][0][0] = first elem in first page 
        var allIcons = [bodyIcons, eyeIcons, topIcons, bottomIcons, accessoriesIcons, bgIcons]; 

        //just an array of interactive text objects.
        var textIcons = [bodytxt, eyestxt, toptxt, bottomtxt, accessoriestxt, bgtext];



        //body selection
        if(selection == 1){  
            currentobj = player;
            selected(bodytxt, textIcons);
            pageCtrl(page, bodyIcons.length);
            console.log('selection 1 page:' + page);
            setJustOne(allIcons, bodyIcons, page);
        }
        //eyes selection
        if(selection == 2){
            currentobj = playereyes;
            selected(eyestxt, textIcons);
            pageCtrl(page, eyeIcons.length);
            console.log('selection 2 page:' + page);
            setJustOne(allIcons, eyeIcons, page);
        }
        //top section
        if(selection == 3){
            //currentobj = top;
            selected(toptxt, textIcons);
            pageCtrl(page, topIcons.length);
            console.log('selection 3 page:' + page);
            setJustOne(allIcons, topIcons, page);
        }
        //bottom section
        if(selection == 4){
            //currentobj = bottom;
            selected(bottomtxt, textIcons);
            pageCtrl(page, bottomIcons.length);
            console.log('selection 4 page:' + page);
            setJustOne(allIcons, bottomIcons, page);
        }
        //accessories section
        if(selection == 5){
            //currentobj = accessory;
            selected(accessoriestxt, textIcons);
            pageCtrl(page, accessoriesIcons.length);
            console.log('selection 5 page:' + page);
            setJustOne(allIcons, accessoriesIcons, page);
        }
        //bg section
        if(selection == 6){
            //currentobj = bg;
            selected(bgtext, textIcons);
            pageCtrl(page, bgIcons.length);
            console.log('selection 6 page:' + page);
            setJustOne(allIcons, bgIcons, page);
        }
    }

    var colour = 0x85251B;
    var selection = 1;
    var currentobj;
    facekey = 'shiftyblink';
    bodyKey = 'cat'
    var page = 0;

    //Game Main
    function update ()
    { 
        //sprite layers
        playBody(bodyKey);                    //body
        playFace(facekey);                    //face/ eyes

        menuOptions(selection);               //select section
        currentobj.setTint(colour);           //tint section
      
    }