User Tools

Site Tools


Sidebar

Information

Game Systems

Resources

Downloads

Social



If you are an artist interested in working on this project, please feel free to email me. I am looking for a pixel artist as well as a 2D character designer for portraits.

Some of the images used as placeholder art are copyrighted by their respective owner, Square Enix. These resources include custom sprites by the artists at http://ffhacktics.com/. Other resources seen are either created by myself or are credited to their respective owners on the Credits page.

If you see any media on this website that is not attributed properly is please let me know and I will fix it immediately.

Dusk Tactics, source code, media and information on this website are all copyright ©2014-2020 Louis Agoglia unless otherwise noted.

tileset:source

Dusk Tactics Tileset Source

If you want, you can skip down to the Biome section below which gets down to exactly how many and what types of tiles I need, this first section is just so we're all on the same page with how the tiles function on a basic level.

Welcome, this page is meant for the artist constructing a tileset for Dusk Tactics. It will contain information pertaining to dimensions of the tile, how the tile (hopefully) tiles correctly, both horizontally and vertically.

I will also go into how to setup Tiled and include the basic Tiled map format which will be a basically blank map that has all the layers setup so you can correctly project isometrically and easily check your tiles.

Tile Format

I started with a set of tiles by Tim Jonsson, an amazing pixel artist who worked on a game as a freelancer a few years ago. The game, Novus Dawn by Matthew Ostil was sadly never completed. Matthew Ostil then sold the rights to the assets on March 3, 2015 and they have sinced been released under the CC-BY-SA 3.0 license by the Spell of Mastery project.

Anyway, what this set included was the most thorough starting point I could find in terms of isometric tiles. Over it's development it took a few different forms and I tried to create a unified approach as seen to the left.

This image is magnified 400% using Nearest Neighbor.

The tiles are 64 pixels across, and 48 pixels high. With the top of the tile being 32 pixels across, this leaves a height/depth of 16, which happens to also be our layer height.

So each layer is 16 pixels. I have a default Tiled map template I use that is 20 x 20 x 20, so it's a cube, or really 20 squares stacked in layers.

NOTE: Something I did since the start was to double the size of the tileset by simply resizing it 200% using Nearest Neighbor. I then set the Tiled sizes to 128 (64 * 2) and 96 (48 *2) which is how it's setup in the default map file. Why did I do this? Well at the time I was aiming for a mobile release and the more editing I can do beforehand, the better. It's also always better to scale down rather than up (maybe, I might have that mixed up). Anyway everything is coded for 128×96 but that can be fixed, if it's a huge issue I can change it, but I'd like to keep this as it makes zooming in render a lot better, since the zooming in is actually 100% and normal view is 50%. If this is confusing, I am really sorry and I can explain better over email or twitter DM.

Tiling

This is somthing you might have a better method than I currently do for, that will probably come up a lot as I am not really an artist. Anyway, what I did here, to ensure smooth tiling is to use a guide tile. The tops of the tiles, or the dark gray parts, are just normal isometric tiles, and they are sorted in a diamond shape, the maps are NOT staggered. Also when I use the term isometric I obviously don't mean true isometric, but it's a bit late to point that out.

Horizontal Tiling

The top has a yellow part toward the bottom, this yellow will be covered up when stacked properly. This matters for tiling across as anything on the yellow part (and below) will not be seen from the top. Figure 1 shows some examples of creating a corner with three tiles. You can see when the yellow line is visible and when it isnt. All of these tiles are on the same layer, so if we are making a map like this, the yellow will be visible so long as no block is placed infront of it. This is helpful in providing an edge to tiles. It gets a bit more complicated, but basically we want to be able to tell where the edges are.

The sides, or the walls, seen in Figure 2 as blue and red will need to line up with the other tile's blue and red sides, which again this should be pretty straightforward. It's easiest to test this in Tiled, but you can do it in whatever paint program you use.

The top, again is 64 px and each side is 32 px across and uses the 2:1 ratio, as in 2 horizontal pixels for every 1 vertical.

All of this is very straight forward and you most likely know all of this, I just wanted to make sure I explained as much as possible and also to leave a reference incase it's needed.

Vertical Tiling

This is still pretty simple, once you realize the depth of the tiles. In Tiled we have to use layers to give the illusion that we are stacking the tiles. I know Tiled supports Isometric Maps, but unless they added something new in 1.3, they don't support an easier way to show this.

Figure 3 below shows us that each tile is 16 pixels high, you'll notice this is right below the yellow line. When tiles are stacked, the yellow line will not be visible, so again the yellow line is useful as a border of sorts and also as a place to put “cliff edges” which will be hidden when not needed. The default map I use has 20 layers, it's a bit of a pain to set up maps from scratch as you have to go through 20 layers and keep incrementing the offset, so having a default for testing helps a lot.

With the opacity down on layers 2 and 3, we can see how the tiles are stacked. When drawing on the sides, we want a repeated pattern for stacked tiles so we can do things like cliffsides or walls. How many tiles should you use? That's up to you, the less the better, but you don't want it to look too stagnant. For things that are used a lot, like mountains/cliffs we really want to use as few as possible, otherwise making the map gets more difficult, so any optimization you can put into the patterns try to make it around 2 or 3 tiles. I've used 1 tile that can be repeated both vertically and horizontally to some degree of success, but it honestly looks way less varied.

Figure 3A is something I wanted to point out. When reading about isometric tile sets I noticed that using vertical heights that divide evenly into the overall tile height is not suggested, and this is why. However, all these tiles are the same size and it seems to be a pain to create different tile heights (for the engine). So what we want to do to fix this is in the next section which explains exactly what I will require for each biome.

Biomes

Currently all the tiles are in one huge tilesheet that keeps getting less and less organized and vertically larger every time I add tiles. What I would like to do is have smaller sets for specific biomes and then combine these as needed. If it works like I am thinking, we should be able to replace the grass biome tileset, for example, with the snow biome tileset and still have the same basic map only now it's winter!

This will require some changes on my end, as all tiles are indexed and creating multiple tilesheets will mean that once the tilesheet is done and each tile has it's index, newer tiles will have to be tacked on to the very end. I can leave number ranged available, but again the mapping system will most likely have to be re-tooled which means I want to make sure this is the LAST TIME I am doing it (which is what I said the last time, and the time before that).

Template

The basic template will use the grass biome, but it's purpose is to show what is expected of each biome. Basically I need every “situation” covered when mapping. So we'll need left corner pieces, right corner pieces, top corner, etc. It may be hard to see exactly what the tile is, so I'll provide a simplified version.

Now here's the bad news: Many of the tiles don't fit the prototype laid out above. Some tiles were created before I realized a prototype would be useful. The grass set, for example, is shifted down a bit so that the top edges can be accentuated more, making the edges more visible and dynamic. Otherwise we wouldn't be able to show off an extra grassy edge as it would be cut off. So honestly some organization would be much appreciated with this entire project.

Before I continue I want to make sure you understand that the format on the left is not set in stone whatsoever. You can use it, or modify it to be 10 columns or whatever. The point is to make mapping easiest, so whatever size does that would be perfect.

Anyway, back to the template, the first tile is just black. Then we have our more common tiles. Basically the most used and it's variants. So for grass it would be basic grass and maybe a tile with leaves, and one with roots. Something to break up the monotony. Note that the second tile in this sheet, the one that's all edges should really be in row 3, coloumn 2. The tile in row 3, column 2 is not a part of this set.

So row 1 is basic tiles, the next 3 rows are every corner/edge possibility. It comes out to 15 tiles. So right now the first row, which is really just 2-4 basic tiles and the corner/edge tiles comes out to 17-19 tiles.

That's really it! For basic terrain, this is all that we need. All of this can be easily boiled down to maybe 2 or 3 tiles, you make one without edges, and one with all edges and then mix and match until you have every possibility. This ensures that all tiles are compatible and minimizes drawing time.

Below this are extra tiles, in this case we have a dirt path. Essentially transition tiles would go here. Transition tiles are exactly that, tiles that transition from one terrain to another. For now I am really not focused on these, as this can be done easier by making two versions of each terrain. Like here we have grass that transitions (rather abruptly) into dirt. We can use this template for almost any of the terrains. I have a more fitting template when it comes to transition tiles with dirt to sand. All we need is one template set and then I can make the rest.

Terrain Tile Types

Now we can get to the exact types of tiles needed. When I did some of the research for this, months ago, I specifically looked at biome maps of earth to get a basic idea of how things work. Using a more basic version of this we can actually see, realistically which biomes will require transitions (which is pretty cool!).

This is very over simplified, but for our applications it's pretty good. It also helps setup some rules that should be followed for the various locations the game will take place. If you haven't already seen it, there are pictures of the world map and more specifically the country where the majority of the game will take place, so I am building this list based on the locations that will be visited.

For the various terrains, we know what we need and what we have, but I will list everything and simply include a note next to terrains that are completed. We will divide it into multiple categories, natural exterior, man-made exterior, natural interior, man-made interior, water/lava/voids. They're pretty self explanatory but I'll go into detail to describe what (if any) vertical tiling is needed.

Some final notes, each tile will have a Terrain Type which includes an elemental designation, how/if it impacts accuracy and damage for basic attacks, and some other parameters that relate to weather. This won't change what you create, but when you're making the terrain try and remember that the terrains need to really show off what they are so players have a good idea of where one ends and another begins.

Palette is entirely up to you. I want every tile to “fit” and even though not every terrain is able to transition into another, they should all look like they come from the same world/game/etc.

Also, the list below will have terrain types and will mention walls or floors where necessary, if the wall isn't specified, it will be noted at the top of the category as a shared wall type.

Tile Sides

For the sides of tiles, there's going to be a lot of copy/paste going on. Outside of vertical tiling, you'll only be making a few versions of each, 1x Plain, 1x Left Edge, 1x Right Edge. This is where it gets tricky for me, idea-wise. When building a map, if I have a single tile that is on a layer above the rest, I'll want to have edges on both the left and right. I've looked into how other games have done it and it involves using parts of tiles, which may be an option. I don't want to spend too much of my budget making tiles that will hardly get any use, especially with this as I can most likely make the edits myself, but if you want to explore all varieties that would always help.

Note: If done right, you can keep it to a single tile, now this is pretty hard since the tiles line up pretty much edge to edge, but if you can work the edges in so that when they are arranged, the edge is only seen when not hidden, then we can really get a lot done. This is probably very confusing and I can't think of a better way to explain it, so I'll try to include a visual example!

Natural Exterior

This is probably the majority of terrain types. It includes any naturally forming terrain like grass, mountains, etc. Each of these is meant to define the top part of the tile.

-Wall/Side Types

For exterior types we want a consistant type of wall that can be shared with all/most exterior types. There will most likely be 2-3 wall types. Basically ranging from soft/brown to hard/gray. This should help to convey climate in a sense, where soft/brown is used in wetter, lower land areas and hard/gray is for very high altitude mountainous regions. These NEED to tile vertically and once made can be simply copy/pasted to each terrain type.

I currently have two, and they both follow the extremes. Palette shifting can also be an answer here, but I do want some difference in texture and feel, like smooth vs jagged.

Brush

This will be a thicker variation on grass and it will only be able to transition into Grass. It will be used mostly on forest/jungle floors and game-wise it will actually be harder to move through.

Grass [Complete]

As this is done for the most part, and I am pretty happy with the color and texture, we can skip this for now and come back to it for transition tiles.

Light Grass

This is going to be a shorter, lighter version of grass. I do have something already setup and while it might be better in the Man-made section, but I did want different grass types so that the maps don't get too homogenous.

Dirt [Complete]

Dirt is basically done, the dirt we currently have is more of a dry cracked earth type of dirt, but it should work for most applications. Further down we do have the Natural Interior category which includes Mud as a more wet version of this, to be used for caves etc.

Gravel

I originally created a rock layer that went over all terrain types, but it honestly doesn't look good. So I'd like a gravel type of terrain. Small rocks, more variation, and eventually to be used as a path.

Rock[Started]

The wall/sides I currently use for the tiles are based on this version of rock, which is more gray than brown. I do have a basic rock tile that blends nicely with the wall that we currently have, but it will need some work.

Sand[Mostly Complete]

The original tiles came with a sand terrain, however it only included a few tiles and had an interesting, but unfinished wall included with it. For sand we want very little texture and a focus on the color.

Dunes

This will basically be the more decorate desert part of the sand terrain. It doesn't need edges and should transition smoothly with sand tiles. These tiles will have texture, specifically “waves of dunes” which should include some variety since we don't need edge tiles.

Snow

For now, Snow and Ice terrain will exist together in their own world. I'll work out transitions at a later date, but one thing we know is Snow and Ice will transition into eachother. Snow is very low texture, white/blue/gray and should be pretty simple. When it comes to the edges it will get a bit more interesting and I'll leave that up to you.

Ice

As mentioned above, ice and snow will go together and transition into one another. I was thinking of ice being the “lower layer” with snow existing over it. So when there is a transition, snow will be the dominant terrain. I do want to do edge tiles for ice, though, so this will still be a full terrain set. If we end up going the route of one terrain to a tilesheet, these would replace the water/lava tiles.

Natural Interior

Wall/Side Types

For this we can use a darker version of the exterior tiles and maybe create more variation. I'd like the vertical tiling to allow for some variation, but ultimately it has to be easy to use, so no more than 3 tiles in a vertical pattern.

Dark Dirt

When we start doing interior versions of terrains that have existing exterior terrains, I think the easiest thing to do would be to play with the contrast to get a simple darker version, as it will need to emulate being “covered” from sunlight.

Mud

This can be designed as you see fit. The mud tiles I had in mind took on more of a lighter, higher contrast brown, with a slightly textured look. The walls and edging might have to be unique. This is not to be swampy, it's still a solid terrain.

Natural Stone

Again, this can simply be a darker version of the exterior rock tileset.

Moss (?)

I like the idea of having an indoor grass/moss type of tileset, but this is a secondary concern for now.

Man-made Exterior

This section includes things like castle wall exteriors and the like. The focus on these tiles will be the wall/vertical parts of the tile with the tops of the tiles mostly being a default man-made stone that will likely be covered by either roof tiles or battlements. We do need pathing such as stone paths, but for the first group, walls and structures, we want things to tile vertically with as few tiles as possible.

Wooden Structure

Wooden Flooring

Stone Structure

Stone Flooring

Brick Structure

Brick Flooring

Castle Wall

Castle Wall Floor

Castle Wall Battlements

Castle Structure

Various Flooring

Fencing

Man-made Exterior Roof

This will be a special category as it includes a large variety of odd tiles. I spent a few weeks making various building tiles, mostly working with the roof. Since there were no roof tiles included in the original set I had to make some. They come in two forms, high angle roofing that requires 2 layers to reach the top and a variant that takes a lower angle and requires 3 layers to reach the top. I noticed the houses looked much better with the latter design, however this caused a huge increase in the number of tiles I had to make. The good news is, they are all done and can now be used as templates for different roof tiles. So you don't have to worry about crafting the tile shape etc, that's all done, I'd just like some color and tiling variations as right now I only have brown.

Tiled Map Template

To the left you'll see the basic setup for each biome. The first row is meant for the basic tile and any variants. So this is where you'd draw the base tile, in the first column of the first row, and any variants after. Variants need to blend in with the edge tiles so if they're too varied then they wont work. If you understand that then you're a step ahead of me.

You'll notice pink lines which point out where edges are. Wherever pink is, that's where an edge will be drawn. What I did originally was just make a simple no-edge tile and a tile with all four sides as edges (it's actually required, you'll see it in row 3, column 3) and just sort of frankensprited each piece I needed, then tested them on the included map, and edit as needed.

Below you'll fine a download link to everything including a basic Tile map setup that uses a basic tileset which includes every edge tile. I made a sample map to show how it covers every possible situation in terms of edges. It includes a copy of the image on the left, so no need to save that.

You can open this up in Tiled, I'd use the latest 1.3, and immediately see it in action. You may have to “fix” the source of the tileset, it should be set to the relative filepath and work fine, but if not just select the test.png file which is included.

Note: Something you'll notice right away is that everything is multiplied by 2, the tileset, the map, etc. I explained this above, but essentially you'll create the tiles in their natural size 64×48 (64x32x16) and then simply resize that image by 200% using the Nearest Neighbor or equivalent (whatever doesn't distort the image), no anti aliasing etc. Once you do this, the tileset will work fine with the map.

Soooo this means everytime you go to work on the tileset, you'll want to remember to resize it to 50% (nearest neighbor) so it's back to it's original form, it's sort of a pain in the ass right?

Of course you can create a tiled map that uses 64×32 tiles, and simply set the layer offsets to 16 instead of 32, but how I am sending it is how it will be used in the game.

When creating a new biome, simple draw in a new layer over test.png (make sure it's the right size), then enlarge by 2x, save it as test.png and if you have Tiled open it should automatically refresh the new test.png file, so you can see if everything works right away. I made the test map so that it includes at least 1 of every tile.

Download | template.zip

This includes everything in a zip file. It has the test.png file which will be used as the tileset (I also included a file called test_actualsize.png which is the actual size you'll be working on), the tiled map which will have all the layers and settings you need as well as a sample map, and a png format picture of the map that you can print out and put on your fridge!

The picture of the map to the right, if clicked, will show the map at 50% size which is what we use in-game. That's why the tiles are 200%. I had to shrink it even further to fit on this page, so the preview image to the right is actually 25%. Nice and confusing, right?

tileset/source.txt · Last modified: 2019/12/05 18:09 by lou