Show Image

Show an image on screen

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'
    ]
});

Related Actions

• Hide Image - Remove an image from screen

• Show Character - Display character sprites

• Show Scene - Change the background