Recent Posts

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

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:

1

flixel tpl-n"MyParallaxTest"

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:

1

2

<!--Incaseyou want tousethe addons package-->

<haxelib name="flixel-addons"/>

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

Create an FlxSprite (or anything derived from FlxObject) and set its
scrollFactor value

OR create a
FlxBackdrop and specify the X/Y scroll rate, and whether it repeats on the X-plane and/or Y-plane.

Scroll the camera!

Parallax with [scrollFactor]

The code below demonstrates the above parallax with only
scrollFactor :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

classMenuStateextendsFlxState

{

override publicfunctioncreate():Void

{

super.create();

// Create image that scrolls at x2 speed based on the camera's scroll

varbg:FlxSprite=newFlxSprite(0,0);

bg.loadGraphic("assets/images/highwayz - Copy.jpg");

bg.scrollFactor.x=2;

// Create image that scrolls at x3 speed based on the camera's scroll

varfg:FlxSprite=newFlxSprite(0,0);

fg.loadGraphic("assets/images/highwayz_floor.jpg");

fg.scrollFactor.x=3;

// move the floor lower so we can see the background.

fg.y=300;

// Add the backdrops in order.

add(bg);

add(fg);

}

override publicfunctionupdate():Void

{

super.update();

// Test input to scroll the camera. FlxBackdrop will

// handle the parallax scrolling automatically.

if(FlxG.keys.pressed.LEFT)FlxG.camera.scroll.add(-5,0);

if(FlxG.keys.pressed.RIGHT)FlxG.camera.scroll.add(5,0);

}

override publicfunctiondestroy():Void

{

super.destroy();

}

}

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

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: