how to set height for PIXI.Texture.fromImage

[quannm]

hello, everyone, this is my issue :
i'm use TilingSprite for looping background and i want background aways full height of screen  but background can't not resize full height. so i want to know how to resize texture background with full height of screen.
this is my code :

function init() {

stage = new PIXI.Container();

renderer = PIXI.autoDetectRenderer(

window.innerWidth,

window.innerHeight,

{ view: document.getElementById("game-canvas") }

);

 

// Scale mode for all textures, will retain pixelation

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

 

// bg far texture

var farTexture = PIXI.Texture.fromImage("images/main01.jpg");

 

far = new PIXI.extras.TilingSprite(farTexture, window.innerWidth, window.innerHeight);

 

// set backgroud

 

// set position background frame

far.position.x = 0;

far.position.y = 0;

far.tilePosition.x = 0;

far.tilePosition.y = 0;

stage.addChild(far);

  

requestAnimationFrame(update);

}

function update() {

// far.tilePosition.x -= 0.128;

 

renderer.render(stage);

requestAnimationFrame(update);

}

Edited September 4, 2019 by quannm
i want implement some issue.

[Exca]

To clarify, you want the texture inside tiling sprite to be full height of windows?

If so you can use tileScale. For example:

var s = window.innerHeight / farTexture.height;
far.tileScale.set(s,s);

Remember to do that after the image has loaded so the texture dimensions are correct.

[quannm]

On 9/4/2019 at 3:26 PM, Exca said:

To clarify, you want the texture inside tiling sprite to be full height of windows?

If so you can use tileScale. For example:

var s = window.innerHeight / farTexture.height;
far.tileScale.set(s,s);

Remember to do that after the image has loaded so the texture dimensions are correct.

tks you so much, now it working correctly. however, i facing new issue on mobile. When i click button prev next, tilingSprite image is pixelate here is issue in my game
please click lick to watch my issue.
https://drive.google.com/file/d/1aXjiHQ513VR65lkLDdQVKWvRtFGiJRdc/view?usp=sharing

image in PC is OK

http://prntscr.com/p24huz

// Scale mode for all textures, will retain pixelation

PIXI.settings.SCALE_MODE.DEFAULT = PIXI.SCALE_MODES.NEAREST;

 

// bg 01

var farTexture = PIXI.Texture.fromImage("images/main.jpg");

// farTexture.scale.x = 1;

var s = window.innerWidth,

_h = window.innerHeight / 1400;

 

far = new PIXI.extras.TilingSprite(farTexture, window.innerWidth, window.innerHeight);

 

// set backgroud and scale image

far.position.x = 0;

far.position.y = 0;

far.tilePosition.x = 0;

far.tilePosition.y = 0;

far.tileScale.set(_h,_h);

// far.tileScale.y = s;

stage.addChild(far);

 

[Exca]

How large is the texture? If the width is large enough then some devices might have problems with shader precision. You can test if this is the case by changing from webgl rendering to canvas rendering temporarily. If it works properly on canvas then having a smaller texture or splitting the current one into smalle chunks might help.

[mobileben]

When scaling anything up, you will potentially artifacts. The severity of which depend on the direction (up or down) as well as how much and what you are scaling by. As you are doing an affine scale, you won't suffer any effects due to change in aspect ratio.

Are all those images the same size BTW?

[quannm]

16 hours ago, Exca said:

How large is the texture? If the width is large enough then some devices might have problems with shader precision. You can test if this is the case by changing from webgl rendering to canvas rendering temporarily. If it works properly on canvas then having a smaller texture or splitting the current one into smalle chunks might help.

my texture size is 3750/1400 pixel, i resize texture with aspect ratio is window height divide by texture height (1400 pixel ).
in PC texture is working correctly with all texture repeat (horizontal repeat ) but on mobile the second texture is pixelated (noise or blurry images), I'm tried splitting texture to small chunks but it still broken.

 

 

 

 

2

11 hours ago, mobileben said:

When scaling anything up, you will potentially artifacts. The severity of which depend on the direction (up or down) as well as how much and what you are scaling by. As you are doing an affine scale, you won't suffer any effects due to change in aspect ratio.

Are all those images the same size BTW?

yes, i'm tried keep texture same size but the second texture is still pixelated you can see problem in this video : https://drive.google.com/file/d/1aXjiHQ513VR65lkLDdQVKWvRtFGiJRdc/view?usp=sharing

tks for all you help.