Parallax Backgrounds

hi
i have this background group


, i want each part to move like Parallax , or background repeating
i got these images as sprite , i just cannot find a way to move these sprites :\

1 Like


Hello, how are you, I don’t know if this will help you now or someone else who needs it.

I was looking for the same thing until I got the way by placing the image in a material and working with “diffuseMapOffset”, I attached the example image that I used and what I did in a simple way

GameManager.prototype.setBackground = function (s) {

    var renders = this.background.findComponents('render');
    var meshInstances = renders[0].meshInstances;
    var m = this.background.render.material.clone();
    this.parallax += (s * this.speedBackground);
    m.diffuseMapOffset.set(1, this.parallax);
    m.update();
    for (i = 0; i < meshInstances.length; ++i) {
        var mesh = meshInstances[i];
        mesh.material = m;
    }
};

There may be a better way, but that’s how I solved it.
I leave you the playcanvas documentation, where you can get more information
https://developer.playcanvas.com/en/tutorials/animated-textures/

2 Likes