The gamedev tricks I used to make Coyote

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.

Coyote was originally a fully 2D game, but for the remake 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 a switch from 2D to 3D comes with its own unique set of challenges:

Ready to collide

The first challenge I faced was with raycasting and collision. The player can do things by clicking on invisible yellow cubes (called ‘hotspots’) around the scene . The game figures out what you want to click on by shooting out a line (or ‘ray’) into the scene from the cursor. But colliders in the environment can block those rays.

For instance, the railing upstairs in the saloon blocked most of the walkable area, so I had to turn off the collider. I did this in a few places, including walls, but the side effect was that the ray then passed through, finding hotspots that were way on the other side of the scene! So I had to add my own collision cubes, which looks really funky in the scene view, but did its job very well.

street collision

Do the twist

You’d think that having a fully 3D world enables a lot of cool camera movements, right? I tried some, but because each camera angle is often offset 90 – 180 degrees from the previous angle, 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.

Shine a light on me

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 ambient lighting setting in Unity, which lights up scenes even if there is no lightsource. But, turning that off made the shadows outside look pitch black. So I wrote a simple script that changes the ambient 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 in the second image that 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.

Setting the stage

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. Their shadows looked 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.

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, out of sight of the cameras, is a collection of grey cubes that forms the cellar scene.

cellar outside

I decorated the walls with pieces of roof tile from other buildings, and filled it with objects from the saloon area.

cellar inside

But there was one problem – the actual cellar door is on the back of the saloon. How does the player go from there all the way over to the cellar box?

cellar door

Here’s the solution: when the player clicks on the saloon’s cellar doorway (which is a black cube), they are teleported to the fake cellar, and with an instant camera switch they never notice. Good thing I decided to do a fade between locations, right??

Make it wider

After all that set dressing, it was time to spice up the presentation. 30% of making your game look good is post-processing. The default lighting just isn’t that great. Then again, the most common mistake I see is applying too much post-processing. Don’t go overboard. I keep my stack pretty minimal, with a subtle bloom, vignette, some color grading, and anti-aliasing. But for this project I wanted to go a little further.

Westerns have a specific look. Strong shadows, muted colors, wide camera angles, and a very wide aspect ratio. So I applied extra color grading that desaturated and unified the color tone. I increased the FOV on most of my cameras, and I added black borders to the screen. Initially I wanted to add those just during the cutscenes, something I do in other projects too to signal that I’m taking over control for a moment, but I liked the look so much I applied it during gameplay too.

I can tinker with this stuff all day, but those were the main tricks I used for 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 )

Connecting to %s