HTML5 isometric engine?

[The_dude8080]

Hello. I am searching for a good html5 isometric game engine. It can't be restricted to AABB collision. Need more complex collisions. What would you recommend? I found this MelonJs example that didn't seem bad. (not sure if it meets the requirements though).

So Melon.js? 

I know phaser has an isometric plugin but I think the collisions are rather simple since it is based on arcade physics which are only AABB, @Milton?

http://jsiso.com/?

https://www.isogenicengine.com/ ? seems quite simple... idk

http://jdan.github.io/isomer/ same

I have a dought also. Those games like Diablo, are they grid-fixed?

 

[Milton]

Melon.js seems very nice. Didn't know about that one. Isometric Tiled support, convex shape collision, yep, definitely recommended.

The Phaser plugin only does AABB, but you could use any existing physics library, it just wouldn't be integrated into the Phaser physics calls (for this test I used Bullet (ammo.js)).

About Diablo being grid-fixed, I would think so. Why do you doubt that?

[The_dude8080]

13 hours ago, Milton said:

Melon.js seems very nice. Didn't know about that one. Isometric Tiled support, convex shape collision, yep, definitely recommended.

The Phaser plugin only does AABB, but you could use any existing physics library, it just wouldn't be integrated into the Phaser physics calls (for this test I used Bullet (ammo.js)).

About Diablo being grid-fixed, I would think so. Why do you doubt that?

Just to make sure. Thank you

[The_dude8080]

13 hours ago, Milton said:

Melon.js seems very nice. Didn't know about that one. Isometric Tiled support, convex shape collision, yep, definitely recommended.

The Phaser plugin only does AABB, but you could use any existing physics library, it just wouldn't be integrated into the Phaser physics calls (for this test I used Bullet (ammo.js)).

About Diablo being grid-fixed, I would think so. Why do you doubt that?

Then if I were to use the phaser plugin I would use a external physics for collisions. Wouldn't that be hard to get collisions with the extra depth coordinate? ( I am very newbie so I don't know about that). And also did you make the test you showed? Seems very cool

[Milton]

Yeah, that spindizzy test uses my own iso 'engine'. Wrote everything apart from the Physics actually (Tiling, Camera, etc).

The Phaser plugin doesn't really use an 'extra' depth coordinate. It just checks rectangles with a certain height. So if you have a physics library that allows you to define shapes (polygons instead of a rectangle), there still is no 'extra' depth. Just a more complex flat shape with a certain height.

Or you could go for a 3D physics lib like Bullet. I think it's actually easier.

For instance:

shapes[1] = BtBoxShape.create(BtVector3.create(1/2, 1/2, 1/2).value);   
shapes[2] = BtSphereShape.create(1);                                 
convex = BtConvexHullShape.create();                                    
convex.value.addPoint(BtVector3.create(-0.5, -0.5, -0.5).value, true);
convex.value.addPoint(BtVector3.create(0.5, -0.5, -0.5).value, true);
convex.value.addPoint(BtVector3.create(0.5, 0.5, -0.5).value, true);
...
shapes[3] = convex;

Then you can collide spheres with pyramids etc. I wouldn't want to try that with 2d physics

[The_dude8080]

14 minutes ago, Milton said:

Yeah, that spindizzy test uses my own iso 'engine'. Wrote everything apart from the Physics actually (Tiling, Camera, etc).

The Phaser plugin doesn't really use an 'extra' depth coordinate. It just checks rectangles with a certain height. So if you have a physics library that allows you to define shapes (polygons instead of a rectangle), there still is no 'extra' depth. Just a more complex flat shape with a certain height.

Or you could go for a 3D physics lib like Bullet. I think it's actually easier.

For instance:

shapes[1] = BtBoxShape.create(BtVector3.create(1/2, 1/2, 1/2).value);   
shapes[2] = BtSphereShape.create(1);                                 
convex = BtConvexHullShape.create();                                    
convex.value.addPoint(BtVector3.create(-0.5, -0.5, -0.5).value, true);
convex.value.addPoint(BtVector3.create(0.5, -0.5, -0.5).value, true);
convex.value.addPoint(BtVector3.create(0.5, 0.5, -0.5).value, true);
...
shapes[3] = convex;

Then you can collide spheres with pyramids etc. I wouldn't want to try that with 2d physics

Oh cool  I understand your point.... Babylon.js then maybe?

[Milton]

No. That's a 3D *Rendering* engine. You want 2D rendering, with 3D collision. Babylon actually has no support for convex hull shapes (I believe). So you can only composite boxes/spheres/cylinders etc. I did see an excellent Babylon demo using Bullet, but that was an experimental thingy...

[The_dude8080]

9 minutes ago, Milton said:

No. That's a 3D *Rendering* engine. You want 2D rendering, with 3D collision. Babylon actually has no support for convex hull shapes (I believe). So you can only composite boxes/spheres/cylinders etc. I did see an excellent Babylon demo using Bullet, but that was an experimental thingy...

Oh. Then a choice would be Phaser isometric plugin + Bullet (for example)

EDIT: I mean phaser + Bullet. I wasn't sure if the isometric plugin was more than just physics

[Milton]

Well, the plugin does do the Isometric projection, depthsorting, camera etc...

[obiot]

Hi Guys,

to comment on melonJS, it does provide by default spatial partitioning (quadtree) + SAT based collision, and of course also for isometric maps.  also isometric support is built-in... just create an isometric map in Tiled, load it, and you are good to go

here is one example of a pretty advance isometric project : https://gik.laboratorium.ee/

Cheers,

Oliver

[Parasyte]

Just keep in mind that melonJS only works with 2D orthographic coordinates, even for isometric maps.

It's been a bit of a dream of mine to make the coordinate system projection-agnostic. That work just hasn't received much priority from my end.

[Milton]

4 hours ago, obiot said:

to comment on melonJS, it does provide by default spatial partitioning (quadtree) + SAT based collision, and of course also for isometric maps.  also isometric support is built-in... just create an isometric map in Tiled, load it, and you are good to go

That's why I recommended MelonJs  I think you can create a nice Isometric game with Melon, although, it's not much more difficult with Phaser. There is a lot of demand for Isometric, you should make it as easy as possible

[The_dude8080]

23 hours ago, Parasyte said:

Just keep in mind that melonJS only works with 2D orthographic coordinates, even for isometric maps.

It's been a bit of a dream of mine to make the coordinate system projection-agnostic. That work just hasn't received much priority from my end.

Does that mean it doesn't have a simulated "z" coordinate?

[Parasyte]

18 hours ago, The_dude8080 said:

Does that mean it doesn't have a simulated "z" coordinate?

melonJS does actually have a simulated Z coordinate; it specifies the layering depth, and also re-sorts the entity list based on the Y-coordinate, if you desire.

To clarify, the X and Y coordinates are treated as if the world is in orthographic space, e.g. the Y axis points straight down, and the X axis points to the right. A better choice for isometric games would actually be the isometric coordinate space.  Where the Y axis points to the lower-left of the screen, and the X axis points to the lower-right.

Anyway, just wanted to be transparent about what to expect with the melonJS isometric support; it's available, but it's not yet fully "3D". In other words, you'll likely have to convert between the different coordinate spaces (screen-to-world) for various reasons, maybe even collision detections and whatnot.