Sunday Experiment - Messing with the Visuals

I'm going to be traveling on Sunday, so I'm going to count this post as my Sunday Experiment of the week.  As When Pigs Fly has grown, the visual quality has not grown along with it.  I like the low-poly style, but there are a bunch of areas where the graphics could be improved (mostly lighting related).  This morning I tried several different things to quickly improve the look of the game.

Depth Perception Issues

One thing that has plagued flight sims forever is a sense of depth.  It can be very difficult to gauge your altitude as you approach for landing.  The easiest way to accurately judge the approach is to watch the shadow of your aircraft.  The problem is that, depending on the light direction and camera position, the shadow isn't always visible.  The problem is exacerbated in When Pigs Fly by the low poly terrain, with no detail or texture on the ground there.

I thought shading the edges of the polygons in the terrain might help.  With a visible wireframe of the ground, the player could gauge altitude by the shape of the triangles.  I wasn't sure how it would look though, so I didn't want to spend a ton of time writing an edge detection or wireframe shader.  But since the terrain is procedurally generated and vertex colored, I was able to cheat and get the same effect with just six lines of code.  I changed the terrain generation code to make the uvs of each triangle of the mesh to be (0,0), (1,0), and (0,1).  I then modified the shader to mix a texture with the uv colors.  With a simple black outline of a triangle for a texture, here was the result.

This turned out great for how little effort it required, and the edge lines do help with a sense of depth on landing, but I just don't like the way it looks.  I'll still have to come up with another solution to the depth problem.

Color Correction

I've been fighting with the lighting in When Pigs Fly from the beginning.  I never found a way to have everything lit like I wanted while maintaining the warmth of the colors.  Now that Unity 5 has made all engine features free, I can use the color correction post effect.  There's still some tweaking to do with the color curves, but its already way better.

Before:

After:

Shading and Shadows

Unity's shadow system doesn't work particularly well on the planes in When Pigs Fly.  With several objects so close together and sometimes overlapping, the shadows generally look horrible.  So this morning I disabled shadows on the planes themselves (they still cast shadows on other objects).  In my opinion, no shadows looks way better than bad shadows.

I also experimented with toon shading.  The first experiments were great, and I was about ready to move on to the next task, but I had been looking at stationary objects.  When I took a plane up and saw the toon shading in motion, there was an immediate problem.  The low-poly look results in some pretty big faces in the model, and when they're moving a lot the lighting tends to "snap" from one light level to another.  Here's what I mean.

After playing with the lighting ramp for quite a while, I think I've mostly solved this problem.  The gradients from one "step" to the next have to be gradual, and its a pretty fine balance between light "snapping" and not really being toon shaded.

The last thing I did was add the crease shading post effect.  It helps objects stand out, which is important because many objects in When Pigs Fly share the same colors.  It also just looks cool.

Conclusion

I think I made some great improvements in just a couple hours time.  The color correction has made the most drastic change.  There is still a lot to improve though.  The pig model needs to be redone pretty badly.  It also really bothers me to see distant trees without shadows.  I have some ideas on how to fix that last one, but I'll leave those to another post.

5 responses
Might I ask, do any of these updates every go live on gamejolt?
They will. I used to do small, frequent updates, but there is an unfortunate bug in the interaction of gamejolt and the Unity webplayer that causes a new save file to be created with each update. People were losing their saved planes, so I've switched to doing bigger updates less fequently.
s
Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is fantastic, let alone the content!
Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your web site is fantastic, let alone the content!