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
  • Change Log
  • New Features
  • Bug Fixes
  • Other Changes
  • Update Guide
  • Update the Engine Directory
  • Add the new HTML Layout
  • Update your CSS
  • Rename the html () function
  • Add the ForceAspectRatio Setting
  • Add the Video volume Preference

Was this helpful?

  1. Releases

v2.0.0.alpha.3

Previousv2.0.0.alpha.4

Last updated 4 years ago

Was this helpful?

The v2.0.0.alpha.3 release might not look so different from previous alpha versions but it has gone through a huge rewrite on some parts of the engine that will certainly add more possibilities in the future!

Download: ****

Change Log

New Features

  • A video volume control slider has been added to the settings screen

  • Components are now represented by custom HTML elements using the

  • Portuguese is now available as a translation

  • Aspect ratio can now be enforced on web deployed novels

Bug Fixes

  • Video playing would not make the game advance correctly

  • Jump rollback caused unintended changed on the jump history and thus only worked once

  • Stop audio action would cause issues with non looping media

Other Changes

  • The engine directory has been restructured to offer more organization

  • The html error pages have now been moved to the engine directory

  • Electron features have been updated to improve app security

  • CSS classes and selectors are being restructured

Update Guide

This guide only applies for games that were written using either the 2.0.0.alpha.1 or 2.0.0.alpha.2 testing versions.

Update the Engine Directory

Download the new version and replace the engine directory on your game with the one on the latest version. Once you've replaced it, you can go ahead and remove the error directory in your game since it has been moved inside the engine directory.

You can also delete the electron.js file you had in the project, it's now also being included as part of the engine directory.

Add the new HTML Layout

The alpha 2 version lacked any relevant HTML code on the index.html file which was in some times confusing for many people. The way Monogatari handles the HTML code has had it's third major rewrite and now, Monogatari uses custom elements that provide quite a lot of awesome functionality.

So, the first change needed is adding the new HTML layout to your index.html file:

index.html
<div id="monogatari">
    <visual-novel>
        <loading-screen></loading-screen>
        <main-screen>
            <main-menu></main-menu>
        </main-screen>
        <game-screen>
            <dialog-log></dialog-log>
            <text-box></text-box>
            <quick-menu></quick-menu>
        </game-screen>
        <gallery-screen></gallery-screen>
        <load-screen></load-screen>
        <save-screen></save-screen>
        <settings-screen></settings-screen>
        <help-screen></help-screen>
    </visual-novel>
</div>

Previously, only a div was available:

index.html
<div id="monogatari"></div>

Update your CSS

Rename the html () function

If you made some changes to the HTML on previous alpha versions, you probably used the html () function. This function has now been renamed to template. For example, the following code will change the main screen's HTML code for the one we're giving.

main.js
monogatari.component ('main-screen').template (function () {
    return `
        <h1>My Game Title</h1>
        <main-menu></main-menu>
    `;
});

In case the changes you are making to the HTML code of a component are simple such as the example above where no programming is required, you can now also use HTML templates!

Simply add an HTML template tag to the body on theindex.html file with the id of the component you want it to apply to as follows:

index.html
<template id="main-screen">
    <h1>My Game Title</h1>

    <main-menu></main-menu>
</template>
index.html
<body>

    <!-- Fallback when JavaScript is not available -->
    <noscript>
        <div class="middle text--center">
            <h2>JavaScript Disabled or not Supported.</h2>
            <small>To play this game, please enable JavaScript executing or use a different browser.</small>
        </div>
    </noscript>

    <div id="monogatari">
        <visual-novel>
            <loading-screen></loading-screen>
            <main-screen>
                <main-menu></main-menu>
            </main-screen>
            <game-screen>
                <dialog-log></dialog-log>
                <text-box></text-box>
                <quick-menu></quick-menu>
            </game-screen>
            <gallery-screen></gallery-screen>
            <load-screen></load-screen>
            <save-screen></save-screen>
            <settings-screen></settings-screen>
            <help-screen></help-screen>
        </visual-novel>
    </div>

    <template id="main-screen">
        <h1>My Game Title</h1>
        <main-menu></main-menu>
    </template>
</body>

The HTML template and template function will have the same result.

Add the ForceAspectRatio Setting

Open your options.js file and add this new setting in the settings section, right bellow the AspectRatio one.

// The Aspect Ratio your background images are on. This only has effect on
// web deployed novels if forceAspectRatio flag is on.
'AspectRatio': '16:9',

// Force aspect ratio, it will make all images to comply with aspect ratio.
// Values: 'None' (don't force), 'Visuals' (force only visuals)
// or 'Global' (force all game)
'ForceAspectRatio': 'None',

// Enables or disables the typing text animation for the whole game.
'TypeAnimation': true,
// The Aspect Ratio your background images are on. This only has effect on
// web deployed novels if forceAspectRatio flag is on.
'AspectRatio': '16:9',

// Enables or disables the typing text animation for the whole game.
'TypeAnimation': true,

Add the Video volume Preference

Video volume can now be controlled by the player as it was previously possible with music, sounds and voice media. Open your options.js file and add this new preference in the preferences section of the file (right at the bottom).

// Initial Volumes from 0.0 to 1.
'Volume': {
    'Music': 1,
    'Voice': 1,
    'Sound': 1,
    'Video': 1
},
// Initial Volumes from 0.0 to 1.
'Volume': {
    'Music': 1,
    'Voice': 1,
    'Sound': 1
},

With so many changes going on, there's a chance some CSS you had is no longer working, if you want to check the CSS applied to each component, you can check it at the .

There's also still a small amount of CSS that you can check as well.

https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.alpha.3.zip
web components API
component's directory
here