PushButton Tutorial Series – Parallax Background

Google+ Pinterest LinkedIn Tumblr +

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

RETURN TO THE TUTORIAL INDEX

Parallax scrolling refers to the phenomenon where objects in the distance appear to move more slowly than those in the foreground. Moving or sliding distant objects more slowly than those up close is used in 2D games to create the illusion of depth. In Pushbutton this effect is easy to fake by scrolling a large background image by some fraction of the players movement.

First we need to create an entity that will display an image. This follows the usual process of creating a spatial and sprite rendering component, which is the same process we have used for every visual game entity. There are two things to point out in this code. The first is that we have specified the SpriteRenderComponent layerIndex value to be 0. All of the other entities have also specified a SpriteRenderComponent layerIndex, but they use a value of 1. This ensures that the background image is drawn before the other entities, and therefore behind them. The second is that we have had to set the SimpleSpatialComponent size value to something very large. This stops the image from being culled, forcing it to always be drawn.

EntityFactory.as

static public function createBackground(name:String, scene:String):IEntity
{
 var entity:IEntity = allocateEntity();                                 
 entity.initialize(name);                                             
 
 var spatial:SimpleSpatialComponent = new SimpleSpatialComponent();
 spatial.objectMask = new ObjectType("Renderable");
 spatial.size = new Point(Number.MAX_VALUE, Number.MAX_VALUE);
       
 spatial.spatialManager = NameManager.instance.lookupComponentByName(
  scene, SCENE_BOX2DMANAGER_COMPONENT) as Box2DManagerComponent;    
  
 entity.addComponent(spatial, "Spatial");                
    
 var Render:SpriteRenderComponent = new SpriteRenderComponent();                                                                            
 Render.positionReference = new PropertyReference("@Spatial.position");
 Render.loadFromImage = "../media/background.png";
 Render.layerIndex = 0;
 entity.addComponent( Render, "Render" );  
 
 var playerRender:IDrawable2D = NameManager.instance.lookupComponentByName(
  "Player", "Render") as IDrawable2D;    

The new BackgroundImageController controller is used to move the background image in response to movement from another entity, the player in this case.

 var bgController:BackgroundImageController = new BackgroundImageController();
 bgController.TrackObject = playerRender; 
 bgController.BGImagePositionReference = new PropertyReference("@Spatial.position");
 bgController.MovementScale = 0.3;
 entity.addComponent(bgController, "BackgroundController");
    
 return entity;
}

The logic behind the BackgroundImageController controller is quite simple. As the player moves, so too does the image that displays the background. The amount of movement is determined by the MovementScale property. Setting MovementScale to something smaller than one will make the background scroll at a slower rate, giving it the appearance of being off in the distance.

BackgroundImageController.as

public class BackgroundImageController extends TickedComponent
{
 public var TrackObject:IDrawable2D = null;
 public var BGImagePositionReference:PropertyReference = null;
 public var MovementScale:Number = 1;
 
 public function BackgroundImageController()
 {
  super();
 }
 
 public override function onTick(tickRate:Number):void
 {
  super.onTick(tickRate);
  
  var playerPosition:Point = TrackObject.renderPosition;
  
  var bgPosition:Point = new Point(
   (playerPosition.x * MovementScale), 
   (playerPosition.y * MovementScale));
   
  owner.setProperty(BGImagePositionReference, bgPosition);   
 }
 
}

Share.

About Author

Leave A Reply