quannm

how to set height for PIXI.Texture.fromImage

Recommended Posts

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 by quannm
i want implement some issue.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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);

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.