Flame Scrolling Sprite
We are naturally visually attracted to the movement animation. Scroll-triggered animation draws user attention to specific sections of a web page, highlighting the key areas that you want your audience to view and the order in which you want those areas to be viewed. This is really an effective way to your design. In scroll animation, how to add a simple scrolling sprite to make it easy to repeat the same image over time? This flame Package can help you. It adds a simple scrolling sprite to allow for easy repetition of the same image over time.
Basically, this is a Flame package that makes it easy to render sprites that scroll and repeat forever given a velocity.
This can be used to create things like a scrolling background or even a scene background, as shown in the particular example below:
This package can be used by using the plain class
ScrollingSprite or the
ScrollingSpriteComponent, they do example the same thing, but the later can be used together with Flame component system.
In the detailed step below, you can find all the parameters that the classes receive:
//// Resource path of the sprite @required String spritePath, //// X and Y coordinate do be used to map the sprite double spriteX = 0.0, double spriteY = 0.0, //// Width and height of the mapped sprite double spriteWidth, double spriteHeight, //// Destination width and height of the sprite, in case you want to scale its original size double spriteDestWidth, double spriteDestHeight, //// Width and height of the total area where the sprites will scroll double width, double height, //// Vertical and horizontal speed of the scrolling speed in pixels per second this.verticalSpeed = 0.0, this.horizontalSpeed = 0.0, //// Since the sprites are scrolling on an endless manner, the sprite can be draw outside of its //// area, by default, the package already clips the area to prevent it from showing, use this flag to change //// this behaviour this.clipToDimensions = true,
When using the
ScrollingSpriteComponent the same paramenters above apply to it, and additionally, you can inform the
y where the area will place placed.
For a live example of this running, please refer to the example folder.