Code Critique?

Phaser 3
1

Greetings!

I am currently working on my ‘WorldScene’ class for my game. A lot of this code was smashed into place from tutorials and other places, so I am having a little trouble working with it. Could I get some feedback on how I am doing this and perhaps some suggestions on better ways to accomplish the same thing? My biggest concern right now is modularity between scenes and objects I plan on introducing to the scenes. If anyone has suggestions on how I might accomplish that I would greatly appreciate it!

Code below for critique:

/**********************************
* Scene: WorldScene
* Description:
*/

var WorldScene = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function WorldScene ()
    {
        Phaser.Scene.call(this, { key: 'WorldScene' });
    },
    preload: function ()
    {
        
    },
    create: function ()
    {
        //set tilemap reference key
        var map = this.make.tilemap({ key: 'map' });
        //set spritesheet reference key
        var tiles = map.addTilesetImage('spritesheet', 'tiles');
        //create our layers
        var grass = map.createStaticLayer('Grass', tiles, 0, 0);
        var obstacles = map.createStaticLayer('Obstacles', tiles, 0, 0);
        var interactives = map.createStaticLayer('Interactive', tiles, 0, 0);
        //set the 'obstacles' layer to have collision
        obstacles.setCollisionByExclusion([-1]);
        interactives.setCollisionByExclusion([-1]);

        //setup physics bounds
        this.physics.world.bounds.width = map.widthInPixels;
        this.physics.world.bounds.height = map.heightInPixels;               
        
        this.newPlayer(100, 100); 
        this.player.canMove = true;     
        this.physics.add.collider(this.player, obstacles);

        this.newBot(150,125);
        this.bot.canMove = true;
        this.bot.leftTimer = 100;
        this.bot.rightTimer = 100;
        this.bot.upTimer = 100;
        this.bot.downTimer = 100;

        
        //////////////////////////
        //START EXPERIMENTAL AREA 
        //////////////////////////       
        this.physics.add.collider(this.player, this.bot, function ()
        {
            //WE HAVE DETECTED COLLISION BETWEEN this.player AND interactives!
            //this.player.canMove = false;
            //writeHistory('Touched an interactive!');
            //writeHistory("Hi! Im sam!");  
            //console.log("Overlapping!");
        }, null, this);       
        ////////////////////////
        //END EXPERIMENTAL AREA
        ////////////////////////
             
        //setup camera boundaries to map size
        this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
        //setup camera to follow player
        this.cameras.main.startFollow(this.player);
        //???
        this.cameras.main.roundPixels = true;

        this.playerAnimationContainer ();
        this.botAnimationContainer ();

        //setup cursors object for player movement
        this.cursors = this.input.keyboard.createCursorKeys();
    },
    update: function (time, delta)
    {              
        this.botPatrolContainer ();
        this.playerMovementContainer ();
    },
    newBot: function (x, y)
    {
        this.bot = this.physics.add.sprite(x, y, 'player', 9); //bot--remove when done        
        this.bot.setCollideWorldBounds(true);
    },
    newPlayer: function (x, y) 
    {
        //setup 'player' object with physics
        this.player = this.physics.add.sprite(x, y, 'player', 6);
        //setup 'player' movement boundaries (collision detection with edge of screen)
        this.player.setCollideWorldBounds(true);
        //setup collision detection between 'obstacles' layer and the 'player' object
    },
    /**************************************************
     * Method: playerMovementContainer
     * Description: Contains all player related movement
     * and runs appropriate animations 
     */
    playerMovementContainer: function ()
    {
        this.player.body.setVelocity(0);
        // update player horizontal location on map/screen based on input
        if (this.player.canMove == true)
        {
            if (this.cursors.left.isDown)
            {
                this.player.body.setVelocityX(-80);
                this.player.anims.play('left', true);
                this.player.flipX = true; // flip animations to look like the player is moving left
            }
            else if (this.cursors.right.isDown)
            {
                this.player.body.setVelocityX(80);
                this.player.anims.play('right', true);
                // if the player object is already flipped, we flip it back
                if (this.player.flipX == true) {
                    this.player.flipX = false;
                }
            }
            // update player veritical location on map/screen based on input
            if (this.cursors.up.isDown)
            {
                this.player.body.setVelocityY(-80);
                this.player.anims.play('up', true);
            }
            else if (this.cursors.down.isDown)
            {
                this.player.body.setVelocityY(80);
                this.player.anims.play('down', true);
            } 
        }   
    
        if ((!this.cursors.down.isDown && !this.cursors.up.isDown && !this.cursors.right.isDown && !this.cursors.left.isDown))
        {
            this.player.anims.stop();
        }
    },
    /**************************************************
     * Method: playerAnimationContiner
     * Description: Contains all animations relating to
     * the player
     */
    playerAnimationContainer: function ()
    {
        //  animation with key 'left', we don't need left and right as we will use one and flip the sprite
        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('player', { frames: [1, 7, 1, 13]}),
            frameRate: 10,
            repeat: -1
        });
        // animation with key 'right'
        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('player', { frames: [1, 7, 1, 13] }),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({
            key: 'up',
            frames: this.anims.generateFrameNumbers('player', { frames: [2, 8, 2, 14]}),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({
            key: 'down',
            frames: this.anims.generateFrameNumbers('player', { frames: [ 0, 6, 0, 12 ] }),
            frameRate: 10,
            repeat: -1
        });
    },
    /**************************************************
     * Method: botAnimationContiner
     * Description: Contains all animations relating to
     * a bot
     */
    botAnimationContainer: function ()
    {
        //  animation with key 'left', we don't need left and right as we will use one and flip the sprite
        this.anims.create({
            key: 'botLeft',
            frames: this.anims.generateFrameNumbers('player', { frames: [4, 10, 4, 16]}),
            frameRate: 6,
            repeat: -1
        });
        // animation with key 'right'
        this.anims.create({
            key: 'botRight',
            frames: this.anims.generateFrameNumbers('player', { frames: [4, 10, 4, 16] }),
            frameRate: 6,
            repeat: -1
        });
        this.anims.create({
            key: 'botUp',
            frames: this.anims.generateFrameNumbers('player', { frames: [5, 11, 5, 17]}),
            frameRate: 6,
            repeat: -1
        });
        this.anims.create({
            key: 'botDown',
            frames: this.anims.generateFrameNumbers('player', { frames: [3, 9, 3, 15] }),
            frameRate: 6,
            repeat: -1
        });
    },
    /**************************************************
     * Method: botMovementManager
     * Description: Manages all bot related movement
     * and runs appropriate animations 
     */
    botMovementManager: function (botDirection, botCanMove)
    {
        if (botCanMove == false)
        {
            this.bot.body.setVelocityX(0);
            this.bot.body.setVelocityY(0);
        }else{
            switch(botDirection) {
                case 'botLeft':
                    this.bot.body.setVelocityX(-25);
                    this.bot.flipX = true;
                    break;
                case 'botRight':
                    this.bot.body.setVelocityX(25);                    
                    if (this.bot.flipX == true) {
                        this.bot.flipX = false;
                    }
                    break;
                case 'botUp':
                    this.bot.body.setVelocityY(-25);
                    break;
                case 'botDown':
                    this.bot.body.setVelocityY(25);
                    break;
            }   
            this.bot.anims.play(botDirection, true);         
        }
    },
    /**************************************************
     * Method: botPatrolContainer
     * Description: Contains directions for bot patrol
     * path.
     */
    botPatrolContainer: function ()
    {
        /*****************************************
         * Predetermined path of movement for bot
         */
        if (this.bot.leftTimer > 0)
        {
            this.bot.leftTimer--;
            this.botMovementManager ('botLeft', true);
        }else if (this.bot.leftTimer == 0 && this.bot.upTimer > 0)
        {
            this.bot.upTimer--;
            this.botMovementManager ('botLeft', false);
            this.botMovementManager ('botUp', true);
        }else if (this.bot.upTimer == 0 && this.bot.rightTimer > 0)
        {
            this.bot.rightTimer--;
            this.botMovementManager ('botUp', false);
            this.botMovementManager ('botRight', true);
        }else if (this.bot.rightTimer == 0 && this.bot.downTimer > 0)
        {
            this.bot.downTimer--;
            this.botMovementManager ('botRight', false);
            this.botMovementManager ('botDown', true);
        }else
        {
            this.botMovementManager ('botDown', false);   
            this.bot.leftTimer = 100;   
            this.bot.upTimer = 100; 
            this.bot.rightTimer = 100; 
            this.bot.downTimer = 100;      
        }    
    }
});
2

The newPlayer method could be extracted to a class that extends physics sprite instead, and then have an update method on that class so you can do player.update() . I have a video on classes here : https://www.youtube.com/watch?v=YqwwoHMdXEs

You’re going to need to remove this.player if you want to use it in a different scene of course.
Overtly though, don’t stop though!

3

Update!

/***********************************************************************************************************************************
 * Class: Character
 * Extends: Phaser.Physics.Arcade.Sprite
 * Description: The Character class is used for generating Character objects. It assigns the object a physics based sprite, initial 
 * default property values, with getters and setters to access and modify them with.
 ***********************************************************************************************************************************/
class Character extends Phaser.Physics.Arcade.Sprite {

    constructor (scene, x, y, sprite, frame, canMove = true)
    {              
        /********************************************
         * Pass parameters the class we are extending
         * using super()
         * 
         * This tells the physics engine to create
         * a physics sprite for us
         ********************************************/
        super (scene, x, y, sprite, frame);
        /********************************************
         * The below code must be done to properly get 
         * the sprite to display and have physics
         ********************************************/
        scene.sys.displayList.add(this);
        scene.sys.updateList.add(this);
        scene.sys.arcadePhysics.world.enableBody(this, 0);  
        /********************************************
         * this._canMove holds TRUE or FALSE
         * depending on if the character can move 
         * or not.
         ********************************************/
        this._canMove = canMove;                     
    }
    /********************************************
     * Getter for this._canMove
     * Returns the value of this._canMove
     ********************************************/
    get canMove()
    {
        return this._canMove;
    }
    /********************************************
     * Setter for this._canMove
     * Sets the value of this._canMove
     ********************************************/
    set canMove(bool)
    {
        this._canMove = bool;
    }
}
/***********************************************************************************************************************************
 * Class: Player
 * Extends: Character
 * Description: The Player class is used for generating a new Player object. Right now it simply houses animations
 ***********************************************************************************************************************************/
class Player extends Character {
    constructor (scene, x, y, sprite, frame)
    {
        super(scene, x, y, sprite, frame);
        /********************************************
         * The below code is for player animations
         * in all 4 directions (up, down, left, right)
         ********************************************/
        scene.anims.create({
            key: 'left',
            frames: scene.anims.generateFrameNumbers(sprite, { 
                frames: [1, 7, 1, 13]
            }),
            frameRate: 10,
            repeat: -1
        });
        scene.anims.create({
            key: 'right',
            frames: scene.anims.generateFrameNumbers(sprite, { 
                frames: [1, 7, 1, 13] 
            }),
            frameRate: 10,
            repeat: -1
        });
        scene.anims.create({
            key: 'up',
            frames: scene.anims.generateFrameNumbers(sprite, { 
                frames: [2, 8, 2, 14]
            }),
            frameRate: 10,
            repeat: -1
        });
        scene.anims.create({
            key: 'down',
            frames: scene.anims.generateFrameNumbers(sprite, { 
                frames: [ 0, 6, 0, 12 ] 
            }),
            frameRate: 10,
            repeat: -1
        });  
    }
}
/***********************************************************************************************************************************
 * Class: WorldScene
 * Extends: Phaser.Scene
 * Description: The WorldScene class is a scene. It populates the scene and updates as necessary.
 ***********************************************************************************************************************************/
class WorldScene extends Phaser.Scene {
    constructor ()
    {
        super ({
            key: "WorldScene"
        });
    }

    create () 
    {
        this.map = this.make.tilemap({ 
            key: 'map' 
        });
        let tiles = this.map.addTilesetImage('spritesheet', 'tiles');
        this.map.createStaticLayer('Grass', tiles, 0, 0);
        this.obstacles = this.map.createStaticLayer('Obstacles', tiles, 0, 0);
        this.interactives = this.map.createStaticLayer('Interactive', tiles, 0, 0);

        this.obstacles.setCollisionByExclusion([-1]);
        this.interactives.setCollisionByExclusion([-1]);

        this.physics.world.bounds.width = this.map.widthInPixels;
        this.physics.world.bounds.height = this.map.heightInPixels;  

        this.player = new Player(this, 50, 50, 'player', 6);
        
        this.physics.add.collider(this.player, this.obstacles);
        this.physics.add.collider(this.player, this.interactives);
        
        //////////////////////////
        //START EXPERIMENTAL AREA 
        //////////////////////////       
        this.physics.add.overlap(this.player, this.obstacles, function ()
        {
            //WE HAVE DETECTED COLLISION BETWEEN this.player AND interactives!
            //this.player.canMove = false;
            //writeHistory('Touched an interactive!');
            //writeHistory("Hi! Im sam!");  
            //console.log("Overlapping!");
        }, null, this);       
        ////////////////////////
        //END EXPERIMENTAL AREA
        ////////////////////////
             
        
        this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);
        this.cameras.main.startFollow(this.player);
        this.cameras.main.roundPixels = true;

        this.cursors = this.input.keyboard.createCursorKeys();
    }

    update (time, delta)
    {
        this.player.body.setVelocity(0);
        // update player horizontal location on map/screen based on input
        if (this.player.canMove == true)
        {
            if (this.cursors.left.isDown)
            {
                this.player.body.setVelocityX(-80);
                this.player.anims.play('left', true);
                this.player.flipX = true; // flip animations to look like the player is moving left
            }
            else if (this.cursors.right.isDown)
            {
                this.player.body.setVelocityX(80);
                this.player.anims.play('right', true);
                // if the player object is already flipped, we flip it back
                if (this.player.flipX == true) {
                    this.player.flipX = false;
                }
            }
            // update player veritical location on map/screen based on input
            if (this.cursors.up.isDown)
            {
                this.player.body.setVelocityY(-80);
                this.player.anims.play('up', true);
            }
            else if (this.cursors.down.isDown)
            {
                this.player.body.setVelocityY(80);
                this.player.anims.play('down', true);
            } 
        }   
    
        if ((!this.cursors.down.isDown && !this.cursors.up.isDown && !this.cursors.right.isDown && !this.cursors.left.isDown))
        {
            this.player.anims.stop();
        }
    }
}