The gamedev tricks I used to make Coyote look good

While making the Coyote remake in Unity, I had to make some interesting game design decisions. I figured you might enjoy a behind-the-scenes look at some of these details.

I found the perfect asset package to build the town with instead of redrawing everything. I knew I would have otherwise never made the one-week-deadline of the Remake Jam. But with a switch from 2D to 3D comes it’s own unique set of challenges:

The first challenge I faced was with raycasting and collision. I place invisible yellow cubes (called Hotspots) in the world which the player can click on to trigger an action. The clicks are registered by casting a ray from the mouse to the object. But colliders on the environment can block those clicks.

Since the saloon I used is one big mesh, I couldn’t turn off colliders for the railing on the stairs, for instance, so my rays were blocked and the character couldn’t walk there. But when I turned off the collider on the saloon, you could click on Hotspots that were way on the other side of the level, because the ray wasn’t stopped by anything. So I had to add my own collision cubes, which looks really weird in the scene view, but it has to block everything outside the scene view from all angles.

street collision

You’d think that having a fully 3D world enables a lot of cool camera movements, right? I tried some, but because each location has a distinct camera angle that is often between 90 and 180 degrees rotated from the previous location, there was a lot going on in these transitions. You’d lose your sense of place and feel a bit dizzy. Plus, they took several seconds, which is not fun if you have to travel between locations often. So I decided to stick with the classic fade to black.

I also found that indoor locations were too bright. Outside, bright was good, but inside even rooms without windows looked like they were lit. This had to do with the environmental lighting setting in Unity. But, turning it down made the shadows outside look pitch black. So I wrote a simple script that changes the environmental lighting value when you move from outside to inside (and vice versa). It’s basically a poor man’s eye adaption system. You can see the blue tint is gone and the light from outside is much brighter.

Speaking of the lighting, I have a custom shader for my sprites that enables them to receive light and cast shadows. This looks great in an otherwise 3D environment, but there’s one problem: because a sprite is flat, whether it’s lit or not is pretty much 50/50, there’s not a lot in-between. And with changing camera angles and multiple lights they were often either too dark or too bright.

For those that don’t know, the sprites are flat, but they are automatically rotated to always face the camera. This is called billboarding, and it’s why I can use 2D sprites in a 3D world so seamlessy.

With the help of the Idle Thumbs Slack we figured out that rotating the normals to point up instead of forward gave a much wider range of softer lighting.

Then a visual trick. For the intro where Coyote walks down the street, I wanted the camera to pass by some foreground objects. For this I used the front porches of some buildings that are otherwise not visible from this angle.

foreground

But to get a good framing for this shot, I had to move the buildings halfway onto the street, otherwise either the foreground objects would not be visible or Coyote would be too far away. In the game you don’t notice, but looking at it from another angle reveals that they’re way too close together.

street grey

Which brings me to my next point: since I only needed the porch fences to be visible, I replaced the buildings themselves with grey cubes. The shadows were practically the same anyway. Great optimization! However, the camera angle I settled on for the saloon interior shows one of these cubes through the window. So, just like I change the light when going indoors, I also turn off the grey cube and turn on an actual building model. And funny enough it’s not in the same place as the cube. It looked better a bit further down the road.

Another example of fake geometry is the cellar of the saloon. The asset package with the buildings didn’t include any kind of underground locations, so I had to build it myself. So, behind the row of fake buildings in the street is a collection of grey cubes that houses the cellar scene.

cellar outside

When the player clicks on the saloon’s cellar door, he is instantly teleported to the doorframe of this fake cellar (good thing I decided to do a fade between locations, right??). I decorated the walls with pieces of roof from other buildings, and filled it with objects from the saloon.

cellar inside

And because the cellar is so dark, I could also get away with the fake door at the saloon – I wanted the door to open, but there is just wall behind it, so I placed a black cube the size of the doorframe in it, which makes it seem like it’s an actual door opening.

cellar door

I think those are all the interesting tricks in this one. If you have more questions about how I did something, let me know in the comments!

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s