Missing graphics/sprites in spine animation

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:


1 Like

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

2 Likes

Sure @sven. and thanks for answering!

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

Drophead.zip (7.6 KB)

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.

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)

It seems that Dragonbones got the great idea to not output width and height information for each slot/attachment/image in the JSON. :slight_smile: 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
                }
            },
...
3 Likes

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

3 Likes

@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. :+1:

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

5 Likes

Ah, this is a good tip. Added it to the docs and submitted a PR: https://github.com/defold/doc/pull/25
@sven can you take a look and merge it?

1 Like

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.

2 Likes

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

9 Likes

Nice writeup @selimanac!

5 Likes

Thank you master :slight_smile:

2 Likes

Nice, reviewed, merged and published new documentation!

2 Likes

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

Adding it manually did the trick.

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.

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)

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…

2 Likes

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!

1 Like

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

4 Likes