Esoteric Software

[Erika]

Hi! I was making a little tutorial for people who wanted to use the spine widget and I noticed that in the new version of the widget, even in your example html, the created canvas has 100%width and 100%height, giving the animation uncorrect proportions even if data-fit-to-canvas is set to "true". I'm testing this on the latest version of firefox.
In the prior versions of the widget this didn't happen, so I assume it's a bug. (I'm using an older version on my website in fact)
Actually, in the older version canvas had also 100% on both, but it also automatically updated itself with the correct proportions, looking in the inspector.

by the way I like the idea of placing inline canvas and json!

Also, if I can make a tiny request, I'd love to have a version of the script where after the animation on click is done goes back to the animation set in the beginning. buuut I can also ask friends for help on this >.>
I had in mind I wanted to make an animation where the character waves at you or does things if you click on it, or that does other stuff, like saying thank you, if you click e.g. on a download button. But that's a plus. If this distortion thing would be solved it'd be better >.<

---

Old version: (no bug)



New version: (with bug)



---

Also I confirm that if I replace spine-widget.js with the old one, it works well again.

[Mario]

Bad Mario, f'ed up spine-widget. Is this on the beta branch or the master branch? I opened an issue here [widget] Aspect ratio is not honored properly · #912 Will investigate asap.

Thanks for the video tutorial btw, super cool!

[Mario]

I've investigated this, but couldn't find an issue. Could you send/tell me the following:

- A small sample project that reproduces the issue, including the .html file and assets
- Your operating system and browser
- Your display resolution

I've played around with this in various browsers and resolutions on macOS, but couldn't see the proportion issue. Everything works as intended. I'm using the latest spine-widget.js from the 3.6-beta branch.

[Erika]

summary:

- Full HD (in the video it's just a portion in HD)
- Latest Firefox on Windows 10
- your example project looks broken (look at the video)

In my case, on Firefox - latest one, window 10, just opening your default project looks broken. (as per tutorial video where I filmed it)
The runtimes I used are these: GitHub - EsotericSoftware/spine-runtimes: 2D skeletal animation runtimes for Spine.
And you can look at the example animations on my pc in the video:


MacOs behaves differently also when it comes to svg and fonts so it wouldn't be a wonder that it might play a difference. What's peculiar is that earlier it worked just fine.

(remember I cheated in the video replacing the spine-widget.js with a version that wasn't broken in my html, but not when seeing your examples)

[Mario]

Got it. I'll take a looksy asap!

[Xelnath]

When I tried to make this work on my website, I ran into two errors:

1) It couldn't load the .atlas file. Kept saying 404 not found, even though I was able to directly go the same path to view the text.


---- Ignore below this line ----
2) When I did inline it threw the error:

2017-05-31 21_51_25-Spine Test.png

.. oh , I figured it out #2, the div has to come before the script does.

[Erika]

Can you try posting the line about the atlas file so I can check if everything is alright?
The whole code would be even better

[Xelnath]

http://xelnath.com/atomech/spine/Website/

<center>
<div style="width: 100%; height: 100vh;" class="spine-widget"
data-json= "Assets/PalaceSentry.json"
data-atlas= "Assets/PalaceSentry.atlas.txt"
data-animation="Idle"
data-fit-tocanvas="true"
data-background-color="#00000000"
data-premultiplied-alpha="true"
>
</div>
</center>

I've tried variations both with and without .txt on the asset and the html

---

Solved... typo in filename. <3 to Erikari!

[Erika]

For the record: there was a small typo, and now it's fixed

[Nate]

data-fit-tocanvas might be a typo here also.

[Erika]

data-fit-tocanvas might be a typo here also.

Yeah, looking at the documentation it totally looks like a typo!

data-fit-to-canvas: optional, whether to fit the animation to the canvas size or not. Defaults to true if omitted

Luckily default is set to true, that's my fault though. I thought it was funny indeed. thanks for pointing it out!

[Mario]

Oh man, I should have noticed that. Sooo, this bug is fixed magically

[Erika]

Oh man, I should have noticed that. Sooo, this bug is fixed magically

If you mean data-fit-to-canvas, it was ininfluent since it was a typo and default is true anyway. The other strange behaviour is still around though.

[Mario]

Damn it, re-opened. I still can't reproduce it, I keep digging.

[Erika]

If you need I can lend you my pc via team-viewer, it happens on all my (2) machines

[Mario]

I've now tried pretty much everything I can think of to reproduce this. No OS + resolution + browser combination triggers the issue you show in your first post.

Could you try this on your computer and tell me if it works? Just open the index.html in your Firefox https://drive.google.com/open?id=0B-iSLz-MItyVdHBiUDFPaDVUVFk

[Erika]

Yes it works. I tried also putting your js instead of what I had downloaded from master branch and it now works.
You are awesome for fixing this bug blindfolded! (and with an injured hand)

[Mario]

Cool! I used the 3.6-beta branch version which you can find here spine-runtimes/spine-ts/build at 3.6-beta

The branch will be merged into master "real soon now" (tm)