Phaser Isometric plug-in

Realtime depth sorting - Back

 
1
var game = new Phaser.Game(800, 400, Phaser.AUTO, 'test', null, true, false);
2
​
3
var BasicGame = function (game) { };
4
​
5
BasicGame.Boot = function (game) { };
6
​
7
var isoGroup, sorted = 0, sortModes = ["None", "Simple", "Topological"];
8
​
9
BasicGame.Boot.prototype =
10
{
11
    preload: function () {
12
        game.load.image('cube', '../assets/cube.png');
13
​
14
        game.time.advancedTiming = true;
15
​
16
        // Add and enable the plug-in.
17
        game.plugins.add(new Phaser.Plugin.Isometric(game));
18
​
19
        // This is used to set a game canvas-based offset for the 0, 0, 0 isometric coordinate - by default
20
        // this point would be at screen coordinates 0, 0 (top left) which is usually undesirable.
21
        game.iso.anchor.setTo(0.5, 0.2);
22
​
23
24
    },
25
    create: function () {
26
        // Create a group for our tiles, so we can use Group.sort
27
        isoGroup = game.add.group();
28
​
29
        // Let's make a load of cubes on a grid, but do it back-to-front so they get added out of order.
30
        var cube;
31
        for (var xx = 256; xx > 0; xx -= 48) {
32
            for (var yy = 256; yy > 0; yy -= 48) {
33
                // Create a cube using the new game.add.isoSprite factory method at the specified position.
34
                // The last parameter is the group you want to add it to (just like game.add.sprite)
35
                cube = game.add.isoSprite(xx, yy, 0, 'cube', 0, isoGroup);
36
                cube.anchor.set(0.5)
37
​
38
                // Store the old messed up ordering so we can compare the two later.
39
                cube.oldZ = cube.z;
40
​
41
                // Add a slightly different tween to each cube so we can see the depth sorting working more easily.
42
                game.add.tween(cube).to({ isoX: 256 - xx + 32}, 2000, Phaser.Easing.Quadratic.InOut, true, 0, Infinity, true);
43
            }
44
        }
45
​
46
        // Toggle sorting on click/tap.
47
        game.input.onDown.add(function () {
48
            sorted = (sorted + 1) % 3;
49
        }, this);
50
51
    },
52
    update: function () {
53
        if (sorted === 0) {
54
            isoGroup.sort('oldZ');
55
        }
56
        else if (sorted === 1) {
57
            game.iso.simpleSort(isoGroup);
58
        }
59
        else {
60
            game.iso.topologicalSort(isoGroup);
61
        }
62
    },
63
    render: function () {
64
        game.debug.text("Click to toggle! Sort mode: " + sortModes[sorted], 2, 36, "#ffffff");
65
        game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe");
66
    }
67
};
68
​
69
game.state.add('Boot', BasicGame.Boot);
70
game.state.start('Boot');