Jump to content

Phaser Isometric plugin


lewster32
 Share

Recommended Posts

I've spent the last week or so putting together a fairly comprehensive plug-in for Phaser in the form of an isometric (axonometric and dimetric to be precise) renderer for Phaser. Not wanting to stop there, I decided to go the whole hog and port over Phaser.Physics.Arcade to the new renderer by adding in an extra dimension.

 

You can get the plug-in here: http://rotates.org/phaser/iso/ - the page also contains a working example so feel free to view the source to get a feel for how it works. I'll be creating several more examples in the coming days and weeks, as well as improving the plug-in, fixing bugs and so on.

 

iso.png

 

As of yet, I am undecided as to whether to embark on trying to create an isometric equivalent to TileMap (with Tiled importer) but if there's enough interest I may see what I can do.

 

Enjoy, and I'm looking forward to seeing what you do with it! :)

Link to comment
Share on other sites

Unfortunately not as of yet - I've not tested it solidly but I have had several hundred physics-enabled cubes bouncing around the screen all colliding with one another at playable framerates, and the iso projection code is both lightweight and invalidation-based, so if you create a gigantic scene and not much of it moves around, it should be pretty much as performant as normal Phaser scenes.

 

For what it's worth, the bottlenecks in tests so far have been heavy physics simulation and depth sorting lots of IsoSprites - I think both can be optimised a lot though.

Link to comment
Share on other sites

These kinds of optimisations are implementation specific and I feel they should be left open. It's not quite as easy as that though - if all of the non-water sprites were flattened you'd lose the depth sorting for instance, and the water wouldn't be able to appear both behind the bridge and in front of the far shore.

Link to comment
Share on other sites

Great work! I have several ideas that had to be put on hold because there was no good isometric solution (and I wasn't confident enough in my JS skills to make one). Right now I'll still have to wait for the optimization though - it works @30 fps in a modern desktop browser, which means it will be completely unplayable on mobiles.

Link to comment
Share on other sites

Well, that sounds even better. Are you planning to make some "baby steps" examples (like the Phaser examples - one minor feature at a time)?

 

From your experience - how many isometric tiles can I expect to display at 20-30 FPS on a mid-range phone (something like a Galaxy S3)? Is there a significant performance drop if I make the world much bigger than the display size, or is your plugin optimized to only process tiles that are currently visible?

Link to comment
Share on other sites

I'll be doing very specific feature demonstration examples, rather than elaborate ones - so yeah, just like the Phaser examples.

 

I can't really give you any figures, but for pure display, essentially you can display the same number of 'tiles' as you can sprites, since they're just isometrically positioned sprites. If you add realtime depth sorting in, then things will start to slow down a fair bit (though I'll be looking at how to improve the speed of the depth sorting) and if you add physics then it'll slow down further still. All of the viewport culling still works exactly as it does with normal Phaser sprites, so you can choose to optimise your scene in exactly the same way as you would a non-isometric scene.

 

It's important to understand that this plug-in doesn't do anything especially clever or specific, like Tilemap does for instance. IsoSprites are simply Sprites that have three new position properties (isoX, isoY and isoZ) and ask the Isometric Projector object what their position should be in a 2D scene whenever these properties are changed. The IsoSprites retain their 2D position property to prevent any problems and allow you to interact with them as you would a normal Sprite. So essentially, there's no witchcraft going on ;) The upside of this simplicity is that things should behave predictably for those already used to Phaser.

 

My tests have shown that I can have hundreds of sprites all IsoArcade physics-enabled and colliding with every other sprite in 3 axes with real-time depth sorting running on an iPhone 4S at around 30fps. I'll write some specific and hopefully highly optimised examples which will allow people to test the various systems and post their results.

Link to comment
Share on other sites

Thanks for examples lewster32,

 

I have experience with as3isolib, In it there is a feature to pan/zoom whole scene and we can also focus the scene to our main character. 

 

Can you put some examples for such operations?

Link to comment
Share on other sites

Yeah, I plan on adding that but at the moment the pressing need was to just have well commented examples. I'll add this in the next day or two as I agree, it should be a feature. I also think the source snippets should be editable and update the example so people can play with them, but we'll see how easy that is to implement ;)

Link to comment
Share on other sites

Added source code view, edit and update to each of the examples: http://rotates.org/phaser/iso/examples/ (may need to ctrl+refresh)

 

As additional feature i would prefer support of the Tiled importer.

 

This is under consideration at the moment, as it extends beyond the scope of what I personally need to do with the iso stuff, but definitely not ruling it out yet.

Link to comment
Share on other sites

I just signed up to say great work!.  I've recently started using JS for work (MEAN STACK) so I am tempted to get back into my hobby of building an isometric game. My colleague told me about phaser.io so I was pretty impressed by it.  I was going to implement some isometric stuff for it, when I had the time to do it, I've not even looked at the source code yet, but its nice someone has started making waves with isometric projection.

 

I implemented isometric for Andengine (Using Titled maps!) with a few draw options (two of which come from the titled source) and I implemented the sorting from AS3Isolib.

 

https://github.com/Niffy/AndEngine/tree/niffy-AnchorCenter

https://github.com/Niffy/AndEngineTMXTiledMapExtension/tree/GLES2-AnchorCenter_isometric

https://github.com/Niffy/IsometricWorldExample

 

So in future I'm looking forward to being able to spend some time with phaser!  And you sir made it one step closer to me :D

Link to comment
Share on other sites

Very nice stuff! I've taken a look at as3isolib's sorting method, as well as a few others - performance is always the biggest concern with HTML5 engines at the moment, so I'm exploring all possibilities. I think I'm going to provide a configurable depth sorting system, because as it stands the current depth sorting is absolutely fine for objects on a single z plane - it only breaks down when objects are on multiple z planes, and then only in a few scenarios.

 

I'm quietly confident I can fix it to an acceptable degree just by playing with the maths for my current z-sorting, but having a graph-based sort as an option would definitely help make the plug-in as universally applicable as possible.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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