Using Monogatari as a ES6 Module inside a React Project

bastidiaaz

Hi! I need help on how to use Monogatari as a ES6 Module. I have a React project, where I want to include a little visual novel, so I decided to use monogatari. I read in the documentation that it's possible to import Monogatari, which I did, but that seems not to be enought to use <visual-novel> and other monogatari html tags. I suppose I have to do something else, but I can't make it work.

Thanks in advance for your help!

hyuchia

Hey there! I know we went over this on the discord server, but I'm writing this to record the answer for other people 🙂

Importing the Monogatari module into your js is simple:

import Monogatari from '@monogatari/core'

Just with that, you should be able to use all the normal monogatari functions, with the very minor difference of using a capital M instead of a lowercase m.

Monogatari.script(...)
Monogatari.assets(...)
Monogatari.run(...)
Monogatari.init(...)

You will also need to import the base CSS into your project, depending on what tools you're using, the import statement will look something like:

@import '@monogatari/core/dist/engine/core/monogatari.css

Then, you need to add the HTML structure to your project, you can just copy the contents from the index.html file. The elements you need to add are the visual-novel element and everything inside it:

<visual-novel>
	<language-selection-screen></language-selection-screen>
	<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>
	<credits-screen></credits-screen>
	<load-screen></load-screen>
	<save-screen></save-screen>
	<settings-screen></settings-screen>
	<help-screen></help-screen>
</visual-novel>

Monogatari uses "native" web components so you can add it on pretty much any other framework (react, vue, angular, etc.) and it will work.

Finally, make sure that you call the Monogatari.init() function (the one normally present in the main.js file) as this is the function that actually loads up everything, so you can call it only when you're going to show your game.