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!
- A video volume control slider has been added to the settings screen
- Portuguese is now available as a translation
- Aspect ratio can now be enforced on web deployed novels
- 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
- The
enginedirectory has been restructured to offer more organization - The html error pages have now been moved to the
enginedirectory - Electron features have been updated to improve app security
- CSS classes and selectors are being restructured
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.
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.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:2.0.0.alpha3 Layout
2.0.0.alpha2 Layout
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>
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.
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 the
index.html file with the id of the component you want it to apply to as follows:Example
Full Body of Example
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.
Open your
options.js file and add this new setting in the settings section, right bellow the AspectRatio one. v2.0.0.alpha.3 Settings
v2.0.0.alpha.2 Settings
// 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,
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).v2.0.0.alpha.3 Preferences
v2.0.0.alpha.2 Preferences
// 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
},
Last modified 3yr ago