January 24, 2012 10 Responses

ND2D – Advanced Camera with Parallax Layers

For my current game I’ve built an advanced camera to use with the ND2D framework.
It supports

  • parallax layers depending on their z (depth) settings
  • map / level boundaries constraints
  • shaking with a given strength and duration
  • focusing a target
  • zooming out based on the  target’s speed

To see a small demo please click the image below. Use the arrow keys to control the ship: cursor left / right for turning and cursor up/down for speed.
Press the “Shake” button to shake the screen.

The usage is quite simple…
You have to define at least one “Parallax Layer” which acts as a container for your (game-) objects. For each parallax layer you can define its z (depth) value – the greater the valuie the further away and the smaller the object will be rendered.  The amount of the perspective distortion is controlled by the focalLength property in the AdvancedCamera2D class.

First create some parallax layer instances, where the first paramter is the z value:

1
2
3
4
5
6
7

_layer1 = new ParallaxLayer(0); //cloud layer
_layer2 = new ParallaxLayer(70); //ship layer
_layer3 = new ParallaxLayer(120); // tiles layer
_layer4 = new ParallaxLayer(250); // cloud layer
_layer5 = new ParallaxLayer(600); // tiles layer
_layer6 = new ParallaxLayer(1000); // tiles layer
_layer7 = new ParallaxLayer(2000); // planet layer
_layer1 = new ParallaxLayer(0); //cloud layer
_layer2 = new ParallaxLayer(70); //ship layer
_layer3 = new ParallaxLayer(120); // tiles layer
_layer4 = new ParallaxLayer(250); // cloud layer
_layer5 = new ParallaxLayer(600); // tiles layer
_layer6 = new ParallaxLayer(1000); // tiles layer
_layer7 = new ParallaxLayer(2000); // planet layer

Than add those layers to the display list. Important to note is, that you must add them in the right order – from far away to near.

1
2
3
4
5
6
7

addChild(_layer7);
addChild(_layer6);
addChild(_layer5);
addChild(_layer4);
addChild(_layer3);
addChild(_layer2);
addChild(_layer1);
addChild(_layer7);
addChild(_layer6);
addChild(_layer5);
addChild(_layer4);
addChild(_layer3);
addChild(_layer2);
addChild(_layer1);

Create the advanced camera and also attach the layers to it

1
2
3
4
5
6
7
8

_cam = new AdvancedCamera2D(camera);
_cam.addLayer(_layer1);
_cam.addLayer(_layer2);
_cam.addLayer(_layer3);
_cam.addLayer(_layer4);
_cam.addLayer(_layer5);
_cam.addLayer(_layer6);
_cam.addLayer(_layer7);
_cam = new AdvancedCamera2D(camera);
_cam.addLayer(_layer1);
_cam.addLayer(_layer2);
_cam.addLayer(_layer3);
_cam.addLayer(_layer4);
_cam.addLayer(_layer5);
_cam.addLayer(_layer6);
_cam.addLayer(_layer7);

Now you can set the camera’s target. This could be any Node2D based object

1

_cam.setTarget(aTarget);
_cam.setTarget(aTarget);

You can also define the world’s / level’s bounds. The bounds property is a Rectangle which works this way:

1

_cam.bounds = new Rectangle( -2048, -2048, 2048, 2048 );
_cam.bounds = new Rectangle( -2048, -2048, 2048, 2048 );

In this case the x dimension goes from -2048 tp 2048 and the y dimension from -2048 to 2048 pixels. The camera will automatically stop scrolling if the boundaries are exceeded.

With the movementZoomFactor you can adjust how much the camera shall zoom out depending on the target’s current speed.

1

_cam.movementZoomFactor = 40;
_cam.movementZoomFactor = 40;

I hope you find this useful? If you have any comments or suggestions please feel free to post them…

Sources // AdvancedCamera2D Sample Project

Filed in Flash

10 Responses

  1. Ella on February 3, 2012, 9:04 am

    Artciels like this make life so much simpler.

  2. edi on February 9, 2012, 8:31 am

    hi..
    nice work..
    did u check it on mobile??

  3. Pingback:ND2D – Advanced Camera with Parallax Layers – BJÖRN ACKER | Interactive Media | Everything about Flash | Scoop.it

  4. bma on February 9, 2012, 9:51 am Author

    Hi
    nope – didn’t have the chance yet to test on mobile, but I guess that it will run pretty smooth, once Stage3D for mobile is out…

  5. YopSolo on February 9, 2012, 8:33 pm

    I like the zoom effect :)
    Really smooth (on my 4 years old desktop)

  6. sHTiF on February 10, 2012, 5:32 pm

    This will definitely not run smoothly accross all mobile devices as the fillrate will simply kill it on low end devices like HTC Desire or Nexus One

  7. Joel Brown on February 25, 2012, 3:17 am

    Hi

    sorry to ask stupid questions on an example that seems really great. I downloaded your source code because I would like to see how this works. I have FB4.5 and am fairly new to this dev environment… making the switch from regular flash IDE.

    How do you get those files into flash builder and get them to work… everything I have tried doesn’t seem to work… pointing the build path to the existing project didn’t do it, and I can’t seem to import the zip like I have for other projects.

    I was also looking over some of the source code and don’t have com.bit101.components.PushButton or Style. Could you tell me where I could find those?

    Your example looked fantastic and I would like to experiment with it, your assistance is greatly appreciated.

    Cheers
    Joel

  8. bma on February 25, 2012, 9:14 pm Author

    Hi Joel,

    in Flash Builder you could try to create a new project by selecting “File/New/ActionScript Project” and in the upcoming panel uncheck “Use default location” and browse to the extracted ZIP archive’s location, then click “Next”. In the “Library Path” tab click “Add SWC…” and select “minimal_comps_0_9_9.swc” found in the “lib” folder (this is the bit101 components library). Now select the “Source path” tab, click “Add Folder…” and browse to the “nulldesign-nd2d-450e888/src” folder. Click “Finish”.
    Last thing to do is to right-click the file “Main.as” in the “src” folder and select “Set as Default Application”.

    or just download and install “FlashDevelop” (http://flashdevelop.org/) – actually, I’ve built the example with FD…

    Hope this helps,
    Bjoern

  9. Pingback:ND2d-Advanced Camera with Parallax Layers « AS3开源大全