• Editor

  • Changing Skins Dynamically In-Game

I'm fairly new to spine but I've watched most of the videos and have been diddling around. I'm also no stranger to keyframe animation.

For my game, I plan on having my character's gear be fully interchangable. Does the skins feature of spine support some kind of method to dynamically mix and match bone skins in-game? (for instance the player can choose to use the helmet from set A, but the gloves from set B).

Thanks!
-Guts

Related Discussions
...

Yes, you can programmatically create and change skins. You may find it easy to use skins in the editor to group items, eg a shirt that is 5 attachments. At runtime you could create a new, empty skin and add all attachments from the shirt and other skins. The only downside is you can't easily preview combining skins in the editor. We will add something to do that eventually.

Definitely also very interested in this. Love the way Spine works. Although traditional methods of having a large number of items, and then animating them individually for all animations would be a nightmare. I was thinking of using spline to animate the naked character body and then rig different clothing to match the movement in each frame of the body. Sadly my programming skills aren't up to that level. If somebody could post a tutorial on how to do this, would be great. :clap:

Create your skeleton and animations in Spine, attach all your images in Spine, then at runtime just show the attachments you want to show. If you don't animate image changes, this is sufficient. If you do then instead of just showing attachments, create a skin that contains the attachments you want to show.

Nate,

Extending your shirt example, let's say we have 100 possible shirts that a character can wear.

Do I have to create 100 slots, attach all possible shirt images and hide them until needed, or can I create 1 extra slot and attach whichever shirt image I want at any point during runtime?

It would seem a waste of memory to have to load in all possible shirts at startup if 95 of them might never get used (ie. the user never selects them in-game, but they have to be loaded anyway "just in case")

a month later

could you please give us a example? about how to create attachments programmatically,and how to change images which download from internet?

alabatusa wrote

Definitely also very interested in this. Love the way Spine works. Although traditional methods of having a large number of items, and then animating them individually for all animations would be a nightmare. I was thinking of using spline to animate the naked character body and then rig different clothing to match the movement in each frame of the body. Sadly my programming skills aren't up to that level. If somebody could post a tutorial on how to do this, would be great. :clap:

I've meet the same problem，did you get that？

You can add this code to SkeletonTest.java in spine-libgdx. Configuring the region for a RegionAttachment varies slightly per runtime. See AtlasAttachmentLoader for your runtime.

RegionAttachment attachment = new RegionAttachment("newhead");
attachment.setRegion(atlas.findRegion("goblingirl/head"));
attachment.setX(0);
attachment.setY(0);
attachment.setScaleX(1);
attachment.setScaleY(1);
attachment.setRotation(0);
attachment.setWidth(64);
attachment.setHeight(64);
attachment.updateOffset();
skeleton.findSlot("right foot").setAttachment(attachment);

Image removed due to the lack of support for HTTPS. | Show Anyway

The difficult part is setting the x/y/scaleX/scaleY/rotation (SRT) programmatically, which probably requires you to create your images in a specific way, so all images for a slot can use the same SRT.

Thanks，Nate！I'm code on cocos2d－iPhone，I will try it first～

Nate wrote

You can add this code to SkeletonTest.java in spine-libgdx. Configuring the region for a RegionAttachment varies slightly per runtime. See AtlasAttachmentLoader for your runtime.

RegionAttachment attachment = new RegionAttachment("newhead");
attachment.setRegion(atlas.findRegion("goblingirl/head"));
attachment.setX(0);
attachment.setY(0);
attachment.setScaleX(1);
attachment.setScaleY(1);
attachment.setRotation(0);
attachment.setWidth(64);
attachment.setHeight(64);
attachment.updateOffset();
skeleton.findSlot("right foot").setAttachment(attachment);

Image removed due to the lack of support for HTTPS. | Show Anyway

The difficult part is setting the x/y/scaleX/scaleY/rotation (SRT) programmatically, which probably requires you to create your images in a specific way, so all images for a slot can use the same SRT.

Thanks Nate，but I'm afraid your solution could not solve my problem. The image which I want to changed,is download from the internet. It not exist in the atlas.

It doesn't matter where the image comes from. You can set the region from anywhere.

Note the code about should translate directly to spine-cocos2d-iphone. There is a difference with how the region is set, but you can look in spine-c at AtlasAttachmentLoader_newAttachment for how to do that. Also look in SkeletonJson near where it calls RegionAttachment_updateOffset for how to configure the RegionAttachment.

11 days later
Nate wrote

Note the code about should translate directly to spine-cocos2d-iphone. There is a difference with how the region is set, but you can look in spine-c at AtlasAttachmentLoader_newAttachment for how to do that. Also look in SkeletonJson near where it calls RegionAttachment_updateOffset for how to configure the RegionAttachment.

I'm almost give up! I can put the head on the right hand like this:

    Slot *rh = [animationNodeLineboy findSlot:@"right_hand"];
    Attachment *attachment = [animationNodeLineboy getAttachment:@"right_hand" attachmentName:@"shenti/fl.bd_x_a9_01.0_t"];
    Slot_setAttachment(rh,attachment);

but, I still don't know how to change the right hand's image! In your example code above,you can set the region like this "attachment.setRegion(atlas.findRegion("goblingirl/head"));" But in cocos2d-iPhone, how can I do that? I'm sorry I can't get the answer from the "RegionAttachment_updateOffset". so please please please give me a exampler in cocos2d-iPhone~ okey?