show-scene.md

description
Change the background

Show Scene

Description

'show scene <resource> [with [animations] [classes] [properties]]'

The scene action will change the background and clear the screen, removing all characters, images and text currently displayed.

Action ID: Scene

Reversible: Yes

Requires User Interaction: No

Parameters

Name	Type	Description
resource	string	The resource to use as the background for the scene. This resource may be one of the following: Scene ID: The ID of a scene asset previously defined. CSS Property: Any valid non-spaced value for the background CSS property.
animations	string	Optional. A list of comma separated animation names with which the scene will be shown.
classes	string	Optional. A list of comma separated CSS class names that will be added to the background element. You can create custom classes on your CSS and add them to your background dynamically using this list.
properties	string	Optional. A list of comma separated properties with their respective value.

Properties

The following is a comprehensive list of the properties available for you to modify certain behaviors of the scene action.

Property Name	Type	Description
duration	string	The duration for the animations used. The value for this property must be a non-spaced valid value for the animation-duration CSS property.

Using an image as the background

The most common case of

If you want to use an image for the background, remember you first have to declare your image assets and place all your files under the assets/scenes/ directory.

{% tabs %} {% tab title="Script" %}

monogatari.script ({
    'Start': [
        'show scene mountain'
        'end'
    ]
});

{% endtab %}

{% tab title="Scenes Assets" %}

monogatari.assets ('scenes', {
    'mountain': 'mountain.png',
    'sea': 'sea.png'
});

{% endtab %} {% endtabs %}

Using CSS properties as the background

If you'll use CSS to set a custom background, you can use any valid non-spaced value for the background-image or background-color CSS properties. Using CSS is perfect for when you want your background to be a solid color. Here are some valid statements:

monogatari.script ({
    'Start': [
        'show scene #fff'
        'show scene rgb(0, 0, 0)'
        'show scene url("assets/scenes/mountain.png")'
        'end'
    ]
});

Using Animations

Monogatari comes with some built-in animations ready for you to use, you can see the list of animations and visualize them here. Using animations is as simple as indicating their name!

{% tabs %} {% tab title="Script" %}

monogatari.script ({
    'Start': [
        'show scene sea with fadeIn'
        'end'
    ]
});

{% endtab %}

{% tab title="Scenes Assets" %}

monogatari.assets ('scenes', {
    'mountain': 'mountain.png',
    'sea': 'sea.png'
});

{% endtab %} {% endtabs %}

Modifying an animation duration

The following will set the background to a solid color using a CSS value and modify the duration of the fadeIn animation to 20 seconds.

monogatari.script ({
    'Start': [
        'show scene #424242 with fadeIn duration 20s'
        'end'
    ]
});

Creating a custom animation

You can also use CSS to create your own animations, you'll have to apply them to a CSS class and then use the scene statement as follows:

For example, note the following CSS code creating a simple Ken Burn Animation:

{% tabs %} {% tab title="Script" %}

monogatari.script ({
    'Start': [
        'show scene mountain with ken-burn'
        'end'
    ]
});

{% endtab %}

{% tab title="Scenes Assets" %}

monogatari.assets ('scenes', {
    'mountain': 'mountain.png',
    'sea': 'sea.png'
});

{% endtab %}

{% tab title="CSS" %}

.ken-burn {
    animation-name: ken-burns; /* Name of the animation to use */
    animation-duration: 30s;
    animation-iteration-count: infinite; /* 1 if it should only move once */
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    -moz-transition: ease 1s all;
    -o-transition: ease 1s all;
    -webkit-transition: ease 1s all;
    transition: ease 1s all;
}

@keyframes ken-burns {
    0%    { 
        transform: translateX(0); 
    }
    50%    {
        transform: translateX(-500px);
    }
    100%  {
        transform: translateX(0px); 
    }
}

{% endtab %} {% endtabs %}