Show Image

Description

'show image <resource> [at <position>] [with <animation> [classes] [properties]]'

The show image action allows you to display an image on screen. For character sprites, use the Show Character action instead.

Action ID: Show::Image

Reversible: Yes

Requires User Interaction: No

Parameters

Name Type Description
resource string Either an asset ID declared in monogatari.assets('images', {...}) or a filename in the images directory
position string Optional. CSS class for positioning (e.g., center, left, right)
animation string Optional. Animation name from Animate.css
classes string Optional. Additional CSS classes to apply
properties string Optional. Properties like duration

Properties

Property Description
duration Sets animation-duration CSS property. Format: duration <time> (e.g., duration 2s)

Asset Declaration

Declare image assets in your script.js or main.js:

monogatari.assets('images', {
    'flower': 'flower.png',
    'logo': 'company_logo.png',
    'item_sword': 'items/sword.png'
});

Images are loaded from assets/images/ by default.

Examples

Using Declared Assets

'show image flower with fadeIn'

Using Filename Directly

If you haven’t declared an asset, use the filename:

'show image flower.png with fadeIn'

Positioning

// Center (default)
'show image logo with fadeIn'

// Specific position
'show image flower at left with fadeIn'
'show image flower at right with slideInRight'

Animation Duration

'show image logo with fadeIn duration 3s'

Multiple Classes

'show image flower at center with fadeIn myCustomClass'

Image Caching

The action checks if the image has been preloaded and cached. If cached, it clones the cached image for faster display.

Complete Example

monogatari.assets('images', {
    'flower': 'flower.png',
    'butterfly': 'butterfly.png'
});

monogatari.script({
    'Start': [
        'show scene garden with fadeIn',
        'show image flower at left with fadeIn',
        'The garden is beautiful.',
        'show image butterfly at right with bounceIn duration 2s',
        'A butterfly appears!',
        'hide image butterfly with fadeOut',
        'hide image flower with fadeOut',
        'end'
    ]
});