Jump to content

Phaser Isometric plugin


lewster32
 Share

Recommended Posts

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)

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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

 

0UBy9Pe.png

 

 

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

QJ6IJEA.png

 

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.

 

DB1y7hh.png

 

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?

Link to comment
Share on other sites

Is it possible to modify this plugin to use trimetric projection? 800px-Graphical_projection_comparison.pn

 

 

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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