Jump to content

How to create multiple levels?


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",
        title:"Introducing enemies",
        title:"Now try this",

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;

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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