Bossman759

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;

Share this post


Link to post
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>(...)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.