Phaser Isometric - Move player to tile onclick?

[fallenshadow]

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.

TileGame.zip

[jmp909]

set your player anchor to (0.5,0) as per this example

http://rotates.org/phaser/iso/examples/interaction.htm

 

sorry that's only the first part of the issue. you then need to limit the player coords to the tile coords... hang on let me take a look.

[jmp909]

try this

  

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

then

 

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

[jmp909]

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()             }   }

[fallenshadow]

Wow thank you so much! Works great!

 

I'll try your updated solution now. I was working from your earlier post before.

[fallenshadow]

Thanks again, the new code still works and more efficient for sure!

[fallenshadow]

How are collisions supposed to work? I tried both overlap and collide methods. Getting real confused as to why its acting crazy. 

TileGame.zip

[jmp909]

well you've not put selectedTile in the right scope, so it's 'undefined' in your movePlayer function

 

check your console logs!

[jmp909]

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)

 

 

 

create:

        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;

update

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

doCollide

 

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

 

 

movePlayer

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

[jmp909]

i've put a demo here

http://jsfiddle.net/arakfyzd/2/

[fallenshadow]

Wow, man I barely started with Phaser and my head hurts. Haha. Well I did think about doing my game non-isometric but a flat grid just looks so lame. =/

 

Thanks again, you have been super help to me!

[jmp909]

i guessed most of it... good learning mini-project for me thanks!