Jump to content

HTML5 isometric engine?


The_dude8080
 Share

Recommended Posts

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?

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :P I understand your point.... Babylon.js then maybe?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
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...
 Share

  • Recently Browsing   0 members

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