HaxeFlixel Tutorial – Parallax Scrolling

One great way to enhance the feel of your game is parallax scrolling. I could only find tutorials that briefly mention it, so here’s one dedicated to parallax scrolling. In most cases, parallax is used on horizontal plane, so we’ll proceed with that in mind.

Setup

For placeholder images, let’s use some background images from OpenGameArt, Red Baron Backgrounds by MindChamber. Download the zip, and extract it somewhere.

We’ll be using the following files for this tutorial: highwayz – Copy.jpg and highwayz_floor.jpg. I didn’t include the images here in this tutorial so you would go and download the original files from the link above — to support the author 🙂 Anyway, put those two images into your /assets/images  folder and move on.

Now let’s create a HaxeFlixel template project, as usual:

Now we can proceed with the code-related stuff.

Code Setup

Parallax effect can be easily achieved by setting the scrollFactor  value.

If you want to have parallax backgrounds which are repeated, you will need FlxBackdrop , which is part of the flixel-addons  haxelib. To enable the flixel-addons haxelib, go to your Project.xml file and enable the following code:

To use parallax effect, you only need to do two things:

  1. Create an FlxSprite (or anything derived from FlxObject) and set its scrollFactor  value
  2. OR create a FlxBackdrop  and specify the X/Y scroll rate, and whether it repeats on the X-plane and/or Y-plane.
  3. Scroll the camera!

Parallax with [scrollFactor]

The code below demonstrates the above parallax with only scrollFactor :

And that’s it! Build with lime test neko  and you can test the parallax with the LEFT/RIGHT arrow keys.

licecap-parallax-1

From other tutorials, like this (Dustytome) and this (Haxecoder), we can observe that scrollFactor/parallax technique can be applied to groups of objects or even UI elements, depending on your creativity. 🙂

Parallax with [FlxBackdrop]

If you want repeated backgrounds in your parallax scrolling, just modify the following lines from the above code:

And here’s the result:

licecap-parallax-2

 

There’s nothing much on the API page for FlxBackdrop, so I guess the usage is straight-forward.

Leave a Reply

Your email address will not be published. Required fields are marked *