Project “Haunted Light” 2014-02-27 Stone Walls

It’s Thursday and yet another blog post! Project “Haunted Light” (former name “Bloody Badgers”) is still going strong and we in group 5 are getting ready for our next milestone, which is the BETA version of the game. One completed artifact of my many other started ones I had for this week’s sprint is the stone wall tile set, which I will talk about on this post. Jonna, our group’s very talented lead artist, is the one behind the game’s only two wall tile sets (dirt and brick). To see how they look and how she went about making them please refer to her blog at the link below; http://moonphanter.wordpress.com/2014/02/13/shoot-em-up-project-14-02-13/

Other than the dirt and brick walls, we also wanted stone walls for our 19^th century inspired horror game set in a cellar environment. Why stone walls? Well simply because if you google 19^th century dark cellar, most of the hits will be of stacked stone walls.

There are many ways to go about making wall tile sets for games. For example, Jonna created her own walls in Photoshop from scratch and I made a tiling texture of an existing photo I found on the internet. The reason why I decided to do it the other way is that stones are very organic and I didn’t believe that with my rookie skills in Photoshop I would accomplish the same feel. And also because Jonna’s way of doing it seemed too complicated but I know she would assure you otherwise.

Anyways, after I did some research I found some good tutorials on how to do this and off I went on a search to find my desired stone wall photo to work with.

Below you’ll see the picture I decided to work on.

The first thing I did was to resize the photo to our desired size of 400×400 pixels. As you can see in the photo there are many textures on the stone. If I kept those textures for my stone tiles they would look ridiculous against the flat colors and textures of our game. So to tone them down I clicked Filter>Oil paint in Photoshop and added that filter with the following settings;

Stylization set to 0,1

Cleanliness set to 10

Scale set to 0,1

Bristle Detail set to 10

Angular Direction set to 360

Shine set to 1

Now the photo doesn’t look as texturized and looks much smoother, just what I was going for.

After doing that it was time to make this photo “tileable”. To do so I went to Filter>Other>Offset. Since the image I’m using is 400×400 pixels I’m going to offset it to +200 pixels horisontal and -200 pixels vertical. If you are using a different size you offset it to half its width and half its height.

Here you’ll see that the stones don’t match up. And to fix this I went to clone stamp and alt+click a spot on the photo and then clicking somewhere else I want the information to be cloned to. When using clone stamps on texturized photos make sure you have a texturized brush so that the clone stamp dont leave too sharp edges behind. For this I used the second brush found in the “natrual brush” brush preset.

Here’s the finished tile texture

The sharp edges are gone and this texture is now completely “tileable”.

To make sure your texture is indeed “tileble” you can check it by chosing Edit > Define Pattern. Then creating a new Photoshop file with the desired size you want and add a layer to it with any background color on it you like, which color doesn’t matter. At the bottom left of the layers palette, click on the “Add a Layer Style” button (a.k.a. fx) and choose “Pattern Overlay”. Then in the pattern thumbnail picture choose your created pattern and watch it being tiled seamlessly..

Of course you can see that the same pattern has been tiled because of the repetetivness of the stones, but at least there are no sharp edges. Now all I have to do to make it fit into our game is to add a dark shadowy overlay and then it’s done.

Here are some examples

There will be some alterations to the other exsisting walls that Jonna made to make them all match and have a cohesive look. Other than that I’m pleased with how my walls turned out and I’m so happy for what learned and that it will definitely be something for me to continue on using in the future. Sorry for the long blog post, but I really wanted to share with you this knowledge. Hope it helps!