Texture rotation is broken for Canvas

[ivanpopelyshev]

Original issue: pixijs/spine#460

After #8615, spine rotation doesnt work anymore.

I honestly dont know which version is wrong, I suspect is that packer in #8615 is wrong, because my version was supposed to work with Spine and TexturePacker.

I'm gonna check whether TexturePacker atlases work for us now, then revert that PR.

[ivanpopelyshev]

@smlmyck please tell me more about that free texture packer tool

[smlmyck]

@ivanpopelyshev We use a tool at the company I work for that wraps https://github.com/odrick/free-tex-packer-core to generate our texture atlases for runtime loading.

If I throw the assets used for my original demo through TexturePacker (using the "JSON (Hash)" exporter), the issue still occurs as written on PIXI.js 6.5.2, and is fixed by my change in #8615 (and by extension 6.5.3+).

I've spun up another Glitch site demonstrating that here: https://denim-boom-building.glitch.me/ - the image is identical and the JSON is effectively identical to the previous Glitch for my previous PR.

We've had no issues loading textures in this fashion in any PIXI.js version from 3.0.11 until 6.5.0 landed where the problem starting occurring for us.

[ivanpopelyshev]

Maybe the actual issue is that it doesnt have "trim" , and only "frame" width/height shouldnt be rotated.

Can you check that in your case those lines arent hit in debugger ?

pixijs/packages/canvas-sprite/src/CanvasSpriteRenderer.ts

Lines 75 to 76 in e5cc328

	destWidth = texture.trim.width;
	destHeight = texture.trim.height;

[smlmyck]

That's correct, it steps over that if block as texture.trim is null. I'll have a play around to see if I can resolve this.

[smlmyck]

Can confirm that I've broken texture atlases that use trimming, which for my repro (and what we saw in our projects) wasn't in use because everything rotated had pixels to the edge. Adding some transparent pixels make the texture packer trim them shows a broken canvas renderer as it was for non-trimmed atlases prior to #8615 landing.

Changing this if block

pixijs/packages/canvas-sprite/src/CanvasSpriteRenderer.ts

Lines 73 to 77 in e5cc328

	if (texture.trim)
	{
	destWidth = texture.trim.width;
	destHeight = texture.trim.height;
	}

... to fix the destWidth/Height conditionally if the texture is rotated does indeed fix both my original case in #8615 and the breakage caused by it, i.e. this:

        if (texture.trim)
        {
            if (texture.rotate) {
                destWidth = texture.trim.height;
                destHeight = texture.trim.width;
            } else {
                destWidth = texture.trim.width;
                destHeight = texture.trim.height;
            }
        }
        
I'll raise a PR for that shortly.

[ivanpopelyshev]

We support different rotations, so better use groupD8.isVertical(rotation) . https://pixijs.io/examples/#/textures/texture-rotate.js
Dont mind diagonal ones, its feature-bug

[ivanpopelyshev]

@bigtimebuddy can we have that in another v6 release please?

[bigtimebuddy]

Sure, make the PR and I can make a new v6 release. This issue would also impact v7 too.

[bigtimebuddy]

Released in 6.5.5.