Phaser Isometric plugin

[BitOfGold]

Hey!

I used this plugin in my Ludum Dare entry:
http://www.ludumdare.com/compo/ludum-dare-30/?action=preview&uid=40380

Great Job, it was really easy to use!!!

FPS drops under 30 in Firefox only.
Chrome and IE are OK...
Profiler shows much of time spent in collosion code (not that many isosprites, under 100)

 

[lewster32]

Great stuff! Really nice to see people using it

[mflux]

Lewster, really great work. I've pulled your examples and began working on a small game using your isometric plugin. Quick question, what is a good way to "unproject" a vector, for example the mouse position, back into isometric space?

 

EG, if I were to build a strategy game, and I want to click on some point on the screen, and I need to know what tile I've clicked on.

 

I can imagine a few ways to do it, however maybe your plugin's already got a solve ready to go, perhaps using the Projector class?

[lewster32]

New projection routine is being pushed today - and it includes an unproject method which will reverse the transform to allow for exactly this functionality. Just need to fix a small problem with Y axis drift which is plaguing it at the moment!

[mflux]

Nice! I'm looking forward to that patch. In the meantime I've written an unproject on my own with some guess work.

 

Here's a working demo

https://dl.dropboxusercontent.com/u/705999/isopointer/index.html

 

And for anyone in the future reading this thread and that example is dead, here is the unproject I've written.

Phaser.Plugin.Isometric.Projector.prototype.unproject = function (point, out) {  if (typeof out === "undefined") {    out = new Phaser.Plugin.Isometric.Point3();  }  var px = point.x;  var py = point.y;  px *= this.projectionRatio;  px -= this.game.world.width * this.anchor.x / 2;  py -= this.game.world.height * this.anchor.y;  out.x += px + py;  out.y -= ( px - py );  return out;};

It doesn't account for Z unfortunately, I'd have no idea how to do that unless we hit-test against sprites and get the intersect sprite z. In which case, I may as well do hit-detection against sprites directly.

[lewster32]

Nice work! I've had similar issues with z, but I have some ideas for how to solve that at a later date (a kind of simplified raycast to project against the forward faces of the bounding cube). Also, does your routine work if you alter the projection ratio? I did a lot of head scratching trying to work out the maths for that, but if yours solves that without my crazy maths I'd be happy to include it, as it'll definitely be faster than mine!

[NateTheGreatt]

Hi Nate, did you ever get this done? I would love a copy if so. Thanks

 

I have a small portion of it done, however I can't figure out how to write definitions for the variables that Lewster has decorated some of Phaser's core classes with :/. In fact I'm not entirely sure it's possible to do so in a definition file without entirely re-writing the definitions for these modified Phaser classes with all of the original definitions plus the definitions for the additional variables that have been added onto them (which is very redundant). I could be wrong, however. I will continue to research this. For now, just cast all references to the isometric plugin classes as <any> and the compiler will be satisfied (you will have to cast the core classes that have the new variables as well).

 

 

Hey Lewster, any more thoughts on implementing tilemaps into your plugin? I began writing my own class but if you are perhaps in the middle of an implementation I would much rather wait for your version ^^

[lewster32]

I'm afraid I can't be of much help, not using TypeScript myself. There're a few awkward extends and additions into the Phaser core stuff but they were necessary in order that the API was kept as simple and close to Phaser's own as possible :/

 

I've not even looked at TileMaps yet - I've not even used the standard Phaser TileMaps yet, so I don't really even have a plan at this stage. I know vaguely how they work, but it remains to be seen whether I can adapt Phaser's method to an axonometric perspective or not. By all means if you want to have a crack at it then be my guest, and if you need to ask me anything about what I've done already then I'll be happy to answer as best as I can

[oddskill]

Great work, thanks.

Maybe i use it for a isometric sokoban one day,

if i can find the time for that.

[San4er]

Awesome work!

[mflux]

Lewster, nice work on the unproject update and the example.

 

Got a question actually, about your example. I'm trying to replicate your scene with a much smaller tilesize.

 

Your example

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

tile image: http://rotates.org/phaser/iso/assets/tile.png

dimensions: 70px x 40px

 

tile pixel width (from one corner to adjacent corner of the tile) 35px

 

In your code, you've used 38 iso units per dimension to separate the tiles as can be seen via

        for (var xx = 0; xx < 256; xx += 38) {            for (var yy = 0; yy < 256; yy += 38) {

Also you have

tile.anchor.set(0.5, 0);

Which I assume sets the anchor to the middle top of the tile sprite.

 

At first, I replicated your results perfectly, using your numbers

 

 

 

The bottom image is the blown up tile asset I'm using. As you can see, it's pixel perfect. Everything is going well.

 

However, I wanted a smaller tile-size.

 

 

I'm trying to create a smaller tilesize, so I went with half your tilesize, which is 35px x 20px, with 19 iso unit tile distance.

 

Here's what it looks like

 

As you can see, I'm experiencing some one-pixel-off issues. It doesn't appear to be very consistent either. So I thought maybe it was the sprite I was using, so I reduced your tile sprite by half to 35x20.

 

 

It seems like the same thing is happening.

 

Do you have any idea why the dimensions 70x40 with 38 spacing works so well? Is there any special relationship with those numbers that allow for proper dimetric projection with pixel art?

[wayfinder]

Have you tried 18 spacing? 

[lewster32]

Yeah, I believe 18 should fix this. The tiles need to overlap 1 pixel on both the front and back, which is how the number is derived.

[c023-dev]

Has anyone had any luck on getting this to work with typescript yet? I'm still fully loaded on my main project but would love to support this asap. I have TONS of isometric tiles and assets I once rendered in 3D for a project that was canceled and would like to put them to use one day.

[mflux]

Hey Lewster, just wanted to show you what I'm using your isometric plugin for. 18 pixels worked out OK, there's still the infrequent 1px offset but I won't bother fixing it for now...

 

[v0van1981]

version 0.9 work incorrect

 

test files : igroserver.hol.es/MY_ISOMETRIC.zip

 

sorry, i "not allowed to use that image extension on this community", scrinshots in the archive

[lewster32]

Hmm, yeah this is probably similar to the other pixel inaccuracy problem that was being seen. I'll probably add something at the weekend to add simplified projector code in the case of doing the traditional 2:1 pixel layouts which should make it accurate again.

[mflux]

Is it possible to modify this plugin to use trimetric projection? 

 

 

Seems like it would be a matter of moving the Xs into the right place during projection, in addition to the Y (which currently is just a multiplier). What's the math to figure that part out?

[lewster32]

I've thought about this - it pretty much is just a matter of altering the projector, as the depth sorting is taken care of in a proper 3D manner. I'll certainly look into it, though I can't make any promises that it'll work as intended!

[lewster32]

Seems reverting the projector isn't having the desired effect for the pixel rounding problem people have been having. Marked it as an issue and will be doing some more testing to see if I can get to the bottom of that one. Sorry for anyone putting together very carefully placed and sized pixel art, I'll try to get to the bottom of it asap.

[Tanikaze]

Really, cool plugin, surely in October I will give it a try. I'll need to find a way to hack iso art: for my awesome graphic skills, it was a challenge the 2d art. My sparkling new avatar should show you which level I am with it ^^

[Jikmo]

Very cool lewster.  I'm definitely using this in my game.

 

Thank for your help in another thread BTW.

 

Do you have any plans to extend Phaser's tilemap functionality so that we can render an isometric map as easily as a 2D map?

[lewster32]

It's not planned, partly as it goes well beyond the spec of what I created the system for in the first place and partly because it'll be quite a challenge to implement (it'll be very different from Phaser's TileMap implementation due to the way depth sorting is handled, amongst other things) but if there's enough interest then I'll see what I can do. It may be that the implementation is simply based around creating a parser for isometric Tiled scenes.

[Jikmo]

That's fine.  It's easy enough to render a map.

What sort of stuff do you have planned?

 

For my game, it would be nice (but it's not necessary) to be able to walk around on slopes.  Might I suggest a way to make bounding 3D shapes for the Physics engine?

 

Edit:  BTW, I've made a collision detection engine in 2D with bounding polygons before, so I know that doing it in 3D is fairly complicated.

[Jikmo]

I ran into a problem.  I tried to make a floor our of cubes and place a player on top of them, but I can't get the player and the tiles to render correctly.