Infinite scroll effect

[KokoDoko]

In CSS and in javascript canvas, there's an option to create an infinitely repeating pattern. See this link.

I struggled a while to find out how to apply this in Excalibur, I eventually came up with this solution!

export class InfiniteAnimation extends Actor {

    offsetx = 0
    pattern

    constructor(pos) {
        super({ width: 300, height: 300 })
        this.pos = new Vector(10,10)
    }

    onInitialize(engine) {
        const img = Resources.YourImage.data
        const canvas = new Canvas({
            cache: false,
            draw: (ctx) => this.drawPattern(ctx)
        })
        this.pattern = canvas.ctx.createPattern(img, "repeat")
        this.graphics.use(canvas)
    }

    drawPattern(ctx) {
        this.offsetx--
        const matrix = new DOMMatrix().translate(this.offsetx, 0)
        this.pattern.setTransform(matrix)
        ctx.fillStyle = this.pattern
        ctx.fillRect(0, 0, 300, 300)
    }
}

[eonarheim]

Hi @KokoDoko, thanks for sharing!

I definitely want something like this built into Excalibur!

Would you want the ability to specify a tiling on the Sprite/Animation type?

[KokoDoko]

Absolutely!

The perfect solution would be to set tiling to true when creating the sprite. Then you can simply animate the sourceview to get a scrolling effect. Animating the sourceview already works.

this.sprite = new Sprite({
            image: Resources.RepeatingImage,
            repeat: true,
            sourceView: { x: 0, y: 0, width:100, height: 100 },
            origin: { x: 0, y: 0}
})

and in the update

onPreUpdate(engine){
       this.offsetx++
       this.sprite.sourceView.x = this.offsetx
}

[ivasilov]

I just want to add +1 to this feature and give an example: I'm building a shmup and would like to set an image as a background which would tile into infinity. Bonus points for multiple images on top of each other which they all move at different speed for a nice parallax effect.

[eonarheim]

@ivasilov I've created an issue for this! I'm still noodling on what the API should look like

#2744