TexturePacker rotation is broken in v4

[digibo]

Using rotation when packing images into atlases with TexturePacker causes them to render stretched/squished.

Reading rotation from json spritesheets (atlases, whatever you call them) was implemented at some point in v3, but it's broken in the current dev branch. They look vertically stretched, in my case, as if height and width were switched at some point during the vertex/uv calculations.

I should be able to isolate a simple example, if needed, but it probably won't be before Monday.

[ivanpopelyshev]

Hello! I have changed internals for Textures. Are you sure you dont have custom code for spritesheet loading? I have the tests, I'll run them again. May be we lost it somewhere in the merge.

Which objects shows incorrectly in your case? Sprite is working for me

[digibo]

I noticed the internal changes, I like to delve into the internals of Pixi when debugging :) I am using the PIXI.loaders.Loader, which goes through spritesheetParser.js. Nothing fancy when loading.

Replacing pixi.js with the v3 version fixes the problem, that's why I raised this issue. Maybe it's something specific to this case, but it works with v3 and breaks with v4.

[ivanpopelyshev]

Which object do you have problem with? Sprites are working with rotated texture. http://pixijs.github.io/examples/index.html?s=demos&f=texture-rotate.js&title=Texture%20Rotate

[ivanpopelyshev]

@digibo please make a minimal demo, I'll look at it. Rotation is serious issue for me :)

[ivanpopelyshev]

@digibo ping

[bQvle]

@ivanpopelyshev I think you have your own minimal demo here:
http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation&v=dev-4.1.0

:)

[ivanpopelyshev]

@bQvle You specified pixi v4.1.0, which is experimental branch. v4 is looking just fine.Thanks for that notice!

[3vilguy]

I'm still checking v4 version and I just came across something similar. Possibly related to trimming as well. Investigating now.

[ivanpopelyshev]

I spent a lot of time fixing rotations, and they work for both texture packer atlases and spine atlases, and no one can give me demo where trims arent working correctly.

[3vilguy]

Challenge accepted! : >

Here you go. Here's a spritesheet with 7 images that have a same width. 4 of them are rotated and few are trimmed. It's suppose to be animation of rectangle getting bigger and bigger.

Sorry, not sure where I can put .png with .json so I can load them into pixi examples so attahcing zip with both of them:
Sheet.zip

Here's the code I used (after mapping mc.json and .png locally, but having them locally you should be able to point to them.

var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

PIXI.loader
    .add('spritesheet', '_assets/mc.json')
    .load(onAssetsLoaded);

function onAssetsLoaded()
{
  var textures = [];
  textures.push( PIXI.Texture.fromFrame('transition_04.png') );
  textures.push( PIXI.Texture.fromFrame('transition_05.png') );
  textures.push( PIXI.Texture.fromFrame('transition_06.png') );
  textures.push( PIXI.Texture.fromFrame('transition_10.png') );
  textures.push( PIXI.Texture.fromFrame('transition_11.png') );
  textures.push( PIXI.Texture.fromFrame('transition_12.png') );
  textures.push( PIXI.Texture.fromFrame('transition_13.png') );

  var mc = new PIXI.extras.MovieClip(textures);
  mc.animationSpeed = 0.025;
  mc.play();
  stage.addChild(mc);

  requestAnimationFrame(animate);
}


function animate() {
    renderer.render(stage);
    requestAnimationFrame(animate);
}

So what is happening? Images 4, 5, 6, 10, 11 are correct.
Size of images 12 and 13 are wrong.

[ivanpopelyshev]

Nice, thank you! That will help me for sure :)

[3vilguy]

Ah btw, it doesn't have to be MovieClip. If you just make a sprite out of individual images it's also incorrect.

[whizzkid]

Just to clarify, the error occurs when the texture is rotated by texturepacker in the atlas file.
(so in the json it has: rotated:true )
NOT when you rotate textures yourself in pixi.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.