In this category you can find my 2D graphics. The mayour part of it is in a special isometric format.

How to … and why …

Some of you may find it difficult to navigate through my tilesets. And because of this i will show how i am creating the sets, by an ISOMETRIC wall. But even understanding it better then, you still have to puzzle the single pieces together. That´s the fun part in game creating 😛

My old NOT ISOMETRIC sets are based at an 32 dot grid: my basetile was 32 x 32 pixel. This means that the graphics are BASED on this, but could have the size of 64 x 32, 128 x 96, 32 x 32, ect. for example. Everything that can be dividied through 32 …

Different from that, my NEW ISOMETRIC sets using another basetiles, and more tiles to build a full wall. An old wall only had a piece for frontview, one for sideview, four corners and the endtiles. maybe some variations like doors, too. and everything based at the 32×32 basetile with an 32 x 32 grid. Not this much stuff to get lost …

The new ISO Tilesets, signed as ” ISO ” are a bit different from the old ones. And because of this, here is a little description how they will be made

If you need a closer explanation to create isometric tiles, take a look at the iso tiles tutorial in the tutorials section …

The differences to the old sets are:

i am using a 16 dot grid to fit the tiles, and my iso is a 4:3 one.

Here a short ecxursion to the World of the Standard 2:1 ISO Tiles .

The Standard Iso Format uses a relation of 2:1 and a basetile of 64 x 32 Pixeln. Looks like this:

Think that the red Colour is filled with grass ;). To fill a Level with this tiles you may need a grid of Width 32 Pixel by Height 16 Pixel. Like this:

The Rhombus shape brings us the double work and space, because you also have to fill the gaps between. The green Tiles …

Well, i am using a so-called Quick Backdrop for large areas. This one fills the area. Using the rhombus shape would mean to use two of the Quick Backdrops over each other. I don´t like it this much. So i also fill up this grey Areas and i have a rectangle one insetad. Finally there was this relative Flat-looking 2:1 Iso. I wanted to have something more Toplooking. And so i decided to develop my 4:3 Iso Format.

Even with the 4:3 one you would be able to use rhombus shaped Tiles. The Grid for that would have 32 to 24 Pixel. I told you why i don´t like to use Rhombus Tiles. The now rectangle tiles fits to a 16 dot Grid. This also gives me more freedom to place all my othe levelstuff. My Trees for example. It simply looks more irregular with the 16 dot grid.

End of excursion. Back to my 4:3 Iso Tile …

My Basetile is 64 x 48 pixel

For bigger things like a Wall i am using a 128 x 96 Basetile, which is still dividable through the 64 x 48 one …

Really big things is freemade, and then fitted to the 16 dot grid. My buildings for example …

Back to our basetile. This basetile is the place where i am putting my graphics at in my Rendersoftware: a grass texture for example. Or a Wall …

As you can see, there is my little basetile under my wall. Of course this basetile is fitted to screen when i render it. Unfortunately i cannot simply render all the stuff in basetilesize. The result wouldn´t be complete:

I have to add a basetile to the bottom and to the top to display the wall completely:

And i have to do this to all wallpieces, to get a fitting wall.

In this way all the walltiles would have the size of 128 X 288 Pixel. Not really comfortable, because a lot of tiles would overlap in the later game with its transparent areas. And there would be a lot of useless just transparent areas, that simply rises the needed ram space.

Always make the tiles as small as possible. And because of this i am cutting away those useless transparent border areas, using gridsteps.

Remember that the gridsize is 16 pixels. So away with everything that is bigger than 16 pixels relative to the wall:

Here you can see what i mean. This would be the tileset if i would leave it uncutted. Very big, very uncomfortable … and a lot of not needed transparent areas.

I have used red and pink to show where one tile ends and the next begins. Always a tile of 128 x 288 pixel.

Everything red and pink is stuff to cut away. The stuff with the brown background is the later tiles that you can find in the finished tileset. really lots of areas to cut away.

And when you take a closer look at the brown tiles, you will see why the tiles do have different sizes then …

OVERVIEW:
Finally here is a little desctription, what kind of tiles a iso wall tileset could contain. divided into four sections:

1. First all the isometric pieces: one up left, one up right, four corners and the crosspieces. Not to forget the endpieces . In the current case i have made two different kinds of endpieces. so there are eight endpieces: four straight down, four running out flatly

2. Then there are the pieces for frontview: one front, one upwards, the four corners and the crosspieces. And also here the endpieces.

3. Followed by the eight pieces to connect the isometric stuff to the frontview stuff …

4. And finally some variations like doors, partially destroyed wall pieces, etc …

It also could be that the tiles could have much more tiles. Like the cavewall iso, where i also had to create the outsided walls for the border of the playfield …

Besides from that, the design is nearly the same to all wall like things in the new iso sets.

In the end: Use a 16 Dot Grid to place the Tiles together. Have fun with puzzling 😉

I am providing my sprites as single bitmaps. The mainreason is my small amount of time. Not talking about the fact that a tileset with 96 pixel tiles and 400 single pieces would bring up a veeery big tileset …

Well, as told, one sprite does have a lot of single pictures. And there is a lot of useless border around the sprite. This is because a attacking sword should also be displayed at the tile.

…

On the other hand, this border needs a lot of useless ram space …

MMF provides a way to reduce the picture to the visible area. The red border is cut away then. MMF takes care that the drawing point is still the same than in the not cutted picture. They call it Hot Spot. This reduce to visible area reduces the memory size dramatically. So it is a good idea to use it.

Well, not all of you uses MMF to create games …

So if you try the same for a C++ game for example, you will have problems with this Hot Spot then. The zero point for drawing the sprite isn´t longer at the old coordinates of the not cuttet picture, but in the upper left corner of the VISIBLE picture:

This would lead to problems with our sprite: he isn´t centered anymore. Take a look at the red fadecross, which should represent our Hot Spor here. All animationspictures are drawn relative to this Point. And from the third to the fourth picture, the body of the sprite isn´t at the same place relative to the Hot Spot. In Fact the Hot Spot (drawing point) is at the wrong place 😉

There are still three ways left to reduce the spritesize anyway. It all is heavy work, but needful:

1. You could use Multimedia Fusion to create your games 😉

2. You could reduce it to the visible area, and record the Hot Spot position for every single frame.

3. You could only cut away the lower and right border. This will keep the Hot Spot at it´s original position

The last way doesn´t give this much effect than reducing it all, but it still gives you some free memory. Better than nothing 🙂

Of course you could leave the sprites in the way they are. But you will pay with lots of not necessary ram space. At the latest when there are a LOT of sprites at the screen, it is a thing of performance …

My swordstan for example shrinked down from 10 mb to 4. 4 mb by reducing to visible area. Truecolour.

This leads me to the next point to reduce the memory for the whole game: never use Truecolour for your game. Highcolour is good enough for most cases. The difference between true and high colour is nearly not seeing. And changing the colourdepth from true to high will reduce the graphicssize down 1/3. And my Swordstan down to 3 mb then …