Update

So much for my plan of regularly updating this Blog...


I apologise to those people that come here daily for some articles (yes, based on my statistics you do), but I currently try to get my Bachelor by the end of the decade. 
I pains be that the last significant programming I've done in the last month was a simple Pong version using XNA. It was in a boring lecture, and took me around 1 hour, with enemy behaviour, scores and paying attention to the professor. Oh, and a Caeser's Cypher de/encrypter for Internet Security. With interface and  (╯°□°）╯︵ ┻━┻ in the documentation (got 10 of 10 points :D ).
Yeah ... I'm learning Computer Science, and have done little programming. I'm making the theoretical lectures this semester (ethics, modelling, security).


I actually plan to do some more now in the holidays, but having also to do some homeworks and trying to get more into Japanese, plus finals coming up ... :´(


Just to let you know. : )

Update

I run dry with my last project some time ago. Its not dead, just on stand by till I can solve some major programming problems I encountered.

Right now I thought up with a little project to do on the side (the next semester starts soon). I may make some post about it as it evolves, but I don't want to promise anything yet.

Status Update

I'm currently working on the Source of the Editor again and try to implement Scripting.

The Text you can see on the bottom left is the text that is saved in a position of the Grid. (Not e the Syntax Highlighting!) That doesn't work yet, nor does the Tile Drawing code find the Asset Tag yet. But at least it did no error occur because of that till now.

Its not the first time that I use scripting, but the first using it on such a Level.

The Script shall Feature simple things like the Asset Tags, but also more complex like loading a new level, activating a trap, spawn Enemies, handle Dialogues, etc.

As I don't know yet what I really need and how I will implement this, it may take a while till I can post about it. And the heat right not does not contribute to this.

Just to let you know.

Real Life Interference

Sorry, for the irregular posts, but I had some stuff coming up last week and on the week end, and I'm not sure that this will not also happen next weekend. I hope that I can establish a regular posting circle soon, but ... well ... it would be boring if you could predict life.

Tile Maps and how to draw them.

In the last post I covered what tile maps are and why we use them.

This time I will talk about how to draw tile maps.

For the Computer a tile map is just one long line of information, once in a while the may is a symbol that indicates that one row is over and the next one begins. It hold no real information on how to draw the whole thing.

Not only that, but also are there may ways how a tile map can look like. There can be square shaped tiles, there can be hexagon shaped tiles and I once even heard of things like circles and what not.

For simplicity I will cover here only the two main forms: square and hexagon.

Orthogonal Grid (Square Tiles):

A orthogonal grid is rather simple: you got X columns and Y rows. X is traditionally the left to right coordinate, and left the the top-down coordinate. Note that normally the position 0/0 is normally at the top-left and X/Y at the bottom-right. But when you program your own code yo are of course free to change the coordination-system as you please.

Beside the coordinates you also need the width of your square and the width and height if you use rectangles as tiles.

And in the end there is one last thing to consider before you draw your grid: When to draw what?

If you draw a simple 2D background you can skip this part, but imagine you want to draw a 2D Top-Down-View Level with some bushes. Some of them are in front of the player-character and some are behind. It would look stupid if your character stands on top of a bush that he is supposed to be behind. So you not only have to change the Grid-Drawing code a little, but you also have to place the drawing code of the character and enemies in that same code.

Here is my solution:

//X and Y being the dimensions of the Grid.

for (int y = 0; y < Y; y++)

{

//If the Y-Coordinate of a dynamic object (like the player) is smaller than y*height,

// and it has not been drawn yet, draw it here.

for (int x = 0; x < X; x++)

{

//Look up if there is a tile on that position

//Look if the tile actually exists in your Content/Asset Dictionary

//If yes, draw it at Position(x*width, y*height), else continue

}

//Alternative to drawing the dynamic object before you draw the current row,

//you can also check here if they are behind the next row ((y+1)*height) and draw them.

}

//If a object was not drawn in the loops and is on screen, draw it here.

Now that was the easy kind of a tile map, now lets make the more complicated kind.

Hexagonal Grid:

Unlike squares and rectangles, hexagons can have many different shapes and arrangements, but for the simple cause of lack of time I will only cover the normal uniform hexagons.

Basically I use the same Grids like orthogonal grids, but I shift every second row (or column).

What you can also see is that the placement of the tile depend on the orientation of the tiles. I will not go into too much detail here, as it is rather simple geometrics in the end, but I will say that you always should know how you Coordination system looks like and what you width and height is.

//In Code:

The code is similar to the orthogonal code, so I will leave some parts out so you can clearly see what makes the hexagonal code unique. Note: This code is the left grid arrangement of the picture above.

for (int y = 0; y < Y; y++)

{

for (int x = 0; x < X; x++)

{

//Every second column we have to shift the tile H/2 down.

//The other arrangement is the same, you only have to switch the multiplication of

//the width with the multiplication of the height (but not the values themself ;) )

if (x % 2 = 0)

Position(width * 0.75 * x, (height / 2) + (height * y));

else

Position(width * 0.75 * x, -(height * y));

}

}

Tile Map

Every game needs some kind of background or even environment, in the case of 2D games that would make 2D pictures. In the early days it was rather hard to draw and save pictures big enough to fill the entire screen, not to mention that have one for every Level in a game. There were and are games with hundreds and thousand of such screens after all.

So quite early someone had the brilliant idea to not use one big picture for the whole screen, but little ones that would repeat them self in patterns using a 2D map. The Tile Maps where born.

Even if modern PCs and Consoles have enough power to store and handle pictures for the whole screen without much ado, Tile Maps a still quite popular with game designers, as they present a way to quickly, without many resources, create huge and individual Levels.

That is also why I use it.

For a Tile Map you need two things:

First a Content, or how I call them Assets (Content was already taken in the code).

Second you need the Map, a 2D Array of information (later called Grid).

Assets:

The Assets are the little tiles that will be drawn on screen.

Not always are the Assets stored in single pictures also can they have other special behaviour like offsets. Also can it happen that when you use a Editor (like me) that you may have one source picture for one and the same tile, but the Editor and the Game treat them differently.

For that it is quite useful to have a separate entity that holds those informations. Its is also good that this information is separately to the picture as you can safe it separately using less memory, and you can vary easier (without gaining much memory usage).

At the moment this results that I can have one source picture for the whole Level (Asset1) and multiple others that point to this picture as their Source, but showing only one part of it (Asset2 to 5). Then again I can have another Asset (6) that points at 5, but draws it with a offset.

Using this you can have a Stone centred on the grid at one place and then have the same Stone off the grid in a different place.

Creating such variations in a Tile Map is important as you don't necessary want the player to know that you use a Tile Map.

// In Code:

One Dictionary of 2DTextures that holds the actual pictures, and one that holds the AssetInformation. The two are linked together using unique Tags as Keys, like the file name of the picture.

Grid:

This is the same Grid about which I've posted earlier.

It is basically a 2D Array of information. Theoretically can a Gird for a Tile Map hold any kind of information, from Numbers up to Text. All it needs is a clear way to point out what tile it wants to draw where.

I use a 2D Text Array (string) for this, as I plan not only to store graphic information in it, but also scripting. Like the Dictionaries of the Assets, I use here the Tag of the Asset to point out what to draw.

//In Code:

There are two ways to implement a 2D array in a modern programming language: First a multidimensional Array (string[x,y]) and second a jagged Array (string[x][y], or a Array of Arrays).

Because it is easier to handle in some code (safeing, copying, changing dimension, etc) I decided to go with the jagged array approach.

So this is how a Tile Map is build up, in the next post I will write how to draw them, as this can be its own little problem.

Work, work, work, ...

Did not forget to update the blog, only had to build a stone wall with my bare hands. Will update by time.