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! :D

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.
User avatar
Erika

Erikari
  • Posts: 3064

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!
User avatar
Mario

Mario
  • Posts: 3033

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.
User avatar
Mario

Mario
  • Posts: 3033

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)
User avatar
Erika

Erikari
  • Posts: 3064

Mario

Got it. I'll take a looksy asap!
User avatar
Mario

Mario
  • Posts: 3033

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.
You do not have the required permissions to view the files attached to this post.
Xelnath
  • Posts: 408

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
User avatar
Erika

Erikari
  • Posts: 3064

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!
Xelnath
  • Posts: 408

Erika

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

Erikari
  • Posts: 3064

Nate

data-fit-tocanvas might be a typo here also.
User avatar
Nate

Nate
  • Posts: 11859

Erika

Nate wrote: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!
User avatar
Erika

Erikari
  • Posts: 3064

Mario

Oh man, I should have noticed that. Sooo, this bug is fixed magically :D
User avatar
Mario

Mario
  • Posts: 3033

Erika

badlogic wrote:Oh man, I should have noticed that. Sooo, this bug is fixed magically :D
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.
User avatar
Erika

Erikari
  • Posts: 3064

Mario

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

Mario
  • Posts: 3033

Erika

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

Erikari
  • Posts: 3064

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
User avatar
Mario

Mario
  • Posts: 3033

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)
User avatar
Erika

Erikari
  • Posts: 3064

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)
User avatar
Mario

Mario
  • Posts: 3033


Return to Bugs