How to create multiple levels?

[Bossman759]

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;

[Luis Felipe]

You could trigger the following code once you reach the checkpoint: 

this.state.start('Level2');

[Bossman759]

How exactly would I create a new state?

[Pedro Alpera]

Look at this template:  https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Basic

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

[Luis Felipe]

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>(...)

[Kir13y]

Can someone show me some example code where when a player interacts with a sprite, the level changes.

 

Sorry, Im a noob and im new to this

 

THANK YOU

[Aeon]

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

[ekeimaja]

You can make preload in own global state, so you need then just link all assets when needed.

[BdR]

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.

[PBMCube]

Excellent use of "separation of concerns"; simply brilliant BrD.

Kir13y and Bossman759:  I have examples of exactly what you're looking for in "multiple levels" on my GitHub and in my new book

Pre-release coupon is here and valid until August 5 https://leanpub.com/LoRD/c/PNRXYGHZTM2H

[Channel]

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.