How to do level game on phaser?

[sinanqd10]

Can anyone guide the simple way to do the level of the game?

 

For example:

 

Level 1:

Instruction text:

 -aaaa

 -bbbb

 -cccc

 

then  go to

 

level 2:

New instruction text:
 

-dddd

-eeee

-fffffff

 

thanks you in advance.

[markusT]

I usually use Json files to get and set levelData. 

[Tuan]

http://www.html5gamedevs.com/topic/10669-phaserfeathered-mission/

 

Research this game and you can do it

[eguneys]

http://www.sitepoint.com/javascript-game-programming-using-phaser/

[sinanqd10]

Thanks you guys for answered. However, Can anyone provide me jsfiddle example. just a simple one for guiding me

[hex13]

You can put all your level data (list of objects, instructions etc.) in JSON.

 

And after loading it, you just loop through data in JSON and call appropriate Phaserjs methods.

For example, your json file:

{    "images": [        ["witch", "img/witch.png"],        ["cat", "img/cat.png"],        ["btn", "img/button.png"]    ],    "levels": [        {            "instructions": "do something!",               "objects": [                {                    "type": "witch", "x": 100, "y": 100                },                {                    "type": "cat", "x": 150, "y": 150                }                            ]        },        {            "instructions": "do something else, because this is level 2 and there are three cats",            "objects": [                {                    "type": "cat", "x": 50, "y": 150                },                                {                    "type": "cat", "x": 150, "y": 150                },                                {                    "type": "cat", "x": 250, "y": 150                }                                            ]        }            ]}

And you can load this and load sprites in loop, and automatically preload images listed in JSON:

    $.get('/game.json',function (gamedata) {        // index of current level, counting from zero        var levelIndex = 0;                function nextLevel() {            levelIndex++;            game.state.start('level-' + levelIndex);                    };                var state = {            preload: function () {                // preload images from JSON                gamedata.images.forEach(function (tuple) {                    // tuple is in form [name, path]                    game.load.image(tuple[0], tuple[1]);                });                            },            create: function () {                var level = gamedata.levels[levelIndex];                level.objects.forEach(function(obj) {                    game.add.sprite(obj.x, obj.y, obj.type);                });                                game.debug.text("LEVEL " + (levelIndex+1), 40, 30);                 game.debug.text(level.instructions,40,70);                game.add.button(300,300,'btn', nextLevel);            }        };                var game = new Phaser.Game(800,600, Phaser.AUTO,'game', state);                // add states to phaser (level-0, level-1, level-2 etc.)        for (var i = 0; i < gamedata.levels.length; i++) {            game.state.add('level-' + i, state);        }            });

I made an example: http://hex13.github.io/examples/phaser/load.html

[sinanqd10]

@hex13, thanks you sir for answered. However, I think my game is small. So why we need to use json? Can you give another example of array ? Thanks you for helping.

[hex13]

well... if you want you can put data in plain JS arrays and objects instead of JSON. You can skip also x,y properties  etc.

for example:

 var levels = [    // first level     [[100, 100, 'witch],    [100, 150, 'cat']],    // second level    [[50, 100, 'cat'],      [150, 100, 'cat'],     [250, 100, 'cat']]];  

and load it by

var levelIndex = 0; // first level = 0, second level = 1 etc..... levels[levelIndex].forEach(function(args) {     game.add.sprite.apply(game.add, args); });                

[sinanqd10]

@hex13, Thanks you for helping