lewster32

Phaser Isometric plugin

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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 ;)

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.