Jump to content

How to do level game on phaser?


sinanqd10
 Share

Recommended Posts

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

Link to comment
Share on other sites

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); });                
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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