Using the Starling Parallax Layer Extension with Adobe Gaming SDK
The Adobe Gaming SDK is part of the Adobe Creative Cloud. It provides developers with the sdks and frameworks to begin developing Flash Stage3D games. The frameworks included are Starling, Feathers UI, and Away 3D. In this example we are going to take a sample Starling Mobile project and copy it over to build a simple parallax background example, which is used in many games.
First thing to do is to grab the Adobe Gaming SDK from the Adobe Creative Cloud. Once the Adobe Gaming SDK is installed go ahead and navigate to the installation folder. You should see a directory structure like this:
The sample projects under Samples -> Starling work as self contained projects, meaning they are a good template project to copy and start coding from. This is what we want to do.
- Go ahead and copy the StarlingTemplateMobile folder and paste into your development area, any other location is fine just remember where you put it.
- Rename the folder to StarlingParallaxLayer
- Open up Flash Builder 4.7, and import the project. File -> Import -> Flash Builder -> Flash Builder Projects, then select Project folder and browse to the newly renamed project folder.
- The project will show up with the old project name of StarlingTemplateMobile in the Package Explorer. Select the project, then right click and select rename. Rename it to StarlingParallaxLayer.
- Open up the StarlingParallaxLayer project’s src folder.
- Download the Starling ParallaxLayer extension from github directly or download as a zip.
- Unzip the code and navigate to the src folder. Copy the starling folder (which includes the starling/extensions/ParallaxLayer.as file) into the StarlingParallaxLayer project’s src folder.
Now we are ready to make some changes to the project and test out some parallax scrolling. Open up the src/Game.as file, and replace the code with the following code:
{
import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Event;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
import starling.extensions.ParallaxLayer;
public class Game extends Sprite
{
private var mBackground:Image;
private var mLogo:Image;
private var layer1:ParallaxLayer;
private var layer2:ParallaxLayer;
public function Game()
{
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage(event:Event):void
{
init();
}
private function init():void
{
// we create the game with a fixed stage size -- only the viewPort is variable.
stage.stageWidth = Constants.STAGE_WIDTH;
stage.stageHeight = Constants.STAGE_HEIGHT;
// the contentScaleFactor is calculated from stage size and viewport size
Assets.contentScaleFactor = Starling.current.contentScaleFactor;
// prepare assets
Assets.prepareSounds();
Assets.loadBitmapFonts();
layer1 = new ParallaxLayer(Assets.getTexture("Background"), 4, 0.5, ParallaxLayer.BACKWARDS, ParallaxLayer.X_AXIS, true);
layer2 = new ParallaxLayer(Assets.getAtlasTexture("logo"), 4, 1, ParallaxLayer.BACKWARDS, ParallaxLayer.X_AXIS, false);
layer2.y = 180;
addChild(layer1);
addChild(layer2);
addEventListener(TouchEvent.TOUCH, onTouched);
}
private function onTouched(event:TouchEvent):void
{
if (event.getTouch(this, TouchPhase.BEGAN))
{
Assets.getSound("Click").play();
layer2.start(4, 1);
}
if (event.getTouch(this, TouchPhase.ENDED))
{
layer2.stop();
}
}
}
}
That is all the code, go ahead and run the application. It should show the background blue texture automatically scrolling from right to the left. Let’s take a closer look at the code that makes this work.
4, 0.5, ParallaxLayer.BACKWARDS, ParallaxLayer.X_AXIS, true);
layer2 = new ParallaxLayer(Assets.getAtlasTexture("logo"),
4, 1, ParallaxLayer.BACKWARDS, ParallaxLayer.X_AXIS, false);
These lines create a new ParallaxLayer with a Texture, base speed, speed factor, scrolling direction (forward or backwards), what axis to scroll, and if the scrolling automatically starts.
The ParallaxLayer takes the Texture and creates Starling image instances and handles all the logic to tile multiple images for smooth parallax scrolling. It also provides you with start and stop methods to manually control the scrolling; this is shown in the touch event handler in the Game.as code above.
As you can see it’s really easy with the help of ParallaxLayer Starling extension class to add parallax images to your game.
Pingback: Using the Starling Parallax Layer Extension with Adobe Gaming SDK | Renaun Erickson | eaflash