Monday, March 23, 2015

Punk Jam Game Jam: DEEp Demos with just a hint of gameplay

I really like If you haven't taken the time to check out this Indie Game storefront, just take a second: there are some really cool and new game experiences in there, and a great deal of the games are free.  The site was introduced to me a while back by my friends at Ultra Runaway Games, and if you are looking for a site to host your games or a cool storefront that is well maintained but doesn't have crazy hurdles to get your content on there: definitely check them out. also hosts Game Jams. This is where Punk Jam comes in to play. A counter-culture game jam. One of the rules was explicitly to make games that: "have 'anti-design' or things that go against the grain of 'what counts as a video game'." Perfect! I am immediately invested in this.

Let me explain why...

To do so: let's talk about dungeons. I've decided to develop my dungeon explorer from a simple mechanics demo in to a full game. Up front I'll just say that it is called DEEp, It borrows some ideas from all over including: Zelda, Narnia, The Longest Journey, and choose your own adventure books to name a few. I'll go more in depth about DEEp in future posts, but let me tell you about it's prologue. DEEp starts out in the rain. You just missed the bus, and the next one isn't coming for an hour. Enter the Punk Jam... I am going to make the opening scene to the game for the game jam.

Work in Progress. ;)
I'm calling it BUS_WAIT. What do you do in BUS_WAIT? Why, wait for the bus for an hour of course! There's a bit more to it than that, but there's the general nugget of goodness. There will be little things in the environment that you can explore, and the character will talk to himself at times, and maybe a few other things. However, it's mostly this: you wait for the bus, and then the bus comes. The End.

This non-game is a good excuse for me to develop the visual style of the larger game while making one of the more troll-y (trolly?) parts of the larger story. This will also allow me to spend more time working on the story and planning out the rest of them game before jumping all gung-ho in to the DEEp end. Think of BUS_WAIT as the demo for DEEp. It will tie in more to larger game than you may think, and I think you're going to like it.

So that's what I'm working on. How about you? What are you making right now? If you aren't working on anything currently, or if you are working on something but feel like taking a break: why not try out a game jam? As of today: there are still twenty days left in the Punk Jam. More than enough time to make something grungy. Or you can check out the larger list of game jams on Or maybe you could start your own!

If you want to share, I want to know. I'm always down to geek out about game design and art.

Monday, March 16, 2015

Dungeon Exploration Exploration

It is no secret that I am a huge fan of Zelda games. The very first game I tried to make on my own in Unity was meant to be a send up to my love of the aesthetic of the old Top-Down Zelda games. Alas, the scope of my first attempt was far too large for me to complete even at this point in time. So I've been thinking about making smaller games. Besotted was a smaller game, and I still had the help of a whole team.

I want to make a game on my own, but I have to pull back scope a lot. Since I cant seem to let the Zelda aesthetic go: I will make a little game that revolves around some of those mechanics. I still want to have a story, but I don't think having an overworld is really essential. I think I can come up with a really strong game using a HUB type of home base like I've seen other games use; kind of like in Braid or The End of Time in Chrono Trigger.

I've been thinking about this seriously for a few days now, and this is what I've come up with.

I need a character, a few types of enemies, dungeons, bosses, at least one support character, menus, music, SFX, and a plot. For this type of game: saving is also important. I'll read up on how to do that immediately.

What I currently have working:

  • Camera Movement
  • Character Movement
  • Character Basic Attack
  • A Basic Enemy
  • A Basic Boss
  • A Working Door/Teleporter System
  • A Basic Key System
  • Basic Health
  • Some rooms
All of these things are in place, and far from complete. But it's enough to build a simple dungeon out of. You can play where I am at as of today at this link:

There's a lot of work to be done still, but I think I'm just going to keep moving forward.

Thursday, March 05, 2015

A Little Bit About Painting Normals

NOTE: This blog post assumes that you have some basic level of understanding about 3D modeling. Here thar be Jargon.

I was recently contacted about some experiences I had painting Normal maps for small tiles. Since I've been working on a project that this would be useful for anyway I decided to do a write-up on my blog to help explain how to paint Normals from scratch.

The internet is rife with tutorials about baking normals in 3DSMax, Maya, and Blender. There are also a large number of tutorials about generating Normals using xNormal, CrazyBump, and the nVidia Filter. There's a whole pile of information about creating Normal maps in these ways, but there are a whole bunch of artists that don't actually know how to make Normals from scratch.

All of those programs are great at making Normal maps for textures that are large, but what if you want to make something really small? Like what if your project uses tileable textures that are 32x32 or 64x64 each? Most of these programs bake in antialiasing, noise, and/or blur that make anything this small just a pile of noisy, blurry garbage.

When working small, it is much easier to just paint the Normals by hand.

So what is a Normal map? Normal maps are an optical illusion that makes a simple 3D mesh appear more complex than it really is. Basically: Normal maps add extra lighting information onto a model without adding more geometry. It becomes incredibly useful in a number of applications such as adding the shapes of small objects or little details onto a simple polygonal object. A Normal map can also be used to add a layer of visual noise in order to help hide seams on a mirrored or tiled object that could become obvious using just a Diffuse texture.

A Normal map is like a complex Bump map. Bump maps are typically greyscale images that add lighting depth on a single axis of an object. While very useful in situations where a camera is viewing stationary objects from fixed positions, Bump maps fail on complex objects or objects that need to receive lighting information from multiple directions. Where Bump maps are useful on a single axis; Normal maps utilize 3 dimensions of lighting information. The X, Y, and Z axes are broken in to the Red, Green, and Blue channels of the texture file.

That's a lot of words, but let me give an example.

2D Sprite, Diffuse, and Normal
If you were going to make a 2D game with no realtime lighting, the sprite of a floor tile on the left of the image above would be just fine. However for a game that needs real lighting information, a Diffuse texture with a Normal map is more handy. Since these were made as 16x16 tiles, hand painting the normals is really easy.

Red, Green, and Blue Color Channels
If you start with a Diffuse texture as a guide, you can paint per channel in Photoshop. (Gimp allows you to draw directly in individual channels without pre-existing color information, but Photoshop doesn't seem to like me doing that. Maybe I'm missing something... I don't know.) Imagine the tile has a light shining across the axes individually. Red is light from the top. Green is light coming from the left. Blue is light shining directly down, but it fades the deeper you go.

Clockwise from Top Left: 2d Sprite, Diffuse only, Diffuse with Normals from CrazyBump, Diffuse with painted Normals
The image above shows a quick render I did in Blender. The top left has completely baked in lighting and cannot adjust to new lighting scenarios. The lower left Is done with painted normals: so if the light moves, so do the shadows and highlights. Now this was a quick pass I did, and there is plenty of room for adjustments to be made, but you get the point I hope.

In the lower right of the image I included normals that were generated using Crazy Bump. I wanted to give an example of what happens when you try to generate normals at such a low resolution. This could be worked around by making the small 16x16 tile larger, and then shrinking the  large Normal that CrazyBump renders, but that's almost as much work as just making the Normal map yourself.

Above is a handy little cheat sheet I made to help people get started with painting Normals While the top square contains an assortment of Normal information I use regularly, the five squares below are sorted by Z depth. Try to stay away from anything at 100% depth, because it will appear black in unless under direct lighting.

I hope this little write-up on painting Normal information is useful to someone. If I left anything unclear or if this just reads like the rambling of a mad man: let me know in the comments.


I forgot to mention a very important thing about Normals. The light direction is not universal between applications. What could appear correct in Maya or Blender could actually be reversed in whatever game engine or other output is being used. Please double check your Normals before submitting a finished version of anything.

I had started to animate the lighting for my example, when I realized that the Green Channel is actually flipped from the way I was using it in Blender. Some software has methods of flipping this automatically, but I just did it myself in Photoshop.
The new normal looked like this:

A simple but important oversight.

I also decided to make a specular map just for fun. Those are pretty easy to make, since all you need to worry about is greyscale on a single axis. That ended up like this:

I just used the magic wand tool in Photoshop to select the different areas I wanted and made the necessary tonal adjustments. Then I threw a noise pass over it for some added specular variation because heck... It's supposed to be tile!

I then uploaded a video for you to have a better feeling of what Normals do for this kind of thing. Enjoy!