Section 4: Creating our grid.
OK, so after all that reading I bet you just can't wait to jump into [Paint.net and start learning... So go ahead and open Paint.net. Hopefully at this stage you have your plugins installed correctly and if you don't then I suggest you back track over the tutorial and make sure you follow the instructions correctly.
Note
If you are not using Paint.net I will upload the created grid in the resources zip file that I attach to this tutorial so that you can download it for use in the next section.with whatever application you're using.
Now for this tutorial I am going to set the document size to "640 x 576" it won't matter if you make your document size larger or much smaller but this will allow us to have enough room for a nice amount of tiles, you can change this later though so it's nothing to worry about just yet. So go ahead and create a new document.
Then we need to use the Grid Maker plugin that we downloaded and installed earlier, if you managed to install it correctly you will see if under:
"Effects > Render > Grid" (See the image below)
Once you've clicked and opened the Grid Maker plugin the following popup window will appear.... This will give you a few options to play around with but before we mess around with any of these settings there are a few things that I want o make clear to you first...
When creating tiles for Isometric game maps, we will require different dimensions to that of a top down orthographic view or a platformer game. You'll want to use dimensions that are to the power of two. (16, 32, 64, 128) to create the isometric camera projection.
If you want a flat isometric world I suggest going with tiles that are 64x32 (64 pixels wide and 32 pixel tall) this will allow for you to hold a fair amount of detail within your tiles and will work just fine. However for this tutorial we will be using 64x64. The reason for this is so that we can create more elevated tiles and such that you might see in some 'tactics' style games. I'm unsure if these tiles will work directly within Construct at this stage but if it doesn't we can work out some small changes later, for now the important thing is that you're learning how to create the art, once you've learned this skill you can change up the dimensions to whatever you may need at a later stage and once we have some basic tiles created after the second tutorial (Part 2) then I will jump into Construct with them and ensure everything is working fine and if any changes are required which I'm sure they shouldn't be, I will explain what we need to change and why to the best of my ability.
Also note that within some game engines you're not restricted to using one set tile size, I don't know just yet if this applies with Construct but for example, with another engine you may use the base tile size for your ground tiles of 64x32 as suggested above alongside the taller mountain pieces of 64x64, but to avoid any confusion I will be using a grid size of 64x64 for all of our pieces and you will see and understand what I mean once we go through the process...
Now you know that, we can get started on the settings of the grid maker plugin. As stated above you will want to have a 64x64 grid and make sure that the brush width is only on 1 but it should by default be set to 2! You can use the checkers if you wish, it might make this next part a little easier but I prefer to use the Grid Lines.
As you can see the grid updates in real time as you put your settings in, which I think is pretty cool but if you remember earlier I set the document size to an unusual one, well it was just to ensure that we didn't create a document that was too large to start with, this will help those viewers on older laptops or machines follow along too without much lag due to a large document as well as leave me open to show you how you may increase or decrease your document size when needed later on.
Also don't worry about the extra space from the grid lines that don't form grid tiles, we will be cropping the image once we are finished creating our tiles anyway.
I'll be using this next image to help me explain something before we move on to create the actual base template tiles. When we created the grid, if you followed me and used the Grid Lines instead of the Checkers, you will want to take note of this, the grid is kind of offset by 1 pixel, when we load this tile sheet into a level editor or engine it will read from the top left pixel. not within out created Grid Lines, they are simply to act as a guide. Now the reason I dislike using the Checkers is because I have to dim the layer opacity in order to work with it properly and it often affects the way I work, but this probably won't apply with everyone, it's kind of just a personal preference to be honest, but now you know that, you can see the image below for an explanation of what I mean by offset by one pixel. The left and top Grid Lines will be a part of each tile. Hopefully you understand this, and this is why we wanted to set the brush width to 1 in the Grid Maker settings earlier. You could avoid having to do this completely by checking the Checkers instead of Grid lines though and it may be a more efficient workflow for many of you out there.
Now that we have our grid created and you understand how to use it as a guideline for our tiles sheet. We can bring this section to an end and actually start building out our base tiles in the next section!
Section 5: Creating Our Tile Templates
OK, finally! We can get started on actually creating the art...
Create a new layer or work directly on your background layer for this next part, it's up to you, but I have chosen to work directly on the Grid layer (which is the Background layer)
Now zoom right in to the top left square of the grid and count up from the bottom left corner of it by 16 pixels and make a notch with the 'Pencil tool' now count another 16 pixels up so 32 in total and make another notch, then count across to the right (from the notch you just made) by another 32 pixels. See the image below, you should now have something like this... I will also add a visual reference to these measurements as in text it can be a little confusing.
Now what you want to do is draw a line from the notch that’s 16 pixels up to the notch that’s 32 pixels across. The line should go diagonally by two pixels each escalation level, if you don’t understand refer to the next image! (You may want to do this on a new layer)
As you can see in the image above I have left the notch covered but not included that second pixel I mentioned should be there but this is because we are going to mirror the tile across once done, so that we don’t do more work than we have to. Be it one pixel or twenty.
Now do the exact same thing to the bottom of our tile. (See image below)
Now you will want to hide your ‘Background’ layer and use the selection tool to highlight the lines we have drawn out so far, once highlighted (like the image below) hit CTRL C to copy it. The hit CTRL N (or go to File > New) to create a new document, but don’t close the current one! A popup window should appear and it should have automatically set the new document dimensions to 32x32 If you’ve followed the tutorial correctly so far but if it doesn't it's not too important. Now hit OK and paste the selection in.
Now go to “Image > Flip Horizontal” then press CTRL A to select all and CTRL C to copy it. (See the image below)
Now go and paste it into our tilesheet and match it up to align with our other lines. Now this may seem like a fairly long process but once you get into doing it often you can do it within seconds and it doesn’t take long at all. Now you can close the 32x32 document we made without saving it. (make sure you save the main document often just to be on the safe side!) Your base tile template should now be complete and look like this:
Section 6: Explanation of the process we are taking.
Essentially what we are doing here right now is working in progressive steps. Just like a sculpture or a digital painting it always starts with a silhouette or an outline. This template for a lack of a better word will work for us as a guide for all of the tiles.
Now I have some things in mind already for what to create and this part is kind of on you for your own custom tiles but as I stated earlier in the tutorial in the form of a ‘note’ I’m planning for a village simulation type game with this art, more than likely set in a Medieval era. So no cars or modern roads and or hotels. I know there are various tutorials already on the net that contain Isometric pixel art for the 'modern' sort of thing though... That is mostly why besides the fact that I really enjoy the whole fantasy side of art.
Now in the next few sections we will begin to base out our slopes and hill templates as well as our cliffs.
For now we will only handle slopes in 4 directions... Also, because we have chosen the tile size of 64x64 this allows us to have nice looking cliff like areas and hills that would be hard to achieve otherwise and the resolution of the detail will be more like that of a 32x32 platformer tile due to our isometric view.
Section 7: Our first elevated tile...
There will be a fair amount of copying and pasting here and when you’re doing that you should turn your background layer off with the check box in the layer panel. I’m saying this now so that I don’t have to constantly tell you to do it throughout the tutorial. This method for me is the quickest. (that I know of in Paint.net)
So first off I copy and paste the first tile template over to the next square, remember the image with the active 64x64 selection? well you may want to refer back to that now unless you can remember it, well this is why i wanted to point that out, it’s easy to forget that the grid is offset by 1 pixel. Once you’ve copy pasted that tile over, you will want to move it up to align the furthest left pixel with the old 32 pixel marker (Like this image below)
Note
You may see that the grid lines have thinned down by 1 pixel, that’s because I seem to have selected 1 pixel in the options but it created a 2 pixel wide grid so you have my apologies if any of you got confused with some of the images, this won’t affect you much, just select everything and move it all down by 1 pixel! and you must have noticed earlier, try not to worry about it and you should be doing just fine either way... I hope anyway =] (all I did was create a new grid and it worked out fine this time)
Now copy and paste the bottom half of the tile and move it down to the base of our square tile box. (just like this)
I was going to make this a sloped piece but I think we will keep this one like this. Connect the edges to make a cube like block. Now Copy the cube tile over to the next Grid tile, with the block copied over to the next column we want to make it slope for players to be able to walk up and down like a hill or mountain type of elevated areas. To do this we’re going to erase the center connections and connect the bottom center most pixels to the top right corner forming a diagonal line. (See image)
Note
Make sure you turn off your anti aliasing for the Eraser tool... It’s the icon after the Brush Width “ ” symbol.
Now it should like like this, not using the 2 pixels per elevation level of course, we need it sloping =] lol - Obviously we now need to erase the parts we don’t need and then Connect the other edges, refer to the image below and you will surely understand =D
There we have it, we have three core pieces now!
This part here is why I mentioned Tiled as an optional piece of software
to get in the earlier section of this tutorial. If you want to test how these look, go ahead and fire up Tiled, create a new map and make sure you select ‘Isometric’ (not staggered) and set the dimensions to 64x32; Now go back to paint and hide the ‘Background‘ layer, temporarily fill them with a colour or multiple colours on the tiles with height and go to File > Save As. Save it anywhere, for this I usually save it to the Desktop for ease of replacing and instantly testing my edits within Tiled. It will ask you to flatten the image when saving out to a PNG but that’s fine, once you have saved it out as a PNG you can hit CTRL Z to undo the flatten! The go and import the image you just saved out to the desktop into Tiled as a tileset but when you import the image remember to set the dimensions of 64x64. Now you can place the tiles around and see that they match up quite nicely.
-----
Some of you may have spotted a design error here, but it’s something that I have worked around through the way the game in my mind works. We’re going to have higher elevated tiles but the slope tiles won’t be able to reach such heights after a certain point the cliffs will ascend further. Well I will explain my work around; in my ‘Village Sim’ that I have in mind when creating this tutorial and this graphic set, the workers/resource gatherers will climb vines or cliffs to get to the top but to get wheelbarrows and caravans up (to gather more resources at once) they will have to build an elevator of sorts. Now this works around that small problem and we can still get to most places on the map, we just need to create such graphics to allow that, I may do so for this tutorial later but for now we are just worrying about the essentials and how we create them from scratch.