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

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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