Top Chef Bob - Part 02 - Add Top Chef Bob to the Game

Part 02 of the Top Chef Bob food simulator game is to:
1) setup our main menu
2) add Bob to the game and make him move

Show Main Menu
In the "load.js" file, overwrite the function below. This new functon will call our menu state.

    create: function() {

    // change the background color of our game
    game.stage.backgroundColor = '#5c94fc';

    // test pictures
    //this.testPictures();

    // continue to Menu Scence
    game.state.start('menu');

    },

Update Main Menu
In the "main.js" file, replace the create function so it says "Top Chef Bob".

    create: function() {


    // change the background color
    game.stage.backgroundColor = '#2a5699';


    // fill: means inside color of font
    // stroke: means outside color of font
    txtTitle = game.add.text(game.world.centerX, game.world.centerY / 2, '', { font: "30pt Courier", fill: "#f442d9", stroke: "#119f4e", strokeThickness: 10 });
    txtTitle.anchor.set(0.5);
    txtTitle.text = 'Top Chef Bob';

    txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 3, '', { font: "15pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtPlay.anchor.set(0.5);
    txtPlay.text = 'Press Spacebar to Play!';

    txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 4, '', { font: "12pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtPlay.anchor.set(0.5);
    txtPlay.text = 'Use keys arrow keys to move';


    txtCredit = game.add.text(game.world.centerX, game.world.centerY / 8 + game.world.centerY, '', { font: "10pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtCredit.anchor.set(0.5);
    txtCredit.text = 'This game designed and built by the TinkersAndThinkers Coding Club at Cedar Park Middle School';



    },

Setup our PlayLevel1 State
In the "playlevel1js" file, replace the preload function with the one below which does nothing.

    preload: function() {

    },

Create Keyboard Object
In the "playlevel1.js" file, add this function which will create our keyboard object. We will use the keyboard object to access the keyboard.

    createKeyboard: function() {

    // create a keyboard object to capture users input
    // ------------------------------------------------------------------------
    this.keyboard = game.input.keyboard;

    },

Add Bob to the game
In the "playlevel1.js" file, add this function which will create bob and all his animations.

    createBob: function() {

    // create bob object
    // ------------------------------------------------------------------------

    // add Bob's SpriteSheet to our game
    // addSpriteSheet(key, url, data, frameWidth, frameHeight, frameMax, margin, spacing)
    // frameWidth = 8 pixels wide * 4 pixel width = 32
    // frameMax = 8 frames
    game.cache.addSpriteSheet('bobSpriteSheet','', game.bmpBobSpriteSheet.canvas, 8*4, 8*4, 8,0,0);

    // add bob object to game using the spriteSheet
    this.bob = game.add.sprite(300,100, "bobSpriteSheet");

    // add several animation routines to bob.
    // animations.add(animationsGroupNames, frames to use, swap frames every 10 frames per second)
    this.bob.animations.add('stand',[0,1], 10, true);
    this.bob.animations.add('right',[2,3], 10, true);
    this.bob.animations.add('left',[4,5], 10, true);
    this.bob.animations.add('jump',[6,7], 10, true);


    // enable physics on bob so he response to gravity and velocity
    game.physics.enable(this.bob, Phaser.Physics.ARCADE);

    // set bob's gravity
    this.bob.body.gravity.y = 2600;
    this.bob.anchor.setTo(0.5, 0.5);

    // check if bob leaves the game
    this.bob.checkWorldBounds = true;

    // if bob leaves the game (is out of bounds), call the 'gameOver' function
    this.bob.events.onOutOfBounds.add(this.gameOver, this);


    },

Create our Kitchen Floor
In the "playlevel1.js" file, add this function which will add our kitchen floor bob will run on. This function will add a bunch of floor tiles along the bottom of screen.

    createKitchen: function() {

    // create a group to store our collection of tiles
    this.floorTiles = game.add.group();


    // create a bunch of tiles
    for (var i = 300; i < game.world.width; i=i+25) {

            // create a tile

            //var tile = game.add.sprite(i, game.world.height - 50, game.bmpTile);
            var tile = game.add.sprite(i, game.world.height - 200, game.bmpTile);

            // enable physics on the tile
            game.physics.enable(tile, Phaser.Physics.ARCADE);

            // make title immovable
            tile.body.immovable = true;

            // adjust it's center point from corner to middle
            tile.anchor.setTo(0.5, 0.5);

            // add this tile to our collection of tiles
            this.floorTiles.add(tile);

        }

    },

Create Bob, the Kitchen and our keyboard object
In the "playlevel1.js" file, replace the CREATE function below to call our create functions we added.

    // the create function is where we create all our game objects
    create: function() {

        // change the background color of our game
        game.stage.backgroundColor = '#5c94fc';


        this.createKeyboard();

        this.createBob();

        this.createKitchen();

    },

Make Bob Move
In the "playlevel1.js" file, add a function which detects keyboard input and makes bob move.

    makeBobMove: function() {

        // check if user has pressed any keys
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
        {

        this.bob.body.velocity.x = -600;
        this.bob.play('left');

        } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {

        this.bob.body.velocity.x = 600;
        this.bob.play('right');

        } else
        {

        // bobs not moving, so make him stand still
        this.bob.body.velocity.x = 0;
        this.bob.play('stand');

        }

    },

Check if Bob Touches floor while making him move
In the "playlevel1.js" file, replace the update function with the one below. This update function will check if Bob collides with the floor and allow him to move by calling our makeBobMove function.

    // the update function runs continously during our game
    update: function() {

        // check if bob collides with the floor
        game.physics.arcade.collide(this.bob, this.floorTiles);

        // check if this level is over
        if (playlevel1State.ThisLevelIsOverDude === true) {

        // call the game over function
        this.gameOver();

        }

        this.makeBobMove();

    },

Run Game and Check for Errors
Press F12 to check console for any problems. Make sure you can move bob with the left and right arrow keys

Game Over Scene
In the "playlevel1.js" file, replace the create function with the one below.

    create: function() {

    // change the background color
    game.stage.backgroundColor = '#5c94fc';


    txtTitle = game.add.text(game.world.centerX, game.world.centerY / 2, '', { font: "30pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtTitle.anchor.set(0.5);
    txtTitle.text = 'Game Over';

    },

code on plnkr