Sign in to follow this  
Boxtufty

Centering tilingSprite whilst also scaling

Recommended Posts

 

 

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  :lol:

Share this post


Link to post
Share on other sites

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?

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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)

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.