Using Tiled as a non programmer - would love advice

[Ash]

I know this is really quite vague, but I would really be incredibly grateful if someone was able help me in either offering advice, or point me in the right direction, or even have a conversation about creating assets and thinking about structure - because I’m really, really out of my depth.

As a designer/illustrator I’m trying to make a style for a ‘game’ (it’s complicated) that kind of has somewhat of the feel of a 2D Super Mario 3D World mixed with Pokemon Pearl. Or maybe a better way to think of it is a map that has the same feel of depth as an isometric tile set, but more forward facing.

There’s so much I don’t really understand, such as layers of elevation; creating objects that appear to float (but allowing for interaction), tiles vs objects (which to use when), How to think about objects and animations, and how to think about environmental animations. I understand the concepts of layers and things, but not how to use them best/effectively.

I really do have a lot of questions, and I know no one wants to read through a wall of text, and it really is a lot to ask - but I would really love to talk to someone. Or at very least, have someone help me find the right question to ask!

I’ve attached an image of some things I’m playing around with if it helps to give a little context. I’m not even sure what I want to do is possible! So I’m sorry for being so vague!

[eishiya]

The projection style you’re going for is usually called “3/4 view” or “RPG view” (because it’s very common in 2D RPGs).

Elevation in this projection is generally purely cosmetic. Cliffs are just walls, and gentle slopes are effectively flat ground. When you walk up a hill or staircase in a game like this, you’re really just walking diagonally on a flat surface. So, you can design your map just for its appearance without worrying about actual height :D

Will these maps need to be loaded into a game engine eventually, or are they just mock-ups? This will change how you should think about game objects (characters, etc).

Tiled only really does one kind of animation: Tile animations, done as frame/flipbook animations. In the Tileset editor, if you select a tile and press the black camera icon, you’ll be taken to the UI to add other tiles as animation frames for this tile. After you’ve done that, any instance of that tile will actually show the animated sequence of the tiles you chose (not all game engines support this feature though!). You can use this to create simple animations in the environment, like lapping waves and spinning.

You can add animated objects like props in a similar way, by creating animated tiles of those things, and placing them as Tile Objects on the map using the Place Tile tool. These will be Objects in that they can be freely moved around without being locked into the grid and can have individual custom properties (useful for telling your game what to do with them), but they’ll also have a tile associated with them, serving as a visual representation of the object. Using Tile Objects is less efficient than regular tiles on Tile Layers, but it’s great for when you need some props or some extra detailing to break the grid (Tile Objects don’t have to be animated!).

More generally, Objects, regular ones and Tile Objects, are usually used to represent anything and everything that isn’t just the world tiles, such as character spawn locations, NPC patrol paths, pick-ups, warp points to other maps, triggers for gameplay and cutscenes, etc. These usually only have meaning when interpreted by your game, so the exact way you’ll use them will depend on your game engine and your specific game code.

Regarding effective use of layers:
Anything goes for mock-ups, but for game use, you generally want to use as few layers as possible. For a 3/4 map, the layer count can usually be kept small: Base tile layer for the terrain (water, grass, cliffs etc) or perhaps a few if the tileset uses transparent transitions instead of dedicated ones, a detail tile layer for static prop tiles like trees and hedges, and some number of Object Groups containing the Objects your gameplay will need. If you’re using Tile Objects for cosmetic props, you’ll want to keep those on their own layer(s) so that you don’t get them mixed up with gameplay stuff.
If your tileset uses transparent transition tiles, you can minimize your total layer count by having terrains that never transition to each other share a layer. For example, if water and cliffs always overlap grass but never each other, then water and cliffs can be on the same layer.

If you haven’t yet, see if your tilesets are compatible with Tiled’s Terrain tool. It helps automate the placing of transitions, saving a lot of time.

[Ash]

Wow. Thank you so much for your detailed reply. It’s honestly really helped me to start framing a few more solid thoughts about things, especially objects.

If it’s ok, there’s a few specific questions that your explanation has helped me think of. I understand that there will be problems and solutions I’ll have to work out myself, but I think I’m just trying to set a baseline. I appreciate any advice - but completely understand if you don’t have the time!

1. I see that when I create a tileset as a collection of images, it allows me to use graphics of different sizes to place as objects. Which is great! It also seems that objects know how to clip from in front to behind, like the characters and trees - but this only seems to be if they’re in the same objects layer. My goal is to have trees and things interactive/change states (cutting down), but I also have things such as pillars, blocks, and grass - some static, some interactive.

My question is, does this mean that they all need to be on the same Objects layer if the player character needs to interact with this clipping? My designer brain wants to put trees in one layer, pickups in another, etc but I don’ t grasp if these layers are purely visual and wouldn’t limit the code (I don’t know if that makes sense!)

2. Faking elevation and layers is mystifying! I would like to have different levels of elevation but the challenge seems to be when land masses ‘overlap’. I can create new layers, but it seems like I would end up having an infinite amount depending on how many land masses I have - unless I limit them to something like ‘Background’, ‘Middle ground’, ‘Foreground’.

My thought is that I need to categorize levels and visually ‘build’ each layer. So there is a base, then a level of one landmass, etc. A level of five land mass would need to have a tile for each layer to ‘build’ it. This way they can overlap… but if feels like I’m overcomplicating it?

3. I understand what you’re saying about ramps! However this has brought up a new/difficult question for me, related to the above point: It seems like I would need a separate layer for the parts of ramps that would overlay the player when they ran up them. Would that be correct? (It feels like I’m adding too many!)

4. Shadows.
   I have these ‘block’ objects that I want to use, however they also confuse me a little as they can float and I’m not exactly sure how I should plan their interaction and creation. When the character passes under them, I want to have a shadow below and the block above. Would creating a separate ‘shadows’ object layer be overdoing things? I also wanted to have a simple player shadow on that layer too. Trees and other things also would have shadows, however even if it’s not perfect, it probably doesn’t matter as much.

I realize now that I’ve actually got too many more questions - but for now, I won’t worry too much. Even understanding one of these would be an incredible assistance to me. I’m really grateful for what you wrote so far.

For some background: I’m working in Japan for a small start up and from what I understand, the developers are remote and are going to be using something called Pixijs in combination with React to combine a bunch of these things together. It’s all out of my league but I’m just trying to provide the most efficient/practical content I can to help them set it up. From there, we want to make customizable ‘levels’, so I think it would be good to find a standardized way of structuring things, rather than just artistically painting out a level design.

I’m not sure if it would be helpful to anyone, but perhaps my questions would be clearer looking at my project files? At any rate, I’m just grateful for any comments! Thank you!

gounite-map-test-02.zip

[eishiya]

I haven’t looked at your project files, so this reply is based on your post and screenshots (which are very helpful!).

Layer order/z-sorting:
Layers order overrides ordering within a layer in Tiled. However, your layers in Tiled need not directly correspond to your layers in-engine, if you don’t want them to be and if your programmer makes it so. It’s almost always a good idea to keep things that should sort together in the same layer, for consistency between Tiled and your game, but really this is something you should talk to your programmer about. Some games will respect object layer order and render the objects in that order, while others will jumble and sort them all together, it’s all up to how your game parses the Tiled files and how it deals with the objects it reads.

Overlapping plateaus and ramps:
Different tilesets are designed for different things and designed to be used in different ways. Some tilesets will have dedicated tiles for scenarios like your overlapping landmasses, allowing them to coexist within a single layer. Some do not and expect you to use many layers. Yours seems like it should be doable with just 2 (maybe 3?) layers, with most of the work done on a “base” layer, and another layer above that for just the partially transparent tiles that overlap the other ones, like the cliff-corners. This higher layer could probably be shared with your terrain transition layer(s).
You should think about this issue like a 2D artist rather a 3D artist or a 3D level designer - anything you don’t see, like the overlapped parts of the cliffs, don’t get represented with tiles, and probably doesn’t exist in the game space*. Think of the overlap like a terrain transition. Using that overlapping landmasses image as an example, you’d have the right part of the cliff and the top edge of it in tiles, and you’d have the grassy top of the southern landmass on that same layer. Then, on a layer above, you’d have the cliff-edge tiles that are partially transparent, serving as a “transition” between the two materials.

* If the hidden spaces do exist in gameplay (e.g. if you can walk between those two raised land bits), that makes things more complicated to design and program. In cases like that, you’d need to think about how collision will be done by the game, and design around that. That may mean just using a few more layers for different groups of elevations, or having a special “hidden spaces” layer, or even handling all this stuff procedurally and designing the levels in a pure top-down view with a heightmap.

[Ash]

No problems, what you wrote is more than helpful! Thanks for your explanations!

I think I’m trying to solve too many problems at once, but I these things point me in the right direction. The developer I’m working with has a lot of experience on backend stuff, but it’s the first time working on a game, so I feel like I’m trying to fill in some gaps. But like you said, I need to try and think much more 2D about it all. Hopefully taking each part one bit at a time I can solve each of the parts. The land masses seem the most difficult, because they do have hidden spaces - but I think I’ve got a better grasp now!

Thank you so much again!

[eishiya]

If you want the player to walk in your hidden spaces, you’ll probably want to fade out the land in front so that the player can see their character. This means you’ll need to put the overlapping land tiles on a separate layer that can be faded out, and have the hidden tiles on the main layer. Depending on your map’s layout, you could even achieve this with just one overlapping layer, so long as only one overlap is on screen at a time (so the player wouldn’t see the other overlaps fading out). If you have more frequent overlaps, you can get clever to reuse a small number of layers. Another possibility is to do them all on one layer, and have the game automatically break that layer up into object-like chunks (based on contiguity) that it renders separately, fading them out independently, if your programmer feels up to coding that.

On a level design front, if you’re going to have these hidden spaces in a 3/4 game like this, you need to sign-post them very clearly, much more so than in your screenshot. Players are used to such spaces not being navigable in 3/4 games. You’ll need to make them wide enough that more of the cliff is seen to avoid accidentally reading as continuous with the other raised land, and you should consider adding a path or or other linear element leading into the gap, to make it even clearer. Of course, if a space is meant to be hidden (e.g. for easter eggs), you can forego making it clear.