# 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**](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](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
* 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

{% hint style="warning" %}
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.
{% endhint %}

### 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:

{% tabs %}
{% tab title="2.0.0.alpha3 Layout" %}
{% code title="index.html" %}

```markup
<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>
```

{% endcode %}
{% endtab %}

{% tab title="2.0.0.alpha2 Layout" %}
Previously, only a `div` was available:

{% code title="index.html" %}

```markup
<div id="monogatari"></div>
```

{% endcode %}
{% endtab %}
{% endtabs %}

### 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](https://github.com/Monogatari/Monogatari/tree/develop/core/components).

There's also still a small amount of CSS [here](https://github.com/Monogatari/Monogatari/blob/develop/core/style/monogatari.css) 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.

{% code title="main.js" %}

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

{% endcode %}

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:

{% tabs %}
{% tab title="Example" %}
{% code title="index.html" %}

```markup
<template id="main-screen">
    <h1>My Game Title</h1>

    <main-menu></main-menu>
</template>
```

{% endcode %}
{% endtab %}

{% tab title="Full Body of Example" %}
{% code title="index.html" %}

```markup
<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>
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

### Add the ForceAspectRatio Setting

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

{% tabs %}
{% tab title="v2.0.0.alpha.3 Settings" %}

```javascript
// 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,
```

{% endtab %}

{% tab title="v2.0.0.alpha.2 Settings" %}

```javascript
// 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,
```

{% endtab %}
{% endtabs %}

### 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).

{% tabs %}
{% tab title="v2.0.0.alpha.3 Preferences" %}

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

{% endtab %}

{% tab title="v2.0.0.alpha.2 Preferences" %}

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

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.monogatari.io/documentation/2.1.0/releases/v2.0.0.alpha.3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.