Diagonals
A simple diagonal Yet another simple diagonal
Since Jazz2 is a 2D game, the character has no way of moving towards the left or right. This only leaves going up or down to prevent the game from being completely one dimensional. Diagonals, quite literally, add another dimension to the game play of the level, they are VERY IMPORTANT and your tileset MUST HAVE them. Sure you can use springs or jump around all the time, but that hurts the flow of the level and with diagonals you can use both dimensions at once without having to use events or tell your character to do so. It all just automatically happens.

There is no rule out there that says exactly at what angle your diagonals must be or what shape they must be, choose what you think fits best inside your tileset. The example to the top-left is by far the most popular and is used in almost every single tileset. For every tile you go across you go one tile up, the simplest diagonal available. The top-right example is also used quite a lot. Adding both is a good idea and adds variation in diagonal areas of the tileset.

Drawing Diagonals
There are two ways to draw diagonals in your tileset, the easy (shortcut) and the hard (correct) way. I’ve used both and it doesn’t make much of a difference, but if you want to go that extra step for more detail the hard way is the way to go. I’ll discuss both methods in this section so you can have a better understanding on how to draw each one.

Easy (Shortcut) Method
Easy Method
It really can’t get any easier than this; the easy method just makes a straight connection between two platforms of different heights. The problem with this is that the diagonals actually appear thinner than a straight piece with the same amount of pixels so the platform top will end up being thinner and thicker at different areas. However, the diagonals will easily connect to the platforms so it’s all really easy to use in a level.

Easy Method Step by Step
Making it is really easy too, so easy I sometimes consider it cheating.
First, start out with a straight platform and some blank space underneath it. All you need to do next is select smaller and smaller parts of the platform, lowering it by one pixel at a time until it reaches the bottom. That’s all; the end product will tile perfectly with the other platforms in the tileset.

Hard (Correct) Method
Hard Method
This one is a lot trickier than the previous method, but you will have a perfect diagonal exactly the same size as the rest of the platforms. The bad part of this is that the diagonal is a different pixel size than the other platforms, so you need to make connecting tiles as well in order for them to fit with the rest of the tileset. The end product looks good though, and while I wouldn’t recommend this method for beginners it’s worth the extra effort if you’re willing to spend extra time improving your diagonals.

Top Connector Diagonal Bottom Connector
Unfortunately, there is no easy step-by-step way to draw these diagonals. You’re pretty much on your own here, the thickness and shape varies depending on what the size of your platform is so I can’t help you much in that area. There are three parts to a diagonal using this method: The diagonal itself (top-middle example), a top connector (top-left example) and a bottom connector (top-right example).
I find it easy to draw the diagonal first and then extend the ends of the platforms until they connect and use those pieces as the connecting tiles. I’ve included a grid on the examples above to give you a general idea where the connecting areas are. Apart from that there isn’t much else I can do; there are too many varying things to give a definite guide on how to draw one.

Diagonal Perspectives
Like with a lot of different parts of your tileset, the perspective determines what your diagonals will look like. Most of the time this doesn’t mean anything special, but there are exceptions where the diagonals can greatly change due to the perspective you choose. Most of this section will be short and sweet; there really isn’t too much info on diagonal perspectives.

2D Perspective
2D Perspective
This is as easy as it gets, just a small strip on the top of the platform. Because the strips are so small you can just make them with the easy method. The hard method will make a slight improvement but the connecting tiles will be very hard to see due to the small amount of change. I’d just stick with the easy method because the hard method would be much harder for a level maker to use in this circumstance; the slight detail boost isn’t worth it.

Semi-Isometric Perspective
Semi-isometirc Perspective
This is a little trickier than the 2D perspective, mainly because the top part of the platform is thicker. The diagonals are still made in pretty much the same way as the 2D perspective though, but the main difference is that you can now use the hard method to make the diagonals if you want.

Isometric Perspective
Isometric Perspective Isometric Perspective Hidden Side A Isometric Perspective Hidden Side B
This one is a little tricky to do. In fact, pretty much everyone ignores this diagonal perspective (I’ve only used it once in Nature’s Ruins) and uses the semi-isometric one instead. Why? Well, for starters it’s kind of hard to do, but more importantly is that you don’t see the top platform. Things you don’t see means there is things you can’t add detail to, and the strongest point of the isometric perspectives is the fact that you can add a lot of detail to the top platform.
The one side is just a normal diagonal, but because of the perspective the other side is actually hidden behind the ground. There is a sort of a good part to this however, because the hidden side of the diagonals are not affected by the hard or easy method. Who needs to make adjustments to something if you can’t see it?

That’s it for diagonals, here’s the page summary:
Diagonals
Tilesets need diagonals to make use of the other dimension, preventing boring one dimensional game play
You can make diagonals at any angle you want, but it’s best to stick to the more commonly used ones
There are two ways of drawing diagonals:
  • Easy (Shortcut) Method
  • Hard (Correct) Method
The easy method is very easy to draw and automatically tiles with the rest of the platforms, but the diagonals are thinner than the rest of the platforms
The hard method looks better and is the same thickness as the other platforms, but it’s hard to draw and needs connecting tiles to fit with the rest of the tileset
The perspectives rarely make any difference to how diagonals are drawn except for the Isometric perspective
The Isometric perspective diagonals are rarely used because they are hard to draw and lack areas to add detail

Drawing the Tileset

Page 1: Drawing Methods/Feather and Blur
Page 2: Perspective
Page 3: Diagonals
Page 4: Detail
Page 5: Event Tiles/Additional Layer Eye Candy
Page 6: Beta Testing

-=Tutorials=-
[Part 2: Drawing the Tileset|Part 3: Making the Palette|Part 4: The Textured Background]