Jump to content

Phaser Isometric: Tile positioning


bobbydabrain
 Share

Recommended Posts

I am struggling to understand how to develop tiles for my phaser game using Adobe Illustrator.  Attached is an Isometric Grid template I created for Illustrator.  Each square in the grid is 32x32 pixels projected at 30 degrees.  I have also attached my tile.png, a picture of the output, and a code sample for how I am attempting to render the floor:

 

Illustrator template:

 

http://i.imgur.com/8ixyQCz.jpg

 

Game output:

 

http://i.imgur.com/AVnD7zI.png

 

Javascripts:

 

game.js :

window.onload = function() {    var h = window.innerHeight,        w = window.innerWidth;    window.Game = new Phaser.Game(w, h, Phaser.AUTO, 'test', null, true, false);    var game = window.Game;    var BasicGame = function (game) {};    BasicGame.Boot = function (game) {};    var isoGroup, player;    BasicGame.Boot.prototype = {        preload: function () {            game.load.pack('tutorial',null, window.tutorial, this);            game.time.advancedTiming = true;            game.plugins.add(new Phaser.Plugin.Isometric(game));            // Set the world size            game.world.setBounds(0, 0, 2048, 1024);            // set the middle of the world in the middle of the screen            game.iso.anchor.setTo(0.5, 0);            // Start the IsoArcade physics system.            game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);        },        create: function () {            // Create a group for our tiles, so we can use Group.sort            isoGroup = game.add.group();            game.physics.isoArcade.gravity.setTo(0, 0, -300);            var floor = new Floor({ 'group': isoGroup });                        // Create another cube as our 'player', and set it up just like the cubes above.            player = game.add.isoSprite(300, 300, 0, 'cube', 0, isoGroup);            player.tint = 0x86bfda;            player.anchor.set(0.5);            game.physics.isoArcade.enable(player);            player.body.collideWorldBounds = true;            // Set up our controls.            this.cursors = game.input.keyboard.createCursorKeys();            this.game.input.keyboard.addKeyCapture([                Phaser.Keyboard.LEFT,                Phaser.Keyboard.RIGHT,                Phaser.Keyboard.UP,                Phaser.Keyboard.DOWN,                Phaser.Keyboard.SPACEBAR            ]);            var space = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);            space.onDown.add(function () {                player.body.velocity.z = 300;            }, this);        },        update: function () {            // Move the player at this speed.            var speed = 160;            if (this.cursors.up.isDown) {                player.body.velocity.y = -speed;            }            else if (this.cursors.down.isDown) {                player.body.velocity.y = speed;            }            else {                player.body.velocity.y = 0;            }            if (this.cursors.left.isDown) {                player.body.velocity.x = -speed;            }            else if (this.cursors.right.isDown) {                player.body.velocity.x = speed;            }            else {                player.body.velocity.x = 0;            }            // Our collision and sorting code again.            game.physics.isoArcade.collide(isoGroup);            game.iso.topologicalSort(isoGroup);        },        render: function () {            game.debug.text("FPS: " + game.time.fps || '--', 2, 14, "#a7aebe");        }    };    game.state.add('Boot', BasicGame.Boot);    game.state.start('Boot');};window.onresize = function() {    window.Game.width = window.innerWidth;    window.Game.height = window.innerHeight;};

floor.js :

Floor = function(opts) {    this.group = opts['group'];    this.map = {        'mapWidth': 3,        'mapHeight': 3    };    this.sprite = window.Game.cache.getImage('tile3');    this.render();};Floor.prototype.render = function() {    var size = this.sprite.width / (2 * Math.cos(window.Game.iso.projectionAngle))        + this.sprite.height / (2 * Math.sin(window.Game.iso.projectionAngle));    size = size / 2;    for(var x = 0; x < size * this.map.mapWidth; x+= size) {        for(var y = 0; y < size * this.map.mapHeight; y+= size) {            this.createTile(x, y);        }    }};Floor.prototype.createTile = function(map_x, map_y) {    var tile = window.Game.add.isoSprite(map_x, map_y, 0, 'tile3', 0, this.group);    tile.anchor.set(0);    window.Game.physics.isoArcade.enable(tile);    tile.body.collideWorldBounds = true;    tile.body.moves = false;    tile.body.immovable = true;};

post-17622-0-96572400-1448830619.png

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