Jump to content

How to create multiple levels?


Bossman759
 Share

Recommended Posts

How would I create multiple levels. For example, after I hit a checkpoint, the game will load a new level? This is the code I currently have, it just loads a few blocks(level 1).

			boxes = game.add.group();			boxes.enableBody = true;			var blocks = boxes.create(300, game.world.height - 125, 'block2');			blocks.body.immovable = true;			blocks = boxes.create(400, game.world.height - 125, 'block2');			blocks.body.immovable = true;			blocks = boxes.create(400, game.world.height - 150, 'block2');			blocks.body.immovable = true;			blocks = boxes.create(625, game.world.height - 125, 'block2');			blocks.body.immovable = true;			blocks = boxes.create(650, game.world.height - 150, 'block2');			blocks.body.immovable = true;			blocks = boxes.create(650, game.world.height - 125, 'block2');			blocks.body.immovable = true;
Link to comment
Share on other sites

How exactly would I create a new state?

 

You can duplicate the file you're currently writing your game in (Game.js)  and rename it: Level2.js or instance. Basically every .js file is a state or level, in most tutorials they just focus on the 'Game' state, but you could have 'Game1', 'Game2', 'Game3' etc. (the name doesn't really matter, could be level1, level2 etc)

 

You could use these to make things like a: upgrade/shop level, "you won/lost", level select, character selector, etc :)

 

Then, in the html file where you're deploying the game, make sure to include as Pedro said:

 

game.state.add('Boot', BasicGame.Boot);game.state.add('Preloader', BasicGame.Preloader);game.state.add('MainMenu', BasicGame.MainMenu);game.state.add('Game', BasicGame.Game);game.state.add('Level1' BasicGame.Game);game.state.add('Level2' BasicGame.Game);(...)

Also make sure not to forget to link the .js file in the html's header: 

<script type="text/javascript" src="js/Boot.js"></script><script type="text/javascript" src="js/Preloader.js"></script><script type="text/javascript" src="js/MainMenu.js"></script><script type="text/javascript" src="js/Game.js"></script><script type="text/javascript" src="js/Level1.js"></script><script type="text/javascript" src="js/Level2.js"></script>(...)
Link to comment
Share on other sites

  • 1 year later...
  • 6 months later...

Hey, for all you guys, I managed to make a Menu, and Level 1 using states following this tutorial: https://gamedevacademy.org/html5-phaser-tutorial-spacehipster-a-space-exploration-game/

 

Now I wanna make a second level, but I'm facing a basic question. Do I really need to declare again every asset in each state? Is there no way to re-cicle them? It looks like after declaring a variable in one state it's unreachable from the other states

Link to comment
Share on other sites

  • 2 weeks later...
For a level based game I don't recommend using separate .js files or separate states for each level. So I mean games like for example Cut The Rope or Fruit Ninja where each level is basically the same game, except the layout of the elements or time limit and number of enemies etc. is different.
 
For these type of games, I would recommend to declare the layout or parameters for each level in a separate .js or .json file. The type of parameters depends on your game obviously, but something like this:
var LevelData = [
    {
        title:"An easy level to start",
        layout:"550f000202020000000002020000000202000000000202020001",
        timelimit:120,
        backcolor:"#3333ff",
        mustscore:1000,
        tutorialmessage:1
    },
    {
        title:"Introducing enemies",
        layout:"550f000000000040000200000200400000400002000002004000",
        timelimit:75,
        backcolor:"#33ffcc",
        mustscore:1600,
        tutorialmessage:2
    },
    {
        title:"Now try this",
        layout:"550f0000200000021116200024c0180010292202000010000001",
        timelimit:100,
        backcolor:"#9933ff",
        mustscore:2500
    },
    //etc.

And then use a separate phaser.state for the level select which starts the MainGame state and also sets a levelindex variable. Then in the MainGame state I have a LoadLevel function which is called when the MainGame state starts. This function initialises the level using the level index which was set by the LevelSelect state, and then it looks at the parameters, so something like this.

var levelparams = LevelData[this._levelindex];
this.titlemsg.text = levelparams.title;
this._timesec = levelparams.timelimit;
//etc

So basically, the idea is that the MainGame state contains all the general game logic to initialise any possible level, and it "makes" the specific level based on parameters and tilelayout data etc.

Link to comment
Share on other sites

  • 1 year later...
  • 4 years later...
On 4/5/2014 at 5:50 PM, Luis Felipe said:

Then, in the html file where you're deploying the game, make sure to include as Pedro said:

Where in the HTML file does this go? Also thank you. Your post is exactly what I'm looking for. 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...