Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 164

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 167

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 170

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 173

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 176

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 178

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 180

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 202

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 206

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 224

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 225

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 227

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 321

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 321

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 321

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php on line 321

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/admin/class.options.metapanel.php on line 56

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/admin/class.options.metapanel.php on line 56

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/admin/class.options.metapanel.php on line 56

Warning: Creating default object from empty value in /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/admin/class.options.metapanel.php on line 49

Warning: Cannot modify header information - headers already sent by (output started at /home/wholehogitude/wholehog-games.com/devblog/wp-content/themes/platform/includes/class.layout.php:164) in /home/wholehogitude/wholehog-games.com/devblog/wp-includes/feed-rss2.php on line 8
The Complete Swine http://www.wholehog-games.com/devblog Whole Hog Games News and Developer Blog Thu, 17 Jul 2014 16:47:17 +0000 en-US hourly 1 https://wordpress.org/?v=4.8 Full Bore v1.1 is here: Gamepad & Save Slot update! http://www.wholehog-games.com/devblog/2013/10/02/full-bore-v1-1-is-here-gamepad-save-slot-update/ http://www.wholehog-games.com/devblog/2013/10/02/full-bore-v1-1-is-here-gamepad-save-slot-update/#comments Thu, 03 Oct 2013 00:06:00 +0000 http://www.wholehog-games.com/devblog/?p=227 The latest version of Full Bore is now available on the Humble Library and Desura.
This new version adds some often-requested features and a few difficulty tweaks:

All versions of the game now support XBOX gamepads.
Try using the triggers to climb up blocks! There’s now a title screen that lets you manage [...]]]>
The latest version of Full Bore is now available on the Humble Library and Desura.
This new version adds some often-requested features and a few difficulty tweaks:

  • All versions of the game now support XBOX gamepads.
    Try using the triggers to climb up blocks!
  • There’s now a title screen that lets you manage multiple saved games.
  • Hildi or Frederick is now chilling in Ingress with a clue to help you along
  • You now have more time on the second puzzle in Nowhere to Go But Down
  • You can now climb stairs twice as fast
  • It is no longer easy to accidentally dismiss dialog boxes
  • The moles in the office have calmed down a bit
]]>
http://www.wholehog-games.com/devblog/2013/10/02/full-bore-v1-1-is-here-gamepad-save-slot-update/feed/ 3
Announcing Full Bore: The First Dig http://www.wholehog-games.com/devblog/2013/09/04/announcing-full-bore-the-first-dig/ http://www.wholehog-games.com/devblog/2013/09/04/announcing-full-bore-the-first-dig/#comments Wed, 04 Sep 2013 20:36:33 +0000 http://www.wholehog-games.com/devblog/?p=211 Digging boar enthusiasts rejoice! After two long years in the mines, Whole Hog Games is proud to announce Full Bore: The First Dig. This early release, clocking in at over 8 hours of puzzle adventure is, in fact, the finished first half of the complete game!

Even better, all Full Bore pre-order customers, [...]]]> Digging boar enthusiasts rejoice! After two long years in the mines, Whole Hog Games is proud to announce Full Bore: The First Dig. This early release, clocking in at over 8 hours of puzzle adventure is, in fact, the finished first half of the complete game!

the-first-dig

Even better, all Full Bore pre-order customers, current and future, will be able to download The First Dig starting September 10th, 2013.

Full Bore has come a long way since last year’s Kickstarter demo.  The First Dig takes place in the same region, but has a new story, new characters, many new areas and puzzles.  Even more, there’s tons of extra polish— more animations, enhanced lighting, and actual talking boars!  Even if you’ve seen the old demo in action or played it yourself, The First Dig will feel like a totally new experience.

The three of us here at Whole Hog are really proud of this release. It’s not all the content we want to deliver, and that’s why we’re going right back to work on second half, but The First Dig is a complete, polished experience.  We hope you enjoy it.

-Casey, Finn, and Jake
Whole Hog Games

For More Information:
Pre-orders and more at the Full Bore website: http://gofullbore.com
Full Bore on Youtube: http://www.youtube.com/wholehoggames
The First Dig FAQ: http://gofullbore.com/firstdig.php
Press Resources: http://www.wholehog-games.com/press/sheet.php?p=full_bore

]]> http://www.wholehog-games.com/devblog/2013/09/04/announcing-full-bore-the-first-dig/feed/ 1
Lighting a 2D Game http://www.wholehog-games.com/devblog/2013/06/07/lighting-in-a-2d-game/ http://www.wholehog-games.com/devblog/2013/06/07/lighting-in-a-2d-game/#comments Sat, 08 Jun 2013 00:37:17 +0000 http://www.wholehog-games.com/devblog/?p=161 Early in Full Bore’s development, we thought that we had painted ourselves in to a corner visually. We had a look that we liked, but the clean easy-to-read block visuals that we favored while making an arcade game quickly became boring to look at when transplanted into open world. Locations were in danger of looking [...]]]> Early in Full Bore’s development, we thought that we had painted ourselves in to a corner visually. We had a look that we liked, but the clean easy-to-read block visuals that we favored while making an arcade game quickly became boring to look at when transplanted into open world. Locations were in danger of looking indistinguishable from one another because we were limited in the kinds of visuals we could produce. Arrangements of blocks can only go so far to create a memorable world when the player can only see 300 at time.  But we liked our distinct look; we needed something new to help define our areas, and that something was lighting.

About this Article

This write-up is meant a conceptual tutorial- I will go over everything that needs to be in place to do lighting in Full Bore but I will not be getting into specific implementation details.  My hope is that anyone reading this who is familiar enough with their tools (be it C++ or Unity or what-have-you) will be able apply some or all of what I’ve written here to their own games.  For reference, Full Bore was written from scratch in C++ and has both Direct3D and OpenGL back-ends, but a tool or engine that gives you decent control over your rendering pipeline should be able accommodate this technique.  Of course, I have no experience using higher-level tools like Unity so please do as the internet does and tell me how wrong I am in the comments!

Overview

First, here’s a quick look at what it being rendered behind the scenes in Full Bore:

 

Diffuse

Normal

Self-Illumination

The previous three images (click to embiggen) combined with a list of lights and their properties, are used to produce a final image:

Final Lit Image

Final Lit Image

For those of you familiar with graphics programming this is pretty much a bog-standard deferred shading implementation like you would expect to see in a modern FPS game. For those of you just getting started with graphics programming this is reasonably radical departure from the more textbook method, so there are few things that need to come together for this particular technique to work.  First off…

Your Art Workload Just Doubled (Kinda)

In a 3D game,  normal maps are used to add extra detail to models without the expense of adding in extra geometry. In a 2D game, Normal maps similarly let us pretend that the scenes we’re making have depth so that we can light things in a way that reveals extra surface detail.  In Full Bore just about every sprite in the game has a normal map.

Height map, resulting normal map, normal map’s red, green and blue channels

It is possible to make all of the normal maps you need by making a greyscale height map and then using the NVIDIA Texture Tools for Photoshop or this excellent GIMP plugin to compute the resulting normal map.  These plugins all blur the source height map at some point so small per-pixel details are usually obliterated or obscured, but if you’re working on a higher resolution game like, say, Escape Goat 2, computing normal maps from height maps could very well be all you need.

But what if you are working on a low-resolution game?  Full Bore’s art is particularly low-res, so many normal maps are computed and then hand-tweaked or completely hand-drawn, and in order to do that we had to develop a good understanding of what, exactly, is encoded in a normal map.

Understanding Normal Maps

Mathematically, a normal map encodes a 3D vector that describes the direction that pixel is facing into the red, green and blue color channels.  However, looking at a normal map you may notice the image shows some human-comprehensible surface detail.  If you separate the color channels of a normal map out this becomes even more apparent.  From a purely visual point of view, a normal map is the combination of a shape lit from the right or left by a red light, from above or below by a green light, and from head-on by a blue
light. The numbers are still a bit important, so, to rephrase:

  • The Red channel indicates the horizontal angle of the surface.  127 is neutral, and the extreme values are facing right or left (which extreme is which direction is up to the programmer; in Full Bore 255 is facing right)
  • The Green channel indicates the horizontal angle of the surface.  127 is neutral, and the extreme values are facing up or down (in Full Bore 255 is facing up)
  • The Blue channel is a bit different.  It indicates to what degree the surface is pointing towards the viewer.  255 is pointing straight at the viewer, while 127 is pointing perpendicular to the viewer, and 0 is pointing directly away from the viewer.

For sanity’s sake, be sure familiarize yourself with how to turn editing and visibility on and off for color channels in your image editing program.

Building Normal Maps in Parts

When computing normal maps from height maps, high-detail and low-detail areas will look better when computed with different filters.

normal-combined

Height Map, 4-Sample, Sobel 5×5

In this case it helps to split the height maps into layers and combine them post-normal-filter.

normal-partwise

Sobel 5×5, 4-sample, 4-sample, combined

Lastly it is possible to merge normal maps in an image editing program with mostly correct results.  This lets you do things like add detailed noise to a smooth normal map, or merge different shapes.

normal-mixed

An indented ring normal map combined with a column normal map

In order to do this, you have to do the following:

  1. Make 2 copies of the normal map you are merging in.  
  2. In one, replace the whole blue channel with 50% grey, in the other, replace the red and green channels with pure white.
  3. Set the red-green layer’s blend effect to “Overlay”, and set the blue layer’s to “Multiply”
  4. Tweak levels as needed

By now  should have enough to get you started making your own normal maps, so now…

You Need To Render Things Differently

Well, you don’t need to, but directly rendering sprites with normal mapped lighting severely limits the number of lights you can have on the screen.  To get around this limitation, Full Bore uses deferred shading, a technique more often seen in 3D games but also one perfectly suited to what we’re trying to do here.  When doing deferred shading, rendering happens in two stages.

First you write all the information you need to run your light shader into one or more frame buffers, this can be accomplished efficiently by using multiple render targets and appropriately written shaders (how exactly you do that depends on what library or tool you’re using.)  In Full Bore, every texture has a corresponding normal and luminance texture which lines up exactly with the original color texture, so when a given sprite is drawn out, it’s trivial to draw the other data to the appropriate frame buffer by doing another texture lookup.  The set of three screenshots near the beginning of the article show what Full Bore’s 3 frame buffers look like.

Second, to actually light up the game, you use your frame buffers as textures to draw your lights.   Oh, did I not tell you?

Surprise, Lights Are Geometry Now

Light Geometry for a Spotlight

Your light shader can only be executed by drawing some geometry to the screen.  There are a lot of different ways that you can go about doing this but there is some common ground.

  1. The light geometry needs to represent the shape of the light you’re drawing, and have appropriate UV coordinates.  In Full Bore we  compute the UV coordinates in the shader by diving the vertex position by the screen size.  This cuts down on GPU bandwidth usage.
  2. Each light needs to, at least, know where the light is being emitted from.   Embedding this in the geometry data is wasteful, so you will need to send this, along with color/brightness/etc in a shader uniform or as part of your geometry instance data.
  3. Even in a 2D game, each light will have a “height” above the screen.  This parameter is useful because it behaves like you would expect it to: low lights predominantly light up edges, and high lights light things more evenly.
  4. Though the cost of drawing lights is low, they will be your biggest performance killer.  Make sure the geometry is an appropriate shape and only as big as the area that will be illuminated, and, naturally, cull any lights that aren’t visible.

Arranging lights in an aesthetically pleasing manner is a subject for another article, but it’s safe to say there is a lot of interesting stuff to play with once you have a working lighting system.

And that’s the basics: you need to make a lot of normal maps, and you should probably use deferred shading for rendering your lighting.  Have at it!

Plea for Feedback

I’ve tried to keep this as non-platform-specific as I can, and I am sure that has created some blank spots in my explanations.  Please feel free to ask me questions in the comments and I will update the article as needed.  If there is any interest I can write about Direct3D  or OpenGL implementation details, just be sure to let me know!

]]>
http://www.wholehog-games.com/devblog/2013/06/07/lighting-in-a-2d-game/feed/ 12
Contrast in Game Design http://www.wholehog-games.com/devblog/2012/12/23/contrast-in-game-design/ http://www.wholehog-games.com/devblog/2012/12/23/contrast-in-game-design/#comments Sun, 23 Dec 2012 23:23:24 +0000 http://www.wholehog-games.com/devblog/?p=115 One of the primary tools of visual design is value. “Contrast is the meaning of life” was a constant refrain of John Clapp, one of my Illustration professors at San Jose State. Contrast is any difference between one thing and another. Any difference. Humans are good at noticing differences, but our brains get confused when [...]]]> One of the primary tools of visual design is value. “Contrast is the meaning of life” was a constant refrain of John Clapp, one of my Illustration professors at San Jose State. Contrast is any difference between one thing and another. Any difference. Humans are good at noticing differences, but our brains get confused when things are not very different. This can happen to different colors that are the same value, and when the same size object is repeated too much. In light of this, the environments in Full Bore would seem to be the perfect storm of low contrast – made up of hundreds of the same sized blocks that represent dirt and stone. A recipe for low contrast and lack of interest. We used several techniques to make the contrast between elements serve clarity and visual appeal to the player.

A good illustration of contrast is known as the windmill principle.

The blades of the windmill demonstrate the different kinds of contrast: light on light, dark on light and dark on dark.

Rembrandt_van_Rijn_-_The_Mill_-_Google_Art_Project

Thanks, Rembrandt!

Firstly, the blocks that are in the foreground and can be interacted with have to be separated from those in the background that serve as decoration only. We added a darkening overlay to the background tiles, which gave them a clear difference in value range, even though the same tiles were being used in the background as the foreground. Next, the environments are made up of different tiles with specific behaviors. Different block types are drawn in front of or behind one another depending on type, while overlays cause groups of blocks to read as a mass, and overlap blocks behind them in the draw order. This prevents visual tangents, which cause a representation of space to look flat.

Tangents

(The shape on the left implies a spatial relationship more clearly than the one on the right, where all the lines tangent each other.)

One of my first attempts at creating a tile set for full bore resulted in too much contrast within each tile individually, but not enough contrast between different tile types. For example, the stone tile had very dark darks and very light lights, causing large formations of them on screen to “jangle” visually. The team and I knew those tiles weren’t working, but since this was my first pixel art tileset, I hadn’t quite integrated it in my mind with what I knew about design. Casey got Mimi, a graphic designer friend of his, to take a stab at making some tiles, since I was focused on animating the main character at the time. The tiles she came back with were much more iconic and restrained than the ones I had made, and I was able to realize my error. Our current tile set embodies (for the most part) a hierarchy of function related to how much contrast is contained within the tile. Tiles that are unbreakable and unmovable have the least contrast within themselves, being very close to a flat color. Tiles that are moveable and perform some function, such as the laser block, have a wider range of contrast so that the player’s attention is drawn to it. This is of course one of the areas our game can improve on.

Old:

jangly tiles 1

New:

New Tiles

Even with this hierarchy of value, a full screen of blocks can be quite visually overwhelming. Some of the tools we used to break up the tiles on screen were paths through the environment from puzzle to puzzle and decorations, which give the player’s eye something to look at that is different than the environment blocks. Varying the size of the path helps as well, from small, one-tile high tunnels to large caves, providing additional visual interest. The puzzles that Jake has designed often take up unique spaces due to their function and what blocks are used, creating interesting places for the player to navigate.

light-mockup

Something was still missing, though, and that something was lighting. Casey had been planning on implementing a lighting system, time permitting, and when he was able to put it in place, we suddenly had a lot more options when it came to visually designing our environments. For one, Full Bore being a game that takes place in caves and tunnels underground, it needs some darkness. A person’s eye will always go to the area of largest contrast first, and so, with varying size and brightness of light, we can highlight what is important in a level, and let what is less important drop into shadow. Light is the vehicle of mood and drama, both of which are very important to storytelling (which is what I love most in games). We are still trying to use the lighting system to its fullest, including making normal maps for all the tiles, objects and characters so that they will pick up the light to convey 3d form in our 2d world.

A31IelxCUAAsXxH.png large

Full Bore is still a work in progress, and now that our programming and game play systems are in place, we want to focus on making the game look and feel the best that it can.  Some of the things we still want to work on are environmental storytelling, further refining block designs to show their function, and designing the lighting to better direct the player’s attention to puzzles and paths. Our Kickstarter has been doing really well, and we are all excited to be able to make the game better with everyone’s support.

]]>
http://www.wholehog-games.com/devblog/2012/12/23/contrast-in-game-design/feed/ 5