Sign in to follow this  
  • entries
  • comments
  • views

Parallax Sprites. This Time with Bitmaps

Sign in to follow this  


Screenshot of Parallax Sprite experiment

Click the image to check this one out. I spent an hour or so modifying my code to place bitmaps in the experiment, and another hour figuring out how to make simple pixel-ish images in The Gimp. The problem with The Gimp is that I automatically expect it will be less user-friendly than it is, just based on reputation. It is actually quite intuitive, from a developer/nerd perspective.

Anyway, I have made the engine a little more robust. Now instead of drawing each ParallaxSprite to the display container one at a time, I cycle through the ParallaxSprites and attach the bottom-most layer from each, then cycle through again and add the next layer, and again and so on until all layers of each sprite have been drawn. This allows for "meshing" of objects which overlap, instead of one being drawn completely on top of another. Since the position of each of the display objects is controlled by its respective class, I can still move everything around without any performance loss over rendering each ParallaxSprite individually.

I suppose the next step is having the ground scroll along with everything else. I would like to have this work as a real movement through space, and not simply wrapping the tiles/sprites, as is currently happening with the trees.

Anywho, here are the updated classes:
package {
import flash.display.*;
public class World extends Sprite {
private var sprites:Array = [];
private var totalSprites:Number = 30;
private var maxHeight:Number = 0;
public var centerX:Number;
public var centerY:Number;

private var dX:Number;
private var dY:Number;
private var dOff:Number;
private var velocity:Number;
private var theta:Number;

private var Ground:Class;

public function World() {

private function init(e:Event):void {
if(!stage) return;
centerX = stage.stageWidth/2;
centerY = stage.stageHeight/2;

var g:Bitmap = new Ground();
var b:BitmapData = new BitmapData(g.width,g.height);

for(var i:Number = 0;i sprites = new ParallaxSprite(
sprites.cacheAsBitmap = true;
maxHeight = Math.max(sprites.layers,maxHeight);

for(i = 0;i for(var j:Number = 0;j if(sprites[j].spriteLayers) {
sprites[j].spriteLayers.cacheAsBitmap = true;

private function moveSprites(e:Event):void {
dX = centerX - mouseX;
dY = centerY - mouseY;
theta = Math.atan2(dY,dX);
dOff = Math.sqrt(dX*dX+dY*dY);
velocity = dOff/50;
for(var i:Number = 0;i sprites.x += Math.cos(theta)*velocity;
sprites.y += Math.sin(theta)*velocity;
if(sprites.x < -30) sprites.x = stage.stageWidth + 30;
else if(sprites.x > stage.stageWidth+30) sprites.x = -30;
if(sprites.y < -30) sprites.y = stage.stageHeight + 30;
else if(sprites.y > stage.stageHeight+30) sprites.y = -30;
package {
import flash.display.*

public class ParallaxSprite extends Sprite {
public var layers:Number;
private var offsetRatio:Number = 1.05;
private var sizeOffset:Number = 1;
private var maxCenterDistance:Number;
private var world:World;
private var dX:Number = 0;
private var dY:Number = 0;
private var d:Number = 0;
private var r:Number = 0;
public var spriteLayers:Array = new Array();

private var Tree_0:Class;
private var Tree_1:Class;
private var Tree_2:Class;
private var Tree_3:Class;

public function ParallaxSprite($world:World,$x:Number,$y:Number) {
world = $world;
x = $x;
y = $y;
maxCenterDistance = Math.min(world.centerX,world.centerY)/2

private function init():void {
layers = 23;
var rW:Number = Math.round(Math.random()*25)+25;
var rH:Number = Math.round(Math.random()*30)+20;
var rC:Number = Math.round(Math.random()*10)*0x111111;
for(var i:Number=0;i<20;i++) {
spriteLayers = new Tree_0();
spriteLayers[20] = new Tree_1();
spriteLayers[21] = new Tree_2();
spriteLayers[22] = new Tree_3();
for(i=0;i<22;i++) {
spriteLayers.x = x-50;
spriteLayers.y = x-50;

public function detectCenter():void {
dX = x - world.centerX;
dY = y - world.centerY;
d = Math.sqrt(dX*dX+dY*dY);
var o:Number = d/maxCenterDistance*offsetRatio;
r = Math.atan2(dY,dX);
for(var i:Number = 0;i spriteLayers.x = x+i*o*Math.cos(r)-50;
spriteLayers.y = y+i*o*Math.sin(r)-50;

Sign in to follow this  


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now