Phaser Isometric plug-in

Pointer interaction - 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, cursorPos, cursor;
8
​
9
BasicGame.Boot.prototype =
10
{
11
    preload: function () {
12
        game.load.image('tile', '../assets/tile.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
​
27
        // Create a group for our tiles.
28
        isoGroup = game.add.group();
29
​
30
        // Let's make a load of tiles on a grid.
31
        this.spawnTiles();
32
​
33
        // Provide a 3D position for the cursor
34
        cursorPos = new Phaser.Plugin.Isometric.Point3();
35
    },
36
    update: function () {
37
        // Update the cursor position.
38
        // It's important to understand that screen-to-isometric projection means you have to specify a z position manually, as this cannot be easily
39
        // determined from the 2D pointer position without extra trickery. By default, the z position is 0 if not set.
40
        game.iso.unproject(game.input.activePointer.position, cursorPos);
41
​
42
        // Loop through all tiles and test to see if the 3D position from above intersects with the automatically generated IsoSprite tile bounds.
43
        isoGroup.forEach(function (tile) {
44
            var inBounds = tile.isoBounds.containsXY(cursorPos.x, cursorPos.y);
45
            // If it does, do a little animation and tint change.
46
            if (!tile.selected && inBounds) {
47
                tile.selected = true;
48
                tile.tint = 0x86bfda;
49
                game.add.tween(tile).to({ isoZ: 4 }, 200, Phaser.Easing.Quadratic.InOut, true);
50
            }
51
            // If not, revert back to how it was.
52
            else if (tile.selected && !inBounds) {
53
                tile.selected = false;
54
                tile.tint = 0xffffff;
55
                game.add.tween(tile).to({ isoZ: 0 }, 200, Phaser.Easing.Quadratic.InOut, true);
56
            }
57
        });
58
    },
59
    render: function () {
60
        game.debug.text("Move your mouse around!", 2, 36, "#ffffff");
61
        game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe");
62
    },
63
    spawnTiles: function () {
64
        var tile;
65
        for (var xx = 0; xx < 256; xx += 38) {
66
            for (var yy = 0; yy < 256; yy += 38) {
67
                // Create a tile using the new game.add.isoSprite factory method at the specified position.
68
                // The last parameter is the group you want to add it to (just like game.add.sprite)
69
                tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, isoGroup);
70
                tile.anchor.set(0.5, 0);
71
            }
72
        }
73
    }
74
};
75
​
76
game.state.add('Boot', BasicGame.Boot);
77
game.state.start('Boot');