[WIP] Tyler - Tilebased Map Editor

[Chris]

Hey guys,

I'd like to share my work with my tilebased map editor "Tyler" with you and would like to gather some feedback and ideas during the development process.

 

I plan to build a HTML5-exclusive alternative to Tiled - the currently defacto standard tilebased map editor out there.

Whats my motivation behind this? Well, I am currently writing my own tilebased rendering engine for the game I plan to create and I need a map editor for it.

I don't want to rely on Tiled for this, because I'd like to tweak parts of the editor and/or want to extend it. Well, Tiled is written in Java so I have no option to make any changes to that tool.

 

My plans for Tyler so far are:

 

• Support of the Tiled Map format (JSON, comes with my game-engine)
• Creation and display of palette tiles (so you can configure water-animations right inside the editor)
• Automatic prettifying of maps with autotiles
• Minimap generation
• Object management with freely JSON-style custom object properties
• Support of own modules/plugins, based on JavaScript

 

I am especially looking forward to support own javascript based modules/plugins for Tyler, since it will allow users to write their own map generator scripts, new tools or sidebar modules of all kinds.

 

Please share your opinions about this with me and feel free to dream up all features you think Tiled is missing

I can't promise to implement EVERYTHING (especially in time - this is a hobby project), but I will try my best.

 

Here is a screenshot of the current UI state:

 

 

greetings,

Chris

[xerver]

This is huge endeavor, so good luck to you. Also, the Tiled Editor is written in C++ using the Qt UI framework, if you are more comfortable with C++ than Java I recommend using it rather than starting from scratch. I wrote an editor for myself a while back and you will spend a ton of time just to get to the state that other editors are already in, it would be easier to just extend Tiled (which is what I ended up doing instead).

[Chris]

Oh, my mistake then. Well, I also have no experience in C++ and/or Qt, so it makes no difference for me

[P.Uri.Tanner]

uickstart Mode: Just load a default spritesheet and paint. (Tiled is way to cumbersome.. )

 

Procedural Content

+ Nav Meshes and stuff like Roads/cliffs/rivers&water

+ Noise Map Generation 

+ Calculate wind, moisture and rain maps

+ Something that can create tile maps that catch the spirit of a city (e.g. look like that http://jsdo.it/mrdoob/xI3u )

 

Or.

An easy API that let's me use my own implementations of the above

 

 

I would totally Kickstart that

[Ezelia]

@Chris : this absolutely interests me ! but I'll need isometric maps support as you may know ... maybe I can contribute with isometric support when I have some time.

I also use Tiled coz there is no alternative for what I do. but Tiled lacks lot of features and I think the usage of C++ is one reason making Tiled evolutio so slow.

examples of lacking features :
  - Plugins that add game specific functionalities to the editor.

  - terrain levels for isometric maps
  - procedural terrain generators

 

are you planning to release the code ?

[Quetzacotl]

http://www.riverbankcomputing.com/software/pyqt/intro Qt for Python, there is also for Java. I'm using it at work and it's easy.

[Chris]

@Ezelia:

I don't know if I am going to release the code of the editor right now. Have to think about it - but I have to make some more progress with it, first.

 

@Quetzacotl: Thats not topic of this thread

[rich]

DAME (http://dambots.com/dame-editor/) is the best map editor ever made imho. It has an interface only a mother could love, but some amazing features that no other map editor has at all. Tiled is ok but WAY too basic for me, and quite buggy actually especially when using large tile sets / background images. The UI is also cumbersome and the lack of keyboard short cuts for simple things like "previous tile / next tile" is baffling. But I appreciate it's just a hobby project for them.

[Chris]

Thanks rich - I'm going to take a look at it. Its AIR *shudder*

[Bizzi]

Wow, it's look like really awesome!

 

i hope a public release comes very fast

[Chris]

uickstart Mode: Just load a default spritesheet and paint. (Tiled is way to cumbersome.. )

 

What do you mean with that? Currently, you would create a new, empty map, import a graphic as spritemap and can start painting.

But thats the same approach you would take in Tiled...

 

I think I don't implement those features into the basic editor, but as already mentioned above, I want to enable others to develop plugins/modules, so there will be a easy and well documented API.

[P.Uri.Tanner]

@Chris. 

If a new user could start painting with one click - as smart defaults are already set (a very minimal tile set, a new map (maybe with some explanatory content, maybe clean). I am pretty new to tile graphics and found that it took me too much time to get started with TILED.

 

For exploring in tiled only becomes worthwhile after you have loaded a tilesheet (and entered the correct dimensions) manually. Before that it's a huge list of buttons and settings of which most do nothing or don't reveal much feedback.

 

A product that gets this step very well is the http://www.hexels.com/ editor. You fire it up and after a few strokes you already start to feel a bit davincian. There is no reason why a tile editor shouldn't be intuitively accessible like that.

 

 

If you have your API in place i would love to take some shots at it! *applies for alpha*

[Chris]

I will make up my mind about that. Right now, you would have to click "new map" and specify the maps width and height in tiles (see screenshot).

I want to add a file picker to that dialog where you can pick a image file from your HDD that contains a set of tiles - the editor might try to guess the tilesize (assuming its quadratic).

 

Other ideas would be, that a couple of tilesets are already included in the editor. Idk if there are resources available on the web that could be included into tyler for free. Maybe somebody knows something?

Tyler could also have a "sketching" tileset available, that contains fields of simple colors to represent stuff like grass, water, etc. This sketching tileset could even be generated dynamically with a given tilesize (16x16, 32x32 or what you prefer).

 

 

Here's the screenshot of the current "new map" dialog - plenty of space for spritemap related stuff

 

 

EDIT:

 

I just implemented the first version of the module API and ported the drawing tool and the sidebar element for displaying the sprite palette to the new module format.

Feels very intuitive and simple so far!

Here is the code thats used for the module that provides the default pencil tool:

/** * The drawing tool * Will add a pencil tool button to the toolbar. * @param api */tyler.coreToolDraw = function (api){    var paletteModule,        drawing;    //Getting a reference to the palette modules public context.    //We will grab the selected palette index from there.    paletteModule = api.getPublicContext('corePalette');    //Adding a button to container 1 - the map tools container.    api.appendToolbarButton('draw', 'icon-pencil.png', 'Pencil Tool', 1);    drawing = false;    //Providing the actual functionality of our drawing tool.    api.provideToolContext('draw', {        mouseOver: function (e){            if(drawing){                e.map.set({                    layer: e.layer,                    x: e.tileX,                    y: e.tileY,                    index: paletteModule.selectedIndex                });            }        },        mouseDown: function (e){            e.map.set({                layer: e.layer,                x: e.tileX,                y: e.tileY,                index: paletteModule.selectedIndex            });            drawing = true;        },        mouseUp: function (e){            drawing = false;        }    });};

[Chris]

Update:

 

I implemented the layers module:

 

[abiyasa]

Hey Chris, the tools & UI looks nice. What library do you use for it?

[Chris]

Thanks, I'm trying to create a clean and usable UI for Tyler

The UI is created using a javascript library called modoJS. Don't try to google it - its a library we started developing at my company in december 2012 and didn't get to release to the public web, yet. You won't believe how much work it is to write a good documentation >_<

 

The engine in the editor that covers all the tilebased rendering is made by me and called Mosaik. 

 

The application itself works on top of BackboneJS (also a requirement for modoJS)

[Chris]

Here's another little update:

 

• I implemented infinite maps. You may just start right away without caring about the dimensions of the map you are creating.
• I added Tileset configuration options right into the map creation dialog:
  • Create Tileset from image
    You upload an image and it is turned into a tileset (the usual approach).
     
  • Generate Tileset
    You pick which types of tiles you (will) need and in which size you want them and
    Tyler generates a Tileset of simple colors for you. Great when you want to sketch
    out some maps, but don't already have a tileset created.
     
  • Preset Tilesets
    You can choose a tileset from a list of bundled tilesets and start working with it.

And here's a little screenshot of the update:

 

[Ezelia]

@Chris : are you planning to add isometric support ?

[Chris]

Yes, definitely! But it will take some time until I implement it - I want to get a number of features to make the basic editor usable, first.

[Chris]

I just added tooltips to the toolbar that contain tool/module descriptions. All toolbar buttons have hotkey support now, too!

 

[DrSchizo]

Hi Chris,

 

Have you kept working on this editor?

 

I was looking for HTML5 map editor and the only promissing one I've found beside yours are Elias Schütt's Online Tile Map Editor (under active development) and BXG MAP/LEVEL Editor (fully featured as you can see in this video, but unfortunately not open source). Based on the screenshots you posted, the UI and the other KISS projects, your editor seems really promissing, thus the question I ask!

[Chris]

Sadly I didn't find any time in the last weeks to continue working on the editor. Just too much customers knocking on our door...

 

I will try and continue working on it, soon, but if you need an editor RIGHT NOW, you should better go with the others you mentioned.

 

I don't know if they support custom user modules, tough.

[DrSchizo]

I guess a lot of customers is better than none... But it is sometime too much overwhelming and I found myself secretly wanting them to all disappear (even if that will mean I will be jobless). It must be hard to find some spare time with your work and your other project like gamekit.

 

I'm not really in a hurry. I've got many other things to do before needing a map editor. But I prefer to check in advance to know where I'm going.

 

I'm currently working on an HTML dialog and quest editor (originaly for RPG but it could work for other type of games). Linking it to a map editor could be really interesting! The great thing with an HTML5 editor will be to allow people to create their own level, without having to install a software like Tiled and export/modify/import TMX file everytime they want to change something.

 

I looked everywhere on the web and I couldn't find anything interesting. I guess most people are happy with actual editors... or happy enough not to spend days/weeks on a new one! But there are surely some projects I haven't find yet. But still, yours looks really promissing so I hope - a bit selfishly I guess - you will find the time to work on it pretty soon

[DrSchizo]

I made some researches and here are some features that could be really useful in such an editor. I don't know if this can be of any help, but I thought it could save you some time if by any chance you're interested by implementing one of this feature. Or if someone wants to make a plugin later (even myself, if I work on my poor JS skill until then ).

 

Auto-tiling

Instead of selecting every tiles and adding them separately to the stage, you could select one texture - like grass, rock or water - and the tiles displayed will be automaticaly chosen according to the surrounding tiles. If it not clear, you can find a better explanation here, here or . There is as well this really smart alternative solution but that has to be implemented on the editor and on the game (it could be a nice feature though if you plan to link your editor to gamekit).

 

Here are some other interesting links: another solution, auto-tiling standardization, a tile template, a coblestone tileset, a discussion on TIG forum, an open-source NET-based editor that uses the first solution with this autotile definition window.

 

Objects

Adding object bigger than one tile can be quiet complicated. Many editors include two kind of items displayed: tiles and object (plus sometime texture). Objects like tree and house could be therefore listed in a separate tab and add differently. Objects could be imported in the editor separately (one image by object) or thanks to a texture atlas, that could be easily done with a sofware like texture packer.

 

If you're interested, I can keep sharing my next thought and researches about this subject (or maybe I should start my own thread about what features a tile-based map editor should include ?)

[Chris]

Yep, autotiling is a must-have feature, imho. This will definitely be implemented - I even mentioned them already in my first post of this thread

 

But you brought me to another idea: A kind of Stamp-Tool, where you can "draw" multiple tiles at once. Maybe even on multiple layers.

So you could pre-define trees, buildings and whot not, that are made of multiple tiles that belong together.

 

Objects will be implemented as known from Tiled. You can add object layers where sprites of any size can be placed freely with pixel-based coordinates rather than tile based coordinates.