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/
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!