v2.1.0
HomepageGitHubDiscordTwitter

v2.0.0.alpha.3

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: https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.alpha.3.zip

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 web components API

  • 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>

Update your CSS

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 component's directory.

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

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>

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,

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
},

Previousv2.0.0.alpha.4

Last updated