essentialskills

I am trying to get a spine project I created to work with JavaScript Canvas.

I used the example code located in spine-ts/canvas/example and changed the assets folder to use my assets. Then in the code I changed the init and loadSkeleton functions to point to my atlas and json files. However, I do have 2 png files for the textures and my textures are 2048x2048 each. So I called assetManager.loadTexture twice (One for each texture)

When I run it from my website it only shows half the graphics? It's suppose to be a bee but all I can see are it's eyes and wings...

http://newlook.essentialskills.com/spine/ess/canvas/example/index.html

The assets are
http://newlook.essentialskills.com/spine/ess/canvas/example/assets/Level_1.png
http://newlook.essentialskills.com/spine/ess/canvas/example/assets/Level_12.png
http://newlook.essentialskills.com/spine/ess/canvas/example/assets/Level_1.json
http://newlook.essentialskills.com/spine/ess/canvas/example/assets/Level_1.atlas
essentialskills
Posts: 10

Erikari

I know that with the widget, exporting everything in a single big atlas instead solves everything, I'm unsure about canvas, I'll ask Badlogic about it.
User avatar
Erikari

Erikari
Posts: 1332

essentialskills

Thanks for the quick reply.

I made it one giant 4096x4096 texture and it still behaves the same. I have replaced the files in http://newlook.essentialskills.com/spine/ess/canvas/example if you want to look at it.

Edit: looks like even though I told the texture to be 4096x4096, it was smart enough to switch itself to 4096x2048

---

Interesting... If I change the example code in spine-ts/widget/example to use my bee asset, it works perfectly! But I need this animation to work on as many devices as possible so I would prefer the canvas way if possible.

---

I tried running the widget method on an old iPad 2 and it doesn't show anything. I assume that a texture of 4096x2048 is way too big, so I shrank it to 1024x512 in photoshop and now the bee looks all messed up in chrome on my desktop? Is there a better way to shrink the texture files?
essentialskills
Posts: 10

Erikari

essentialskills wrote:I tried running the widget method on an old iPad 2 and it doesn't show anything. I assume that a texture of 4096x2048 is way too big, so I shrank it to 1024x512 in photoshop and now the bee looks all messed up in chrome on my desktop? Is there a better way to shrink the texture files?
You don't need to shrink it in Photoshop (the atlas file will lose all the coordinates otherwise), instead, specify 0.5 in the output settings if you want the atlas at half the size. Texture Packing - Spine User Guide: Settings (I usually also export at 0.3, which corresponds to scaling the images to 30%, the web doesn't usually require images at their original size)
User avatar
Erikari

Erikari
Posts: 1332

badlogic

The spine-canvas runtime does not support meshes. I can not load any of the links you provided, but I assume that you are using meshes. You will have to use the spine-webgl runtimes, or the spine-widget for your skeleton to fully render.

As for the iPad 2, it does support WebGL in Safari from what I see in the specs. However, it will not be able to render with a 4kx2k texture due to hardware limitations. Save atlas size limits for mobile are 1024x1024 for older devices and 2048x2048 for newer devices.

The problems you see in Chrome when shrinking your atlas down are likely due to you having enabled white space stripping. Note that white space stripping does not work for skeletons containing meshes. If you disable it, your skeleton plus the shrunken atlas should render fine everywhere.
User avatar
badlogic

Mario
Posts: 1448

essentialskills

Thanks for the help! But I am still having issues. I will use widget instead of canvas if I can get it working on the iPad 2. I used the export settings to scale the texture to 0.25 and I set the texture to square. So it did scaled the texture from 4096x4096 to 1024x1024 but my iPad still doesn't show it. My desktop shows it as a very blurry bee (as expected). I am using the widget example code and that code shows 3 already made widgets animations. I replaced the top one with mine.

http://newlook.essentialskills.com/spine/ess/widget/example/index.html

I have no idea why these links don't work for you as they are public and work fine on all the computers I try them on?

---

I forgot to mention that the other 2 widgets in the example code that are below my bee do work on my iPad 2

---

I got it working on my IPad 2. The problem was in one of the other widgets in the example code. It was crashing on line 126 "let animations = widget.skeleton.data.animations;" With "Unexpected identifier 'animations' ". But that was example code, so when I deleted it, I could see my bee!!
essentialskills
Posts: 10

Erikari

Glad you got it to work :D
User avatar
Erikari

Erikari
Posts: 1332

essentialskills

Edit: I am just going to make a new post for this other issue
essentialskills
Posts: 10

badlogic

So terribly sorry about the issue with the example code. I've created an issue to fix it. Widget example code crashes · #1202

Thanks for reporting!
User avatar
badlogic

Mario
Posts: 1448

essentialskills

Awesome thanks!
essentialskills
Posts: 10

badlogic

Quick update, the widget example code actually works as intended. The reason it crashes was because you replaced one of the animations with your own and were missing some atlas page .png files. Your own example now works as well (link above). Thanks for reporting!
User avatar
badlogic

Mario
Posts: 1448

essentialskills

Perfect thanks!
essentialskills
Posts: 10


Return to Editor