How to use defaultAnchor from Texture ?

[JeanLouis]

Hello

I would like to configure offsets on texture (not on sprites).

Why this example does not work ?

const app = new PIXI.Application({
	resizeTo: window,
  backgroundColor: 0x999999
});
document.body.appendChild(app.view);
PIXI.Assets.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png'); 
PIXI.Assets.load(['bunny']).then((textures) =>
{
	let texture = textures['bunny'];
  
  let tmp = new PIXI.Texture(
    texture, 
    new PIXI.Rectangle(
      0,
      0,
      20,
      20,
    )
  );
  texture.defaultAnchor.x = 30; // wrong instruction ? Does not work
  const sprite = PIXI.Sprite.from(tmp);
  app.stage.addChild(sprite);
});

Thanks,

[ivan.popelyshev]

you changed "texture.defaultAnchor", not "tmp.defaultAnchor"

[JeanLouis]

Indeed, but this did not explain why bunny was not showed anymore

Fact is I forgot that anchor is in % and not in pixels.

Thanks anyway

[stevediaz]

Hello

It looks like there might be a misunderstanding in how to apply offsets to a texture. Instead of adjusting defaultAnchor.x on the original texture, you should set the anchor directly on the sprite. Here's the corrected code:

const app = new PIXI.Application({ resizeTo: window, backgroundColor: 0x999999 }); document.body.appendChild(app.view); PIXI.Assets.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png'); PIXI.Assets.load(['bunny']).then((textures) => { let texture = textures['bunny']; let tmp = new PIXI.Texture( texture, new PIXI.Rectangle( 0, 0, 20, 20, ) ); const sprite = PIXI.Sprite.from(tmp); sprite.anchor.set(0.5); // Set the anchor to the center of the sprite sprite.position.set(app.view.width / 2, app.view.height / 2); // Position in the center of the stage app.stage.addChild(sprite); });

In this corrected code, I've set the anchor directly on the sprite using sprite.anchor.set(0.5), and I've also positioned the sprite at the center of the stage for clarity. Adjust the anchor and position as needed for your specific requirements.

 

Thnk you

rpa certification

 

[junyi]

Based on your answer, I think you should know what's going on.
Let me briefly summarize:
The"texture.defaultAnchor.x" should be changed to "tmp.defaultAnchor.x"
And the value should not be 30, the recommended value is between 0 and 1, as you said, its unit is%.

Additionally, we should use Sprite.anchor or Sprite.pivot instead of Texture.defaultAnchor

const app = new PIXI.Application({
	resizeTo: window,
  backgroundColor: 0x999999
});
document.body.appendChild(app.view);
PIXI.Assets.add('bunny', 'https://pixijs.io/examples/examples/assets/bunny.png'); 
PIXI.Assets.load(['bunny']).then((textures) =>
{
	let texture = textures['bunny'];
  
  let tmp = new PIXI.Texture(
    texture, 
    new PIXI.Rectangle(
      0,
      0,
      20,
      20,
    )
  );
//   texture.defaultAnchor.x = 30; // wrong instruction ? Does not work
// tmp.defaultAnchor.x = 30; 
  const sprite = PIXI.Sprite.from(tmp);
  // tmp.defaultAnchor.x = 30;  // Writing here has no effect, it should be written before "Sprite.from(tmp)"
    // sprite.position.x = 30*20; // When you use "tmp.defaultAnchor.x=30;" and you want to display the "sprite"
// sprite.anchor.x=0.5 or sprite.pivot.x=10;
  app.stage.addChild(sprite);

 

Edited December 29, 2023 by junyi
Change “Sprite.povit” to "Sprite.pivot"