Flame package adding a simple scrolling sprite to make it easy to repeat the same image over time

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 x and y where the area will place placed.

For a live example of this running, please refer to the example folder.

GitHub

https://github.com/flame-engine/flame_scrolling_sprite