Jump to content

Phaser Isometric - Move player to tile onclick?


Recommended Posts

Hi all,


In the past I've created some half baked games with C Programming and Lua. However, I never felt like people would be able to play them on much platforms without downloading something. Phaser and the way games can be played on any device looks very attractive.


Right, so I want to create an isometric game. I want to have it click based. I got that part working.  However, clicking on a tile will not center the player on the tile. What would be a possible solution?


Attached my files in case anyone wants to see the current behavior and maybe help me out. 


Thanks for reading.


Link to comment
Share on other sites

try this


tileGroup.forEach(function (tile) {        var inBounds = tile.isoBounds.containsXY(cursorPos.x, cursorPos.y);        if (game.input.activePointer.isDown && inBounds) {        movePlayer(tile)    }



function movePlayer(tile) {    var isoBaseSize = 32;    game.add.tween(player).to(            { isoZ: 40, isoX: (tile.isoX), isoY: (tile.isoY) }, 


shouldn't really have that movePlayer in the update loop though... i'd try separating it out by storing some variables globally

Link to comment
Share on other sites

actually try this... it's out of the update loop now, as it shouldn't be running every frame


var selectedTile
create: function() {    ...    game.input.onDown.add(movePlayer,this) 
update: function() {    ...    tileGroup.forEach(function (tile) {        var inBounds = tile.isoBounds.containsXY(cursorPos.x, cursorPos.y);        if (!tile.selected && inBounds) {                 tile.selected = true;                selectedTile=tile        ...
function movePlayer() {        var tile = selectedTile    var isoBaseSize = 32;    var tween = game.add.tween(player)        .to(            { isoZ: 60, isoX: (tile.isoX), isoY: (tile.isoY) },             200,             Phaser.Easing.Quadratic.InOut,             false          ).to(             { isoZ: 40 },              200,              Phaser.Easing.Bounce.Out,              false         );    tween.start()             }   }
Link to comment
Share on other sites

this isn't simple. .


* i don't think you necessarily can mix tweens with physics easily.  this is why normal arcade has moveToObject http://phaser.io/docs/2.4.4/Phaser.Physics.Arcade.html#moveToObject

read this re: normal 2D arcade http://www.html5gamedevs.com/topic/14273-newbie-question-different-ways-to-move-an-object/?p=81230


* if you want to use tweens set body.moves = false


* you need to collide your objects with world bounds, to stop them falling through the floor
* put player & box in a single isoGroup so you can z-sort them
* I don't know if you need physics on your floor tiles or not?


* set your box & player anchor to (0.5, 0.5)




        player = game.add.isoSprite(185, 185, 0, 'characterAnim', 0, isoGroup);        player.anchor.set(0.5,0.5);        box = game.add.isoSprite(38*5, 38*1, 0, 'box', 0, isoGroup); // 38 is iso grid width/height, so box is at (5,1)        box.anchor.set(0.5,0.5);        //Setup physics        game.physics.isoArcade.gravity.setTo(0, 0, -500);         game.physics.isoArcade.enable(player);        game.physics.isoArcade.enable(box);        player.body.moves=false        box.body.moves = false        player.body.collideWorldBounds = true;        box.body.collideWorldBounds = true;


....game.physics.isoArcade.collide(box, player , this.doCollide) game.iso.topologicalSort(isoGroup);   



 doCollide: function(box, player){                  console.log('great success:', player, ' ate ', box);




function movePlayer() {// tween the last step to isoZ: 0 so he's on the floor....to(    { isoZ: 0 },     200,     Phaser.Easing.Bounce.Out,     false
Link to comment
Share on other sites


  • Recently Browsing   0 members

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