Game Design Tips #16 – [Unity + C#] Linear Interpolation

It’s been an awfully long time since my last post – blame coursework! I have a few weeks to get a couple of posts in before I have more coursework and then exams, so enjoy me while I’m here.

If you’ve coded at all with Unity, you’ve probably noticed its API has a lot of methods called ‘lerp’. Mathf.Lerp(), Vector3.Lerp(), Color.Lerp(); all of these are very helpful methods. But what exactly do they do, and how should we be using them properly? First of all, I’m gonna go ahead and show you how they’re meant to be used, then I’m gonna break them horribly to show you cheap ways of doing cool stuff.

How to use Lerp without being hacky

‘Linear Interpolation’ is a lot of syllables to get your head around, so first of all, let me explain what it means. Let’s say we have a thing. We want the thing to change into another thing at a constant (linear) rate. This is what linear interpolation does – it takes a vector, colour, float, you name it, and changes it into a new one.

tip-16_img01

This is the lerp method for Vector3. We pass in startPos, endPos (both Vector3s) and a float parameter; this parameter should be between 0.0 and 1.0. When time = 0.0, the object’s position will be 100% at startPos and 0% at endPos, and when time = 1.0, it will be placed at 0% startPos and 100% endPos. It’s easiest to demonstrate what lerp is doing when talking about Color.Lerp(), so we can use a pretty diagram:

tip-16_img02

Here, the square represents the RGB colour scale found in Unity’s colour picker (well, flipped horizontally). When we use Color.Lerp() in this way, when the third parameter is 0, the method returns a red colour (#ff0000 in hexadecimal RGB colour representation) and when the parameter is 1, we get full white (#ffffff). At any point in between, we blend between the two linearly – at 0.5, we’ll get a pink-ish colour exactly halfway between red and white on the RGB scale (#ff7f7f roughly) and at 0.75, we get something mostly white but retaining a tiny bit of red (about #ffbfbf).

Once we understand what lerp is doing when we pass in certain numbers, we can pull everything together cleanly into a coroutine.

tip-16_img03

We pass in the sprite renderer whose colour will change, the colour it will change to and how long it will take to change. The coroutine automatically works out all of the needed variables for the user, so we don’t need to pass in the start colour. Every frame, we set the new colour of the renderer based on what percentage the current time is between the start and end times. Simple! The final step is to ensure the colour gets set to the end colour exactly, since the loop might have exited only 99.9% through the lerp (it’s never going to be noticeable to the human eye, but I’m doing this for the sake of completeness and to avoid triggering anyone’s OCD).

How to use Lerp badly

Now that we know how to use lerp properly, it’s time to be a terrible person! I’ll show you one popular way of using lerp badly. Assume, for the following example, that the ‘speed’ variable is set to 0.1f.

tip-16_img04

tip-16_img05

I’ve tried to illustrate what happens on each frame here. At the start (on the first time interval), the sprite colour is at its original colour. At the second time interval (0.1s after starting), we have moved 10% from the original position towards the final position. This is easy to understand – we move 10% of the way between full red and full white (assuming the original colour was red and targetCol is white). On the next interval, we have travelled another 10%. However, the starting point was not the original red – it was 10% towards white. This means the current colour is 10% between the last colour and full white; it is now 19% towards full white. This process continues; rather than moving linearly between red and white, the end result is a curve.

The reason this works is because the time parameter we pass in is always a fraction between 0 and 1, but the start colour is always changing too. It’s not exact, but roughly every 0.1s, the colour will change 10%. The numbers above won’t be precise since the lerp is running every frame, not every 0.1s, but hopefully this gives you an idea of how this blasphemy is working behind the scenes. This isn’t how lerp is intended to be used, but it is a cheap way of moving between vectors, colours or floats on a curve. It’s disgustingly amazing – dismazing, if you will.

It’s also worth noting that if the parameter passed to lerp is set to below 0 or above 1, it will snap up or down to those boundary values. Now you should be a certified lerp expert! I’ve put both versions of the linear interpolation script online for you to download if you’re too lazy to copy them (which is only a problem because I’m too lazy to make them look nice without resorting to taking screenshots. My bad).

Advertisements

Epilepsy Simulator 2014 – Post-Competition Tweaks

First of all, the game’s now going to be called Strobe Simulator 2014, because that’s less likely to offend people, something that was overlooked for the competition entry. There’s only a handful of notable changes for this version.

es-04

So, so red. Pretty.

Firstly, the music used is now ‘Trippy Claws and Glitchy Eye’ by AsteroidBlues, a fantastic piece I found on NewgroundsSecondly, there’s lots of screen-shake when the spheres hit you, or when they explode. I managed to get this working thanks to a great library of code called iTween, which is made specifically for Unity and is completely free (which means there’s literally zero reasons for a Unity developer to not grab it).

There’s a working high score saving system, which can hold the ten best scores. Those scores are shown on the start menu, and get automatically saved whenever you die in the game. On top of that, the particle effect that plays when spheres explode can have a variety of colour to them, and the floor will turn the same colour to match the last particle explosion. It’s just a small change, but it’s a little less monotonous that just having red particles every time.

The pause menu’s much improved too (the camera gets frozen in place while paused, and the cursor locking works much more effectively), and when the player gets damaged by a sphere, the screen flashes red for a bit, to emphasize the damage the player has taken.

This will be the last version released for the game, and it’s on to another project!

-Daniel

 

Epilepsy Simulator 2014

After staving off sleep for the past couple days, me and my friend Tom finished (well, sort of) our entry for the Warwick Game Design society’s two-week challenge, which had a theme of ‘reflect’. I showed a screenshot of it in my last post, but it’s come very far since then. It’s now got a name, Epilepsy Simulator 2014, which is only half a joke, because it will probably give you epilepsy (disclaimer: if you have epilepsy and play it, please don’t sue, we’re too nice to go to jail). So without further waffling, here’s a short video!

The basic premise of the game is: you have a laser gun. Black spheres drop down and try to kill you by touching you. Stave off said spheres using the laser gun. The laser will reflect off the walls, and when a sphere crashes into the wall, it has a chance of activating a strobe light on that tile of the wall (this is where the epilepsy starts). The lights get all colourful sometimes, and the more lights going, the easier it is to see the enemy spheres. The laser was ripped straight from one of my old projects, and was one of the easier bits to add.

es-02

It looks so pretty when everything’s lit up like this.

Tom (the other guy who was making this with me. Lives in the same flat as me. Cool guy.) had never used Unity before, so a lot of the programming for this project was me showing him how to do stuff with Unity, but he’s learning very quickly, much quicker than I did in the beginning. He also made the textures for the walls, which are about three times better than what I would’ve come up with, so have a gold star, Tom!

es-01

Dem textures, yo.

The next competition, which started yesterday has a theme of ‘Spooky’, which we’re currently in the process of thinking up ideas for. We didn’t win this first competition (sadface), but this game was so fun to make (because it’s completely bonkers), so here’s to another two weeks of game design. You can download it from the downloads page on IndieDB, my Dropbox, or the Warwick Game Design games page. Also, the music isn’t ours (it’s Savant – Snake Eyes), but we’ll change it if we ever do anything with this project that isn’t purely for fun.

-Daniel