Haunted Light – Automatic Tiling

This week have been a really productive one in terms of features completed. First off, I’ve done some finishing touches on the Pathfinding algorithm which I wrote about in last weeks’ post and all that remains now is to give each enemy it’s AI-logic.

One of Haunted Lights more prominent feature is its re-generation of levels. Because of that particular feature we need to have the level to be updated whenever the generation happens. In case we didn’t update the sprites when the level generates we would get something that look something like the screenshot below.


BEFORE: A screenshot of the wall objects without their tiling capabilities.

But now whenever the the level gets generated , we update each of the changed tiles and its four surrounding neighbors and that process gives a result which look something like this screenshot below instead.


AFTER: A screenshot of the wall objects with the tiling process applied.

When games have tiles which need to connect together it can be accomplished in many different ways. The tiling in Haunted Light consists of one function in the objectMananger-class. This function is conveniently called: “Tile()“. It’s a function which takes one argument of the type integer. This integer defines which object of all those that’s stored in the object manager, that should update the sprite to fit its surrounding.

The tile function process consists of four steps, all starting with a “C”

  • Creating
    The first thing that happens is that all the necessary variables gets created and initiated. A variable of the type integer gets created to store what the next image will be. A GameObject pointer gets assigned the object which have the corresponding ID. And that objects position gets stored in a 2D-vector.
  • Checking
    The next task is Checking all the sides. I accomplished this by creating a bool array which holds four values on for each side ( up, down, left and right). Each index gets its value by calling atPosition(). This function returns whether there’s an object on the position specified by the first argument in the function.
  • Comparing
    When all the surroundings have been checked it’s time for the most important part. The comparing. This is where all the rules are defined. When this sprite will be used, in what scenario etc.
  • Changing
    The final part is having the sprite change into the value which was determined in the previous step. In Haunted Light, I just call on “setFrame() for the sprite of the object and change it to the value of the integer created in the first step.

Below you can see how the code look for the tiling in Haunted Light. In this case the “atPosition” returns an ID if there’s and object at that position. If there’s not then the value: -1 gets returned. Resulting in the boolean value being false.


A screenshot of the tile() function inside Haunted Light.

The first iteration of the function was not optimized at all and for each of the “if” statements it would call the second step four times. I.e for each “at[]”, it would call a separate function called: “checkTile()“. This part was later changed into the second step of the process and a single bool array. The code can be optimized much further but I’d rather focus on more critical parts of the game right now.

Now you know how our tiling works in Haunted Light and next week will be the final cover of the development on Haunted Light, since the deadline is due on the 28th.

~Lead Programmer, Per “Gimmic” Johansson

One thought on “Haunted Light – Automatic Tiling

  1. Hey Per,
    It is nice to see how far you have come with your concept. Mostly since that is the one I am looking forward to the most.

    I also enjoy reading your blog quite a lot, since it is one of the better structured ones. With bullet lists of the different parts, it makes it much easier follow your train of thought and it makes it more apparent what you are doing.

    However it would have been nice to have some highlights on the most essential parts of the code, since it makes it even easier to jump right into the blog post.

    This might just be personal preferences, but it seems like it could be an improvement to your already great blog.
    When you say that your function is “Conveniently” called Tiled(), what do you mean by “conveniently”? Because I do not understand why it is called Tiled, what do you mean by tiled? It does not look tiled to me, since you are actually taking away the tiled appearances. Though that might be what you were looking for?

    Other than that I have nothing else to say, looking forward to see your finished product.

    Best regards,
    André Åström

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s