My attempt to make an isometric map editor /engine

This forum is currently in read-only mode.
From the Asset Store
Array Editor
$0.25 USD
95% off
Supports 1D, 2D, 3D arrays. Import and export arrays in JSON format
  • Hi construct users,

    Here is my attempt to create an isometrical map editor AND engine.

    There's no y or Z sorting here, I focused on these thing :

    Isometric Map Editor/Engine (IM2E) v0.18 by Pumpkin_head

    Basic features


    • painting tile directly on screen.
    • custom map size (disabled here)
    • save and load map on file with Array object
    • dynamic tile loading while scrolling for optimisation.


    The last point is where I got on the wrong way.

    The editor is only sprite based (I know, i know, sprite is evil :)), so i decided to make a dynamic map streaming system, to improve optimisation.

    When you scroll (with mouse or arrow keys) the tiles away from a given range to a special object called the loader, are moved to the opposite position.

    For example , if a tile is, let's say, 8 tiles south from the loader, then move that tile 8 tile north, from the loader.

    And, it works ! We have the feeling that the map is scrolling, but there's always the same number of tiles on screen. the only thing that move is the tile XY, and the sprite animation is set by their coordinates.

    You can try it and paint a few tiles, then scroll to make them dissapear. Go back, and the tiles reappear.

    Could have been nice, but the performance is too slow. On my computer, it runs at 40 to 60 fps, which is not acceptable, considering we have only one type of tile.

    So why is it useless, can't i make the same thing with a tiledBackground object ? Well, not really. I tried, but my system uses collisions and picking of the the sprites, so even if I made something quite similar it's not working very well. In addition to that the performance gain would be unsignificant. A huge map of 100*100 tiles made of TiledBackground Object runs at 500+ fps, so there's no need for a map streaming....

    Anyway it's been a real pleasure to create this on contruct, and I learned a lot while making it ( sprite is memory consuming, not good for static elements). This experience will be helpfull on my other projects :)

    You can download the .cap and use it for your own purpose:

    Any comments are appreciated :)


    Controls :

    Right click : show painting menu, select one tile and paint it on the grey tiles.

    R : reset your map

    Space : restart layout (buggy)

    Ctrl + s : save map

    Ctrl + l : load map

    arrow keys : scrolling

    moving mouse on the application borders : scrolling

  • you can gain a lot more speed if you change this group:


    Do not loop through the array every tick, only when you change something, i had 20-23fps, after i disabled the group it was stand still over 300.

    Check your other pointless loops too, replace the allways events with "on every 10-20 ticks"(if you don't have to check it allways of course), after 2-3 minutes of editing i got over 800 fps, with the same functionality.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Pecek, thank you so much for the tips, I'm definitely going to check this !

    So it means a full Sprite engine is a possible solution, with thoses improvement and the map streaming !

    Thank you again for testing the cap !

    EDIT : Just disabling the group allows a performance of 600 to 700 fps for me :)

  • Pumpkin_head

    You're welcome, if you have any problems feel free to ask.

    Btw be carefull when you looping through a huge array, it's never a good idea to iterate 10k times on every tick, and it's pointless almost every time.

  • Alright, then, is there a way to limit the loop through an array ?

    maybe with a "for" ?

  • Pumpkin_head

    Sure, if you know where to start\stop the iteration(sometimes you just have to go through the whole array.) The first 2 event in the set tile type group should look like this:

    + System: For "y" from 0 to 20

    + System: For "x" from 0 to 20

    + Array: Value at (LoopIndex("x"), LoopIndex("y")) Equal to 0

    This will loop through the first 20*20 element of the array.


    and replace this:


    with this:


  • Pecek,

    That's Clever. I should be able to limit the loop from the loader to a given range with this method, in order to update only the tiles on screen, thanks !

  • Pumpkin_head

    ..I think I was wrong, if I'm correct the array object using 1 based index instead of 0, so the first iteration of the for loops isnt doing anything at all.

    + System: For "y" from 1 to 20

    + System: For "x" from 1 to 20

    Use this instead of the first solution(that works fine too, but if you can optimise, you should optimise.:P)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)