Yes, you can change the skin using JavaScript with spine-webcomponents! After getting the skeleton reference, you can access the skeleton's skin methods.
Here's how to change the skin:
const wc = await spine.getSkeleton('interactive1').whenReady;
wc.skeleton.setSkin('full-skins/girl-spring-dress');
wc.skeleton.setSlotsToSetupPose();
Creating custom combined skins
You can also create custom skins by combining multiple skins:
const wc = await spine.getSkeleton('interactive1').whenReady;
// Create a new custom skin
const customSkin = new spine.Skin('custom-skin');
// Add skins to combine them
customSkin.addSkin(wc.skeletonData.findSkin('nose/short'));
customSkin.addSkin(wc.skeletonData.findSkin('skin-base'));
customSkin.addSkin(wc.skeletonData.findSkin('eyes/violet'));
customSkin.addSkin(wc.skeletonData.findSkin('hair/brown'));
customSkin.addSkin(wc.skeletonData.findSkin('clothes/hoodie-orange'));
customSkin.addSkin(wc.skeletonData.findSkin('legs/pants-jeans'));
customSkin.addSkin(wc.skeletonData.findSkin('accessories/bag'));
customSkin.addSkin(wc.skeletonData.findSkin('accessories/hat-red-yellow'));
// Apply the custom skin
wc.skeleton.setSkin(customSkin);
wc.skeleton.setSlotsToSetupPose();
The setSlotsToSetupPose() call ensures that attachments from previous skins are properly cleared before applying the new skin.
