In this article, I will show how you can create a PBE ScrollingBitmapRenderer component.
See example of this tutorial in action
Download the AS3 code from this article (rar)
With this PBE render component (that extends the PBE BitmapRenderer component) you will be able to render an image of a specific with and height that will be filled with a bitmap you provide.
This render component exposes 2 attributes for scrolling purposes:
scroll:Point
With this point you can specify the scrolling offset for the scrolling bitmap, where scroll.x will be the horizontal scrolling value and the scroll.y will be the verical scrolling value.
scrollSpeed:Point
With this point you can specify the scrolling speed ( pixels/second ) for the scrolling bitmap, where scrollSpeed.x will be the horizontal scrolling speed and scrollSpeed.y will be the vertical scrolling speed.
The scrolling speed will automaticly adjust the scrolling offset.
By using multiple ScrollingBitmapRenderer components in different scene render layers with different scrolling speeds, you will even be able to create a nice paralax scrolling effect. This will be demonstrated in the provided sample.
The ScrollingBitmapRenderer Component Class
First we create a component class that extends the PBE BitmapRender class. By extending the BitmapRenderer things like drawing and positioning are already handled by the PushButton Engine. We get a bitmapData attribute that we can assign or draw onto that gives us control of what is displayed.
public class ScrollingBitmapRenderer extends BitmapRenderer
{
}
In this component’s constructor we will create and prepare mutilple bitmapData objects. The bitmapData for the scrolling bitmap, the bitmapData for clearing and the bitmapData that will contain all display data and will be used to copy pixels from, onto the scrolling bitmap.
public function ScrollingBitmapRenderer(bitmap:Bitmap, width:int, height:int)
{
// call inherited constructor
super();
// store bitmap that will be used to fill the scrolling bitmap
this.srcBitmap = bitmap;
// create a bitmapdata object for the scrolling bitmap
this.bitmapData = new BitmapData(width,height);
// determine how many times the bitmap has to be drawn horizontal and vertical
// to fill the scrolling bitmap.
// We add an aditional so that we have enough display to scroll in any direction
var cx:int = Math.ceil(width/srcBitmap.width)+1;
var cy:int = Math.ceil(height/srcBitmap.height)+1;
// the scrollrect variable will be used to draw a specific area to the scrolling bitmap
scrollRect = new Rectangle(0,0,width,height);
// create a bitmapData object for clearing purposes
emptyBitmapData = new BitmapData(width,height, true, 0);
// create a bitmapData object that will contain all display info that will
// be used when copying pixels to the scrolling bitmap
scrollBitmapData = new BitmapData(cx*srcBitmap.width, cy*srcBitmap.height, true, 0x000000);
for (var ix:int = 0; ix<cx; ix++)
for (var iy:int = 0; iy<cy; iy++)
{
scrollBitmapData.copyPixels(srcBitmap.bitmapData,srcBitmap.bitmapData.rect, new Point(ix*srcBitmap.width,iy*srcBitmap.height));
}
}
Because the extended BitmapRenderer is in fact a DisplayObjectRenderer that extends the PBE AnimatedComponent we have a onFrame event that we can override and use to adjust the scrolling offset using the scrollSpeed. We can also copyPixel the right display data onto the scrolling bitmap so it will be displayed in the PushButton Game Engine.
public override function onFrame(deltaTime:Number):void
{
// call onFrame of the extended BitmapRenderer
super.onFrame(deltaTime);
// adjust scroll offset using the scrollSpeed
scroll.x += scrollSpeed.x * deltaTime;
scroll.y += scrollSpeed.y * deltaTime;
// determine the right drawing rectangle area of the bitmapData object with all display info
// for the copyPixel command
// determine x offset of rectangle draw area
var dx:int = scroll.x - (Math.floor(scroll.x/srcBitmap.width)*srcBitmap.width);
scrollRect.x = dx;
// determine y offset of rectangle draw area
var dy:int = (scroll.y) - (Math.floor((scroll.y)/srcBitmap.height)*srcBitmap.height);
scrollRect.y = dy;
// lock the bitmapData object so no changes will be displayed until it is unlocked
bitmapData.lock();
// clear the bitmapData using a emptyBitmapData copy
bitmapData.copyPixels(emptyBitmapData, emptyBitmapData.rect, new Point(0,0), null, null, false);
// draw the right area of the bitmapData object with all display info onto the scrolling bitmap
bitmapData.copyPixels(scrollBitmapData, scrollRect, new Point(0,0), null, null, true);
// unlock the bitmapData object so it can be displayed
bitmapData.unlock();
}
Using the ScrollingBitmapRenderer Component in a sample
To create a scrolling bitmap we just allocate a PBE Entity and add a ScrollingBitmaspRenderer component to it.
// Allocate an entity for a scrolling bitmap
var bm:IEntity = PBE.allocateEntity();
// Register the entity with PBE
bm.initialize("bm_front");
// Create a bitmap render component to display our animation
var bmRender:ScrollingBitmapRenderer = new ScrollingBitmapRenderer(logo.image,PBE.scene.sceneView.width,PBE.scene.sceneView.height);
// assign the scene so this animatied sprite will we drawn.
bmRender.scene = PBE.scene;
// position this bitmap so that it will fill the entire PBE scene
bmRender.x = -1*(PBE.scene.sceneView.width/2);
bmRender.y = -1*(PBE.scene.sceneView.height/2);
// set the layer of this renderer so it will render on top
bmRender.layerIndex = 10;
// set the scroll speed of this renderer
bmRender.scrollSpeed.x = 100;
See example of this tutorial in action
Download the AS3 code from this article (rar)
