Scrolling Renderer


Scrolling Renderer

The Scrolling Renderer is used to scroll an image at a certain speed in either the X (Left/Right), or Y (top/bottom) direction. This renderer is also used to repeat an image like a repetable background. Just set the scroll speed to 0.


This renderer is the same as a regular Sprite Renderer just with additional logic to repeat and scroll and image.

Repeating Image


Currently the Scrolling Renderer is not able to use a sprite sheet but you can use an individual tileable image. By changing the size of the renderer the image will be automatically tiled or repeated to fill the area.

**Note: It is very important to make the tileable image a power of 2 size (i.e. 16x16, 32x32, etc...) for a seamless repeating image.

The added benefit to using this renderer of course is to add automatic scrolling if you want to scroll the repeating image.

Code Sample

var entity : IEntity = PBE.allocateEntity();

//Used with a Basic 2D Scene
//var scrollingRenderer : ScrollingBitmapRenderer = new ScrollingBitmapRenderer();
//Used with a Starling G2D Scene
var scrollingRenderer : ScrollingBitmapRendererG2D = new ScrollingBitmapRendererG2D();
scrollingRenderer.fileName = "assets/image.png";
scrollingRenderer.scrollSpeed = new Point(100, 0); //Scroll left to right

//All scrolling renderer images need to be a size that is a power of 2 both in width & height
//This toggle will make sure that the image is a size that is a power of 2
//If the original image is not it will add enough whitespace to fill the missing area
scrollingRenderer.autoCorrectImageSize = true;

//Add to a scene to be displayed.
scrollingRenderer.scene = scene;
entity.addComponent(scrollingRenderer, "ScrollingBackground");

Follow Us For Updates