Top Chef Bob - Part 01 - Menu Items
Part 01 of the Top Chef Bob food simulator game is to:
1) setup our game project files
2) load in all our pictures
Setup Game Project files
We will use our standard game project file setup similar to our "Run Bob Run" game.
This will allow us to have multiple "states" for booting our game, loading our pictures, a menu, our playLevelOne scene, and gameover scene.
Step 1: The easiest way to setup our new game project is to "fork" our "RunBobRun" game.
Step 2: After you fork, rename your project to "TopChefBob" and Save it!
Don't have a working copy of the game RunBobRun? No problem, click here to get RunBobRun code then fork it. code on plnkr
Create our PRELOAD function
In an effort to organize our code better and make it easier to manage, we will create a function for each group of pictures we'll have.
To load our pictures into our Game Engine, our PRELOAD function will just need to call each function.
In the "load.js" file, replace the PRELOAD function with the one below.
preload: function() {
// load in pictures for taco order
this.picsTaco();
// load in pictures for hotdog order
this.picsHotdog();
// load in pictures for hamburger order
this.picsHamburger();
// load in pictures for pizza order
this.picsPizza();
// load in pictures of food pieces
this.picsIngridients();
// load in pictures of bob
this.picsBob();
// load in pictures of kitchen
this.picsKitchen();
// load in pictures for pizza order
this.picsCustomer();
},
Add our Taco pictures
In the "load.js" file, add this function which contains pictures for a Taco order.
picsTaco: function() {
// build taco - Step 1: an empty taco shell
var dataTacoShell = [
'................',
'................',
'................',
'................',
'................',
'................',
'.....888888.....',
'...8888888888...',
'..888888688888..',
'.88888688888888.',
'.88888888688868.',
'8888886888888888',
'8688888888888888',
'8888888886888688',
'................',
'................'
];
game.bmpTacoShell= game.create.texture('TacoShell', dataTacoShell, 6, 6, 0, false);
// build taco - Step 2: taco shell filled with meat
var dataTacoShellWithMeat = [
'................',
'................',
'................',
'................',
'................',
'.....55.555.....',
'...5.88888855...',
'...8888688888...',
'.58888888888885.',
'5888888888888885',
'588688888888888.',
'8888888886888888',
'8888888888886888',
'8888888888888888',
'................',
'................'
];
game.bmpTacoShellWithMeat = game.create.texture('TacoShellWithMeat', dataTacoShellWithMeat, 6, 6, 0, false);
// build taco - Step 3: the completed taco, taco shell filled with meat and lettuce
var dataTacoShellWithMeatLettuce = [
'................',
'................',
'................',
'................',
'....BB.BBBB.....',
'...BB5BB555B....',
'..B5A8888885B...',
'.BB8888888888BB.',
'.58886888888885.',
'5888888888888885',
'568888688888868B',
'8888888886888888',
'8888888888886888',
'8888888888888888',
'................',
'................'
];
game.bmpTacoShellWithMeatLettuce = game.create.texture('TacoShellWithMeatLettuce', dataTacoShellWithMeatLettuce, 6, 6, 0, false);
},
Add our Hotdog pictures
In the "load.js" file, add this function which contains pictures for a Hotdog order.
picsHotdog: function() {
// hotdog bun
var dataHotdogWithBun = [
'................',
'................',
'................',
'................',
'................',
'...6666666666...',
'..677777777776..',
'.67777777777776.',
'.67777777777776.',
'..666666666666..',
'................',
'................',
'................',
'................',
'................',
'................'
];
game.bmpHotdogWithBun = game.create.texture('HotdogWithBun', dataHotdogWithBun, 6, 6, 0, false);
// hotdog bun meat
var dataHotdogWithBunMeat = [
'................',
'................',
'................',
'................',
'................',
'..666666666666..',
'.63333333333336.',
'.36666666666663.',
'3677777777777763',
'.67777777777776.',
'..666666666666..',
'................',
'................',
'................',
'................',
'................'
];
game.bmpHotdogWithBunMeat = game.create.texture('HotdogWithBunMeat', dataHotdogWithBunMeat, 6, 6, 0, false);
// hotdog bun meat mustard
var dataHotdogWithBunMeatMustard = [
'................',
'................',
'................',
'................',
'................',
'..666666666666..',
'.63883388338836.',
'.38338833883383.',
'3666666666666663',
'.67777777777776.',
'..666666666666..',
'................',
'................',
'................',
'................',
'................'
];
game.bmpHotdogWithBunMeatMustard = game.create.texture('HotdogWithBunMeatMustard', dataHotdogWithBunMeatMustard, 6, 6, 0, false);
},
Add our Hamburger pictures
In the "load.js" file, add this function which contains pictures for a Hamburger order.
picsHamburger: function() {
var dataBunTop = [
'...6662666626...',
'..626662662666..',
'.66626666666266.',
'.62666626626662.'
];
game.bmpBunTop = game.create.texture('BunTop', dataBunTop, 6, 6, 0, false);
var dataBunBottom = [
'6666666666666666',
'.66666666666666.',
'..666666666666..'
];
game.bmpBunBottom = game.create.texture('BunBottom', dataBunBottom, 6, 6, 0, false);
var dataHamburgerWithBunMeat = [
'................',
'.44444434444344.',
'4443443444443444',
'.43344444344444.',
'6666666666666666',
'.66666666666666.',
'..666666666666..'
];
game.bmpHamburgerWithBunMeat = game.create.texture('HamburgerWithBunMeat', dataHamburgerWithBunMeat, 6, 6, 0, false);
var dataHamburgerWithBunMeatCheese = [
'................',
'.88888788887888.',
'.78788887878887.',
'.44444434444344.',
'4443443444443444',
'.43344444344444.',
'6666666666666666',
'.66666666666666.',
'..666666666666..'
];
game.bmpHamburgerWithBunMeatCheese = game.create.texture('HamburgerWithBunMeatCheese', dataHamburgerWithBunMeatCheese, 6, 6, 0, false);
var dataHamburgerWithBunMeatCheeseLettuce = [
'................',
'.BBBBBBBBBBBBBB.',
'.BBBBBBBBBBBBBB.',
'.88888788887888.',
'.78788887878887.',
'.44444434444344.',
'4443443444443444',
'.43344444344444.',
'6666666666666666',
'.66666666666666.',
'..666666666666..'
];
game.bmpHamburgerWithBunMeatCheeseLettuce = game.create.texture('HamburgerWithBunMeatCheeseLettuce', dataHamburgerWithBunMeatCheeseLettuce, 6, 6, 0, false);
var dataHamburgerWithBunMeatCheeseLettuceBun = [
'................',
'................',
'...6662666626...',
'..626662662666..',
'.66626666666266.',
'.62666626626662.',
'.BBBBBBBBBBBBBB.',
'.BBBBBBBBBBBBBB.',
'.88888788887888.',
'.78788887878887.',
'.44444434444344.',
'4443443444443444',
'.43344444344444.',
'6666666666666666',
'.66666666666666.',
'..666666666666..'
];
game.bmpHamburgerWithBunMeatCheeseLettuceBun = game.create.texture('HamburgerWithBunMeatCheeseLettuceBun', dataHamburgerWithBunMeatCheeseLettuceBun, 6, 6, 0, false);
},
Add our Pizza pictures
In the "load.js" file, add this function which contains pictures for a Pizza order.
picsPizza: function() {
var dataPizzaDough = [
'.....666........',
'....6666666.....',
'....66666666....',
'...6666666666...',
'...6666666666...',
'..66666666666...',
'..666666666666..',
'..666666666666..',
'.6666666666666..',
'.6666666666.....',
'66666666........',
'666666..........',
'666.............'
];
game.bmpPizzaDough = game.create.texture('PizzaDough', dataPizzaDough, 6, 6, 0, false);
var dataPizzaDoughCheese = [
'......66666.....',
'.....88866666...',
'....8888888666..',
'....88888888666.',
'...888888888866.',
'...888888888866.',
'..8888888888866.',
'..8888888888886.',
'..8888888888886.',
'.8888888888888..',
'.8888888888.....',
'88888888........',
'888888..........',
'888.............'
];
game.bmpPizzaDoughCheese = game.create.texture('PizzaDoughCheese', dataPizzaDoughCheese, 6, 6, 0, false);
var dataPizzaDoughCheesePepperoni = [
'......66666.....',
'.....88866666...',
'....8838888666..',
'....83338888666.',
'...888388888866.',
'...888888888866.',
'..8888888838866.',
'..8883888333886.',
'..8833388838886.',
'.8888388888888..',
'.8888888888.....',
'88888888........',
'888888..........',
'888.............'
];
game.bmpPizzaDoughCheesePepperoni = game.create.texture('PizzaDoughCheesePepperoni', dataPizzaDoughCheesePepperoni, 6, 6, 0, false);
var dataPizzaDoughCheesePepperoniOlive = [
'......66666.....',
'.....88866666...',
'....8838888666..',
'....83338888666.',
'...888388088866.',
'...808888888866.',
'..8888888838866.',
'..8883888333886.',
'..8833388838886.',
'.8888388888888..',
'.8888888888.....',
'88880888........',
'808888..........',
'888.............'
];
game.bmpPizzaDoughCheesePepperoniOlive = game.create.texture('PizzaDoughCheesePepperoniOlive', dataPizzaDoughCheesePepperoniOlive, 6, 6, 0, false);
},
Add our Ingridient pictures to our game
In the "load.js" file, add this function which contains all our individual food pieces pictures needed to make an order.
picsIngridients: function() {
// lettuce
var dataLettuce = [
'....00...B00...',
'....0B.022BBB0.',
'..00BB022BBBB0.',
'.0BBBB22BBB2B0.',
'.0BBB2BBBB2BB0.',
'0BBB22BBB22BB..',
'0BB22BBB22BB0..',
'0BB2BBBB2BBB...',
'0B22BBB2BBBB0.0',
'0B2BBB22BB222B0',
'0B2B2222222BBB0',
'0B222BBBB0BBB0.',
'B2BBBBB00.00...',
'B2BBBBB........',
'2BB0000........'
];
game.bmpLettuce = game.create.texture('lettuce', dataLettuce, 6, 6, 0, false);
// meat
var dataMeat = [
'....00000.......',
'...0444400......',
'...03344440.....',
'..0444444440....',
'..04443333440...',
'.0044342233400..',
'004443233234400.',
'0664332432343400',
'0664434222443440',
'0566433443434444',
'0556444333434440',
'0555644444446650',
'.055666444466500',
'..0555666666500.',
'...05555555550..',
'....000000000...'
];
game.bmpMeat = game.create.texture('meat', dataMeat, 6, 6, 0, false);
// cheese
var dataCheese = [
'...77.....',
'..7887....',
'.788887...',
'78888887..',
'777888887.',
'7887778887',
'7888887777',
'7778888887',
'...7778887',
'......7777'
];
game.bmpCheese = game.create.texture('cheese', dataCheese, 6, 6, 0, false);
// olive
var dataOlive = [
'..000000..',
'.00000000.',
'0000000000',
'000....000',
'000....000',
'0000000000',
'.00000000.',
'..000000..'
];
game.bmpOlive = game.create.texture('olive', dataOlive, 6, 6, 0, false);
// pepperoni
var dataPepperoni = [
'......33......',
'....333333....',
'...33333333...',
'..3333333333..',
'.333333333333.',
'33333333333333',
'33333333333333',
'.333333333333.',
'..3333333333..',
'...33333333...',
'....333333....',
'......33......'
];
game.bmpPepperoni = game.create.texture('Pepperoni', dataPepperoni, 6, 6, 0, false);
},
Add pictures of Bob
In the "load.js" file, add this function which contains pictures for Bob.
picsBob: function() {
// BOB IMAGE DATA
// data used to make Bob look like he is running and jumping
var bobStand1Data = [
'..0000..',
'..0220..',
'...66...',
'..6EE6..',
'..6EE6..',
'...66...',
'...66...',
'...55...'
];
var bobStand2Data = [
'..0000..',
'..0110..',
'...66...',
'..6EE6..',
'..6EE6..',
'...66...',
'...66...',
'...55...'
];
var bobRight1Data = [
'..0000..',
'..062...',
'.6.66...',
'..6EE66.',
'...EE...',
'.5666...',
'.5..6...',
'....55..'
];
var bobRight2Data = [
'..0000..',
'..062...',
'...66.6.',
'..6EE6..',
'.6.EE...',
'...66...',
'...66...',
'...55...'
];
var bobLeft1Data = [
'..0000..',
'...260..',
'...66.6.',
'.66EE6..',
'...EE...',
'...6665.',
'...66.5.',
'..55....'
];
var bobLeft2Data = [
'..0000..',
'...260..',
'.6.66...',
'..6EE6..',
'...EE.6.',
'...66...',
'...66...',
'...55...'
];
var bobJump1Data = [
'..0000..',
'..062...',
'.7.66.7.',
'..6EE6..',
'...EE...',
'.566665.',
'........',
'........'
];
var bobJump2Data = [
'..0000..',
'..062...',
'...66...',
'.76EE67.',
'...EE...',
'.566665.',
'........',
'........'
];
// combine all frames
var bobData = bobStand1Data.concat(bobStand2Data);
bobData = bobData.concat(bobRight1Data).concat(bobRight2Data);
bobData = bobData.concat(bobLeft1Data).concat(bobLeft2Data);
bobData = bobData.concat(bobJump1Data).concat(bobJump2Data);
// create a binaryImage (a spritesheet pic) from the data
// this image will have all frames inside it, one on-top of the other.
// game.create.texture(key, data, pixelHeightX, PixelHeightY, Palette = 0 for default palette, false = generate a bitmap(bmp) image)
game.bmpBobSpriteSheet = game.create.texture('bobSpriteSheet',bobData, 4, 4, 0, false);
},
Add our Kitchen pictures
In the "load.js" file, add this function which contains pictures for our kitchen
picsKitchen: function() {
// kitchen floor tiles
var dataTile = [
'020202',
'202020',
'020202',
'202020'
];
game.bmpTile = game.create.texture('tile', dataTile, 6, 6, 0, false);
},
Add our Customer pictures
In the "load.js" file, add this function which contains pictures for our customer
picsCustomer: function() {
// customer happy
var dataCustomerHappy = [
'0000000000000000',
'0222222222222220',
'0222222222222220',
'0222000000002220',
'0220222222220220',
'0202222222222020',
'0202002220022020',
'0202002220022020',
'0202222222222020',
'0200000002222020',
'0202222202222020',
'0202222002222020',
'0202220022222020',
'0220200222220220',
'0222000000002220',
'0000000000000000'
];
game.bmpCustomerHappy = game.create.texture('CustomerHappy', dataCustomerHappy, 6, 6, 0, false);
// customer bored
var dataCustomerBored = [
'0000000000000000',
'0222222222222220',
'0222222222222220',
'0222000000002220',
'0220222222220220',
'0202222222222020',
'0202000222222020',
'0202222222222020',
'0202202000222020',
'0202202202222020',
'0202202202222020',
'0202222202222020',
'0200022222222020',
'0220202222220220',
'0222000000002220',
'0000000000000000'
];
game.bmpCustomerBored = game.create.texture('CustomerBored', dataCustomerBored, 6, 6, 0, false);
// customer mad
var dataCustomerMad = [
'0000000000000000',
'0222222222222220',
'0222222222222220',
'0222000000002220',
'0220222222220220',
'0200222222222020',
'0202002222222020',
'0202220222222020',
'0202002222222020',
'0202002200222020',
'0202222200222020',
'0200000222222020',
'0202220022222020',
'0220222022220220',
'0222000000002220',
'0000000000000000'
];
game.bmpCustomerMad = game.create.texture('CustomerMad', dataCustomerMad, 6, 6, 0, false);
},
Create function to test our pictures
In the "load.js" file, add this function after the CREATE function.
When this function is called, it will display all our pictures on the screen.
testPictures: function() {
// Ingridents
game.add.sprite(1,1, game.bmpLettuce);
game.add.sprite(100,1, game.bmpMeat);
game.add.sprite(200,1, game.bmpCheese);
game.add.sprite(300,1, game.bmpOlive);
game.add.sprite(400,1, game.bmpPepperoni);
// Taco
game.add.sprite(1,100, game.bmpTacoShell);
game.add.sprite(100,100, game.bmpTacoShellWithMeat);
game.add.sprite(200,100, game.bmpTacoShellWithMeatLettuce);
// Hotdog
game.add.sprite(1,200, game.bmpHotdogBun);
game.add.sprite(100,200, game.bmpHotdogWithBunMeat);
game.add.sprite(200,200, game.bmpHotdogWithBunMeatMustard);
// Hamburger
game.add.sprite(1,300, game.bmpBunBottom);
game.add.sprite(100,300, game.bmpBunTop);
game.add.sprite(200,300, game.bmpHamburgerWithBunMeat);
game.add.sprite(300,300, game.bmpHamburgerWithBunMeatCheese);
game.add.sprite(400,300, game.bmpHamburgerWithBunMeatCheeseLettuce);
game.add.sprite(500,300, game.bmpHamburgerWithBunMeatCheeseLettuceBun);
// Pizza
game.add.sprite(1,400, game.bmpPizzaDough);
game.add.sprite(100,400, game.bmpPizzaDoughCheese);
game.add.sprite(200,400, game.bmpPizzaDoughCheesePepperoni);
game.add.sprite(300,400, game.bmpPizzaDoughCheesePepperoniOlive);
// Customer
game.add.sprite(1,500, game.bmpCustomerHappy);
game.add.sprite(100,500, game.bmpCustomerBored);
game.add.sprite(200,500, game.bmpCustomerMad);
}
Test our pictures
In the "load.js" file, replace our CREATE function with the one below.
This new create function will call our 'testPictures' function which will display all our food items on the screen.
We stop the game by commenting out the line which calls the 'MAINMENU' 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');
},
Run Game and Check for Errors
Press F12 to check console for any problems.
Make sure you can see all the food item pictures.
code on plnkr