Missing graphics/sprites in spine animation

stephenkalisch · November 8, 2018, 9:11pm

Hey there!

Maybe someone of you can help me finding why there are no graphics in my (first) spine animation…

Background:

Created some png graphics
Used DragonbonesPro 5.6 to create a simple animation
Exported like in the docs / forum explained: Spine 2.x, Image-export
Started a new DEFOLD project for testing
Created the atlas and inserted the graphics from the texture-folder (dragonbones export)
Created a spinemodel and spinescene

After all this I just can see the bones (as lines) in the spine-scene. Where are my graphics? It seems the names / urls of the graphics (maybe in the atlas) are not correct - but I cant change them ?!?

Any Ideas? Here are screenshots:

sven · November 9, 2018, 8:11am

Can you share the JSON and images with me so I can investigate a bit?

stephenkalisch · November 9, 2018, 8:37am

Sure @sven. and thanks for answering!

Here’s a zip containing the Texture-Folder, Dragonbones-Files and json:

Drophead.zip (7.6 KB)

stephenkalisch · November 9, 2018, 8:39am

It “feels” or looks like the names for the graphics wont fit. But I cant change the IDs in DEFOLD to try or fix it. The fields are write-protected.

In the atlas the graphic-names are “head”, “hand”, “food” etc. In Dragonbones they are “hand-left” etc.

stephenkalisch · November 9, 2018, 8:44am

Oh by the way. nearly the same problem with another test… a (ugly) tree…

in this case I just see in defold 2 of 3 branches (the left and right, not the one in the middle) and I dont see the stump…

Files here:
test_tree_texture.zip (6.6 KB)

sven · November 9, 2018, 3:02pm

It seems that Dragonbones got the great idea to not output width and height information for each slot/attachment/image in the JSON. I got your first JSON working by manually entering width and height for each entry in the skins->default table… So something like this:

...
"skins": {
        "default": {
            "body": {
                "body": {
                    "name": "body",
                    "rotation": -89.57,
                    "x": 18.68,
                    "y": -0.26,
                    "width" : 23,
                    "height" : 21
                }
            },
...

britzl · November 9, 2018, 3:08pm

Wow! Dragonbones seems to be the source of more problems than it solves…

sven · November 9, 2018, 3:34pm

@Mathias_Westerdahl pointed out some great advice for Dragonbones users; you should be able to verify your JSON output by running it through the official Spine skeletonViewer application as a first step in debugging.

When I tried your scene it failed to load and wrote in the log the following:

com.badlogic.gdx.utils.SerializationException: Error reading attachment: food, skin: default
	at com.esotericsoftware.spine.SkeletonJson.readSkeletonData(SkeletonJson.java:268)
	at com.esotericsoftware.spine.SkeletonViewer.loadSkeleton(SkeletonViewer.java:195)
	at com.esotericsoftware.spine.SkeletonViewer$UI$2.changed(SkeletonViewer.java:634)
	at com.badlogic.gdx.scenes.scene2d.utils.ChangeListener.handle(ChangeListener.java:28)
	at com.badlogic.gdx.scenes.scene2d.Actor.notify(Actor.java:182)
	at com.badlogic.gdx.scenes.scene2d.Actor.fire(Actor.java:147)
	at com.badlogic.gdx.scenes.scene2d.ui.Button.setChecked(Button.java:124)
	at com.badlogic.gdx.scenes.scene2d.ui.Button$1.clicked(Button.java:92)
	at com.badlogic.gdx.scenes.scene2d.utils.ClickListener.touchUp(ClickListener.java:89)
	at com.badlogic.gdx.scenes.scene2d.InputListener.handle(InputListener.java:59)
	at com.badlogic.gdx.scenes.scene2d.Stage.touchUp(Stage.java:351)
	at com.badlogic.gdx.InputMultiplexer.touchUp(InputMultiplexer.java:96)
	at com.badlogic.gdx.backends.lwjgl.LwjglInput.processEvents(LwjglInput.java:332)
	at com.badlogic.gdx.backends.lwjgl.LwjglApplication.mainLoop(LwjglApplication.java:217)
	at com.badlogic.gdx.backends.lwjgl.LwjglApplication$1.run(LwjglApplication.java:126)
Caused by: java.lang.IllegalArgumentException: Named value not found: width
	at com.badlogic.gdx.utils.JsonValue.getFloat(JsonValue.java:657)
	at com.esotericsoftware.spine.SkeletonJson.readAttachment(SkeletonJson.java:332)
	at com.esotericsoftware.spine.SkeletonJson.readSkeletonData(SkeletonJson.java:265)
	... 14 more

The interesting line here is:
Caused by: java.lang.IllegalArgumentException: Named value not found: width, which might give you a hint what could be wrong!

britzl · November 9, 2018, 6:09pm

Ah, this is a good tip. Added it to the docs and submitted a PR: Added note on Spine Skeleton Viewer by britzl · Pull Request #25 · defold/doc · GitHub
@sven can you take a look and merge it?

selimanac · November 10, 2018, 3:21pm

Actually there is a workaround for this issue. It is not very easy but better than adding width and height values manually. I’m going to prepare a walkthrough for it.

selimanac · November 11, 2018, 9:13am

Here is my DragonBones to Defold converting workflow: https://www.selimanac.com/dragonbones-to-defold-engine-workflow/
I test it with various animations from different sources. It works quite well. You can find my test project here

Mathias_Westerdahl · November 11, 2018, 10:09am

Nice writeup @selimanac!

selimanac · November 11, 2018, 10:17am

Thank you master

sven · November 12, 2018, 10:34am

Nice, reviewed, merged and published new documentation!

Klear · November 14, 2018, 5:48pm

I’ve tried this, but DragonBones Tools only produced a json without the height/width information.

Adding it manually did the trick.

selimanac · November 14, 2018, 5:53pm

Did you export your json in the “library” folder and convert it there with using same name?
Because I’m very sure that it works very well.

Klear · November 14, 2018, 5:57pm

Yeah. I think I followed the instructions correctly.

Attached are the relevant files, if you want to have a look. human_fetus_spine_ske.json is the one exported from DB, the json and atlas are what was produced by using the DB Tools.

library.zip (12.4 KB)

selimanac · November 14, 2018, 6:24pm

Ah! This is totally my fault, sorry. I should explain the xxx_tex.json generation. I’m not sure why this file is not generated in first place.
If you don’t have a xxx_tex.json in your library folder (which is not available in the zip) you can create it by exporting as “DragonBones Binary” first…

Klear · November 14, 2018, 6:38pm

That’s it, works now!

You should add that you need to export twice - once as DB binary and once as DB json.

Thanks a lot!

selimanac · November 14, 2018, 6:47pm

Just update it and going to add a proper screenshot, thank you.
I think older version of DB was generating this file…