Phaser Isometric plug-in

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;
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({ isoZ: 10 }, 100 * ((xx + yy) % 10), Phaser.Easing.Quadratic.InOut, true, 0, Infinity, true);
43
            }
44
        }
45
​
46
        // Just a var so we can tell if the group is sorted or not.
47
        sorted = false;
48
​
49
        // Toggle sorting on click/tap.
50
        game.input.onDown.add(function () {
51
            sorted = !sorted;
52
            if (sorted) {
53
                game.iso.simpleSort(isoGroup);
54
            }
55
            else {
56
                isoGroup.sort('oldZ');
57
            }
58
        }, this);
59
60
    },
61
    update: function () {
62
​
63
    },
64
    render: function () {
65
        game.debug.text("Click to toggle! Sorting enabled: " + sorted, 2, 36, "#ffffff");
66
        game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe");
67
    }
68
};
69
​
70
game.state.add('Boot', BasicGame.Boot);
71
game.state.start('Boot');