Pixi.js: distorted picture when configured trimmed=true in spritesheet json

Created on 9 Sep 2016  路  5Comments  路  Source: pixijs/pixi.js

Hi,

I created a sprite with Texture.fromFrame with this json description:

"Template0010.png":
{
"frame": {"x":858,"y":250,"w":186,"h":248},
"pivot": {"x":0.5,"y":0.5},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":0,"y":0,"w":248,"h":248},
"sourceSize": {"w":248,"h":248}
}

The sprite is stretched because of the different size between frame and sourceSize and the trimmed option to true.
If I change the trimmed option to false it's ok but I need it to be set to true :/

The problem is really annoying with Movieclip

馃捑 v4.x (Legacy) 馃摙 Accepting PRs 馃暦 Bug

Most helpful comment

Lets look into spritesheetparser

if (rect)
                    {

                        var frame = null;
                        var trim = null;
                        var orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution);

                        if (frames[i].rotated) {
                            frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution);
                        }
                        else {
                            frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution);
                        }

                        //  Check to see if the sprite is trimmed
                        if (frames[i].trimmed)
                        {
                            trim = new core.Rectangle(
                                frames[i].spriteSourceSize.x / resolution,
                                frames[i].spriteSourceSize.y / resolution,
                                frames[i].spriteSourceSize.w / resolution,
                                frames[i].spriteSourceSize.h / resolution
                             );
                        }

                        resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0);

                        // lets also add the frame to pixi's global cache for fromFrame and fromImage functions
                        core.utils.TextureCache[i] = resource.textures[i];

                    }

As you see, "orig" take width/height from sourceSize , even if "trimmed" is false. We can fix that

All 5 comments

Lets look into spritesheetparser

if (rect)
                    {

                        var frame = null;
                        var trim = null;
                        var orig = new core.Rectangle(0, 0, frames[i].sourceSize.w / resolution, frames[i].sourceSize.h / resolution);

                        if (frames[i].rotated) {
                            frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.h / resolution, rect.w / resolution);
                        }
                        else {
                            frame = new core.Rectangle(rect.x / resolution, rect.y / resolution, rect.w / resolution, rect.h / resolution);
                        }

                        //  Check to see if the sprite is trimmed
                        if (frames[i].trimmed)
                        {
                            trim = new core.Rectangle(
                                frames[i].spriteSourceSize.x / resolution,
                                frames[i].spriteSourceSize.y / resolution,
                                frames[i].spriteSourceSize.w / resolution,
                                frames[i].spriteSourceSize.h / resolution
                             );
                        }

                        resource.textures[i] = new core.Texture(res.texture.baseTexture, frame, orig, trim, frames[i].rotated ? 2 : 0);

                        // lets also add the frame to pixi's global cache for fromFrame and fromImage functions
                        core.utils.TextureCache[i] = resource.textures[i];

                    }

As you see, "orig" take width/height from sourceSize , even if "trimmed" is false. We can fix that

@mathieuanthoine / @Yennick - could either of you confirm that this issue is now fixed please? Thanks!

This issue is fixed!

Woop! Thanks :)

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lucap86 picture lucap86  路  3Comments

finscn picture finscn  路  3Comments

softshape picture softshape  路  3Comments

gaccob picture gaccob  路  3Comments

lunabunn picture lunabunn  路  3Comments