= await Assets.load(accessoryUrl);\n const spineData = skeletonData.spineData;\n console.log('spineData', spineData);\n \n // Create accessory spine\n const accessorySpine = new Spine(spineData);\n accessorySpine.scale.set(1, -1); // Flip Y axis for correct orientation\n \n // Set animation if available\n if (spineData.animations.length > 0) {\n accessorySpine.state.setAnimation(0, spineData.animations[0].name, true);\n }\n \n // Find the correct slot and attach\n const slotName = `body-${accessory.attributes.placement.toLowerCase()}`;\n const slotIndex = this.axieSpine.skeleton.findSlotIndex(slotName);\n \n if (slotIndex >= 0) {\n this.axieSpine.slotContainers[slotIndex].addChild(accessorySpine);\n console.log(`✓ Attached ${accessory.name} to ${slotName}`);\n } else {\n console.warn(`Slot ${slotName} not found for accessory ${accessory.name}`);\n }\n } catch (error) {\n console.error(`Failed to load accessory ${accessory.name}:`, error);\n }\n }\n }\n\n // Animation control methods\n changeAnimation(): void {\n if (!this.axieSpine) return;\n\n this.currentAnimationIndex = (this.currentAnimationIndex + 1) % this.animations.length;\n const animationName = this.animations[this.currentAnimationIndex];\n \n console.log(`Changing animation to: ${animationName}`);\n \n // For non-looping animations, add idle afterwards\n const isLooping = animationName.includes('idle') || animationName.includes('run');\n \n this.axieSpine.state.setAnimation(0, animationName, isLooping);\n \n if (!isLooping) {\n this.axieSpine.state.addAnimation(0, 'action/idle/normal', true, 1.0);\n }\n }\n\n private showLoading(show: boolean): void {\n const loadingElement = document.getElementById('loading');\n if (loadingElement) {\n loadingElement.style.display = show ? 'block' : 'none';\n }\n }\n\n private showError(message: string): void {\n const container = document.getElementById('pixi-container');\n if (container) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'error';\n errorDiv.textContent = message;\n container.parentElement?.insertBefore(errorDiv, container);\n \n // Remove error after 5 seconds\n setTimeout(() => {\n errorDiv.remove();\n }, 5000);\n }\n }\n}\n\n// Initialize the demo\nasync function main() {\n try {\n console.log('Initializing Axie Mixer Demo...');\n \n const renderer = new AxieRenderer();\n await renderer.initialize();\n \n // Setup event listeners\n const loadAxieButton = document.getElementById('load-axie') as HTMLButtonElement;\n const changeAnimationButton = document.getElementById('change-animation') as HTMLButtonElement;\n \n if (loadAxieButton) {\n loadAxieButton.addEventListener('click', async () => {\n loadAxieButton.disabled = true;\n changeAnimationButton.disabled = true;\n \n try {\n await renderer.renderAxieWithAccessories();\n changeAnimationButton.disabled = false;\n } catch (error) {\n console.error('Error loading Axie:', error);\n } finally {\n loadAxieButton.disabled = false;\n }\n });\n }\n \n if (changeAnimationButton) {\n changeAnimationButton.addEventListener('click', () => {\n renderer.changeAnimation();\n });\n changeAnimationButton.disabled = true; // Enable after Axie is loaded\n }\n \n console.log('Demo ready! Click \"Load Axie with Accessories\" to start.');\n \n } catch (error) {\n console.error('Failed to initialize demo:', error);\n \n const app = document.getElementById('app');\n if (app) {\n const errorDiv = document.createElement('div');\n errorDiv.className = 'error';\n errorDiv.innerHTML = `\n Initialization Error
\n ${error instanceof Error ? error.message : 'Unknown error'}
\n Please check the console for more details.
\n `;\n app.appendChild(errorDiv);\n }\n }\n}\n\n// Start the demo\nmain();\n```\n\n## 📚 Available Accessories\n\n| Placement | Meta Key | Slot Name | Example Keys |\n|-----------|----------|-----------|--------------|\n| Air | `accessory-air` | `body-air` | `air1a`, `air1b`, `air1c`, `air1d` |\n| Cheek | `accessory-cheek` | `body-cheek` | `cheek1a`, `cheek2a` |\n| Ground | `accessory-ground` | `body-ground` | `ground1a` |\n| Hip | `accessory-hip` | `body-hip` | `hip1a` |\n| Neck | `accessory-neck` | `body-neck` | `neck1a` |\n\n### Special Meta Keys\n\n- `accessory-suit-off`: Set to `'true'` or `'false'` to toggle mystic suit\n- `accessory-id`: Optional Axie ID for accessories\n\n## 🎮 Animation System\n\nCommon animations you can use:\n\n```typescript\n// Idle animations\nrenderer.changeAnimation('action/idle/normal', true);\nrenderer.changeAnimation('action/idle/random-02', false);\n\n// Movement animations \nrenderer.changeAnimation('draft/run-origin', true);\n\n// Attack animations\nrenderer.changeAnimation('attack/ranged/cast-fly', false);\nrenderer.changeAnimation('attack/melee/tail-smash', false);\n\n// Chain animations with delay\nrenderer.addAnimation('action/idle/normal', true, 1.0);\n```\n\n## 🔧 Troubleshooting\n\n### Common Issues\n\n**Accessory appears upside down**\n- Solution: Ensure you set `accessorySpine.scale.set(1, -1)` to flip the Y axis\n\n**Textures not loading**\n- Solution: Make sure all textures are loaded before creating the Spine object\n- Check that CDN URLs are accessible and correct\n\n**Animation not found errors**\n- Solution: Verify animation names exist in the skeleton data\n- Use `skeletonData.animations` to list available animations\n\n**Slot not found for accessory**\n- Solution: Check that the slot name matches exactly (e.g., `body-air`, `body-cheek`)\n- Ensure the Axie spine was generated with accessory support\n\n**Performance issues**\n- Solution: Use texture atlasing and avoid recreating Spine objects frequently\n- Consider using `skipAnimation: true` for static displays\n\n### Debug Tips\n\n```typescript\n// List available animations\nconsole.log('Available animations:', skeletonData.animations.map(a => a.name));\n\n// List available slots\nconsole.log('Available slots:', axieSpine.skeleton.slots.map(s => s.data.name));\n\n// Check if accessory loaded correctly\nconst slotIndex = axieSpine.skeleton.findSlotIndex('body-air');\nconsole.log('Air slot index:', slotIndex);\n```\n\n## 📖 API Reference\n\n### Core Functions\n\n- `initAxieMixer(genes, samples, variants, animations)` - Initialize the mixer with data\n- `getAxieSpineFromGenes(genes, meta, skipAnimation)` - Generate Axie spine from genes\n- `getAxieColorPartShift(variant)` - Get color shift for variant\n- `getVariantAttachmentPath(slot, path, variant, colorShift)` - Build texture path\n\n### Types\n\n- `AxieBuilderResult` - Result from `getAxieSpineFromGenes`\n- `MixedSkeletonData` - Spine skeleton data format\n- `AxieBodyStructure` - Parsed gene structure\n\nFor complete API documentation, see the TypeScript definitions included with the package.\n","readmeFilename":"README.md"}