Isometric Tilemap Solution

[Christoph Enne]

Hello HaxeFlixel Community! We need your advice !

My team and I want to implement an isometric view (tilebased) for the game we are working on right now.

I first started to write some kind of Tile-Map Engine from scratch. It is working in theory, but laggy and slow and - even after i improved performance - i don't think this is a serious solution. I wasted 40 hours to finally understand that we won't even get close to a perfect fast Map-Engine on our own (at least not in the time we want to finish this game). I am talking about larger maps with about 1000x1000 tiles by the way - this implementation is acceptable for 100x100 tiles.

Then i tried the Flixel FlxTilemap today, which is much faster (of course) and easier to implement. The problem I see: It doesn't support isometric maps. I thought we might want to write our own IsoTilemap Class extending the FlxTilemap class, and simply change the code needed to calculate positions out of indicess and the other way round. 

Do you think this is a good idea ? What else would we have to adapt ?

I don't see very much alternatives - as far as i am concerned there is no isometric tilemap support in flixel yet, but according to this tweet it is in development: https://twitter.com/HaxeFlixel/status/440879732029394944 . Does anybody have further information about the status of this feature ?

How should we continue ?

Every advice is appreciated!

Thank you.

[Tiago Ling]

Hi Christoph,

We are working to implement isometric tilemap support for Haxeflixel (myself and another member of the community, the guys mentioned in the tweet), however progress is a little slow since both of us haven't had much time to work on it lately.

Currently we're testing tile sorting, to allow sprites to be drawn correctly according to their position inside the tilemap (in front of or behind relevant tiles when moving inside the map). However, to be able to do this, the drawing has to be done differently than the traditional tilemap method. This new method is not yet optimized, taking more time the larger the tilemap is. You can check it here (WASD scrolls the camera, arrows move the sprite):

https://dl.dropboxusercontent.com/u/18504814/IsoTest/index.html

This is still a work in progress, and we plan to fix performance issues and make it run in all flixel targets before releasing (works in flash so far, but cpp is almost done).

Since there is a lot of different ways to implement isometric tilemaps, we could exchange ideas and help each other on how to go about having a really big tilemap and also on how to solve other common isometric map problems. I'd love to hear your feedback on the current status of our iso implementation and more details about your solution, how you go about drawing, sorting, current status, etc.

Cheers!

[Christoph Enne]

Hey. Thanks for your reply.

I actually just wrote an answer - but the magic "post" button made it disappear successfully. 

However, your demo looks very nice already!

I'm afraid I can't help you a lot with this - as I said we just started on this thing, being noobs with HaxeFlixel and HaXe programming in general. So what we have got so far is a system, that divides the map into regions - which consist of the actual tiles. According to the camera's current position we load regions (and so their tiles) on demand. Means we add() and remove() Sprite-Objects all the time. After browsing the FlxTilemap Code a little bit, I see that one performance problem could be, that we work with the kind of "heavy" sprite objects, instead of just the bitmapdata. And I also noticed, that we are really just doing the very basic stuff - we haven't even thought about those other techniques and algorithms we need.

So you see - we imagined an isometric tilemap to be a little easier...

Anyway, it seems we (3 people) can't afford the time need to implement such a map engine by ourselves.

I know this is difficult, but could you give me a rough estimate of when this feature might be stable ? If it's not too far from being released, we could temporary work with the development version, while implementing the rest of our game.

Also, do you maybe know other libraries or tools for this purpose ? Or any haxeflixel games using isometric tilemaps ?

Thanks and keep up the good work!

btw i think i figured out how google groups work now. :)

[Tiago Ling]

Yeah, using a Sprite for each tile in a tilemap is generally slow, and HaxeFlixel uses blitting (copyPixels) or drawTiles for FlxTilemap. 

We are also planning to add some form of "chunking" (dividing the map into regions and only take them into account/load them when the player/camera is near), but this feature will come later on.

About your project, what is the platform you plan to publish for?

About a future stable version, there are still some changes, additions and tests to be done, but we want to have something usable as soon as possible, at least for flash. However that will mostly depend on how much time we'll have to work in the project (currently i can only touch the code in the weekends).

Even without a stable version, i'll put the code later this week in my github page, so you will be able to play with it and if you want, help us with tests and bugs. It'd be great to know what iso features you need for your project, so i can give you a better estimate later.

About the problems with posting: i recommend you access the forum directly through Google Groups, there is a problem with the embedded version in the site and clicking "post" won't work there.

[Christoph Enne]

We try to cover as much platforms as possible of course, but I guess the most important one is Android; HTML5 would be nice; Neko / Flash maybe. 

I wil take a look at the latest dev-version, as soon as its on GitHub, and will try to work with it and build our project around it. Then we will see how the current version works for us, and see which features we need etc.

[Jimmy Delas]

Hi,

Actually, what we have is stable for flash platform and we just need to clean the code.

However, I can't really estimate how long it will take to cover Android or HTML5 platform.

[Tiago Ling]

Hi,

I just updated the demo and the isometric tilemap code to conform to the latest changes in haxeflixel's dev branch. It's still very experimental and a work-in-progress, lacking many of the intended features and i do not recommend using it for any kind of production code.

Current status:

• Adding sprites to the map currently works in Flash target only (in Neko or cpp it will cause rendering problems);
• Scrolling works fine in flash target, but has some jittering / tearing problems in neko and cpp (this might be another issue, not related to the iso tilemap);
• Current drawing code is not optimized, so large tilemaps will reduce the performance;
• Collisions between the iso tilemap and its added sprites is not working yet;
• Tile bounding box debug draw is not working yet.

Intended next steps:

• Fix debug drawing;
• Implement / fix collisions between map tiles and iso sprites;
• Implement sprites in Neko and cpp targets;
• Drawing / rendering optimization.

Updated demo url: https://dl.dropboxusercontent.com/u/18504814/IsoTest/index.html

You can get the code at: https://github.com/Tiago-Ling/flixel-demos/tree/IsoTesting/Flixel%20Features/IsoTests

Testing (specially with different assets and map layouts / sizes), bug reports, feature requests and discussion on the implementation is encouraged and very much appreciated. 

[Mihai Morosanu]

I don't see any sprite moving, just the camera.

[Gama11]

You move the player with the arrow keys - WASD is for the camera.

[Christoph Enne]

Ok, thank you for the update.

I hope I am able to have a look at it in the next few days to at least run it and test it a little bit.

[WillNa]

Hi,

Is there some difference with https://github.com/Kasoki/openfl-tiled-flixel ?

Kasoki said its port was slow...

Regards

[Tiago Ling]

To be honest i don't know, never really used openfl-tiled-flixel. By taking a quick look at the code it seems that its tilemaps are made with each tile being a FlxSprite. If that's really the case, then it is gonna be slower.

This version is being made to work in a similar way to the traditional FlxTilemap, but with isometric orientation and tile sorting (allowing moving sprites to be drawn in the correct order in the same "layer" as the tilemap).

By the way, i just updated it again:

• Added html5 support (texts are all messed up - this is a problem in openfl-html5 apparently);
• Fixed debug bounding box drawing in flash and cpp / neko;

Next steps:

• Implement / fix collisions;
• Implement sprites in cpp/neko;
• Test in Android;

Known bugs:

• Bounding boxes are drawn only in black in html5 target;
  
• There is jittering / tearing in flash and html5 when scrolling the camera (the same problem in neko/cpp is another issue and not related);

Flash version: https://dl.dropboxusercontent.com/u/18504814/IsoTest/index.html

Html5 version: https://dl.dropboxusercontent.com/u/18504814/IsoTest/html5/index.html

Latest github commit: https://github.com/Tiago-Ling/flixel-demos/commit/97db35aaae92d5b694bb24047990f252f957f73f

Regards,

[Kevin Clark]

This looks great, I'm just evaluating HaxeFlixel right now and my main objective is to get a isometric tilemap implemented.  I'm curious if this has support for multitile objects, and if so what method is being used as this is my main painpoint at the moment.  I've been toying with different methods in other engines including forcing z-depth and masking but they all have their downsides it seems.

[Tiago Ling]

I accidentally sent this as a private message, so for the sake of discussion consistency, here is my answer:

"Hi Kevin,

The isometric tilemap does not have multitile object support yet. But yes, it is something we plan to do, as it is a requirement for a lot of iso games. However we are still working on the basic implementation: z-sorting, viewport culling, pathfinding (this is what i'll be doing this weekend), collisions, cross-platform support and performance.

One of our main problems currently is scalability: sorting works very well, but as the tilemap size grows (> 100^2 tiles) performance becomes an issue, since the sorting algorithm is running through all tiles every update call (we have some ideas on how to mitigate / solve this problem, but the focus right now is in implementing the necessary features to make it usable).

About multitile object support, i will put some thought into this, and also would love to hear more about your experience with this feature: how do you expect it to work, what have you tried so far, what platform do you plan on working, etc.

Work on the map is progressing slowly, since i can't dedicate as much time as i want on this at the moment, so, any feedback and/or help with the current implementation is more than welcome. I'm gonna push a new version to my github this weekend, there has been some minor progress on pathfinding and i'll update the demo to give the user more options: mouse control, changing map size, spawning other entities, etc.

Cheers!"

[Kevin Clark]

Sorry for the delay, have been travelling a lot recently.  

As far as sorting large numbers of tiles go, when I have implemented tile systems in the past I have attacked this problem by only rendering/sorting the tiles visible by the camera which should be significantly less.  I don't have a good solution for multitile objects other than forcing their z depth based on a combination of layers and y position which sometimes does not work right with certain edge cases so am curious to see how you implement it.

[Mark]

hi Tiago,

What I've seen so far is very nice. Two questions if I may:
1. Do you have a rough estimate when it will be available?
2. Are you planning to support hexagonal maps or rectangular only?

And a bonus question :)
Any plans for 3D?


All the Best,
Mark

[Tiago Ling]

Hi Mark,

I'm planning to start working in the iso tilemap again very soon, in about two to three weeks from now. Answering your questions:

1. Unfortunately i don't have an estimate yet, but i'll be able to answer that as soon as i resume working on it;

2. Hexagonal maps are also planned, but work on them will start only after iso is usable and stable enough;

Bonus: 3D is a completely different matter and would also require a different base framework. If you're interested i suggest you take a look at Heaps: https://github.com/ncannasse/heaps

Kevin: 

Yeah, i'm still brainstorming a good way to do multi-tile objects. The main problem seems to be correctly sorting other objects overlapping with it. I'll post my findings when i have something. :)

[Mark]

hi Tiago,

Thank you for the feedback! Could you please give a link to the iso GitHub if/when it's ready to publish, so I can add watch?

Thank you for suggesting Heaps too! I'll look into it (btw, it was funny to see heaps.io portal is exactly as developed as my one :D).


Cheers,
Mark

[Tiago Ling]

Hi Mark,

The link to the test project is inside my fork of "flixel-demos", under a branch named "IsoTesting":

https://github.com/Tiago-Ling/flixel-demos/tree/IsoTesting/Flixel%20Features/IsoTests

You'll see that all the iso tilemap files are inside the project, as i think this makes easier to test it with different versions of flixel. 

The demo is meant to be used with the dev branch of flixel, but as flixel is constantly receiving updates and new features, it is posible that some error may occur (still didn't get the time to touch it).

If you have any problem don't hesitate to ask :)

[Isas Saba]

Hi i was wondering if have you advance on the isometric tilemap ? 

[JustGabe]

Hi man, maybe this link may help you to build isometric maps while the FlxIso is being polished :) I found it extremely helpful!

http://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511