Centering tilingSprite whilst also scaling

[Boxtufty]

 

 

Hi, I've experimented, googled and read the API and I still can't figure this out even though it is extremely simple

 

I want my image to remain in the center of my canvas as it becomes larger.

      function init() {            stage = new PIXI.Stage(0x66FF99);            renderer = new PIXI.autoDetectRenderer(512, 384, document.getElementById("game-canvas"));            var midTexture = PIXI.Texture.fromImage("resources/mid2.png");            mid = new PIXI.TilingSprite(midTexture, 256, 384);            stage.addChild(mid);            requestAnimFrame(update);      }      function update() {            mid.scale.x *= 1.001;             mid.tilePosition.y += 1.21;            // I want it to remain centered as it gets larger, this attempt does not work:            mid.position.x = (512 - mid.width) / 2 ;            renderer.render(stage);            requestAnimFrame(update);         }

Any help would be appreciated, I have already spent way too long trying to figure this out 

[xdiepx]

Try that

 

    function init() {

            stage = new PIXI.Stage(0x66FF99);

            renderer = new PIXI.autoDetectRenderer( 512, 384, document.getElementById("game-canvas"));

 

            var midTexture = PIXI.Texture.fromImage("http://i.imgur.com/fPoFhPU.png");

            mid = new PIXI.TilingSprite(midTexture, 512/2, 384);

            //---------What i added

           mid.anchor.x = 0.5;

          mid.anchor.y = 0.5;

            mid.position.x =512/2;

            mid.position.y =384/2;

           //-----------------------------

            stage.addChild(mid);

         requestAnimFrame(update);

}

 

function update() {

 

      mid.tilePosition.y += 1.21;

//-------------what i removed.

      // I want it to remain centered as it scales

      //mid.position.x = (512 - mid.width) / 2 ;

//-----------------------------------

     mid.scale.x *= 1.001;

 

     renderer.render(stage);

     requestAnimFrame(update);

}

 

Is that right?

[Boxtufty]

Thanks! That's what I was going for. 

[xdiepx]

You're welcome. Looks interesting what you are doing

[caymanbruce]

On 3/5/2014 at 8:15 AM, xdiepx said:

Try that

 

    function init() {

            stage = new PIXI.Stage(0x66FF99);

            renderer = new PIXI.autoDetectRenderer( 512, 384, document.getElementById("game-canvas"));

 

            var midTexture = PIXI.Texture.fromImage("http://i.imgur.com/fPoFhPU.png");

            mid = new PIXI.TilingSprite(midTexture, 512/2, 384);

            //---------What i added

           mid.anchor.x = 0.5;

          mid.anchor.y = 0.5;

            mid.position.x =512/2;

            mid.position.y =384/2;

           //-----------------------------

            stage.addChild(mid);

         requestAnimFrame(update);

}

 

function update() {

 

      mid.tilePosition.y += 1.21;

//-------------what i removed.

      // I want it to remain centered as it scales

      //mid.position.x = (512 - mid.width) / 2 ;

//-----------------------------------

     mid.scale.x *= 1.001;

 

     renderer.render(stage);

     requestAnimFrame(update);

}

 

Is that right?

Thanks. Can't explain my feeling when an answer posted two years ago helps me so much. How do you reduce the stuttering effect during scaling? Should I make the scaling factor smaller?

[xdiepx]

On 21/12/2016 at 5:28 PM, caymanbruce said:

Thanks. Can't explain my feeling when an answer posted two years ago helps me so much. How do you reduce the stuttering effect during scaling? Should I make the scaling factor smaller?

Use a tween to move it instead of the frame update. It'll be much smoother (from experience).

[ivan.popelyshev]

In v3 and early v4 behaviour is different. What you need is "uvRespectAnchor" mode that was introduced in v4:

var screen = renderer.screen;

tilingSprite.width = screen.width;
tilingSprite.height = screen.height;
tilingSprite.position.set(screen.width/2, screen.height/2);
tilingSprite.uvRespectAnchor = true;
tilingSprite.anchor.set(0.5, 0.5);

It will move tiling position relative to anchor (center of screen)