How to size TilingSprite and run on single direction

[eguneys]

I have a tiling image that is 300x200 I want this image to sit on the bottom of game canvas and tile only horizontally. The example given sets the size in constructor with renderer.width/height that doesn't work if this size is smaller.

[ivan.popelyshev]

if you scaled your stage - your positions has to be fixed

if you didnt scale stage, if you resize renderer - tilingSprite has to be re-positioned anyway, PixiJS does not have layout engine

Just in case, please publish the demo

[eguneys]

Are you saying TilingSprite will only work for the whole stage that is entire application. Can I make it work inside a display container? I want to make the tiling image bigger.

 

For example:

 

// What is this width/height corresponds to, why is it set to renderer.width, can I set it to the texture size.
let tsprite = new TilingSprite(texture, width, height);

// I want to make the sprite bigger. Setting the width/height doesn't work. Why `tileScale` why not just `scale`?
tsprite.tileScale.x = 2;
tsprite.tileScale.y = 2;

// Now I don't know the width/height of this sprite I have to position it to the bottom. 
// Do I just have to eyeball the position and set it to some ratio of the displayHeight,
// so it becomes responsive?

// tsprite.position.y = displayHeight - tsprite.height
tsprite.position.y = displayHeight * 0.7;

Here's the demo https://eguneys.github.io/jsgames/work.html

 

And here's the repository: https://github.com/eguneys/orb

Edited March 8, 2020 by eguneys

[ivan.popelyshev]

Tilingsprite is a sprite. No requirements for its size. Just make it "0.3*screen.height" , and position at the bottom , either like you did it, either by specifying anchor.y=1 and setting position to "screen.height"

I have a feeling that you didnt try to experiment with it enough.

Edited March 8, 2020 by ivan.popelyshev