Hello! So I’ve decided to kick off a new series of blog posts wherein I detail some of the specific challenges and solutions in my various projects. The goal here is to provide a resource for my fellow students, as well as provide a record of things I have already done that I can call upon later. For the sake of sanity, I am usually going to assume the reader knows some basic fundamentals of programming and game design.
Today I’m going to talk about building the systems in Project ONE, a side scrolling shooter game in development under the direction of Benjamin Tovar.
The first thing I want to talk about, is building the environment. For most budding game developers, the simplest way to build a level is to make the camera follow the player as they move through it. 2D games, however, offer some fascinating opportunities to be clever and drastically reduce the weight of the game – a great asset when you are designing for mobile devices!
For purposes of this blog entry, let’s start from scratch and go over the techniques I used. If you would like to follow along, set up a new Unity project and build something like this:
NOTES: That’s a Quad, not a Plane. The reason for this is that a Plane tesselates into a whole lot more triangles, and we’re trying to be as lightweight as possible here. The texture I applied is just something I grabbed from Google Image Search – just about anything will do.
The next thing we need is a script that will make the backdrop panel scroll its texture, creating the illusion that everything in front of it is moving. The fine folks over at Unity have provided us with exactly the function we need to accomplish this ( it’s almost like they make games or something… ) with the Material.SetTextureOffset method. But first, we’re going to want two variables – one which we will use to modulate the speed at which the texture scrolls, and another that can stop the texture from scrolling at all for use in fancy scene transitions and the like.
Here is what such a script might look like if it was written in Boo:
Let’s break this down a bit, shall we?
Update() is a function that Unity calls on every single object in the game, every single frame. This makes this function useful for “looping” code in such a way that it slows down if the game is lagging, or speeds up if it’s run on a more powerful computer, or otherwise does it’s thing over a period of time. The other thing we need in order to make good use of it, though, is the Time class Unity provides for us. In this case, we’re using Time.time, which provides us with the amount of time, in seconds, since the game started. We use this clock, multiplied by our variable for scrolling speed, to determine just how far the texture should be offset. If we used any other property of Time, such as deltaTime, we wouldn’t get the smooth scrolling motion we’re after.
Next, assuming that our boolean is true, we call our SetTextureOffset method by it’s full path, renderer.material.SetTextureOffset (’cause it won’t work otherwise) and give it the variables it asks for. The first thing it wants to know is, which texture is it supposed to manipulate? Unity provides us some convenient shortcuts here as well: ‘_MainTex’ will always refer to an objects primary texture. Then it needs a Vector2 value that represents the offset of the texture. We want the texture to scroll from the right side of the screen, towards the left, so we place our offset into a Vector2 in the first position, and we’re done. We could put it in a different place if we wanted a different result, but I’ll cover that in another entry, for a different game.
But also somewhat plain looking. To really make the magic happen, duplicate the Backdrop Quad and move one of them closer to the camera, and place a texture on it that features transparency. For this example, I’ve put together one that is three layers deep. Set the backdrop closest to the camera to the fastest scrolling speed, and decrease it the farther back you go from the camera until the one that is farthest away is scrolling the slowest. You’ll have to play with this a bit to make it look right, depending on the exact textures you are using. In general, you want the step amount (the difference between panels that are adjacent to one another) to be the same for all of the backdrop panels to create a smooth illusion of distance. In this example, I used scrolling speeds of 0.5, 0.3, and 0.1, and these work pretty well with the quick textures I slapped together.
Here is a link to a version that runs in the Web Player, so you can see the effect in action. Simply download the zip file and unzip everything into a folder together, then open the html page. It will offer to install the Web Player for you if you don’t already have it.
That’s gonna be it for this one. Next time I do a Dev Diary about Project ONE, I will go into the nitty gritty of spawning enemies in this sort of environment, including the games fancy randomization features. Good luck, and have fun! 🙂