Responsive Background Cover Tiling Sprite

[Camila S]

Hi, I'm trying to make a responsive game that suits mobile devices and desktops, but I'm not being able to figure out the background.

Here's what I have at the moment:

 

// other stuff ...

function initLevel() {  

    bgBack = createTilingAsset(app.loader.resources["bgBack"].texture, window.innerWidth, window.innerHeight);
    bgMiddle = createTilingAsset(app.loader.resources["bgMiddle"].texture, window.innerWidth, window.innerHeight);
    bgFront = createTilingAsset(app.loader.resources["bgFront"].texture, window.innerWidth, window.innerHeight);                                        
                    
    app.ticker.add(gameLoop);
}

function createTilingAsset(texture, width, height) {

    let ratio = Math.max(width / texture.width, height / texture.height);
    width = texture.width * ratio;
    height = texture.height * ratio;   

    let tiling = new PIXI.TilingSprite(texture, width, height);                    
    app.stage.addChild(tiling);

    return tiling;
}

//more stuff...

And the result is attached in here.

Does anyone know how can I make the background cover the entire screen in a way it doesn't repeat in the Y?

[ivan.popelyshev]

If you know how WebGL works (went through webglfundamentals), you can read source of pixi textures ( https://github.com/pixijs/pixi.js/tree/dev/packages/core/src/textures , https://pixijs.io/examples/#/textures/gradient-resource.js , https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.ts#L385 ) , make custom texture resource with "style" that uploads different wraps by U and V, first REPEAR, second CLAMP.

Alternatively, use several sprites instead of TilingSprite.