Monogatari Documentation
HomepageGitHubDiscordTwitter
master
master
  • Welcome
  • Getting Started
    • Step 1: Setup Your Environment
    • Step 2: Download Monogatari
    • Step 3: Get Familiarized
    • Step 4: Make Your First Visual Novel
  • Upgrading from v1.4.1
  • F.A.Q.
  • Diagnosing Errors
  • Building Blocks
    • Script & Labels
    • Characters
    • Variables & Data Storage
    • Actions
      • Life Cycle
    • Components
      • Life Cycle
      • Built-in Properties
      • Built-in Functions
  • Script Actions
    • Choices
    • Clear
    • Conditionals
    • Dialogs
    • End
    • Gallery
    • Hide Canvas
    • Hide Character
    • Hide Image
    • Hide Particles
    • Hide Video
    • Input
    • Functions
    • Jump
    • Next
    • Placeholder
    • Play Music
    • Play Sound
    • Play Voice
    • Show Canvas
    • Show Background
    • Show Character
    • Show Image
    • Show Message
    • Show Notification
    • Show Particles
    • Show Scene
    • Show Video
    • Stop Music
    • Stop Sound
    • Stop Voice
    • Vibrate
    • Wait
  • Components
    • Credits Screen
    • Quick Menu
    • Loading Screen
    • Main Screen
    • Choice Container
    • Save Slot
    • Text-Box
  • Configuration Options
    • Game Configuration
      • Asset Preloading
      • Internationalization
      • Saving
      • Skip Main Menu
      • Storage
    • Player Preferences
    • Split Files
  • Style & Design
    • Responsiveness
    • CSS Classes
    • HTML Data Attributes
    • Icons
    • Image Menus
  • Releasing Your Game
    • Chrome App
    • Desktop App
    • Mobile
    • Web
  • Advanced: Monogatari Development
    • Core Libraries
      • Artemis
      • Kayros
      • Pandora
    • Actions
    • Components
    • Translations
    • Events
  • Releases
    • v2.0.0.alpha.8
    • v2.0.0.alpha.7
    • v2.0.0.alpha.6
    • v2.0.0.alpha.5
    • v2.0.0.alpha.4
    • v2.0.0.alpha.3
Powered by GitBook
On this page
  • Description
  • Parameters
  • Properties
  • Examples
  • Using an image as the background
  • Using CSS properties as the background
  • Using Animations

Was this helpful?

  1. Script Actions

Show Background

Show a background without removing any game elements.

PreviousShow CanvasNextShow Character

Last updated 4 years ago

Was this helpful?

Description

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

The show background action will change the background without removing any game elements (as opposed to the ).

This action uses the assets from the scene action so they still need to be declared as scene assets.

Action ID: Show::Background

Reversible: Yes

Requires User Interaction: No

Parameters

Name

Type

Description

resource

string

The resource to use as the background. This resource may be one of the following:

  • Asset ID: The ID of a scene asset previously defined.

animations

string

Optional. A list of comma separated animation names with which the background 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 background action.

Property Name

Type

Description

duration

string

Examples

Using an image as the background

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.

Monogatari.script ({
    'Start': [
        'show background mountain'
        'end'
    ]
});
Monogatari.assets ('scenes', {
    'mountain': 'mountain.png',
    'sea': 'sea.png'
});

Using CSS properties as the background

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

You can also use CSS gradients for backgrounds.

Monogatari.script ({
    'Start': [
        "We're about to show a linear gradient.",
        "show background linear-gradient(to right, red, yellow)",
        "Isn't that lovely?",
        "end"
    ]
});

Using Animations

Monogatari.script ({
    'Start': [
        'show background sea with fadeIn'
        'end'
    ]
});
Monogatari.assets ('scenes', {
    'mountain': 'mountain.png',
    'sea': 'sea.png'
});

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 background #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 show background statement as follows:

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

Monogatari.script ({
    'Start': [
        'show background mountain with ken-burn'
        'end'
    ]
});
Monogatari.assets ('scenes', {
    'mountain': 'mountain.png',
    'sea': 'sea.png'
});
.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); 
    }
}

CSS Property: Any valid non-spaced value for the .

The duration for the animations used. The value for this property must be a non-spaced valid value for the CSS property.

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

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

scene action
background-image
background-color
here
background CSS property
animation-duration