Best framework for an Isometric game. Pros and cons

[Jaret]

I have been doing a research and want to share what I have found out. I have come across three major HTML5 libraries that would suit the needs of an isometric game. I hope the resources and insights are useful to future indie developers. If there are untruths and misconceptions below, I will be grateful if you correct me. 

I will start with my journal first and then make a short list of pros and cons in the bottom.

Journal:

Cocos2D-HTML5

The first HTML5 framework for an isometric game I came across was Cocos2D-HTML5.
First I stumbled into this example. Later on I saw Cocos2D-HTML featured in Intel® XDK 
And third the isometric examples under "Tilemap Test" in the test cases: http://cocos2d-x.org/js-tests/
So I decided I will replicate the movement in an isometric environment in my own project and continue from there. And soon enough I could load any of my isometric Tiled maps in a browser and walk around. But then I found out that the TMX map functionality is very incomplete for isometric maps made with Tiled Editor. Most importantly there is no tileset offset available so you can't use objects larger than a single tile. I decided I can expand the functionality when it comes to isometric tiled maps. After all I can't expect that they have all the tools that I require for my needs.

I set expanding the Tiled Editor functionality for later, and start from a more basic point for now. I was going to start from a normal character sprite walking around. And then I found out the large community around this framework mainly writes in Chinese and uses some Chinese version of github. And so I can't find help for even the simplest of things which is keyboard movement and character animations. Frustrated by the lack of community in Cocos2D-HTML, I decided to scout around for another framework before committing.

Phaser

Next on my list was Phaser, of which I found out about from these boards. The fact that it has a big and active community is very appealing. A little into looking at Phaser I found this Isometric plugin and became full of hope. Especially this example which could be the basis of a great isometric game. Using Phaser for a big project was a point proven by big games like Feudal Wars and Wild Terra. Two great games that are both isometric and made with Phaser(mostly).
Unfortunately there was no inbuilt support for maps made with the Tiled Editor. However there is another plugin that would load an isometric Tiled map which is outdated. The creator of this plugin is working on a new version that will come about soon and will work perfect with Tiled isometric maps. https://github.com/englercj/phaser-tiled "It's in the thin-tiles thread" he wrote "just bare with me". I got a little discouraged when I read several topics, about how Phaser's tileset is not fit for isometric maps and how both the developers of Feudal Wars and Wild Terra had to write their own modifications in order to use isometric tilemaps. Also, the great isometric plugin, the one that I mentioned first, is not good for maps larger than 10x10 tiles, because it uses a Sprite entity rather than a tile entity for each isometric tile, and this hinders the performance for larger maps.

Isogenic

Finally I got to Isogenic. As you may guess from the title, this framework has perfect support for isometric games. It has only some support for the Tiled Editor, but that is understandable since it supports a whole new level of isometric 2.5D which the Tiled editor does not. Once I went through most of the video tutorials I was able to run all the Node.js servers and play the multiplayer examples. The engine lacks a lot of the features that other engines have, but has a lot of multi-player features. 

 

Summary:

Cocos2D-HTML5
- Community (Poor): Cocos2D may have a huge Java and C communities, but when it comes to Javascript, and to the current version of the project, almost all the help I found was in Chinese.

- Cross-Platform (Excellent): Rather than other HTML5 apps that can be ported to mobile devices on the principle of Phone Gap, Xamarin and Intel XDK, Cocos2D has it's own native SDKs which it translates the Javascript to. Thus it becomes a truly native app on mobile.

- Tiled Editor (Good): It is important that you can load map files straight away. No exporting, no adjusting. It is not perfect when it comes to isometric projection though.

Phaser
- Community (Excellent): Phaser has a great community. A lot of open topics and discussion. A lot of the people I contacted personally with questions found the time and generosity to answer them.

- Cross-platform (Good): Not as native as Cocos2D, but with help from Intel XDK there is a very good performance. There is probably an even better way but I haven't searched yet.

- Tiled Editor (Poor): No inbuilt interpreter for the maps format and support for isometric tiles at all. There is hope however once Chad's plugin is ready.

- Other: It is possible to use 3D sprites with tree.js which will save the App loads of memory.

Isogenic Game Engine:
- Community (Poor): Author is very helpful and everything is well documented and supported with tutorials. But the community needs to grow a little more.

- Cross-platform (Poor): Certainly you can run the game on mobile since it is HTML5, but as to the best way in this case, I have no idea yet.

- Tiled Editor - (Poor): IGE is not a stranger to the Tiled editor, but it supports it very scarcely. You need to export your map, and then you need to make your own extension to use large tiles (trees and walls).

- Other: It really has amazing multiplayer and server-side functionality. It has some good path-finding. It has great 2.5D objects, more than tiles with an offset.

Conclusion:
If you use Cocos2D-HTML5, there will be good prospects for your game on mobile as it will run as a native app. Decide how cross-platform you want to go in the future.

If you use Phaser you will struggle to achieve an isometric environment, but everything else in your game will be much easier. Decide how isometric you want to go in the future.

If you use IGE you will cover a lot of ground fast, with a flying start from an isometric environment. But after that you may hit a wall if you want to expand with functionality unexplored in the engine, such as spine animation or 3d sprites. Decide how classically isometric you want to stay in the future.

[WombatTurkey]

What do you mean 'Once Chad's plugin is ready' isn't it already out? I've used it and it works great.

 

[Jaret]

7 minutes ago, WombatTurkey said:

What do you mean 'Once Chad's plugin is ready' isn't it already out? I've used it and it works great.

 

We are talking about this plugin right? https://github.com/englercj/phaser-tiled

I tried to use it for isometric projection with the latest version of Phaser.

I failed and assumed that this is because it is for an old version of Phaser.

Also I wrote to the author that the code about isometric projection is commented out, and asked if it ever worked.

Have you managed to use it for an isometric map? Care to share some details?

 

[WombatTurkey]

38 minutes ago, Jaret said:

We are talking about this plugin right? https://github.com/englercj/phaser-tiled

I tried to use it for isometric projection with the latest version of Phaser.

I failed and assumed that this is because it is for an old version of Phaser.

Also I wrote to the author that the code about isometric projection is commented out, and asked if it ever worked.

Have you managed to use it for an isometric map? Care to share some details?

 

Oh, oops. I thought Chad was the guy who made the isometric plugin, I was getting that confused with phaser-tiled, my bad.

Nope, but I use phaser-tiled, and oh boy. The performance compared to regular Phaser's tiled is immense, around 60+% increase in FPS! It's amazing! Great write up, do you have a blog?

[Jaret]

10 minutes ago, WombatTurkey said:

Nope, but I use phaser-tiled, and oh boy. The performance compared to regular Phaser's tiled is immense, around 60+% increase in FPS!

But do you use it for isometric projection or just orthogonal?

I mean like this: https://drive.google.com/folderview?id=0B5Fut-iSgRw3RlNDMFdSbFNKM0E&usp=sharing

http://www.isogenicengine.com/forum/viewtopic.php?f=17&t=210&p=1708&hilit=bank#p1708

[WombatTurkey]

13 minutes ago, Jaret said:

But do you use it for isometric projection or just orthogonal?

I mean like this: https://drive.google.com/folderview?id=0B5Fut-iSgRw3RlNDMFdSbFNKM0E&usp=sharing

http://www.isogenicengine.com/forum/viewtopic.php?f=17&t=210&p=1708&hilit=bank#p1708

Oh, yeah just orthogonal.  

[Jaret]

We are looking for isometric in this topic. It seams to be the path less taken by HTML5 devs

[Jaret]

My search for the best environment has ended, and I want to share my conclusions to whomever is looking for answers to the same questions.

Phaser seams like a great engine and I really came to like it, and the spirit of it's community. But for the purpose of my project I had to judge with a cold statistical heart.

 

Before I go any further I need to apologise to Cocos2d-x for saying all those bad things about it, how there is no community and they all write in Chinese. It turns out that Cocos2d is huge. It is used almost as much as Unity for game development and some of the best games on the app-store are actually written on it. Well, probably on the C# version and not on the JS version though.

 

To the extend of my understanding, HTML5 games written on Cocos2d were supposed to become fully native when they are deployed to a mobile device. And I don't mean deployed in a hybrid type of application, which is in practice it's own browser app with it's own icon that runs your website. For example Phone Gap and Xamarin can be used to create a hybrid app. But I meant a truly native app, where JavaScript is translated into Java or Objective C and performance is enhanced by magnitudes. I had to test that for myself and prove weather it is true and weather I understood it correctly in the first place.

 

The answer is: it is true. It took me a lot of effort to compile my first mobile app since I'm a n00b mobile dev. But the performance was much better than a hybrid. I went on to hunt and install games from the app store made with cocos2d and Phaser and compare performances. When it comes to FPS, both were very good. Phaser did not go much lower than 60fps. But it was some random glitches and freezes that put it to second place. Of course this is trough no fault of it's own but rather the compilers' that create the hybrid app. 

 

It seams like I went off topic somewhat and completely forgot about the isometric projection. It is clear from the successful full-scale games, that isometric projection is quite possible with any of the engines, and the effort to code it is insignificant in comparison to coding the rest of the game.

 

So in the end, the question become: What basis should I use to code a game, that can be made accessible to the most people and will run smoothly everywhere. And the answer for me is Cocos2d-x. Write it in HTML5, test it in the browser, and in the end, compile it for iOS and Android as a native app. Or as Sun Microsystems say: Write it once, run anywhere

 

P.S.

I hope this is useful for someone and the links and resources attached are of any use. I will not expand the topic any further. I will instead start lobbying for a category Cocos2d-JS under Frameworks.

[InsOp]

Thank you for your thoughts.

Do you think it is possible to merge the multiplayer-aspect of the Isogenic Game Engine with either Phaser or Cocos2d ?

[Jaret]

15 hours ago, InsOp said:

Do you think it is possible to merge the multi-player aspect of the Isogenic Game Engine with either Phaser or Cocos2d ?

 

Isogenic uses socket.io and node.js for a live connection. It sends the states of objects controlled by the client (like the character sprite), and receives the states of objects controlled by other clients or the server (like NPCs and their positions and actions). The server also sends parts of the world itself (like tiles, buildings, trees). So the game-world doesn't have to be pre-loaded like in other engines. This can trade a fast connection for a huge isometric game-world.

 

As far as merging. We can only adopt this method and principle. Use socket.io and request world objects as we explore. The code could not be merged, as the engine entities would be incompatible. The libraries used by isogenic, like socket.io and path-finding, can be easily used for a web game with both Phaser and Cocos2D-JS. As for porting to mobile, I can't say for certain.

 

Having the strong points of both would be lovely, but I don't think merging them would be the best approach.

I keep seeing great isometric games in both Phaser and Cocos2D. But it seams they all cook their own remedies and there is no out-of-the-box isometric world mode.

Compared to the effort of building a complete and complex game, rendering the tiles in an isometric projection seams to be a negligibly small issue. So much so, that as I reached the end of my research on the topic subject, (best isometric framework) isometricity became one of the less important points when judging a framework

[7Dolls]

Hi,

There is one other:

http://www.elvarion.com/

This uses the TMX format for its isometric map.

Which one did you eventually choose?

 

 

 

[jumpjack]

Phaser now does natively support, since version 3.5.0, isometric maps made with Tiled.

But I am still trying to figure out which is the simplest javascript isometric engine to use to convert an old game for Oric platform to modern browsers: I have TMJ/TMX maps and sprites, so which is the best choice for isometric engine?

I found this list:

• http://craftyjs.com/ (https://github.com/craftyjs/Crafty)
• http://www.isogenicengine.com/ (https://github.com/Irrelon/ige)
• https://github.com/bugnano/frigame
• https://github.com/j03m/trafficcone
• https://github.com/angrycoding/jgen/tree/master/src
• https://www.prelude-prod.fr/demo/pp3diso/
• https://cocos2d-x.org/js-tests/TileMaps/iso-test.tmx
• https://github.com/melonjs/melonJS

 

The biggest issue is I can't find any good tutorial for any of this engine to build my own isometric game!