[3.8.99] Malformed assets & scaling issues.

[ChristianTucker]

I am currently using Spine PRO v3.8.99 with pixi-spine: ^2.1.10 and pixi.js: ^5.3.3. When importing our characters into the project and displaying them we notice that there are some problems with the asset's scale.

The asset is stretched out along the X-axis much more than it is originally, causing the character to look strange. Here is a photoshop reference character, the canvas used to create this character is 1600x2000.

Our Spine export settings can be found here:

Currently, we have a scale of 1.0, we will change this later while addressing the problem.

The original renderer of the spine character is very large, this is to be expected.

Scaling it down to 0.1 (both through trying spine.scale.x|spine.scale.y and supplying the { metadata: { spineSkeletonScale: ... } } provide the following result, which is fairly low quality (expected from scaling down, but result in spine looks 1000% better than this)

Below you can find a spine renderer of 0.1 to see quality difference:

When importing the spine export that has a 0.1 scale by default, using spineSkeletonScale: 1 we get the following result, which is a much, much lower quality, although the size hasn't changed at all:

I'm not really sure what the problem is, but there's a serious loss of quality from scaling that doesn't happen within spine and there's also a horizontal stretch of the character that shouldn't be happening.

[ivanpopelyshev]

OK, two ideas:

1. try load it in spine-ts https://github.com/EsotericSoftware/spine-runtimes/tree/3.8/spine-ts , they even had online players somewhere, i dont remember exactly where.
2. share whole zip-file demo to ivan.popelyshev@gmail.com

[ivanpopelyshev]

also, output , "premultiplyAlpha" - switch it off please. otherwise you have to notify pixi image resource that it is premultiplied in the file.

[ChristianTucker]

@ivanpopelyshev

Here's an example of it loaded in Unity and 1.0 export scaled down to 0.1 (no quality loss or width stretching)

I will be setting up spine-ts when I get back to my desk as well as sending the files.

[ivanpopelyshev]

OK, i took changes from spine-ts since March, please try 2.1.11 or files from "dist" folder of this repo.

[ChristianTucker]

Hey @ivanpopelyshev I'm having problems getting the character to load using spine-ts. The documentation isn't very good and I've been referencing the source, but I'm stuck. I modified the example of spine-ts to load from JSON with the following code:

var skeletonJson = new spine.SkeletonJson(atlasLoader);
skeletonJson.scale = 1;
const json = assetManager.get("assets/" + name + ".json");
var skeletonData = skeletonJson.readSkeletonData(json);
skeleton = new spine.Skeleton(skeletonData); 

But this provides the following error

Uncaught TypeError: Cannot read property 'findRegion' of undefined
    at AtlasAttachmentLoader.newMeshAttachment (AtlasAttachmentLoader.ts:52)
    at SkeletonJson.readAttachment (SkeletonJson.ts:354)
    at SkeletonJson.readSkeletonData (SkeletonJson.ts:267)
    at loadSkeleton ((index):137)
    at load ((index):102)

Here is the character files which are using the export settings I showed above, the "premultiplyAlpha" box is still checked. My animator is not currently available to adjust these settings but will be in a bit.

https://gofile.io/d/uCQFtE

In this zip contains the .png, .atlas and .json for the character.

[ChristianTucker]

Note: Issues still persist in 2.1.11

[ChristianTucker]

Additional observation: the width-scaling issues seems relative to canvas-space. For example, the character will appear thicker on a canvas with width: 1000 than it will on a canvas with width: 1300. Perhaps there's some form of auto-scaling in PIXI that could be causing this?

I'm just starting to use PIXI so I'm still figuring things out.

[ivanpopelyshev]

pixi doesnt have autoscaling. at all. no resize controllers.

I recommend to look whats your canvas CSS size , related to what you specified in application/renderer options.

[ChristianTucker]

@ivanpopelyshev Interesting, I think I've resolved this problem, but I'm going to experiment with it a bit more. I think I miss-configured PIXI at the start as instead of letting PIXI generate the view I supply one manually, because of this I was setting the size of the canvas through CSS and only supplying a view: HTMLCanvasElement to the PIXI.Application constructor assuming it would automatically make use of the Canvas' size. This however had PIXI operating on a 800x600 space that was being rendered in a ????x???? space as defined by my CSS rules (In this case, 100vh, 100vw). This was causing stretching and quality deformation.

By providing the width/height directly to the PIXI.Application constructor it resizes the canvas for me and I don't seem to have these issues anymore.

The quality is still lacking a bit, but I think this is mostly because of how much we're scaling the assets down and we probably need to rework our lining and original resolution. I think this can be closed, and I'll open a new issue if I find any issues that may not be due to the misconfiguration of PIXI.

[ivanpopelyshev]

There a number of tricks regaring resolution, css size, canvas size, e.t.c. and usually every person who works with it makes first attempt wrong. Because people are different. The only way to solve those issues - is to debug and RTF sources.

[ChristianTucker]

Anyway, thanks for the assistance, without the idea to double-check what was going on with styling I would have spent all of my time focusing on spine instead of the renderer. Thanks again!