lewster32 Posted August 6, 2014 Share Posted August 6, 2014 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. 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! KevinnFtw, sirmarcelot, abshinri and 22 others 25 Link to comment Share on other sites More sharing options...
Sebi Posted August 6, 2014 Share Posted August 6, 2014 Looks nice, can you provide fps on different browsers and far bigger maps than your example? rubelray 1 Link to comment Share on other sites More sharing options...
lewster32 Posted August 6, 2014 Author Share Posted August 6, 2014 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. ivanix 1 Link to comment Share on other sites More sharing options...
Sebi Posted August 7, 2014 Share Posted August 7, 2014 Have you thought about merging all sprites that don't animate and breaking them into chunks? E.g. in your current example all non water sprites could be rendered as 1 entity. Link to comment Share on other sites More sharing options...
lewster32 Posted August 7, 2014 Author Share Posted August 7, 2014 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 More sharing options...
morosenerd Posted August 7, 2014 Share Posted August 7, 2014 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 More sharing options...
lewster32 Posted August 7, 2014 Author Share Posted August 7, 2014 The example isn't indicative of the performance you'd get in everyday use - it's drawing debug bodies on all of the sprites, and doing some rather wasteful sin/cos calculations for the wave effect. It actually runs very well if you're using it normally! MichaelD 1 Link to comment Share on other sites More sharing options...
PXBILL Posted August 7, 2014 Share Posted August 7, 2014 Great Work!! Link to comment Share on other sites More sharing options...
morosenerd Posted August 7, 2014 Share Posted August 7, 2014 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 More sharing options...
lewster32 Posted August 7, 2014 Author Share Posted August 7, 2014 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. alessandronunes 1 Link to comment Share on other sites More sharing options...
Shaan Posted August 8, 2014 Share Posted August 8, 2014 Awesome work there. Eagerly waiting for tutorials. Link to comment Share on other sites More sharing options...
lewster32 Posted August 8, 2014 Author Share Posted August 8, 2014 The first examples are online: http://rotates.org/phaser/iso/examples/ View the source to see the commented code behind each example. If anyone has any suggestions for simple examples they want to see, let me know. I'll add more over the weekend. Lonan and Larzan 2 Link to comment Share on other sites More sharing options...
Shaan Posted August 9, 2014 Share Posted August 9, 2014 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 More sharing options...
lewster32 Posted August 9, 2014 Author Share Posted August 9, 2014 Panning yes, via the standard Phaser Camera, zooming not so much currently. Until Phaser's camera supports zooming, you'll have to figure that one out yourself I'm afraid. I've put an example up for you to show how the basics: http://rotates.org/phaser/iso/examples/character_camera_follow.htm Link to comment Share on other sites More sharing options...
morosenerd Posted August 9, 2014 Share Posted August 9, 2014 Excellent. Just a general usability note: it's more convenient if the source is listed directly under the example. Phaser's official examples are perfect in terms of presentation. Link to comment Share on other sites More sharing options...
lewster32 Posted August 9, 2014 Author Share Posted August 9, 2014 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 More sharing options...
ClonkMobile Posted August 9, 2014 Share Posted August 9, 2014 really nice work, thank you.As additional feature i would prefer support of the Tiled importer. Link to comment Share on other sites More sharing options...
lewster32 Posted August 10, 2014 Author Share Posted August 10, 2014 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. PXBILL 1 Link to comment Share on other sites More sharing options...
Niffy Posted August 10, 2014 Share Posted August 10, 2014 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-AnchorCenterhttps://github.com/Niffy/AndEngineTMXTiledMapExtension/tree/GLES2-AnchorCenter_isometrichttps://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 Link to comment Share on other sites More sharing options...
lewster32 Posted August 10, 2014 Author Share Posted August 10, 2014 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. MichaelD and Massemassimo 2 Link to comment Share on other sites More sharing options...
NateTheGreatt Posted August 11, 2014 Share Posted August 11, 2014 Dude, yes! This is awesome, thank you! Does a Typescript definition file exist for your plugin? I'm trying to write one but am not sure how to write it specifically for a Phaser plugin Link to comment Share on other sites More sharing options...
lewster32 Posted August 12, 2014 Author Share Posted August 12, 2014 No sorry, I've not created defs as I don't use TypeScript. Link to comment Share on other sites More sharing options...
NateTheGreatt Posted August 12, 2014 Share Posted August 12, 2014 Okay, I will provide mine once I've finished my implementation for others to use if you would like Link to comment Share on other sites More sharing options...
lewster32 Posted August 12, 2014 Author Share Posted August 12, 2014 Cool yeah, that'd be great! Thanks a lot! Link to comment Share on other sites More sharing options...
hazedtg Posted August 18, 2014 Share Posted August 18, 2014 Okay, I will provide mine once I've finished my implementation for others to use if you would like Hi Nate, did you ever get this done? I would love a copy if so. Thanks Link to comment Share on other sites More sharing options...
Recommended Posts