ScrollImage is display object with a repeated texture. It can contain even 16 layers (ScrollTile), but all must use this same base texture. ScrollImage use shaders to repeat texure so we can use any texture (concret or from atlas). If necessary UV offset and other tranformation like rotation/scale/color can be changed without upload new buffers to GPU. It is a perfect high optimized solution for a scrolling backgrounds or other effects

var scrollBackground:ScrollImage = new ScrollImage ( stage.stageWidth, stage.stageHeight );
			//all tiles should use this same base texture - e.g. atlas
var tile_1:ScrollTile = scrollBackground.addLayer ( new ScrollTile ( atlas.getTexture ('grass'), true )); //second argument is autoCrop, you can also use ScrollTile.crop() if you have borders artefacts.
var tile_2:ScrollTile = scrollBackground.addLayer (  new ScrollTile ( atlas.getTexture ('clouds'), true ));
 
addChild (scrollBackground);
//now we have one ScrollImage with two layers and each separately can by transform
tile_1.offsetX = 30;
tile_1.scaleX = .5;
tile_1.color = 0x400040; //colorize
tile_2.paralax = .5; //set paralax effect for the layer
tile_2.alpha = .5; //change alpha
 
//or you can transform all layers
scrollBackground.tilesOffsetX ++;
scrollBackground.tilesRotation += .01;
 
//pivot point for a layers transformations can be changed, but after adding at least one layer
scrollBackground.tilesPivotX = stage.stageWidth / 2;
scrollBackground.tilesPivotY = stage.stage.stageHeight / 2;
 
//other useful methods
scrollBackground.canvasWidth = 400; //change size of ScrollImage, remember that width,height etc/ works like on standard display object
scrollBackground.canvasHeight = 400;
 
scrollBackground.color = 0x400040;//colorize all layers
scrollBackground.paralax = false; //swith off paralax effects
scrollBackground.paralaxOffset = false; //swith off paralax effects only for offset
scrollBackground.paralaxScale = false; //swith off paralax effects only for scale
scrollBackground.mipMapping = true; //default false - to avoid borders artefacts
scrollBackground.smoothing = TextureSmoothing.TRILINEAR; //default BLINEAR, to use real TRILINEAR you must set mipMapping = true;
 
scrollBackground.freez = true; //avoid any tranformation but object is still rendered as normal
scrollBackground.filter = new FreezFilter (); //replace object by one pre rendered texture without update every frame - very useful for optimization
FreezFilter (scrollBackground.filter).update (); //just update
 
var tile_3:ScrollTile = scrollBackground.getLayerAt (0);
var tile_4:ScrollTile = scrollBackground.addLayerAt ( new ScrollTile ( atlas.getTexture ('clouds'), true ), 1);
scrollBackground.removeLayerAt (0);
scrollBackground.removeAll (true); //remove and dispose all layers, after that you can add layers with another texture
 
tile_1.crop (10, 10); //crop texture clipping inside, very useful if your atlas has no extruded pixels

Examples on GitHub (source) or on http://blog.krecha-games.com/scroll-image-extension-for-starling/

Stress test: http://blog.krecha-games.com/labs/starling_extensions/scroll_image/stresstest/

• 2012/11/23 03:56: First public version

Is there any way you can add support for layer parallax that is a fraction, e.g. 0.5? Currently when the parallax of a layer is a fraction, the layer's offset is not correct when wrapping occurs, e.g the tilesOffsetX jumps from 0 to 640 on a layer that is 640px wide. In the case the scroller would offset the layer with it's 0 position in the center, which is not correct.

Mark Smith: - this no longer works for me with Starling 1.5 or 1.5.1 - it worked great with all previous versions, but since I updated Starling, my ScrollImage instance doesn't display anything. It doesn't give any errors, but it doesn't work either! Anyone else having troubles?

Cywil_pl: @Mark - did you make ScrollImage update too? On git you are find version that should works with 1.5.

Mark: @Cywil_pl - I am using the newest version of ScrollImage. I posted a lot more details in this thread: http://forum.starling-framework.org/topic/starling-15-extensions - it looks like Daniel is suggesting that ScrollImage doesn't support/work with rectangle textures, which would explain why it only works with baseline constrained. I'll try looking into a fix for it, but I'm not quite sure where to start looking! Is that something you could take a look into? Thanks!

Feel free to edit this part of the page!