Thursday, 24 September 2015

Parallax Scrolling

I am now a proud owner of a shiny new GameMaker Studio PROFESSIONAL, thanks to Humble Bundle. You can get it here if you're like, really quick (it finishes in 20 minutes, I just checked).

Anyway, one of the differences between the Professional version and the free one is that there is no limit on the number of objects you can have in your game. To be honest, I hadn't realised that was a limitation until recently, but luckily that was just before the Humble Bundle went up. Lucky timing..

Well, now that there's no object limit, I had no excuses left to not get on with things. Here's a pic of things so far:

What it looks like so far

See those mountains in the distance? I wanted to add some parallax scrolling to them, just to give things a bit of depth, otherwise it was all looking a bit flat. I was expecting it to be a complete technical bastard of a task, but it was actually fairly simple. Here's how you do it..

First off, you'll want an image of some mountains or whatever. Here's the one I'm using:

Mountainy things.

Yeah, I know they look a bit crappy, they're a work in progress (honest). I actually made them half that size to start with, then realised they were too small so I simply resized the image in Photoshop. I think the fact that this blurs the image slightly works quite well, giving a sort of depth-of-field effect.

Anyway, you'll probably want this image to be a .png so that you can make the top part transparent so the sky will show through. The other thing to watch out for is to make sure that the mountains look ok when tiled horizontally.

Now you have the image you want, you'll need to bring it into GameMaker as a background. I originally went to try doing something with objects, but backgrounds are the way to go! You just create a new background, load the image you want and that's it. The next step is to go to your Room in the left menu and then select the Backgrounds tab. Here's what mine looks like:

A little background information ahahahaha! (sorry)

Basically, you just select one of the bits that say "background 0", "background 1" etc, then load the background image you want using the button below the list (where mine says "bgParallaxMountain"). Make a note of the background number you're using, you'll need that later. Just below that, you can see two boxes for "Hor. Speed" and "Vert. Speed". These are for automatic scrolling. For example, in a side scrolling shooter (think R-Type), you'd want the background to automatically scroll right-to-left. My game is a little different - the view is attached to the player object, which isn't necessarily going left-to-right or bottom-to-top. For this reason, the scrolling has to be tied to the player object and not be automatic.

Also, because my background is in a fixed position vertically (it always has to be on ground level), I've put the Y position at 1885 (higher numbers are lower down the screen).

I have an object in my room that I've called oGlobals. This object has no sprite, but I use it to store values and bits of code so that it's all in one place. At the moment, I've put the parallax code in oGlobal's step event, although I'm thinking about making a new object specifically for environment generation stuff and keeping oGlobal for things that I may need to tweak later, like movement values or amount of health. Anyway, like I said, I've put the code in the oGlobal step event for now, and this is what I've put:

//Parallax Code
background_x[0] = view_xview[0] * -0.05;  // Mountains Left/Right

The first part, background_x[0] refers to the background you want to move - this should be the same as the one you noted earlier. The _x part means we're going ot be referring to the movement along the x axis (left-right). The next part about views, I haven't played around with but I'm guessing it refers to the different views you can set up in the Room. For my purposes, the default is fine, but if you're using different views then you may well need to change this number. Lastly, I have the movement speed at -0.05.This means that as my player moves in one direction, the mountains move a little in the opposite direction (although limited to the x axis still). If I put 0.05 instead of -0.05, then the mountains would move in the same direction.

You can have multiple levels of parallax so I could, for example, put some trees in between the mountains and the foreground. If that was the case, I'd want the trees to move slightly faster than the mountains - the further away an object, the slower it should seem to move.

One thing I need to check up on is, when you have multiple layers of parallax going on, how does GameMaker know what order to draw things? You don't want the distant mountains to be drawn over your trees.. I'm guessing it's set in the numerical order of the backgrounds in the Room > Backgrounds tab, but I have to look into it. I'll add it to this post when I find out.

But for now, it's time for a cuppa.

No comments:

Post a Comment