Show Character Layer

monogatari.characters({
    'y': {
        name: 'Yui',
        directory: 'yui',
        // Define layer order (bottom to top)
        layers: ['base', 'clothes', 'face', 'accessories'],
        // Define available sprites for each layer
        layer_assets: {
            base: {
                body: 'base_body.png'
            },
            clothes: {
                uniform: 'clothes_uniform.png',
                casual: 'clothes_casual.png',
                swimsuit: 'clothes_swimsuit.png'
            },
            face: {
                neutral: 'face_neutral.png',
                happy: 'face_happy.png',
                sad: 'face_sad.png',
                angry: 'face_angry.png'
            },
            accessories: {
                glasses: 'acc_glasses.png',
                hat: 'acc_hat.png'
            }
        },
        // Standard sprites can still be used
        sprites: {
            normal: 'normal.png' // Fallback non-layered sprite
        }
    }
});

layers: ['base', 'clothes', 'face', 'accessories']
//        ↑ back                        front ↑

'show character <character_id>:<layer> <sprite> [with <animation> [end-<animation>] [classes] [properties]]'

// First show the character (can be a layered sprite or regular)
'show character y normal',
// Then add/modify individual layers
'show character y:face happy'

'show character y:face happy'

'show character y:clothes casual with fadeIn'

'show character y:accessories glasses with fadeIn duration 0.5s'

'show character y:accessories glasses with fadeIn end-fadeOut'

'hide character <character_id>:<layer> [with <animation> [classes] [properties]]'

'hide character y:accessories'

'hide character y:accessories with fadeOut'

'hide character y:accessories with fadeOut duration 1s'

monogatari.script({
    'Start': [
        // Show the character with base layers
        'show character y normal at center with fadeIn',
        
        // Build up the character layer by layer
        'show character y:base body',
        'show character y:clothes uniform with fadeIn',
        'show character y:face neutral with fadeIn',
        
        'y Hello! I\'m Yui.',
        
        // Change expression
        'show character y:face happy',
        'y Nice to meet you!',
        
        // Add accessories
        'show character y:accessories glasses with fadeIn duration 0.3s',
        'y Let me put on my reading glasses.',
        
        // Change clothes
        'show character y:clothes casual with fadeIn end-fadeOut',
        'y I changed into something more comfortable.',
        
        // Remove accessories
        'hide character y:accessories with fadeOut',
        'y I don\'t need these anymore.',
        
        // Change expression
        'show character y:face sad',
        'y Time to say goodbye...',
        
        // Hide the whole character
        'hide character y with fadeOut'
    ]
});

// Get current layer states
const layers = monogatari.state('characterLayers');

// Get layer history
const history = monogatari.history('characterLayer');

/* Style all layer images */
[data-character] [data-layer] {
    /* Custom styles */
}

/* Style a specific layer */
[data-character="y"] [data-layer="face"] {
    /* Face layer specific styles */
}