# Hyuchia
> Diana Islas Ocampo
If by the end of my life I was able to help at least someone, then I'll have succeeded.
> Full content export — 48 documents.
---
# Hire
Source: https://hyuchia.com/hire
## Experience
As a freelancer I've worked in several projects across several companies.
---
---
# Home
Source: https://hyuchia.com/
Hi, my name is **Diana**, I'm a software engineer from Mexico City who's been at it since 2012 doing full-stack web development, android applications and even some desktop applications for Linux.
I love FOSS. Most of my personal projects are **Open Source** and released under the **MIT** or **GPLv3 License**.
I'm a privacy & security advocate and do freelancing on the side.
I really love what I do and I'd like to help as much people as I can. This is also a way for me to pay back all those people who have helped me learn everything I know and hopefully help others to learn too!
If you'd like to support what I do, you can now sponsor me on GitHub. It lets me dedicate more time to my Open Source work, and it truly means the world to me.
Sponsor me on GitHub
You may also be looking for my personal Blåhaj Girl blog where I write about my life, my feelings and try to do some poetry.
---
If by the end of my life I was able to help at least someone, then I'll have succeeded.
---
# Monogatari v2.8.0
> Monogatari v2.8.0: a full TypeScript rewrite, save screenshots, preload/unload actions, 40+ text effects, desktop file-system storage, and a pile of fixes.
Source: https://hyuchia.com/monogatari-v2.8.0
Section: Posts
**Download Link**: [monogatari-v2.8.0.zip](https://storage.monogatari.io/releases/monogatari-v2.8.0.zip)
`v2.8.0` is the largest release since `v2.6.0`. Under the hood, the entire engine has been rewritten in TypeScript and broken apart into focused modules; on the surface, you get explicit asset management, save screenshots, native desktop storage, a big library of dialogue text effects, and a long list of fixes. Here's everything that changed and how to take advantage of it.
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
**🧠 A Full TypeScript Rewrite**
The core engine, every built-in action, and every component have been migrated to TypeScript. The [`@monogatari/core`](https://www.npmjs.com/package/@monogatari/core) package now ships its own type definitions, so whether you're writing custom actions and components or just scripting your game in an editor, you get full autocomplete and type-checking for the engine API, game settings, and the new typewriter effects.
**🧩 The Engine, Split Into Modules**
The old ~3,500-line `monogatari.ts` "god object" has been split into focused modules — `assets`, `characters`, `i18n`, `input`, `lifecycle`, `persistence`, and `ui`. The build now produces two clearly separated targets:
- `lib/monogatari.module.js` — an ES module, the `main` entry of the npm package, ideal for bundlers (Parcel, Vite, webpack, etc.).
- `dist/engine/core/monogatari.js` — a self-contained browser bundle, the one used by the classic drop-in game template.
Nothing changes about how you *write* a game, but the engine is now far easier to maintain and to load from a bundler.
**📦 Preload & Unload Actions**
Two new script actions give you explicit control over when assets live in memory. [`preload`](https://monogatari.io/v2/script-actions/preload) pre-caches music, sounds, voices, scenes, images, and character sprites before you need them; [`unload`](https://monogatari.io/v2/script-actions/unload) frees them when you don't.
```javascript
// Single assets
'preload music main_theme',
'preload scene classroom',
'preload character y happy',
// Wait until the asset is ready before continuing
'preload scene boss_room blocking',
// Free memory again
'unload scene classroom',
'unload music', // a whole category
'unload all permanent', // memory *and* the IndexedDB cache
```
You can also group assets into named blocks and load or free them in a single statement — great for per-chapter management:
```javascript
monogatari.action('Preload').blocks({
'Chapter1': {
music: ['theme_song', 'battle_music'],
scenes: ['school_gate', 'classroom'],
characters: { 'y': ['happy', 'sad', 'normal'] },
},
});
// ...later in your script
'preload block Chapter1 blocking',
// ...and at the end of the chapter
'unload block Chapter1',
```
Audio is decoded once and persisted in IndexedDB, so re-preloading across sessions is instant — unless you `unload ... permanent`, which clears the persistent cache too.
**📸 Save Screenshots**
Save slots can now show a screenshot of the exact moment a save was made instead of a generic scene image. Turn it on with a single setting:
```javascript
monogatari.settings({
'Screenshots': true,
});
```
When enabled, the engine captures the game screen (via [`modern-screenshot`](https://github.com/qq15725/modern-screenshot)) as you save and stores it in a dedicated IndexedDB database, kept separate from your save data so it never bloats the save object. Slots then render that screenshot as their thumbnail. ⚠️ Screenshots have a couple of requirements around CSP and cross-origin assets — see the upgrade notes below and the [Saving documentation](https://monogatari.io/v2/configuration-options/game-configuration/saving).
**💾 File System Storage**
For games packaged as desktop apps (Electron / Electrobun), there's a new `FileSystem` storage adapter that writes saves straight to disk through a desktop bridge instead of the browser's IndexedDB:
```javascript
monogatari.settings({
'Storage': {
'Adapter': 'FileSystem',
'Store': 'SaveData',
},
});
```
If the same build is opened on the web (no desktop bridge present), it automatically falls back to IndexedDB, so it keeps working everywhere.
**🙈 Show & Hide Textbox**
Two tiny but frequently requested actions to get the dialog UI out of the way — perfect for showing off a CG or a scene:
```javascript
'show scene cg_sunset with fadeIn',
'hide textbox',
'wait 2000',
'show textbox',
'e ...beautiful, right?',
```
Visibility is part of the saved state, so it survives save/load and rollback. One thing to remember: once hidden, the box stays hidden for *every* following line until you `show textbox` again — so always bring it back before a line you want the player to read. Docs: [show textbox](https://monogatari.io/v2/script-actions/show-textbox) · [hide textbox](https://monogatari.io/v2/script-actions/hide-textbox).
**✨ A Big Library of Text Effects**
Dialogue now supports inline text effects with a simple `{effect}…{/effect}` markup. Open with `{effect}` and close with `{/effect}`:
```javascript
'y I am {angry}absolutely furious{/angry}! {pause:500}{whisper}...but I will be okay{/whisper}.',
'narrator The {glitch}corrupted{/glitch} signal pointed somewhere {mysterious}strange{/mysterious}.',
```
There are 40+ effects across several families:
- **Movement** — `shake` (plus `shake-hard`, `shake-slow`, `shake-little`, `shake-horizontal`, `shake-vertical`), `wave` / `wave-slow` / `wave-fast`
- **Reveal** — `fade`, `blur`, `scale`, `scale-bounce`, `slide-up`, `slide-down`, `redacted`, `invisible-ink`, `handwriting`, `flicker`
- **Glitch** — `glitch`, `glitch-hard`, `glitch-slow`
- **Style** — `bold`, `italic`, `big`, `small`, `impact`, `rainbow`, `glow`
- **Emotion presets** that bundle several of the above into one keyword — `angry`, `scared`, `happy`, `sad`, `mysterious`, `excited`, `whisper`, `shout`, `dizzy`, `dreamy`, `robotic`, `static`
Effects nest, so you can combine them:
```javascript
'{shake}{angry}STOP{/angry}{/shake} right there!',
```
…and they're all driven by CSS custom properties, so you can re-tune them globally without touching the engine:
```css
type-character[data-component] {
--effect-shake-intensity: 4px;
--effect-wave-amplitude: 0.5em;
--effect-wave-speed: 0.6s;
--effect-glitch-color-1: #ff00ff;
--effect-glitch-color-2: #00ff00;
}
```
The full list and details live in the [Dialogs](https://monogatari.io/v2/script-actions/dialogs) and [Type Writer](https://monogatari.io/v2/components/type-writer) docs.
**⏩ Semi-Instant Skipping**
If you keep `InstantText` off — so finishing a line *rushes* the typewriter while keeping its effects, rather than dumping the whole line at once — you can now also let players make that rush genuinely fast. Set the `min` value of the `text-speed` slider in your settings screen below `0`:
```html
```
Players who drag the slider into the negative range get a near-instant fast-forward that still respects formatting and effects.
**🚦 A Proper Action-Blocking API**
Actions that need to pause the story until they finish — waiting on a choice, a notification permission, an async load — now declare a static `blocking` flag and a `shouldProceed()` check instead of toggling a global. The old `block` / `executing sub action` globals still work for now but are deprecated; if you maintain custom actions, see the upgrade notes below.
#### 🐛 Bug Fixes
- Fixed audio volume being reset to `0` on fade-in instead of fading from the configured level.
- Fixed word-wrap making text "jump" mid-typewriter — unrevealed characters now use `opacity` instead of `visibility`.
- Text speed now updates live from the settings slider (previously it only took effect after a refresh), and the slider shows the correct value on reload.
- Fixed `Message` actions soft-locking the screen and blocking progress.
- Fixed `AutoPlaySpeed` flipping to the opposite value every time the player changed it and refreshed the game.
- Fixed the `selector` parameter not being passed to `init()` in actions and components.
- Fixed the page not centering correctly when aspect-ratio enforcement was active.
- Fixed dialog-log and text-box scrolling behavior.
- Made visual actions (`show`/`hide` image, character, layer, canvas, video, etc.) record state and history consistently, for more reliable rollback.
- Fixed a recursive-call bug in the engine core.
- Re-exported `tsParticles` for legacy compatibility.
#### 📦 Misc
- Added the [`modern-screenshot`](https://www.npmjs.com/package/modern-screenshot) dependency that powers the screenshots feature.
- **New service-worker caching strategy:** network-first for navigations (so fresh CSP and markup reach players immediately), stale-while-revalidate for your JS/CSS (instant load, updated on the next visit), and cache-first for everything under `assets/`. Opaque cross-origin responses are no longer cached — this is what keeps screenshots from coming out black.
- Documentation has moved into the main repository and now lives at [monogatari.io/v2](https://monogatari.io/v2).
- The development toolchain now runs on **Bun**, with a custom dev server (WebSocket live-reload), a `build-web.ts` web build, and Electrobun scripts for desktop distribution. None of this is required to ship a game — the downloadable template is still a static site you can serve any way you like.
- Removed the old Parcel / Yarn toolchain, cleaned up leftover debug logs, added missing debug-mode error messages, and updated the CI lint/test tasks.
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to `2.8.0` and now ships TypeScript types.
### How To Upgrade
#### If you're on a `v2.x.x` version
For most games, upgrading is the usual drill: replace the files in your `engine` directory with the new ones from the download. A few things are worth double-checking:
- **Custom dialog markup:** if you use inline text effects, make sure your closing tags are `{/effect}` (for example, `{shake}boom{/shake}`).
- **Custom actions:** if you wrote actions that called `engine.global('block', …)` or relied on `_executing_sub_action`, migrate them to the new pattern — a static `blocking` property plus a `shouldProceed()` that throws while the action is blocking. The old globals are still honored, but deprecated.
- **Turning on screenshots:** besides `Screenshots: true`, you'll need to:
- add `blob:` to the `script-src` directive of your `Content-Security-Policy` (the template's `script-src-elem` already allows `blob:`; `modern-screenshot` also needs it in `script-src`),
- serve any **cross-origin** assets (for example, from a CDN) with CORS headers (`Access-Control-Allow-Origin`), otherwise the browser taints the canvas and your thumbnails come out black, and
- replace your `service-worker.js` with the new one, which skips caching opaque responses.
#### If you're on `v1.4.1` (stable) or below
If you're upgrading from a game built on `v1.4.1`, we recommend reading the [Upgrade Guide](https://monogatari.io/v2/upgrading-from-v1-4-1) first — the jump to v2 is a big one.
---
# Monogatari v2.6.0
Source: https://hyuchia.com/monogatari-v2.6.0
Section: Posts
**Download Link**: [monogatari-v2.6.0.zip](https://datadyne.perfectdark.space/monogatari/releases/monogatari-v2.6.0.zip)
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- The engine now uses the Web Audio API to reproduce media replacing the old HTML5 Audio Element approach. This means better looping and a whole bunch of [Audio Effects](https://developers.monogatari.io/documentation/script-actions/play-music#audio-effects) you can now use.
- Dynamically adding a class to the text box element is now possible via [a new property in the Dialog Action](https://developers.monogatari.io/documentation/script-actions/dialogs#custom-classes)
#### 🐛 Bug Fixes
- [Issue #158](https://github.com/Monogatari/Monogatari/issues/158) The distraction free mode would incorrectly reset the `text-box` element to a `block` display instead of `grid`
### 📦 Misc
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
### How To Upgrade
#### If you're on the v2.x.x version
If you were already using a previous release from `v2.x.x`, then upgrading is pretty simple, replace the files in your `engine` directory with the new ones,
#### If you're on v1.4.1 (stable) or below:
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.5.1
Source: https://hyuchia.com/monogatari-v2.5.1
Section: Posts
**Download Link**: [monogatari-v2.5.1.zip](https://datadyne.perfectdark.space/monogatari/releases/monogatari-v2.5.1.zip)
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🐛 Bug Fixes
- Fixed an issue caused by the update to the new typewriter system that would cause an error when using `centered` or `nvl` dialogs
### 📦 Misc
- Dependencies have been upgraded to their latest version
### How To Upgrade
#### If you're on the v2.x.x version
If you were already using a previous release from `v2.x.x`, then upgrading is pretty simple, replace the files in your `engine` directory with the new ones,
#### If you're on v1.4.1 (stable) or below:
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.4.0
Source: https://hyuchia.com/monogatari-v2.4.0
Section: Posts
Download Link: [monogatari-v2.4.0](https://datadyne.perfectdark.space/monogatari/releases/monogatari-v2.4.0.zip)
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
## 📰 Release Change Log
### 🌟 New Features
- Added support for layered sprites
- Hungarian translations now available for the UI (Thank you [Levev](https://github.com/Levev)!)
- Taditional Chinese translations now available for the UI (Thank you [Koala Yeung](https://github.com/yookoala)!)
- Rollback can now be disabled for the entire game
### 🐛 Bug Fixes
- [PR #154](https://github.com/Monogatari/Monogatari/pull/154) Fix issue when a scene would get overridden by a background when the game loaded.
### 📦 Misc
- Core is now using [esbuild](https://esbuild.github.io/) instead of parcel to build
### How To Upgrade
If you're on the v2.x.x version
If you were already using a previous release from v2.x.x, then upgrading is pretty simple, replace the files in your engine directory with the new ones,
If you're on v1.4.1 (stable) or below:
If you are planning to upgrade from a game made with the v1.4.1 release, we recommend you reading the Upgrade Guide
---
# Monogatari v2.0.2
Source: https://hyuchia.com/monogatari-v2.0.2
Section: Posts
This small release also comes with the great news that the community bug where the tags filter didn't work has been fixed now!
**Download Link**: [Monogatari-v2.0.2.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.2.zip)
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- Indonesian translations is now available for the UI (Thanks you [mnafisalmukhdi1](https://github.com/mnafisalmukhdi1)!)
#### 🐛 Bug Fixes
- Shake animations have been updated and some issues where they behaved differently to the other animations have been addressed.
- [Issue #136](https://github.com/Monogatari/Monogatari/issues/136): Changing the volume of media (music, sound, voice) from the settings screen, would override the relative volume set by the script (i.e. `play music myMusic with volume 20`) of the media being played .
### 📦 Misc
- Dependencies have been upgraded to their latest version
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- [Issue #128](https://github.com/Monogatari/Monogatari/issues/128): jQuery has finally been removed from the distribution package, meaning the `vendor` directory is now gone. This was long due, jQuery was initially bundled together with monogatari for two reasons: the core used to use it in much earlier versions (v1.x times) and, many of the tutorials you'd find online about how to do things on the web would point to jQuery-based solutions so it was provided in order to simplify things to game developers. A lot of time has passed since then, and Monogatari dropped its usage on the core quite a while ago while also providing a simple enough bundled-in replacement in the form of the [Artemis library](https://gitlab.com/AegisFramework/Artemis). Games that still rely on jQuery can continue using it with no problem but they'll have to download jQuery and add it to their project manually from now on.
### How To Upgrade
#### If you're on the v2.x.x version
If you were already using a previous release from `v2.x.x`, then upgrading is pretty simple, replace the files in your `engine` directory with the new ones,
#### If you're on v1.4.1 (stable) or below:
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.1
Source: https://hyuchia.com/monogatari-v2.0.1
Section: Posts
We may not yet have an official release announcement for v2.0.0 even when it got released on October but that doesn't mean we're waiting on it to continue working on what's next. This small point release has some important bug fixes. We're releasing this in the `Latest` track and as soon as we get more feedback on it, it will be moved to the `Stable` track.
**Download Link**: [Monogatari-v2.0.1.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.1.zip)
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- Inputs now allow a `textarea` type
#### 🐛 Bug Fixes
- After using the `unregisterListener` function to then register a custom listener, the keyboard shortcuts would not get automatically re-registered
- Notifications would block out the game if the permission to show them was denied by the user or the browser
- The `stop` action would stop and remove all audio from the same media (music, sound, voice) when an invalid asset id was provided or a player was not found
- The [character documentation](https://developers.monogatari.io/documentation/building-blocks/characters) shows the `default_expression` property accepts an expression name as a value but it actually expected an image path. Now both are valid.
### 📦 Misc
- Dependencies have been upgraded to their latest version
- Korean translation has been updated
### How To Upgrade
#### If you're on the v2.x.x version
If you were already using a previous release from `v2.x.x`, then upgrading is pretty simple, replace the files in your `engine` directory with the new ones,
#### If you're on v1.4.1 (stable) or below:
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0-beta.15
Source: https://hyuchia.com/monogatari-v2.0.0-beta.15
Section: Posts
This release focus was on the engine's stability, making a lot of improvements on the rollback function and the way the engine's state was managed, saved and then loaded. If you had removed the `back` function from your game because of its bugs, we invite you to re-enable it and give it a try!
Some changes are required in your `index.html` and `options.js` file for this release so please read the upgrade instructions below.
**Download Link**: [Monogatari-v2.0.0-beta.15.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0-beta.15.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- The `wait` action can now be [used without providing a time to wait](https://developers.monogatari.io/documentation/v/develop/script-actions/wait#waiting-for-player-interaction), causing the game to wait until the player clicks again. This is a very useful replacement for empty dialog strings `''` when you don't want the text-box to be shown if it was hidden.
- The `clear` action can now be reversed.
- NVL dialogs are now fully reversible.
- The `particles.js` library has been replaced with the [`tsparticles` library](https://github.com/matteobruni/tsparticles) which is under active development. The change doesn't affect the functionality of the `show particles` action.
- The `Input` action now allows showing different types of inputs, timers, default values and more. You can check all the new features [in the documentation](https://developers.monogatari.io/documentation/v/develop/script-actions/input).
- A language selection screen is now built-in and will be shown automatically for players that haven't chosen a language on a multi-language game. You can read more about it in the [internationalization documentation](https://developers.monogatari.io/documentation/v/develop/configuration-options/game-configuration/internationalization#3-the-language-selection-screen).
- The [`show canvas` action](https://developers.monogatari.io/documentation/v/develop/script-actions/canvas), while not new since it has been available since pre-alpha stages, has finally received a much needed update making it ready to be used. Its documentation is a work in progress.
#### 🐛 Bug Fixes
- When rolling back, the wrong character sprite or background might show up since the action variables didn't update correctly.
- The `scene` action would save all images in the screen instead of only the "relevant" ones, causing it to duplicate images if the developer had added some custom UI.
- Position classes (`left`, `right`, `center`) would not work correctly with the `show image` action.
- Fixed state and history management (Used for rollback and save/load functionality) for these actions: `show/hide character`, `show/hide scene`, `show/hide image`, `show/hide video`
- Paused audio media (`music`, `sounds`, `voices`) would start playing after loading a save slot.
- The color of the character's name in a text-box would not reset itself if a character with no specified color spoke after one that did have a color.
- `Placeholder` action caused an error when used with actions that weren't generated dynamically.
- Dialog log could have duplicated dialogs if a `choice` that contained a dialog was rolled back.
- Trying to roll back when the player was in the very beginning of a game caused issues with the state of the game.
- The old date format used for v1 save files was not parseable by the moment library so it showed a `Invalid Date` label.
### 📦 Misc
- Dependencies have been upgraded to their latest version
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- A lot of new automated tests where added
- The text-box is no longer using a class to specify the CSS for NVL mode, instead it now uses an attribute `mode`, which means.
- Images hidden with the `hide image` action now behave like characters and the element does get removed after the animation ends instead of just being "invisible".
### How To Upgrade
#### If you're on the v2.x.x (nightly) version
If you were already using a previous release from `v2.x.x`, then upgrading is pretty simple, replace the files in your `engine` directory with the new ones,
##### Text-Box Changes
Since the `text-box` no longer uses classes to indicate the NVL mode, if you had added some custom style for it, you'll have to change your CSS selectors:
```
/* Instead of this: */
text-box.nvl
/* Use this: */
text-box[mode="nvl"]
```
###### Language Screen
A new language screen component was added and you need to add it to your `index.html` file as shown here:
```html
```
There's also a new setting `LanguageSelectionScreen` that allows you to enable or disable this new screen, you can add it in your `options.js` file as shown here:
```javascript
// Change to true for a MultiLanguage GameScreen.
'MultiLanguage': false,
// If the 'Multilanguage' setting is set to `true`. This will enable a
// language selection screen that will be shown before the asset loading
// screen. If set to false, the loading screen will appear first instead and
// players will have to change the language from the settings screen.
'LanguageSelectionScreen': true,
// Music for the Main Menu.
'MainScreenMusic': '',
```
#### If you're on v1.4.1 (stable) or below:
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.14
Source: https://hyuchia.com/monogatari-v2.0.0.beta.14
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.14.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.14.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🐛 Bug Fixes
- The credits screen would show a comma (`,`) character when joining all the credits sections
- The video action state was inconsistent and caused some videos to appear on the wrong places after loading a save file. Its roll-back functionality was also not working.
- Remote storage configuration would not set a content type and caused requests to fail when enabled
- Choices were not being shown on the right place after the changes to the text-box on the last release.
### 📦 Misc
- Dependencies have been upgraded to their latest version
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- [Placeholder action](https://developers.monogatari.io/documentation/v/develop/script-actions/placeholder) behaviour has been improved and should now work better when using other built-in actions with it
- Textbox now occupies 25% of the screen instead of 20% by default
- When running the game on [electron](https://www.electronjs.org/), links (anchor tags) with a `target="_blank"` property will now be automatically opened on the user's browser instead of creating a new window.
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your `engine` directory with the new ones.
This release changed not only the files under `engine/core` but also the `engine/electron/index.js` file so be sure to replace that one as well.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Custom Cursor Images
Source: https://hyuchia.com/custom-cursor-images
Section: Posts
> 🏆️ **This is a sponsor-only post, if you're seeing it, that means you are amazing and thanks to your support Monogatari keeps getting better every day, thanks a lot! Please don't share or distribute the contents of this post, usage in your game is of course permitted though!**
Another video happened! Got some things fixed and some new challenges such as going off topic a bit and I haven't nailed the right volume for my microphone yet but thankfully it seems like the automatic captions from youtube are doing a great job at deciphering my voice so they're actually not bad subs. All in all, I think it's getting a bit better! Third time's the charm (I hope!)
This time, we went over something we all may have missed and that is the usage of custom cursors for your visual novels. This is actually something pretty common to see on VNs so not sure how come we had never talked about it before.
You can go ahead and watch the video here: [Monogatari - Custom Cursors - YouTube](https://youtu.be/RZsYmYjS_8Q)
## Samples
Want to see how it looks? Here are some samples:
- [Sample Game](https://datadyne.perfectdark.space/monogatari/rewards/custom-cursors/sample.zip)
- [Screenshot](https://datadyne.perfectdark.space/monogatari/rewards/custom-cursors/sample.png)
## Creating Your Cursors
Custom cursors have a few limitations that are important to remember:
1. Your image should have a size of **at most** 32x32 pixels. At this size, chances are you won't be able to show too much details so don't make anything overcomplicated.
2. It can't be animated, even if you use a GIF or APNG files, the cursor will not be animated
3. It can have transparency
4. It's recommended to use either a PNG or SVG format
Depending on your novel, you might want to have different styles for your cursor but the basic ones you should probably have are:
1. The "idle" or default style: This will be the default image for your cursor
2. The "hover" style: This will be the cursor that will be shown whenever the user hovers a button or some other element with which it can interact
3. The "active" style: This will be the cursor that will be shown when the user clicks
For the purposes of this tutorial, I'll use these names for these three states:
```
cursor.png
cursor_hover.png
cursor_active.png
```
## Adding it to your game
Once you've created your cursors, you should copy them to the `assets/ui` directory. This directory is the place where you should put all the images that are related to the user interface such as image buttons, text box backgrounds, main menu covers etc.
Once you've added your files into your project, all we need to do next is edit our `main.css` file to let our browser know what we want to use as a cursor.
### Adding the default style
To set our default or idle cursor, we'll set the [`cursor` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) for our `body` tag. That means this will apply to all the page.
```css
body {
cursor: url(./../assets/ui/cursor.png), auto;
}
```
That's it! All CSS needs to know is where's our image. Notice we also provided another value: `auto`. All cursor properties need a fall-back in case the browser is unable to show our custom one. `auto` tells the browser to just do what it normally does, so shows an arrow-like icon for the normal cursor, a hand-like one when hovering a button etc.
Now, this is cool and all but if you test your game as it is, you'll notice the custom cursor you added is not actually being set for all the page as we thought. There are certain elements that will enforce other cursors, for example the buttons in the main menu will show the hand-like cursor. The reason for this is that some elements already have a CSS `cursor` property set and thus, we need to overwrite it. The devtools of your browser are your best friend in the task of finding out how to overwrite those styles.
### Adding the hover style
Let's take a look at those main menu buttons. We probably want to show our `hover` styled cursor when the user's cursor goes over a button so we'll need to find out what style we need to override.
If you inspect one of those buttons, you may be able to find this CSS rule is being applied to them:
```css
[data-action] {
cursor: pointer;
}
```
`pointer` is actually the name of that hand-like cursor so, now we know why that's being shown even after we set a cursor for the whole body.
Now, what we want to do is to show our `hover` cursor when the user hovers over a button and CSS has the perfect thing for that. Buttons have a [:hover pseudoclass]([Pseudo-classes - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)) that let's us set a custom style for exactly that situation, convenient!
Let's go ahead and do:
```css
button:hover {
cursor: url(./../assets/ui/cursor_hover.png), auto;
}
```
But! If you do it, you may notice it's actually not working, the `pointer` is still being shown.
The reason for that is [_specificity_](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). Remember CSS stands for Cascading Style Sheet as a reference to its behaviour to act like a cascade, where the **last** style overwrites the previous ones. However, it also takes the selector specificity into consideration when deciding whether a style should overwrite another one.
Let's see an example:
```css
button.primary {
color: red;
}
button {
color: blue
}
```
In this code, the last style we have for buttons says the color for them should be `blue`, however, the `button.primary` selector has more _specificity_ since it refers to a button **that also has** the `primary` class.
So, for buttons with that class, the style won't get overridden and they will retain their red color.
Now, let's get back to our main menu buttons case. The `[data-action]` selector is actually more specific than our `button` selector so, our style is not able to override the other one. Fixing this is quite simple then, we only have to use a selector that is equally or more specific.
```css
button[data-action]:hover {
cursor: url(./../assets/ui/cursor_hover.png), auto;
}
```
This time, we should be able to see our `hover` cursor when going over the buttons. You may however notice a small glitch, if the mouse is not over the button, then you slowly bring it over it, you'll see we get three cursor icon changes, it goes from `idle` to `pointer` to `hover` when we actually expected just to see `idle` -> `hover`.
The reason for this is the fact we're using the button's hover pseudo class and it actually makes sense, the button by itself does not automatically goes from idle to hover, there's a small delay before that happens and that delay is what's causing our style not to kick in immediately.
To fix this, let's add another selector to our rule:
```css
button[data-action],
button[data-action]:hover {
cursor: url(./../assets/ui/cursor_hover.png), auto;
}
```
This time, we're saying we want the buttons to have our `hover` cursor by default and when you think about it, it actually makes sense, when I'm on a button, I'm already hovering over it so it doesn't make much sense to have two separate rules for that.
If you test your game again, the glitch should be gone.
## Adding the active style
Finally, we want to add our `active` cursor when the user clicks on a button and the process is pretty much the same as for our `hover` one. Buttons also have an `:active` pseudoclass so our style is simply:
```css
button[data-action]:active {
cursor: url(./../assets/ui/cursor_active.png), auto;
}
```
So now, your button should go directly from `idle` to `hover` when you put your mouse over it and then change to `active` whenever you click on it. Awesome!
## Cursor Coordinates
We've managed to add our custom cursors but there's one important task left and that is correctly indicating what's the "active area" of our cursor image.
The active area refers pretty much to what's the point of your cursor that's actually making the click, is it the upper left corner as with the arrow-like cursor? Is it the center? Of course, this depends completely on the image you created.
For my cursor images, the active area is actually the center and CSS lets us tell our browser that just by specifying our coordinates. These coordinates are an x-y system that starts at our upper left corner and should have values between (0, 0) and (31, 31).
So, what's the center of that? Well, the center is probably somewhere between (15, 15) and (16, 16) so... let's go with `15, 15`. Providing these coordinates to the browser is simple, we just need to add them to our `cursor` property:
```css
body {
cursor: url(./../assets/ui/cursor.png) 15 15, auto;
}
```
Notice however that if you now test again your cursors, you'll notice when it goes from `idle` to `hover` another glitch may ocurr, this time causing the cursor to kind of teleport to another position when it changes and the reason for that is you need to provide these new coordinates to all of the cursor properties we just added so:
```css
body {
cursor: url(./../assets/ui/cursor.png) 15 15, auto;
}
button[data-action],
button[data-action]:hover {
cursor: url(./../assets/ui/cursor_hover.png) 15 15, auto;
}
button[data-action]:active {
cursor: url(./../assets/ui/cursor_active.png) 15 15, auto;
}
```
This way, we won't have that glitch any more and this actually tells you something else, you should be consistent in your cursor images to avoid this. The reason we were able to set the same coordinates for all these images is because I made all my images visually have the middle as the important part. If you create completely different images for each state, chances are they will require different coordinates and that will cause the glitch to happen which is not really nice.
## Using different cursors for different elements
Another cool usage we may have is using different cursors for other elements such as choices. We could for instance let the users know which choice represents something good and which one something bad just by changing the cursor they get when hovered, as an instant feedback before they actually have to press it.
As it's common with monogatari, using CSS classes is the way to go here, remember choices can actually have custom classes, for instance:
```javascript
{
'Choice': {
'Dialog': 'y Have you already read some documentation?',
'Yes': {
'Text': 'Yes',
'Do': 'jump Yes',
'Class': 'positive'
},
'No': {
'Text': 'No',
'Do': 'jump No',
'Class': 'negative'
}
}
}
```
This statement will add the `positive` class to the `Yes` button and the `negative` class to the `No` button.
We then, can use the following CSS code to make it have different cursors for each:
```css
button.positive {
cursor: url(./../assets/ui/cursor.png) 16 16, auto;
}
button.negative {
cursor: url(./../assets/ui/cursor_active.png) 16 16, auto;
}
```
So, you can really set custom cursors to pretty much anything, even a different cursor for every character.
And that's it for this tutorial! Hope you find it useful and as always, thank you so much for your support!
---
# Using Instagram Filters in your Visual Novel
Source: https://hyuchia.com/using-instagram-filters-in-your-visual-novel
Section: Posts
> 🏆️ **This is a sponsor-only post, if you're seeing it, that means you are amazing and thanks to your support Monogatari keeps getting better every day, thanks a lot! Please don't share or distribute the contents of this post, usage in your game is of course permitted though!**
You may have already heard about the plans on making a full code-along course for Monogatari BUT before doing that, I really want to polish my recording skills and my English speaking (Written one is not bad but spoken one is still rough) so, I'm going to try to create several live streams to force me to practice.
I'm also doing this because so far I've always taken Monogatari as a hobby and not much more but I want to get more involved on it and first thing I need to do is make these sponsor-only posts better! I know there's very little content and that's really not fair so, I want to do at least 2 videos per week, a "long" (about 30 mins) and a "short" (less than 15 mins) one for different topics. And I know I've said this a lot in the past but this time I truly mean it! I've set myself a goal of reaching $500 USD per month from sponsors/donations by december of this year so I'll be doing a lot of things to reach that goal!
Anyways, for this very first video, I go through the process of getting and implementing a [Instagram filters CSS library](https://picturepan2.github.io/instagram.css/) for your Monogatari game that will let you use the filters in your backgrounds, sprites, videos and even normal HTML elements!
So, you can watch me implementing all of that right here: https://youtu.be/Rd5S0pQ5oGE
Some things I already know I have to change for the next one?
1. Change the cover image because Patreon's way of showing it makes it impossible to know that's a video XD
2. Use a different desktop for each app so they're always fullscreen
3. Make the font size of the editor larger
If you have any more suggestions, do tell! I want to be able to create useful videos for everyone!
I also wrote the "text" instructions so you don't have to watch the video every time XD
## Samples
Want to see how it looks? Here are some samples:
* [Sample Game](https://datadyne.perfectdark.space/monogatari/rewards/instagram-filters/sample.zip)
* [Screenshot](https://datadyne.perfectdark.space/monogatari/rewards/instagram-filters/sample.png)
## Adding it to your game
Adding the library to your game is fairly simple! All we need to do is first download it from here: https://raw.githubusercontent.com/picturepan2/instagram.css/master/dist/instagram.min.css
And save that file in our project under the `/style` directory. You can keep the name it currently has so it will end up being `/style/instagram.min.css`
### 1. `index.html`
In your HTML index file, let's now load the file we just downloaded to our project. To do so, let's find in our `head` element the part where we load all the CSS files:
```html
```
Let's place the library right in the middle of those two. It's always a good idea to place any third party library you're using *before* your `main.css` file since that way you'll be able to overwrite any style you want from there.
The resulting code should be:
```html
```
And that's it! The library should be ready to use now.
### 2. `script.js`
Ok, we can now go ahead and test our new filters. According to the library's documentation, all you need to do whenever you want to use a filter is add a `class` in the format `filter-` to the element you want to apply the filter to. You can take a look at all the filters available in [their website](https://picturepan2.github.io/instagram.css/).
This library using CSS classes is something extremely lucky for us because guess what? Monogatari also uses classes for almost everything!
So, how would you use it in your novel's assets? Well, let's say we have the following declarations of characters, scenes and videos:
```javascript
// Define the videos used in the game.
monogatari.assets ('videos', {
'dandelion': 'dandelion.mp4'
});
// Define the backgrounds for each scene.
monogatari.assets ('scenes', {
'gate': 'gate.jpg'
});
// Define the Characters
monogatari.characters ({
'y': {
name: 'Yui',
directory: 'yui',
color: '#5bcaff',
sprites: {
'normal': 'normal.png'
}
}
});
```
#### Adding the filter to a Scene
Based on the declarations, we have a scene named `gate`. If we wanted to apply a filter to that scene, this would be our statement:
```javascript
'show scene gate with fadeIn filter-aden'
```
That's it! As you can see, the library just blends and feels normal in monogatari, let's see what else can we do..
#### Adding the filter to a sprite
We have a character named `Yui` with an id `y` and a sprite named `normal`. If we wanted to apply a filter to that sprite, this would be our statement:
```javascript
'show character y normal with fadeIn filter-inkwell'
```
#### Adding the filter to a video
Filters are not limited to images, we can use them on pretty much any element and that includes videos! So, if we wanted to apply a filter to our `dandelion` video, this would be our statement:
```javascript
'show video dandelion immersive with filter-inkwell'
```
#### Adding the filter to a HTML element
What about other HTML elements? Well, remember these are classes so for example, the following element will have a filter applied:
```html
```
There are some items elements used by Monogatari that you may also be able to add the filters to right from your script, for example, we recently added a `Class` property for text inputs so this statement would generate a text input box with the filter you specified applied to the whole element:
```
{
'Input': {
'Class': 'filter-aden',
'Text': 'What is your name?',
'Validation': function (input) {
return input.trim ().length > 0;
},
'Save': function (input) {
this.storage ({
player: {
name: input
}
});
return true;
},
'Revert': function () {
this.storage ({
player: {
name: ''
}
});
},
'Warning': 'You must enter a name!'
}
},
```
The possibilities here are almost endless and, given this is just CSS, we can also create our very own filters in case these don't fit our needs or we simply have some other effects in mind.
I recommend you [check this page](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) to learn more about the `filter` CSS property and all the many things you can create with it!
---
# Monogatari v2.0.0.beta.13
Source: https://hyuchia.com/monogatari-v2.0.0.beta.13
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.13.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.13.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- [Placeholder actions](https://developers.monogatari.io/documentation/v/develop/script-actions/placeholder) can now receive arguments when generating an action dynamically:
```javascript
'$ _myAction something something'
```
```javascript
monogatari.$ ('_myAction', (arg1, arg2) => {
return `${arg1} ${arg2}`;
});
```
#### 🐛 Bug Fixes
- Music volume preference would not have any effect on the main menu ambient music
- Some actions that caused the game to proceed automatically to the next statement such as videos with the `close` property, would not proceed and required an extra click
- Setting the volume to `0` would in some cases cause an error when playing an audio asset using the `fade` property
- Side images sizing was not consistent and characters name would scroll along the text. The `text-box` component has been restructured to prevent this. **If you have a custom `text-box` implementation, you might want to check the [new structure and styling](https://github.com/Monogatari/Monogatari/tree/develop/src/components/text-box).**
### 📦 Misc
- Dependencies have been upgraded to their latest version
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- A license file is now being distributed in the engine directory
- Added [maskable icon](https://web.dev/maskable-icon/) indicator on manifest file
- Updated electron script settings
- Added new permission request for [persistent storage](https://web.dev/persistent-storage/) to prevent data from being deleted when a device is low on storage space
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.12
Source: https://hyuchia.com/monogatari-v2.0.0.beta.12
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.12.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.12.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
It is now possible to add pauses and change the speed of the typewrite animation for the dialogs on the fly. Pauses are defined in milliseconds:
```javascript
// Pause the dialog for 300ms before continuing:
'This is some... {pause:300} dialog with a pause'
```
Speed on the other hand, respects the user's settings for text speed so changing speed in-dialog requires you to provide a percentage instead of a fixed value.
A value of `100` refers to the `100%` of the user's selected speed so anything below that will be slower and anything higher will be faster.
```javascript
// This will make speed be 2x (200%) what the user selected:
"Let's see how {speed:200} fast you can read!"
// This will make speed be 1/2 (50%) of what the user selected:
"Let's see how {speed:50} fast you can read!"
```
#### 🐛 Bug Fixes
- Auto-play would get stopped without any indication if an action blocked its advance. It should now keep retrying to advance.
- Images on the image gallery would get duplicated/replaced by the first image the player clicked to see
- Auto-play would skip voice dialogs as soon as the text finished typing, it will now wait for the voice to finish as well
### 📦 Misc
- Dependencies have been upgraded to their latest version
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- String interpolation implementation for credits was simplified
- The `serve` script to open the game in a development server is now functional
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
### Work In Progress
Just as a general announcement, layered sprites are now under development! Until now, all your characters sprites had to be a single image and that works just fine for many games but when you start having many different expressions, poses and even clothes, creating an image for every combination of those can get insane.
With layered sprites, you will be able to use the individual images to make up a full sprite. This is still in a very early stage and will probably take a while to be released as it will require quite a lot of work.
#### Current State
Right now, when you define a character, you can add a list of the `layers` your sprites will have and then, when defining the sprites, you can declare an image for each layer:
```javascript
monogatari.characters ({
'y': {
name: 'Yui',
directory: 'Yui',
layers: ['base', 'mouth', 'eyes'],
sprites: {
happy: 'happy.png',
normal: 'normal.png',
sad: 'sad.png',
surprised: 'surprised.png',
angry: {
'base': 'base.png',
'mouth': 'mouth_alone.png',
'eyes': 'eyes_alone.png'
},
},
},
});
```
In your script, nothing changes. `show character y angry` will assemble the sprite by placing all the images in top of each other in the exact order you defined in your `layers` property.
This will require you to position each of the sprite parts manually, in CSS this would look this way:
```css
character-sprite[data-character="y"][data-sprite="angry"] [data-layer="eyes"] {
left: 24%;
top: 10.5%;
}
character-sprite[data-character="y"][data-sprite="angry"] [data-layer="mouth"] {
left: 38%;
top: 17%;
}
```
#### The result
The image on the left has been assembled using layered sprites while the one on the right is the full image. There are still a few differences on some proportions but some more tinkering should make it perfect.
There is A LOT of work to be done such as allowing you to change only one layer of any sprite from the script and doing the whole save/load logic for them but I hope we'll see the release of this feature later this year!
All the work around this is being done in the [layered-sprites](https://github.com/Monogatari/Monogatari/tree/layered-sprites) branch on GitHub so anyone feeling curious or wanting to help can take a look at everything there :D
---
# Monogatari v2.0.0.beta.11
Source: https://hyuchia.com/monogatari-v2.0.0.beta.11
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.11.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.11.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🐛 Bug Fixes
- Show and hide character actions were causing the CSS Classes in the characters to get stacked and thus caused weird behaviours
- `willRunAction` listener was not getting triggered due to a typo
- Fix HTML elements ([Pandora](https://gitlab.com/AegisFramework/pandora/) components) getting their children duplicated
- Voice's state was not getting cleared on some cases and caused lots of voices to be played when loading/saving a game
- Conditionals that returned a number in their `Condition` function were not running the correct branch as it always expected a `string` to be returned. This has been fixed and returning numbers now works as expected.
- Prevent quick menu from getting hidden by other elements such as the NVL mode textbox
- Prevent adding empty classes to images
### 📦 Misc
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- [Animate.css](https://animate.style/) library has been updated to its latest version (v4.1.0) using their compatibility version to prevent having to use the `animate__` prefix it recently introduced.
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Chat Theme for NVL mode
Source: https://hyuchia.com/chat-theme-for-nvl-mode
Section: Posts
> 🏆️ This is a sponsor-only post, if you're seeing it, that means you are amazing and thanks to your support Monogatari keeps getting better every day, thanks a lot! Please don't share or distribute the contents of this post, usage in your game is of course permitted though!
This is a very simple but cool theme for the NVL mode that will make it look like a chat conversation! Choices for NVL mode also have a custom look that will make them fit better with the overall chat-like feel.
## Samples
Want to see how it looks? Here are some samples:
* [Sample Game](https://datadyne.perfectdark.space/monogatari/rewards/nvl-chat/sample.zip)
* [Video](https://datadyne.perfectdark.space/monogatari/rewards/nvl-chat/sample.mp4)
* [GIF](https://datadyne.perfectdark.space/monogatari/rewards/nvl-chat/sample.gif)
* [Screenshot](https://datadyne.perfectdark.space/monogatari/rewards/nvl-chat/sample.png)
## Adding it to your game
Adding this theme to your game is really simple and you'll only need to modify two files!
### 1. `options.js`
It's recommended that you disable the typing animation on NVL mode by setting the `NVLTypingAnimation` property to `false`. While technically you could leave it enabled, it looks weird on the chat bubbles since it makes them grow as it types the dialog out.
### 2. `main.css`
This is where all the magic happens. First, let's add the following code, you can add it anywhere in your file but this part may be better to have it right on top.
```css
:root {
--chat-background: transparent;
--chat-bubble-default-background: #424242;
--chat-bubble-default-text-color: #fff;
--chat-choice-container-animation: slideInUp;
--chat-choice-container-background: #fff;
--chat-choice-button-background: #ec407a;
}
```
That's the code that will let you configure many of the styling for the chat. Let's see what each of those variables does:
**Chat Variables**
* **--chat-background**: The background for the `text-box` element, in this case, the background for the whole chat screen.
* **--chat-bubble-default-background**: The default background for the chat bubbles. This is the background that will be use for the dialogs coming from the narrator or any character with no style definition (more on this in a bit).
* **--chat-bubble-default-text-color**: The default color for the text on the chat bubbles.
**Choices Variables**
* **--chat-choice-container-animation**: The animation to use when showing the choices, if you don't want it to show up with an animation, you can set this to `none`.
* **--chat-choice-container-background**: The background to use for the container that holds all the options.
* **--chat-choice-button-background**: The background to use for the choice buttons.
Now that you have your configuration set, you can add the rest of the styling needed, this time you can add it anywhere you'd like in your file.
```css
quick-menu {
z-index: 11;
}
.nvl choice-container {
animation: var(--chat-choice-container-animation);
background: var(--chat-choice-container-background);
bottom: 0;
box-shadow: inset 0 0 5px -2px #424242;
animation-duration: 0.3s;
}
.nvl choice-container button {
border-radius: 4px;
width: 100%;
background: var(--chat-choice-button-background);
}
text-box.nvl {
background: var(--chat-background);
}
text-box.nvl [data-content="dialog"] {
display: flex;
flex-direction: column;
}
text-box.nvl p {
padding: 0;
}
text-box.nvl [data-spoke] {
border-radius: 5px;
padding: 1em;
display: inline-block;
background: var(--chat-bubble-default-background);
color: var(--chat-bubble-default-text-color);
font-size: 1em;
margin: 1em 0.5em;
max-width: 60%;
}
text-box.nvl [data-spoke] > span {
display: none;
}
```
At this point, you should already be seeing the chat interface when using the NVL mode, but all the chat bubbles will have the same color and all will appear on the left side. We want to be able to specify the color of the bubble depending on the character speaking and probably, show the dialogs of the "main/player" character on the right side as it would appear on a real chat.
Doing that is also quite simple, for any character you want to specify a custom styling, you just need to add a block like this one, replacing the `` part with the identifier of the character you're making this style for.
```css
text-box.nvl [data-spoke=""] {
background: #00bcd4;
}
```
Should this dialog appear on the right? That just needs adding one more property!
```css
text-box.nvl [data-spoke=""] {
background: #00bcd4;
align-self: flex-end;
}
```
And that's it! You now have an amazing chat look and feel.
---
# Monogatari v2.0.0.beta.10
Source: https://hyuchia.com/monogatari-v2.0.0.beta.10
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.10.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.10.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🐛 Bug Fixes
- Save and load slots were not reacting to click events
- Notification string interpolation was not working on some permission conditions
### 📦 Misc
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- String interpolation implementation for credits was simplified
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.9
Source: https://hyuchia.com/monogatari-v2.0.0.beta.9
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.9.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.9.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🐛 Bug Fixes
- Due to a bug on a recent change on Artemis, the library used for DOM manipulation, some actions would cause an infinite loop and thus caused the game to hang.
- Centered dialogs did not reset the `finish_typing` global variable and would get stuck in some cases
- Centered dialogs did not respect the `TypingAnimation` setting
### 📦 Misc
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- Artemis library was updated
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.8
Source: https://hyuchia.com/monogatari-v2.0.0.beta.8
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.8.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.8.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- Added string interpolation for notifications
- `Input` and `Message` actions now allow an `actionString` property with the string that should be used for their action button
- `Input` action now allows a `Class` property to assign CSS classes to the input modal
- Components can now be completely replaced since they are now registered after the `init ()` call and not before
- The last dialog of a character in NVL mode now gets a `nvl-dialog-footer` class when another character starts speaking
#### 🐛 Bug Fixes
- The `next` action required an extra click instead of running the next statement right away
- If assets were declared using anything else than strings the preload would fail and cause an error, now a check is made to only preload string (url) based assets.
- Dialog reset and `clear` action would not remove the side image from the text box
- The return value on normal JavaScript functions was not being considered to pause or run the next statement
- Unread state (class) for NVL dialogs was not being properly assigned
- The module property on the `package.json` file was pointing to the unbundled source code, making it harder to use as a module
- Some dialogs, specially those starting with an HTML element would some times jump to the next statement instead of writing the full dialog to the text box
### 📦 Misc
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.7
Source: https://hyuchia.com/monogatari-v2.0.0.beta.7
Section: Posts
**Download Link**: [Monogatari-v2.0.0.beta.7.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.7.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- Actions have four new hooks `beforeRun`, `afterRun`, `beforeRevert` and `afterRevert`, however this are mostly for internal use and users should use the `willProceed`, `didProceed` and `willRollback`, `didRollback` ones
- Monogatari now exports the [`random-js` library](https://github.com/ckknight/random-js) to perform random numbers related functionalities
- New `monogatari.random (min, max)` function was added that returns a cryptographyc random number
- Added files required for Apple's app notarization process so the electron version of a game gets notarized automatically
- New `timer-display` component was added to enable timed actions
- Choices now allow a `Timer` property, the following example will randomly pick a choice if none was picked in 5 seconds:
```javascript
{
'Choice': {
'Dialog': 'y Have you already read some documentation?',
'Timer': {
// Time in milliseconds
time: 5000,
// The function to run when the time is over
callback: () => {
// Get all choices being shown and that are not disabled
const choices = monogatari.element ().find ('[data-choice]:not([disabled])');
// Pick one of those options randomly
const random = choices.get (monogatari.random (0, choices.length - 1));
// Fake a click on it
random.click ();
// Promise friendly!
return Promise.resolve ();
}
},
'Yes': {
'Text': 'Yes',
'Do': 'jump Yes'
},
'No': {
'Text': 'No',
'Do': 'jump No'
}
}
}
```
Want to change the color of the `timer-display`? That's simple!
```css
timer-display > div {
background: '';
}
```
#### 🐛 Bug Fixes
- Main menu music would stop playing if entering any other menu
- Position classes (left, right, center) where being overridden and the images would always be shown centered
- In some cases the wrong character would be shown when rolling back a `show character` statement
- Under some conditions (mainly on node), electron-only functions could be triggered and cause an error
- When rolling back to the beginning of a label, the game could enter an invalid state where the current `step` was a negative number
- Using `url()` or any `gradient()` CSS properties in the `show background` or `show scene` statements would not work
- Reversible functions would still require the user to click to advance even if the function returned `true`
### 📦 Misc
- The [npm package](https://www.npmjs.com/package/@monogatari/core) has been updated to this latest version
- [Cypress](https://www.cypress.io/) is now being used to perform e2e testing
- Conditionals implementation has been changed and should be more reliable when rolling back
- Choices implementation was simplified
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.6
Source: https://hyuchia.com/monogatari-v2.0.0.beta.6
Section: Posts
A new year begins! 🎉
**Download Link**: [Monogatari-v2.0.0.beta.6.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.6.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- It is now possible to use [action placeholders](https://developers.monogatari.io/documentation/v/develop/script-actions/placeholder) on your script, making it easier to use repetitive actions and even generate them dynamically! To know more, read all about them in the [documentation](https://developers.monogatari.io/documentation/v/develop/script-actions/placeholder)
- New events are triggered when updating the state: `willUpdateState` and `didUpdateState`
- The `text-box` now has a `data-expression` property which if present, holds the value of the side image being used
- The `game-screen` now has a `data-label` property indicating the current label
- The `game-screen` will now have a class `splash-screen` when the game is playing the splash screen
- A new global variable `on_splash_screen` was added with the `boolean` value of whether the game is currently playing the splash screen
#### 🐛 Bug Fixes
- Overwriting a slot would duplicate the slot element on the save screen
- Unsuccessful action rollbacks would cause the game to get stuck
- Event listeners would cause some inconsistencies on the state of the `block` global variable
- Audio playback broadcast message would not be removed from the screen when starting the game
- The text speed input on the settings screen would not have the right value set when opening the game
- Settings screen returned to main menu instead of the game if opened on the splash screen
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.5
Source: https://hyuchia.com/monogatari-v2.0.0.beta.5
Section: Posts
Merry Christmas everyone! 🎄 Santa just brought a small release with important bug fixes. 🎁
**Download Link**: [https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.5.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.5.zip)
> **Remember this is a _Beta_ release meant for testing and bugs are expected, everything is also prone to change a lot. If you're using it to release a game, you should warn your players as chances are it will eventually break.**
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- Save file dates will now be localized depending on the language the user has set
#### 🐛 Bug Fixes
- Saving on a slot, then loading from it and saving it again would cause an error with some actions such as `play`, `show image` and `show video`. This bug was related to an inconsistent state handling that caused the actions to be run twice or more.
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.4
Source: https://hyuchia.com/monogatari-v2.0.0.beta.4
Section: Posts
A small release with a new language and improved support for older save files.
**Download Link**: [https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.4.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.4.zip)
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- [Toki Pona](https://tokipona.org/) Language was added and is now available as a translation for the UI
- Improved support for older save files from both `v1.4.1` and `v2.x.x` releases. The last beta introduced a history element that was not present on any save file created with previous versions, this release will now create that element using the other info on the save file as reference for it if it's not present or inconsistent.
#### 🐛 Bug Fixes
- The `Close` string in the dialog log was not being translated. It will now follow the user preference's as any other UI element
- The `Ok` label in some of the buttons was hard-coded and didn't have a translation string, preventing it from reacting to the user preferences.
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your engine directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v2.0.0.beta.3
Source: https://hyuchia.com/monogatari-v2.0.0.beta.3
Section: Posts
A brand new release that comes packed with lots of bug fixes and new features! 🎉
**Download Link**: [https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.3.zip](https://datadyne.perfectdark.space/monogatari/releases/Monogatari-v2.0.0.beta.3.zip)
The website has been updated and now shows two options to download, the stable version (v1.4.1) and the nightly version (v2.x.x). This has been added to prevent any more confusion on where to get the v2 release from and the link will be constantly updated to point to the newest version available.
The [contributors list](https://monogatari.io/contributors) has also been updated, let me know if there's anyone missing!
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
### 📰 Release Change Log
#### 🌟 New Features
- A new error will be shown when trying to hide a character that was not currently visible or that did not exist
- The community forum link will now appear in the errors footer as a resource where people can get help from
- NGINX configuration files are now available under the `engine/nginx/` directory
- A new event `didFinishTyping` will be emitted every time a dialog is fully typed out
- Main menu music will not be restarted if it was started manually
- The `show video` action now supports adding classes to the video using the `with` keyword
- Electron app menu is now disabled by default
- It is now possible to add/prepare a transition for when a sprite gets changed, for more information you can check out the [pull request](https://github.com/Monogatari/Monogatari/pull/96) that added this feature, documentation is on the works!
#### 🐛 Bug Fixes
- Save/Load slots were not being ordered correctly, they will now return to be ordered from oldest to newest.
- Scenes would remove characters but not remove them from the state, causing them to be shown incorrectly after a load. Scenes will now handle the state correctly to prevent that.
- When loading a save file, there was a chance that after images/sprites were shown, a scene action would remove them. The scene action now checks if the game is being loaded before removing any elements.
- Voice audio would stop playing when clicking to advance even if the game failed to advance because other action blocked it. Voices will now only be silenced after the engine has a green light on the advance.
#### Other changes
- Dependencies where updated to the latest version available
- French translations were corrected and updated
- It is now possible to use the `ShadowComponent` class from the [Pandora library](https://gitlab.com/AegisFramework/pandora/)
- A new feature to add a nice transition between one position to another has been added but it was temporarily disabled since it caused some conflicts with some animation classes.
### How To Upgrade
If you were already using a previous release from `v2.x.x`, then upgrading is as simple as replacing the files in your `engine` directory with the new ones.
If you are planning to upgrade from a game made with the `v1.4.1` release, we recommend you reading the [Upgrade Guide](https://developers.monogatari.io/documentation/v/develop/upgrading-from-v1.4.1)
---
# Monogatari v1.4
Source: https://hyuchia.com/monogatari-v1.4
Section: Posts
Monogatari has one simple mission, make visual novels accessible and available for everyone by bringing them to the web. This is a huge task, it has to be a tool that matches everyone's experience and makes the task of everyone involved in VN creation easier.
For writers it features a simple language and path creation that'll allow them to just focus on writing an amazing story without having to struggle too much while providing translation possibilities in a very simple manner.
For artists it gives them the power to use a whole lot of tools and formats and even use vectors that will look amazing on every resolution. We are not talking just about images here, CSS provides you the possibilities to do just about anything, from amazing GUIs to a whole world of animations!
For developers it provides not just an engine but a framework as well, as a mainly web developer I've made Monogatari in a way that the games created using it are not simple games, they are full websites and take advantage of every little trick and feature the web has to offer.
I've encountered many times that people with background on other engines have troubles getting that concept, the fact that their visual novel is not just a game, it is a website by itself, Monogatari game creators are doing the work of a web developer but in a very simplified way, simplified does not mean it holds you back, it means it makes it easy to create simple things and provides you the right tools to take you to the moon.
The newest Monogatari v1.4 was silently released this week and it is one of the biggest updates so far. Not only in the addition of new features but also in the improvements of many previously added features that were not quite as polished as I wished them to be, it had a major code refactoring and a huge amount of bugs were fixed.
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
## Huge Thanks to:
This whole thing would of course have not been possible without the support of amazing people and I'd like to recognize them all (Hopefully I'm not forgetting anyone)!
* [My Patrons](https://www.patreon.com/Hyuchia) - You guys are the best and this is possible because of you!
* Cesar
* Michael
* Eléa
* BakaKiller - Thanks a lot for the French Translations revisions and additions!
* ign1ght - Thanks a lot for the Dutch Translations!
* DragoonHP - Thanks a lot for all the testing and contributions!
* Nando - Thanks a lot for all the help in testing, improving and creating awesome features!
* mapfde - Thanks for testing Monogatari on all kinds of iOS devices!
* Kagami - Thanks for helping on the improvement of Monogatari!
* Tamakimouto - Thanks for the help on improving Monogatari and helping on support!
* Kevin - Thanks for the quick testing and bug reports!
Lastly, I'd like to thank anyone who has ever tried Monogatari, sent an email asking for help or reported a bug, all of you make this all worth it!
So what are the new Features you can expect?
## Typing Animation
Something that was missing out since day one was that typing effect you find in a lot of visual novels and now, you'll be able to find it on Monogatari as well!
The initial speed can be set up by the developers, it can also be deactivated globally (not showing any animation at all) or on a per character basis, so you can have characters which dialogs are animated and characters that don't show any animation. This is also configurable for the narrator and centered special characters.
Since the speed may also be prone to personal opinions, players are also able to set their own speed settings with a new bar in the settings screen.
## Auto Play
Sometimes it's a lot more comfortable to just push the auto play button and go through the novel as if it was a movie, this new feature will go through the novel without requiring the player to click/press a button every time they want to advance.
This however doesn't mean that choices and inputs will be skipped, if the auto play reaches any element that requires user interaction, it won't continue advancing until the user makes the required action.
Of course every one of us read at different speeds and that's why there's a new bar in the settings screen to control how fast the auto play will go.
## New Dynamic Quick Menu
Responsiveness has always been a focus for Monogatari, everyone should be able to play your game no matter what screen size they have, it should simply adapt to them in a nice and consistent way. At the beginning, the quick menu was was shown in the same way in desktop and mobile devices.
With this release, the quick menu is now dynamic, optimizing it for either mobile or desktop as needed.
On desktop it is now shown as a traditional quick menu (probably what most people is used to on a visual novel).
And on a mobile device,it'll be shown as it was before, using icons instead of text which is much better for touch experiences.
## Better Save Slots Management
The save slots have been redesigned and will now use the local date and time format by default instead of just the date as they did before. Nonetheless, the date has now become secondary information. The new saving slots will allow players to set the save slot name, allowing them to have a better organization and also a way to recognize each save slot easily.
When you overwrite a save slot, you'll be able to change the name if you need to or simply keep the same as it was before.
And as you can see from the "X" icon in the top right of every slot, deleting them is now possible!
This means you won't have to set a predefined number of slots anymore, the player now have complete control on creating, overwriting and deleting their save slots. The `Slots` property available in the `options.js` file has now been repurposed and it only represents the number of Auto Save slots available.
## Reversible Functions
While the simple script format provides all the basics you need for your Novel, sometimes you need something more advanced, that's why Monogatari allowed the use of common JavaScript functions but they had their own limitations, once a function would be run, going back on that part of the game was not possible. Rather than it not being possible, it was actually a fixed behavior Monogatari had due to some technical complications.
You see, since these are user-defined functions where you can do anything you want, the problem was knowing what the function did, if you don't know what it did then there is no way to revert it and thus going back was blocked.
With this release, another approach was taken. Instead of trying to figure out what the function did, there simply is now a way for you to define your function and the function that reverts it. You and only you know exactly the effects of a function you made so it makes sense you are also allowed to define the way to revert it.
Hence, a new JSON object was born, the `"Function"` object.
Now, let's see how it works with a simple example. Imagine you are building some kind of RPG elements in your game and thus your player has stats. Normally, those stats would be declared inside your storage variable like this:
```javascript
"use strict";
// Persistent Storage Variable
let storage = {
player: {
intelligence: 0,
ability: 0,
strength: 0
}
};
```
Now, inside your script you would probably make some modifications of those stats depending on what the user does or how the story goes.
```javascript
let script = {
// The game starts here.
"Start": [
"h Currently you have {{player.intelligence}} points of Intelligence but you seem far more intelligent, how about we add five points?",
function () {
storage.player.intelligence += 5;
return true;
},
"h There you have it, you now have {{player.intelligence}} points of Intelligence",
"end"
]
}
```
So, if we played this game, the first text would appear, then after we click for the next one, the function would be run adding 5 points to the intelligence stat and immediately would show the next text. If we wanted to go back to the first text once the second one is displayed, it wouldn't be possible, Monogatari doesn't know what changed and thus prevents the user from going back but now we have a solution for this!
```javascript
let script = {
// The game starts here.
"Start": [
"h Currently you have {{player.intelligence}} points of Intelligence but you seem far more intelligent, how about we add five points?",
{"Function":{
"Apply": function () {
storage.player.intelligence += 5;
return true;
},
"Reverse": function () {
storage.player.intelligence -= 5;
}
}},
"h There you have it, you now have {{player.intelligence}} points of Intelligence",
"end"
]
}
```
As you can see, we replaced the function with the new `"Function"` object which has 2 properties, an `"Apply"` function which will run when going over the game and the `"Reverse"` function which will be run when going back. This now solves the previous problem we had since we are using `"Apply"` to add the 5 points and `"Reverse"` to subtract them in case the player went back and thus makes possible for players to go back even when a function was run. Just as with common functions, you can use Promises and also control the flow of the game by returning `true` or `false` in the `"Apply"` function.
## Wait Statement
It's something common to add little pauses along your game, either for an animation to finish or simply because your plot requires it. The `wait` statement now allows you to do this in a simple manner.
```javascript
let script = {
// The game starts here.
"Start": [
"Hello there! I want you to wait 5 seconds now",
"wait 5000",
"Wow, that was a long time!",
"end"
]
};
```
The wait statement allows us to make the game wait for a certain amount of time before continuing, this will also ensure the player can't advance until the wait is done.
Taking the sample code,the first dialog will be shown, then, when the player continues, the wait statement will make it wait for 5 seconds and then the next dialog will be shown.
You may be wondering why it says 5000 instead of just 5 in order to wait 5 seconds, the reason behind it is that the wait statement accepts the time in milliseconds, therefore we have to make the conversion from seconds to milliseconds for it to work as we want.
## Improved Particles System and Shake Animations Support
Particles and Shake animations were one of the additions that v1.3 brought, however they were not quite right integrated and needed some extra work to use them, with this release these features are now fully integrated into the engine and will allow you to use them just as you do with all the other things!
For particles systems, the performance was greatly improved since now all remaining operations are canceled after they are stopped. This means it will free up resources and thus your game won't become slow. Particles are a great way of adding effects such as rain, wind, stars and other ambient animations!
For Shake animations, the library used was not working as intended due to some differences with how Monogatari used animations, it has then been fixed and now you can use them just as the other ones with just it's class name! Here are the names of the animations:
* shake
* shake-hard
* shake-slow
* shake-little
* shake-horizontal
* shake-vertical
* shake-rotate
* shake-opacity
* shake-crazy
* shake-chunk
If you want to see how they look like, there's no better place than the [CSS Shake Library Website](https://elrumordelaluz.github.io/csshake/). Thanks a lot to those guys for creating this awesome library!
Those new animations can also be used with the `"infinite"` class to make the animation infinite just as with the other ones.
## Updated Demo
The [Demo](https://monogatari.io/demo/) has been updated to this latest version so you can take a look at all these new features right away!
## Monogatari 1.4.1
A [small point release](https://github.com/Monogatari/Monogatari/releases/tag/v1.4.1) was just made as well to address a few encountered bugs, the only file that's changed from v1.4 to v1.4.1 is the `monogatari.js` so you can just replace that file and you'll be just fine.
---
# Visual Novels as Educational Resources
Source: https://hyuchia.com/visual-novels-as-educational-resources
Section: Posts
Think about all the presentations you've ever heard or made yourself, it may have been school presentations or even business ones but chances are they all shared one thing: the software and tools used to create them.
Every time you see someone making a presentation, you usually find the same tools: Power Point, Keynote, Prezi, Google Slides and so on. Pretty much since Power Point came to be (I'm not old enough to remember something before that), all the tools on this subject have been made to work and look in a similar manner and that's what we all are used to but how about using visual novels instead?
Using visual novels for this purpose allows us to even integrate resources such as gamification and, if done right it can become a fun resource to use for teachers, students and other people alike but of course, the effort you'll need to create one is quite a lot more than just building a simple slideshow. Depending on what the subject is, creating a really amazing visual novel can take you quite some time but it may as well be worth it, a visual novel used for this purpose is always something fresh and may look far more interesting than your usual presentations.
## Examples
As a student, I've been looking to actually take this approach and here are some of the visual novels I've come up with:
### [Filosopolis](http://filosopolis.hyuchia.com/)
I really have to write a post just for this one, Filosopolis is a Visual Novel I made for my Philosophy class where you can learn about some of the contents of that course. This one was made in [Ren'py](https://www.renpy.org/) and it's available for Desktop and [Android](https://play.google.com/store/apps/details?id=hyuchia.filosopolis) but sadly it's just available in Spanish.
The next ones were made in [Monogatari](https://monogatari.io/) and thus can be played directly in your browser:
### [Command Line](https://slides.hyuchia.com/CommandLine/)
A simple tutorial on basic commands for the Bash command line (terminal) available in most Linux distributions and macOS (It can be installed on Windows as well!)
### [Agentes Inteligentes](https://slides.hyuchia.com/AgentesInteligentes/)
Sums up a chapter of a book about Multi Agent Intelligent Systems, this one, just as Filosopolis is sadly just available in Spanish but you can get the idea just by going over it.
### [Git](https://slides.hyuchia.com/Git/)
Teaches some of the basics about git. This one is still missing most of the annotations (dialogs) it needs but was meant just to be explained by someone.
## Advantages
As you can see, there are several advantages here. First of all, thanks to its Choose Your Own Adventure nature, you can make students pick what they want to learn as demonstrated in the Git slides by using a simple choice:
Presenting choices as this one, can be used as chapters on a book or even to create interactive quizzes. Also, thanks to the saving function on visual novels, you can save your current state or even use this functionality in order to create bookmarks for later reference.
The other 3 vns/slides show that they are not meant to be just a live presentation. Most of the times, if you miss the presentation (as in when someone is presenting it), you end up trying to decipher the slides by yourself and thus miss a lot of important information that may not even be on them but that the presenter said during the presentation. With visual novels, you can use the dialogs as if it was a guide. This way even when someone wasn't there at the moment, they will have no problem following your presentation and having enough context to fully understand it. These are slides meant to work and be meaningful with and without a presenter on any given time.
## Wrapping it up
Not many people are familiar with visual novels, they are widely regarded as simple games but as seen in this post, they can become much more, students all over the world are hoping for something fresh and not the usual plain old boring slides, this is the time to create something different. Why not give Visual Novels a try?
---
# Skrifa v0.2.6 and a Brand New Skrifa Lite
Source: https://hyuchia.com/skrifa-v0.2.6-and-skrifa-lite
Section: Posts
Skrifa [started back in 2015](https://hyuchia.com/Skrifa-Alpha-Release/), the original intention was to release it as a desktop app however due to some technical difficulties, it was released as a [Chrome App](https://chrome.google.com/webstore/detail/skrifa/pfdkhjakblfafmapniifbpkjblgolipd) instead.
A little more than a year passed since the original release and earlier this year Skrifa v0.2.0 shipped achieving the initial plan of creating a desktop application. It came packed with a whole new design, features and ideas. The main feature was encryption by default on every note, a focus on privacy.
Even when that version was released in January, it was a silent release, no post was made and no big announces happened, I wanted to wait until it was good enough for it, until it felt like it could really achieve what it was designed for and that time has come.
## Skrifa v0.2.6
Skrifa v0.2.6 finally achieves the promise set by the v0.2.0 release, the promise of offering a simple, transparent and friendly way to protect your privacy that does not affect your workflow and let's you focus on writing. This release fixes a huge number of bugs and added more PGP features to Skrifa, such as the ability to import an existing PGP key which means that having an Skrifa account is no longer necessary to use it.
Many are not comfortable with uploading their PGP keys to a server even when stored encrypted with a passphrase only they know, and they are right about it! not having to upload your key anywhere adds more security to it but also comes with the big responsibility of managing, storing and keeping your key safe.
Adding support for PGP keys, not only provides better security, it makes it an even better option for everyone out there that's already using PGP. Some of the added features related to this make it easier to interact with other non-skrifa PGP apps, like the ability to share your note in a text plain PGP encrypted format.
### Themes
We all have a different taste when it comes to design, specially when it comes to the place where we write. This is why since day one Skrifa for desktop had support for themes instead of providing a day/night mode like it's Chrome predecessor. It allows people to create themes that can completely change the look and feel of the application and two have just been added.
#### Ghost
The ghost theme is closely based to the original theme but instead of using solid colors, it prefers using a ghost style on the elements focusing on keeping the simplicity of the original one. 
#### Playful
The playful theme is the newest and greatest acquisition for Skrifa, not only because it was created by the first contributor to Skrifa but because it truly makes it a whole new experience. From a better WYSIWYG editing experience to a modern and simple look. Playful truly redesigns all your experience. 
The editor is possibly the most important change and makes it even a better option for those who want a simple interface to focus on writing.
The whole tool set is also responsive, making it ideal for taking notes on split view.
### Change Log
To take a look on what has been changed, fixed and added, here's the full change log for this release:
#### Features Added:
* You can now use your existing PGP key or create a new one instead of using a Skrifa account
* PDF and HTML export targets are now available
* You can now create a Migration backup in order to use another key
* It is now possible to clear all data within the app
* You can now create unencrypted backups
* Exporting your public key is now possible
* New Ghost and Playful Themes are available
* Keyboard shortcuts are now available for text styling in the editor and creating new notes
* Pacman and FreeBSD builds are now available
* You can now share a note as a plain text PGP message
#### Bugs Fixed:
* App closed even when there was unsaved data
* Couldn't import local images in any other than PNG format
* Notebook welcome screen overlapped with the top nav bar
* Note would not be saved if there was no H1 title available
* Views were not scrollable if the window was too small
* Some cancel file dialogs where not handled correctly
* Network requests errors in the login process where not being handled correctly
## Skrifa Lite
Encryption is awesome, everything should come with encryption right out of the box but lets face it, it is not for everyone and definitely not for any hardware. Adding encryption by default caused the blazing fast speed of the Chrome app to fade away in the desktop application and added an overhead for the computer. For this very reason, Skrifa Lite was created, a brand new app that shares the same code, design and features than the Skrifa desktop app but stripped away the encryption, recovering that awesome speed everyone loves and making it a better choice for hardware with low specs.
Skrifa Lite is available for download right now and migrating from one app to another is incredibly easy and painless! Do keep in mind however that Skrifa Lite does not protect your privacy since it doesn't encrypt anything.
## Skrifa Chrome v0.1.15
Skrifa for Chrome has been updated to create a seamless experience across all the apps, backups and note exports are now managed in the same way, meaning you can now easily move across the apps with all your notes just as you made them. Skrifa is almost an universal app, working on most of Desktop operating systems, Windows, macOS, Linux and Chrome OS.
A new icon was made for this app as well in order to differentiate it from the main app. The Chrome version will later be updated to the same interface the desktop apps have in order to improve the consistency across them.
### Change Log
To take a look on what has been changed, fixed and added, here's the full change log for this release:
#### New Features
* Images will be now saved offline so you won't need a connection to view them
* Improved compatibility with the desktop apps
* New logo
* Scroll bars are now styled
* The markdown to HTML parser has been changed to Markdown-It
* Font has changed to Open Sans to keep consistency between the apps
* Database schema and Note structure was updated to keep consistency between apps
#### Dependencies updated
* Font Awesome 4.7.0
* jQuery 3.2.1
* PrismJS
* UpNDown 2.1
* FitVids 1.2
* Lazy Loading 1.9.7
## Offline Storage
In this era of Cloud Storage, why on earth would someone store all it's notes offline? Since the beginning, Skrifa's storage has been 100% offline. Since it started as a Chrome app, the options where storing it locally or storing them on Google Drive. Since then there was some interest on privacy so storing them offline sounded a lot more secure than on Drive. Even though it's not a real privacy solution it at least gave you the power to choose where you wanted to store your notes, specially your backups without binding you to a specific solution, as a mainly Linux user, having the power to choose is always in my interest.
## Just another Electron App
There is a lot of hate and dislike around Electron and all the reasoning behind it is solid. Electron is a huge overhead and it comes with many of the problems Google Chrome has but the main reasons people hate it are it's insane memory, resources usage and big app sizes (Skrifa is about 100MB in some platforms!).
So why pick Electron when I know about all it's downsides? Well, simplicity is the keyword here. Being able to create one app that runs in multiple OSs is really convenient for indie developers like me, specially when it's a free product. It saves time and resources and achieves a consistent experience across every platform and makes it easy to fix a problem so that everyone can benefit from it.
Not only deploying is easy but programming as well, there is simply no other thing that gets you started as fast as Electron does, specially if you are mainly a Web Developer. Nonetheless, alternatives are being considered such as React Native but at least the whole v0.2.x series will be released on Electron. maybe in some time a truly native Skrifa for every platform will be available but until then, we'll have to appreciate the good things it has instead of the bad ones.
## What comes next
With every big release, there is a whole new bunch of bugs waiting to be discovered, specially in one as big as this one. 86 commits were made to the code since the last v0.2.5 release, that's even more than what it took to make the first release! So the immediate future is focusing on fixing the bugs people find while the [planning for the v0.2.7](https://github.com/Skrifa/Skrifa/projects/2) comes along.
Remember you can always report a bug or request a feature on [GitHub](https://github.com/Skrifa/Skrifa). If you are already an Skrifa user go ahead and [get the new one!](https://skrifa.xyz/#Download) Hopefully it will surprise you and if you are not yet an Skrifa user why don't give it a try?
---
# Monogatari v1.3.1 And An Engaging Community
Source: https://hyuchia.com/monogatari-v1-3-1-and-an-engaging-community
Section: Posts
Even though [Skrifa](https://skrifa.xyz/), my note taking app is a project designed for a wider audience (everyone needs to take notes), Monogatari is the one that truly makes people engage. Just last year, Monogatari got its first contribution on GitHub, and since it was released I've also been contacted by some people that are working on games using Monogatari. If you don't already know it, I love helping people so I've tried to help all this people as best as I can, providing personalized support, tutorials, snippets and everything I can do so they can just create an awesome game.
Now, many of the ones who contact me for help asks me if it's ok or that they don't want to waste my time. To everyone who asks me or tells me something like that I answer: Helping is never a waste of time, specially if I'm helping them with some of my projects, that is what I am here for, I didn't create them just to tell you I can't help you, it's quite the opposite, I created them thinking it may help someone and believe me, I'll do whatever I can to help you, never think of it as a waste of time, it is something good for you and for me.
Has it worked out? Has someone actually released their game? The answer is yes! I know of one that was released, the first Monogatari game made public (at least to my knowledge) this game is **Arizona 9**.
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
## Arizona 9 ([arizona9.com](http://arizona9.com/))
A casual game that reworks the event of Brisenia Flores’s death at the hands of border vigilantes into a hopeful tale.
This game was created by a team of people:
**Artists**
* Jane Gotts
* Christina Lee
* Allison Perry
* Allison Schubauer
**Designers**
* Azubuike Ndefo-Dahl
* Z Sweedyk
* Tran
* T. Kin-Trang
**Programmers**
* Steven Bakos
* Robert Zatyko
And to everyone of them I have to say thank you, for choosing Monogatari for your game and giving it it's first game!
If you want to try it out, you can do so in their web page, you'll notice it has three levels, in order to play the visual novel level, you'll first need to complete two puzzles.
Once you do that the third level will unlock and you'll be able to play the novel. I could just give you the link to the novel level but hey, someone spent a lot of time in this so why not play it as it was meant to be?
As I said, Arizona 9 is the first and only game to my knowledge, if you know about any other I would love to know about it!
Not only games are the product of this constant interaction with people trying out Monogatari, as I said I also get benefited from it because they are really helpful when it comes to find bugs or think about new features or how to improve the engine, thanks to all this, **Monogatari v1.3.1** has just been released.
## Monogatari v1.3.1
Since last year, someone who I will just refer as Cesar has been in contact, he's been creating a game and wanted some hints on how to do some of the things he needed. Along the way, he found some bugs, reported to me and they were fixed, also features he needed were just added in this version, this is why this update is really all thanks to him, reporting bugs and requesting features is not something everybody does, many would have just given up at the first sight of a bug but this proactive behavior is what makes FOSS great, the ability to get feedback and help not just from other developers but from other users as well, the opportunity of building a real community around something.
So, Cesar, if you read this I just have to say thanks a lot! Hope we'll see your game around pretty soon!
This was released as an update to the 1.3.x series, mostly because what's changed are bug fixes and dependencies updates but some new features were added as well!
### New Features:
#### Dynamic Side Images
Previously, there was a "Face" property that you could define inside a character and it would be shown as the side image for that character, but what if you didn't want it in every dialog? or what if you wanted to show a different one depending on the dialog you are displaying? Well, this is now something really easy to do, first, a new "Side" property can be defined in your characters like this:
```javascript
"e":{
"Name": "Evelyn",
"Color": "#00bfff",
"Directory": "Evelyn",
"Images":{
"Normal": "normal.png",
"Mad": "hmph!.png",
"Doubt": "uhh.png",
"Disapointed":"ngggg....png",
"Happy": "hehehehe.png"
},
"Side":{
"Smiling": "smile.png"
}
}
```
The "Side" property behaves just like the "Images" property, it allows you to define the images that can be used for a specific character. To use it, you'll be able to do it in a per-dialog basis. meaning in the dialog you can now define what side image will be shown next to it, in this example, you would do something like this:
```javascript
"e:Smiling Hey this is pretty cool right?"
```
That means, in a dialog you can now say what character is talking and what side image is showing just in a character:side-image format, this example would produce something like this:
#### Infinite Character Animations
Added support for infinite animation loop when showing images or characters, as you may know Monogatari uses the CSS Animations library for the character animations, as it turns out this library has an option to make this animation infinite, meaning it will be looped. When showing a character you would do something like this:
```javascript
"show e Normal with fadeIn"
```
And that will show that character with the fadeIn animation but if you wanted that fadeIn to loop, it's as simple as adding the word infinite to it like this:
```javascript
"show e Normal with fadeIn infinite"
```
And just like that, the animation will be repeated as long as that character is on screen.
#### Focus Class
Every time your character has a dialog, its character image will have a 'focus' class added, the purpose of this is to let you add special CSS rules or even JavaScript actions to make the character stand out from the others.
#### Choice Objects with Dialogs
Choice objects now allow to specify a dialog to be shown right when the choices are shown, this was something really needed, previously, you would have a dialog and then a choice object which would cause the dialog to be shown but not the choices, meaning you had to click again to show the choice dialogs. With this update, you'll define the dialog right inside the choice object just like this:
```javascript
{"Choice":{
"Dialog": "e Before I continue, let me ask you, what are you?",
"Developer":{
"Text": "I'm a Developer.",
"Do": "jump Developer"
},
"Writer":{
"Text": "I'm a Writer.",
"Do": "jump Writer"
},
"Designer":{
"Text": "I'm a Designer.",
"Do": "jump Designer"
},
"Player":{
"Text": "I'm a Player.",
"Do": "jump Player"
}
}}
```
That "Dialog" part is what will be shown along with the choice, and as you can see it supports characters just like any other dialog statement, meaning that extra click will no longer be necessary!
### Bugs Fixed:
A list of all the bugs that were fixed for this release:
* Save function caused side images to be replicated
* Conditional Statement wasn't able to set a function as a condition
* Fix error that made the Back button inside menus unusable on Firefox
* Buttons font size was not coherent with the rest of the elements
* Fix error that caused Save slots to only be available the second time the page is loaded
### Updates:
Here is a list of the libraries and dependencies Monogatari ships with that have been updated:
* Font Awesome v4.7.0
* jQuery v3.2.1
* Artemis v0.1.1
* Animate CSS v3.5.2
* CSS Shake v1.5.0
* Normalize v7.0.0
### How to update:
While the update process is fairly simple, it is still a long way to be as nice as I would like it to be and in fact is still an [issue in the GitHub page](https://github.com/Monogatari/Monogatari/issues/22), it is a very manual process and it involves you just replacing the old files with the new ones so just [download the new release](https://github.com/Monogatari/Monogatari/releases/latest), and replace all the files **except** the following in your game:
* script.js
* main.js
* options.js
* main.css
* Audio, img and video directories
That is if you haven't made any custom changes to the monogatari.js or css files, in that case you'll probably have to see what's changed and make your changes again. The strings.js file where the GUI translations are in, should only be replaced if you have not added new ones. If you have indeed added some, you can just leave it as it is.
So yeah, as you can see it's pretty much replace all that doesn't have to do with your game or all that you haven't made changes to. Simple yet not ideal, if you have any ideas of how to improve this, you can contribute them in that GitHub issue.
### What's next?
With this release, the way is now clear towards the v1.4.0 version, Monogatari has a summer cycle meaning every big update is made and released during the summer, it's still a long way to say what you should expect but you can track all the planning and progress right from its [project page](https://github.com/Monogatari/Monogatari/projects/1)!
---
# Installing System76 Driver on elementary OS
Source: https://hyuchia.com/system76-driver-on-elementary
Section: Posts
So, you get a nice and shining System76 machine and decide to use [elementary](https://elementary.io/) on it. You plug in your USB, go through the installer and finally reboot to your brand new system but there's something missing, some things are not working as they should or at least not as good as they should be. You remember then that the Ubuntu shipped with your computer had this System76 app which you may not know but it took care of all the needed drivers, tweaks and even added some wallpapers for your computer to be the awesome machine it was meant to be.
So, how do you get the System76 Driver app on elementary OS (Or pretty much any Ubuntu derivative)? Luckily for us, System76 keeps a [Launchpad Repository](https://launchpad.net/system76-driver) from which you can get the Driver so let's get started.
First, if you are using elementary then you need to install the software-properties-common package which provides us the ability of adding external repositories for software installation. It is not provided on elementary due to design and simplicity purposes but we'll actually need it so to install it just run:
```bash
sudo apt install software-properties-common
```
Now that we've done that, we can proceed to the driver installation:
```bash
sudo apt-add-repository -y ppa:system76-dev/stable
sudo apt update
sudo apt install system76-driver
```
Let's take a look at what that code does, the first line adds the repository itself to our sources, second line updates the package information our system has and then the third line finally installs the System76 Driver.
If your system has a NVIDIA GPU, then you'll also need to install the NVIDIA driver with the following command:
```bash
sudo apt install system76-driver-nvidia
```
Once installed, the driver will make all the needed tweaks and once finished you'll have to reboot your system in order for changes to take effect. You can also open the app by searching on Slingshot for it, it will prompt for your password and then show you a screen like this one.
There you'll be able to check some details and even create **Log Files** so you can send them to them in a Support Ticket if you ever have any trouble and that's it, you've made it!
You can also check their official support page for more details: [http://support.system76.com/articles/restore/](http://support.system76.com/articles/restore/) Remember that while this tutorial was made for elementary OS, you can install the driver in pretty much the same way on any Ubuntu derivative so you can take the most out of you computer.
---
# Building a Stat System in Monogatari
Source: https://hyuchia.com/monogatari-stat-system
Section: Posts
Monogatari while having several features right out the box, it still lacks an implementation of a Stat system, which you could use to create Dating Sims and RPG games, however it does have something, Monogatari is extremely extensible and adding a Stat System is fairly easy.
**Edit**: This Tutorial has been updated to match the Monogatari v1.4.1 features. (July 19, 2018)
## Step 1: Add the stat Object
Monogatari ships with a variable reserved for custom storage, the storage variable will be found in the options.js file. Inside the storage object, we can put anything we want to save every time a player saves the game. By default it will look like this:
```javascript
// Persistent Storage Variable
let storage = {
player: {
name: ""
}
};
```
As we can see, there's already a property called player there, we'll use that property to save our stats. Since it's a date-sim, we might want to store stats like intelligence, love, attractiveness etc. To do so, let's create a property inside the player object for the stats and let's start them all in zero:
```javascript
let storage = {
player: {
name: "",
stats: {
"intelligence": 0,
"love": 0,
"attractiveness": 0
}
}
}
```
Now we can access this from JavaScript and the stats will be saved with every saved game. What we need now is to be able to add or subtract points to those stats. To keep this simple, doing it by using functions might be the best option.
## Step 2: Make our stats useful
When you first create a new Monogatari Project, there's already a custom Script, in it you can actually see the storage.player.Name property being used to store the name of the player:
```javascript
let script = {
// The game starts here.
"Start": [
"notify Welcome",
{
"Input": {
"Text": "What is your name?",
"Validation": function (input) {
return input.trim().length > 0;
},
"Save": function (input) {
storage.player.Name = input;
return true;
},
"Warning": "You must enter a name!"
}
},
"h Hi {{player.Name}} Welcome to Monogatari!",
{
"Choice": {
"Dialog": "h Have you already read some documentation?",
"Yes": {
"Text": "Yes",
"Do": "jump Yes"
},
"No": {
"Text": "No",
"Do": "jump No"
}
}
}
],
"Yes": [
"h That's awesome!",
"h Then you are ready to go ahead and create an amazing Game!",
"h I can't wait to see what story you'll tell!",
"end"
],
"No": [
"h You can do it now.",
"display message Help",
"h Go ahead and create an amazing Game!",
"h I can't wait to see what story you'll tell!",
"end"
]
};
```
Let's modify the script to make use of our new stats:
```javascript
let script = {
// The game starts here.
"Start": [
"notify Welcome",
{"Input": {
"Text": "What is your name?",
"Validation": function (input) {
return input.trim ().length > 0;
},
"Save": function (input) {
storage.player.name = input;
return true;
},
"Warning": "You must enter a name!"
}},
"h Hi {{player.name}}, this demo is to demonstrate how to create a simple stat system",
"h Currently you have {{player.stats.intelligence}} points of Intelligence but you seem far more intelligent, how about we add five points?",
{"Function": {
"Apply": function () {
storage.player.stats.intelligence += 5;
return true;
},
"Reverse": function () {
storage.player.stats.intelligence -= 5;
return true;
}
}},
"h There you have it, you now have {{player.stats.intelligence}} points of Intelligence",
"end"
]
};
```
Now the script will ask for your name, show you the initial quantity of intelligence points you have and then add 5 points to it. The same can be done with all the other stats.
## Step 3: Show the Stats
We now have modified the stats but currently there's no way the player can see how he's doing so let's add a screen for that. In order to do that, we need to add 3 things:
1. The HTML code of our new screen
2. A button to show and hide the stats
3. The javascript code to make that button work
For the HTML part, we'll create a modal window but it really is up to you how you want your players to view the stats. Add the following code right above the data-ui='message' element:
```html
StatsIntelligence:Love:Attractiveness:
```
As you can see, by using meters the players will actually see a bar for each of their stats. Now let's add the button to the data-ui='quick-menu' element:
```html
Stats
```
And finally inside the main.js file, we'll add a handler so that when the button is clicked, the modal is shown or hidden:
```javascript
$_ready (function () {
$_('[data-action="stats"]').click (function() {
if ($_('[data-ui="stats"]').isVisible ()) {
$_('[data-ui="stats"]').removeClass ('active');
} else {
$_('[data-ui="stats"]').addClass ('active');
}
});
});
```
Once you've done all this, you should be able to see the button, click it and the stats will be shown. However, after some playing will it, you'll notice something, the stat bars are not changing even when the stat is modified. The reason is simple, we are changing it's value in JavaScript but not in the HTML document however doing it with our current code that would involve repeating many unnecessary code. How about we create a function to modify the stats instead of doing it manually as we previously did? To do it, right above the declaration of the script variable in the script.js file place the following function:
```javascript
function stat (stat, value) {
storage.player.stats[stat] += value;
$_(`[data-stat="${stat}"]`).value (storage.player.stats[stat]);
}
```
The function will take 2 parameters, the stat name and the quantity you want to add, once added we can modify our previous script code:
```javascript
let script = {
// The game starts here.
"Start": [
"notify Welcome",
{"Input": {
"Text": "What is your name?",
"Validation": function (input) {
return input.trim().length > 0;
},
"Save": function (input) {
storage.player.name = input;
return true;
},
"Warning": "You must enter a name!"
}},
"h Hi {{player.name}}, this demo is to demonstrate how to create a simple stat system",
"h Currently you have {{player.stats.intelligence}} points of Intelligence but you seem far more intelligent, how about we add five points?",
{"Function": {
"Apply": function () {
stat ("intelligence", 5);
return true;
},
"Reverse": function () {
stat ("intelligence", -5);
return true;
}
}},
"h There you have it, you now have {{player.stats.intelligence}} points of Intelligence",
"end"
]
};
```
This way we'll be able to easily change the stats value both in JavaScript and the HTML bars.
## Step 4: Changing choices
We've got now a fully functional stat system, the question now is how will we use it? Here are some options:
* Only showing certain options if a stat condition is met, you can find information on this inside the [docs](https://monogatari.io/documentation/script/choices/).
* Add more in-line functions along the script with if or switch statements and acting according to the current stats
## Step 5: Styling
Naturally, you'll need to style your meter bars and modal window in order to look pretty and match your game's style, just add some CSS and your game will be ready to amaze people!
## Download
You can get the source code of this project here: [Monogatari-Stat-System.zip](https://datadyne.perfectdark.space/monogatari/community/samples/Stat-System.zip)
---
# My Linux Setup Guide
Source: https://hyuchia.com/my-linux-setup-guide
Section: Posts
I love using Linux, and I run it next to my OS X installation in my MacBook Pro. This post is simply a recompilation of all the things I do to enhance my Linux experience, I'll keep it updated since it's also my To-Do list for every fresh install I do (which I do a lot btw) and I'll be adding things along the way.
I usually use Ubuntu, Elementary or Fedora so on the mean time, those will be the distributions I'll focus on.
## Ubuntu (and all it's derivatives)
### Install the latest versions
Even though the Ubuntu Software Center has been moved to Software in Ubuntu 16.04, many software is still not installable from it and many versions show as not available so I'm more comfortable doing it the apt way, besides I love having everything up to date, bleeding edge kind of guy.
#### Git
To get the latest git version, you can install it from the git-core maintainers ppa which holds the latest version of git for Ubuntu.
```bash
sudo add-apt-repository ppa:git-core/ppa
```
####
Inkscape
```bash
sudo add-apt-repository ppa:inkscape.dev/stable
```
#### Java JDK 8
```bash
sudo apt install openjdk-8-jdk
```
#### LAMPP Stack
```bash
sudo apt install apache2
```
####
Meteor
```bash
curl https://install.meteor.com/ | sh
```
#### Node JS
```bash
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
```
#### Spotify
```bash
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys BBEBDCB318AD50EC6865090613B00F1FD2C19886
```
#### Fix some issues
##### Headphones Jack Red Light in MacBook Pro
This has only happened to me with my Mac but it may happen in other computers too, if you now see a red light coming out of your headphones jack, it is the optic output of audio working, not sure why this happens but you can fix it easily, just run this command and make it run on every boot.
```bash
amixer set IEC958,16 off
```
## Fedora
### Install Fedy
Fedy makes it very easy to install things like Google Chrome, Atom, Java etc.
```bash
bash -c 'su -c "curl http://folkswithhats.org/fedy-installer -o fedy-installer && chmod +x fedy-installer && ./fedy-installer"'
```
### Node JS
```bash
curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
```
### Spotify
```bash
sudo dnf config-manager --add-repo=http://negativo17.org/repos/fedora-spotify.repo
```
###
Fix some issues
####
Headphones Jack Red Light in MacBook Pro
This has only happened to me with my Mac but it may happen in other computers too, if you now see a red light coming out of your headphones jack, it is the optic output of audio working, not sure why this happens but you can fix it easily, just run this command and make it run on every boot.
```bash
amixer -c 0 sset "IEC958",16 off
```
#### No Wi-Fi in Macbook Pro
You may notice the wifi is not even recognized. Run:
```bash
sudo dnf install broadcom-wl
```
#### Disable IR Receiver
If you have an apple TV and your IR receiver is on, it's going to be like hell, thankfully you can unload it. You should add this as a startup command.
```bash
sudo rmmod hid_appleir
```
---
# Being on a Visual Novel Team
Source: https://hyuchia.com/being-on-a-visual-novel-team
Section: Posts
Last year (2015) I finally decided to join a team that was developing a Visual Novel, I'm a fan of VNs and have always wanted to create my own, in fact that's how [Monogatari](https://monogatari.io/) came along, from trying to create my own after [Ren'py](http://www.renpy.org/) wasn't enough for me but sadly enough, I may be good with the coding but in the writing part I'm just not that good. And yes, that means I built a VN engine without actually having done one myself.
I had been wanting to join a VN team for a long time but I never did, one of the reasons for it was because I just didn't feel ready. I have my own standards when it comes to my job, really high ones and under those standards I knew I still needed time to be able to build an awesome VN just like the ones I love.
## Enter Vampires The New Birth
On July of that year I found my perfect oportunity, a team was recruiting people for a Visual Novel: [Vampires The New Birth](http://vampireproject.wix.com/vampiresthenewbirth). There was a crowd founding campaign for the game with some information and the vision of it. I decided to send them a mail asking if they needed a programmer and luckily enough they didn't have any. My thoughts of what I would be doing in a VN team as a programmer at that moment where just about translating things to Ren'py format, adding some choices here, changing the UI there... anyway, simple things like, and yeah, I wanted to start with a simple job like that, as I said before I felt not quite ready for anything big at the moment.
That illusion lasted just a day since the next day I was told what they actually needed, a stat system and event system as well since the game was RPG-ish. My first thought was a simple but straight forward "Well... fuck" I immediately felt that what I thought was right, I just wasn't ready. I had never built a something like that and it was definitely a lot bigger than the initial thought of just translating some things to Ren'py... I was about to call it off.
When I say I have high standards I also mean that if I know I'll do a job that will not reach them I prefer not doing it.Not because I can't have it done, but because I won't do any job I won't feel proud about when I'm done. I thought it for a while and ended up deciding to do it, I would never be able to know if I was truly able to do it unless I tried and thus, I lied... yeah, probably not the best thing to do, I replied saying that I was able to do it but I was absolutely not sure about that.
Just like that I quickly started working with the team.
## The only tech savvy in the room
Working on a VN team was a completely new experience for me and it took me right outside of my comfort zone. There where a bunch of things that where really different to what I'm used and that gave me a glance of what happens in some teams.
### No Git at all
The first thing I really felt was the absence of git or any other VCS, I use git for all my projects, personal or school ones, collaborative or not git is always there but in the VTNB team there was not even a mention of it. All the work is done through email and a cloud storage service (one I had never heard before), the artists or composers finish something, email it to the writer, the writer puts it in the game and then emails me the updated version, I then add my code and send it over again... and yeah, that is still happening. That as you may think if you've ever used a VCS is pure chaos, it's very easy to loose something in the process, everyone changes something and you never know what, where or why, everyone has their own version and trying to merge yours with other one is not that simple.
I do have my own repository for the game but of course not everyone knows git exists and even if they did, I don't think some people would actually use it. This may change in the future but for now, it has really been a challenge to go back to those days where I didn't knew a thing about VCSs.
### A different work flow
I'm used to learning everything on my own, learn and create fast, really fast so when I was assigned a list of tasks and was given two weeks for doing them I finished them in just a day, I think two weeks for any programmer is a lifetime... ok, that's probably an exaggeration but I must admit, the work flow is a lot more slower than what I'm used to, not that that's something bad but at first it was kind of weird, I initially thought the project would be done by august last year but when they told me it would probably be done on December, and not the whole game but just the demo it really blew off my mind, that's the longest time I've been working for a single project.
### Communication
As I said before, it is all done by email, and actually I haven't talked to anyone but the writer, I know there's a whole team but we actually never talk, that was something weird for me at first but then, I actually noticed that the communication was not necessary in reality but being used to the Slack world email still is an old challenge.
### The style
This is more of a personal thing but I just love minimalist themes, flat and clean... that's why you'll notice a huge difference between the game icon (which I did) and the rest of the art. I'm not saying I don't like the art we have, I love it! I'm just stating that I'm not used to creating things like our UI or the [webpage](http://vampireproject.wix.com/vampiresthenewbirth) style (I'm still trying to create a website for it).
Yes, I'm probably the most tech savvy in the team but lets not forget I'm also the less savvy on creating a Visual Novel
## You learn something new everyday
Being in a team like that has really been an amazing experience and I hope it'll last a lot more, I've learned a lot of things, in the coding, art, administration of a team and even on the whole VN world side. In fact I was able to create the stat and events system so my lie was completely harmless, they are not perfect yet but they're just fine for now. I've loved the whole experience, and what's more, I love the game I'm helping to create, I've met amazing people and even though I'm not that into vampires this VN is there to probe me and probably many others that vampires are actually awesome, it just depends on the story you tell.
It's been a hell of a ride and there's still a long way to go but recently the latest [demo](https://vtnb.itch.io/vampires-the-new-birth) got released! So please, go ahead and play it I assure you'll have a great time and the demo will leave you craving for more, a lot more. You can download the demo here: [https://vtnb.itch.io/vampires-the-new-birth](https://vtnb.itch.io/vampires-the-new-birth)
---
# Forever Yours, Joli OS
Source: https://hyuchia.com/forever-yours-joli-os
Section: Posts
My first introduction to Linux was [Momonga Linux](http://www.momonga-linux.org/) which I naively bought in a place near my house (Yeah, people does sell Linux in Mexico) as soon as I knew about the existence of Linux, that was when I was in junior high school, I was just 12 years old.
After that I began my life as what many know as a "Distro Hopper", trying as many Linux distros as I could but none of them ever made me stay. It was 3 years later, in high school that I discovered Joli OS. It amazed me at the time and still does, I couldn't believe there was a way to connect a HTML5 with Linux running on the back. Joli OS was in fact the first distro that made me use it without the need of dual booting, it was completely fine for me to have it as my main and only OS, I recommended it to a bunch of my friends and in fact I even got to see one person in a coffee shop using it once (Believe me, seeing that in Mexico is extremely rare). Everything was just fine and then... it got discontinued, just like that the OS that I loved so much was over, I had arrived late to the party and just got to witness the end of it.
Joli OS holds a special space in my mind and in my heart, not only because it was the first distro that truly made me use Linux in a daily basis but also because it was the one who thought me a lot about it, as good as it was it wasn't perfect, it was based on an old kernel and system and there where some little issues which over time I learned to fix and with that information I created my [first post ever](https://hyuchia.com/Native-Applications-on-Joli-OS-and-Problem-Solving/). Back then my blog was a blogspot one so the date of that post currently is not the same it was, but that post I made was some months before it got discontinued. Besides troubleshooting, it made me learn all the basics of Ubuntu, Linux and even made me very intrigued by the web I hadn't think about it before but it may have been because of it that I became so interested in building things for the web.
At that time, having something that merged the web and operating systems like that was completely new, there was no Chrome OS and in fact I believe it was Jolicloud the first one to create a system like that or at least create it successfully. When the interface got updated in it's 1.2 version (which was the last one btw) I just loved it a lot more, it looked so modern and clean, completely different to your regular Linux distro (yeah, there was no elementary OS either) and for my extremely minimalist taste it was perfect. It was pretty unexpected for everyone that after this major UI change they would discontinue the OS in order to become a web app. Most of the comments they received in their [blog post](http://5.196.94.64/?p=3344) about the end of life of Joli OS where the same, nobody wanted it to die and if you ever used Joli OS you probably didn't want that either. They ended its life stating the following:
> Today to access the full potential of Jolicloud, you just need to use our apps on a browser. That’s why Joli OS has been discontinued and is no longer officially supported.
I refuse to believe that they truly believed that, the thing with Joli OS was not because of the web app, it was all about two world coming together. Sure, it was possible and easier to just follow as a web app, and let's admit it, supporting an OS is a complicated task, in fact that's also one of their reasons, they simply couldn't keep up with the rate new hardware was coming and supporting all that was just insane, I'm not saying they did a bad thing or took the wrong choice, I'm fully aware that for a startup trying to create an OS is a pretty complicated task and I'm sure that they have been able to focus all their efforts and manpower into creating amazing things, things that would probably have taken a lot longer to build if the OS was still around.
For a moment there was a last hope, they started building a desktop environment for Ubuntu, it was like the reborn of Joli OS but sadly it didn't lasted much, once again it proved to be just too much work to take on.
That in fact proves that they understood what the OS meant to everyone, I'm sure it meant a lot for them too but that decision must have been one very well thought and I truly hope it worked as they expected.
Every once in a while I mention Joli OS in a tweet or G+ post, in fact I even had a +1 in one of them by Zak, from the Tech Support of Jolicloud. It's funny because all of my interactions with Jolicloud have been responded by him, even when I had some problems with the desktop environment he was the one who responded my support request and he's the one I've seen that's always dealing with blog posts and news about Jolicloud.
It was that post, and I must say, what I stated there is in fact one of the items of my to-do list, I love Linux and in fact I'm thinking on getting my System Administrator certifications as soon as I have time, I'm sure that bringing back Joli OS is not impossible, I must admit that right now I don't have any deep knowledge worth something for that task, I've even tried to review some of the code in GitHub with no other result than knowing I'm not ready yet, not that I expected to be ready but I know it will be a long way.
I still haven't understand why no one has taken up that task already, the code is there and yet no one forked it and continued it, even though it was loved by so many, there was no one around to keep it going. It may be because it's too integrated to Jolicloud, even though it was open source it still is pure Jolicloud material, in fact I don't even know if it would be legal to try and bring it back just like that, I suppose you would need to talk to them since at the end, you are integrating their platform into an OS and well, integrating it means you know how it works and everything about it, or at least have an API. With that in mind it's then not that difficult to see why no one has done it yet but even so I would love to try.
As I said before, currently I don't have any deep knowledge on how to do that or even how to create a Linux distro for starters but I'm patient enough and a quick learner, trying will not hurt me.
Don't get me wrong, I know there are alternatives, I actually literally have the "jolios alternatives" search once every two months or so and I've seen the alternatives that are out there but again, none of them is as well implemented as Joli OS was, at least not for my liking. I own a Chromebook, let's say that's the closest I've got to having the same experience but Chrome OS at the end is not a full Linux experience, and yeah, I've got crouton with Ubuntu on it but it's still not enough. I'm a person with very specific likings, Elementary OS has been one of the other only distros that I consider beautiful, I also own a Mac, I'm not an apple fanboy but let's face it, the interface is simple, beautiful and they have lots of awesome apps, not many Linux distros have that. I use Ubuntu but I really hate the default ambiance theme, switching to Numix is the first thing I do after a fresh install. Joli OS was fine out of the box, even though it's discontinued I do recommend people to try it once, just for a peek, a peek to one of the most amazing things I've ever seen.
I've even dreamed with owning a Jolibook (Yeah, those are not in production any more), that's definitely something I want to get someday, I'm sure I'll find one for sale somewhere, just have to wait for it, I would really give my Chromebook away for a Jolibook, I'm not an apple fanboy but a google fanboy that's questionable so yeah, it is still something I would choose instead of a Chromebook. In fact I'll try someday to install Joli OS on my Chromebook, as they say, _fake it till you make it_.
Now, returning to the issue about reviving Joli OS while being external to Jolicloud, I would even consider applying for a job there, if you know about me, you'll know I want to build something of my own but I do want to work somewhere just for the experience of it, there are not many companies in my list but Jolicloud is definitively one of them, I've been learning a lot of web development and every time I struggle with an API I just think "Damn, how the hell do the guys in Jolicloud do all of that", I really mean it, they are like API gurus and working there must really be awesome. I only use Google Drive for cloud storage so I haven't been able to use Jolicloud's drive to it's full extend but having it integrated with the OS again would really change that, it not only managed your cloud storage but the local one as well, everything was simple and beautiful.
So there it is, the reason I'll never give up on Joli OS, I don't know of what will happen in the future but I'm sure that I'll at least try to make it work again, it's too good to be lost.
---
# The Confusing Cofounder Relationship
Source: https://hyuchia.com/the-confusing-cofounder-relationship
Section: Posts
People all over the world knows what a startup is and how different it is from a big company. There are already lots of stories about successful startups and all their way to become a huge company. That's the dream for many people, I'm included too, the idea of being part of a startup thrills me and in fact I have my own plans for one of my own.
Ok, not entirely my own, as many others I'm not alone in this, some years ago I met [Fernando](https://twitter.com/fsvdr), the guy who will be co-founding a startup with me someday. We already made our first approach to the startup world by creating Codify (and by creating I mean it's there but it's not currently active), like many people we still haven't decided what exactly we'll be doing, we just want to cover so much and I know that's a very bad idea and part of the 101 of what not to do when starting a business. While we find that one thing we want to do Codify will be waiting and meanwhile we are learning and doing as much as we can.
We've been at it for almost three years now, working on projects together, talking about possible business ideas, learning all that school is not teaching us, making friends and challenging us every day, a typical co-founder relationship.
Now, why is having such a relationship is so weird for many people?
Some people say your co-founder knows you better than your wife/husband and it may be true, with a co-founder not only you spend a lot (and I mean A LOT) of time, you also share all kinds of experiences, good and bad ones. You share dreams, expectations and most importantly, at the end your co-founder is probably the only one who is as convinced as you of an idea, the only one who will always do as much as you in order to achieve what you want and will be the last one to abandon you from a sinking ship. Sure, your family, boyfriend/girlfriend and friends will be there for you as well but none of them will be as close to you as your co-founder since no one will experience things as close as you, no one will truly know what you feel but your co-founder.
Co-founders are in sort of a "marriage" where the only goal is taking care of your baby, your company and as all marriages, being successful requires a lot of time and effort. For external people that relationship is just weird, it goes way beyond being best friends but of course without having anything to do with a "love" relationship (well, in some cases it does) and that's something many people fail to understand, nobody gets exactly how those relationships work and why would them?, the only way to understand is by being in that situation yourself.
Creating a Startup is not an easy task, it is time consuming, unpredictable and you'll drag many people around you into it, even if they are not directly involved but it occupies such a big part of your life that it's impossible for that not to happen. When I hear the word "Startup" my mind goes directly to the U.S, Y Combinator, the incredible [Startup podcast](https://gimletmedia.com/show/startup/) and many other things but sadly enough, Mexico's reality towards a startup is not as cool as in the U.S., there are not as many people willing to sacrifice that much for an idea you are not sure will work and even those who create what we call a "PyME" (Small and Medium Companies) don't have anything to do with the startup concept, most of them are just selling food in either a small place or a food truck. There is still a long way for Mexico in the startup age but I'm sure there's enough talent here to create awesome things, I was lucky enough to find people who believe in me and my dreams and even more lucky to find someone willing to go down the road with me, my co-founder.
It's true we haven't exactly started yet, we can not consider ourselves true entrepreneurs yet but I know it's not a matter of "if", it's a matter of "when". I have no doubt we'll success, even here where the conditions are not as favorable for startups. We actually have to succeed, as time goes by we convince ourselves more and more that we are not capable of working in a strictly formal environment like many big companies have, we have no interest in something that's not creative, even less interest in just fixing things instead of creating them. In all this time we've developed a workflow, an environment we are comfortable with and we have no plans to give up on that any time soon. Sure, we both would like to work someday in a big company, I myself would love a job in something Linux related like Canonical, JoliCloud or event the Linux Foundation itself, but that's not our end goal, we would do it for the experience and because it truly interests us but not as much as having something we created ourselves.
We still have a long way to go but I know the wait will be worth it.
---
# Skrifa Alpha Release
Source: https://hyuchia.com/skrifa-alpha-release
Section: Posts
I've been using Skrifa for my school notes, just recently started working to make it accessible for everyone, it was supposed to be released initially as an electron app for Windows, Mac OS X and Linux, however after I bought a Chromebook, my priority changed to make it first a Chrome App. The Electron builds will still be released but I would like to test it first in chrome since it's easier to target people and apply fast updates to it.
Skrifa has reached an alpha state, alpha not because there are a lot of bugs or it's incomplete but because I have very high standards and there are still things I want to do, mainly changes to how it works on the back more than what it does right now, the only addition I would make right now would be the ability to have Notebooks to group notes and export as an HTML page.
If you need a simple but powerful tool for taking notes, Skrifa is what you are looking for.
Since it's an Alpha test, it's not yet available to everyone (Although soon it will) please test it if you can and any feedback is welcome. You can also see the code and contribute on [Github](https://github.com/Skrifa/Skrifa)!
Get the Skrifa app for [Chrome](https://chrome.google.com/webstore/detail/skrifa/pfdkhjakblfafmapniifbpkjblgolipd) now:
[https://chrome.google.com/webstore/detail/skrifa/pfdkhjakblfafmapniifbpkjblgolipd](https://chrome.google.com/webstore/detail/skrifa/pfdkhjakblfafmapniifbpkjblgolipd)
Current Features:
* Mathjax Support
* Code Highlighting
* Video and Image support (Only when online)
* Create and restore from backups
* Full Rich text editor
* Custom HTML insertion
* Backup creation and restoration
* Markdown import and export (Not support for code or tables)
* Night Mode
* Single note import and export
---
# Aegis, More than a Framework, an Ecosystem
Source: https://hyuchia.com/aegis-ecosystem
Section: Posts
Even though Aegis was not my first project, it sure has become the most important one. Not because many people are using it, or because it's more advanced than others but because Aegis is the foundation for all of my other projects.
It turned out I now have a huge ecosystem, since every project is built on Aegis, the more I work on those projects the more I can improve Aegis, and the more Aegis improves all the other projects improve as well.
Sure, I could be using Bootstrap or Polymer as templates or CakePHP and Laravel as Frameworks but as all my other projects, I haven't started them because there wasn't something like it before, but because I love building my own things and seeing how they work as well as making them in a simple way so that everyone can contribute or learn from them.
I may have a lot of projects, and that means all my resources are split but at least this ecosystem that's been created makes me able to work indirectly on them...
---
# Draft, Writing Documentation Just Got Easy
Source: https://hyuchia.com/draft-easy-documentation
Section: Posts
After building Monogatari and the first version of it's documentation, I noticed that I suck at writing documentations and writing them is a really horrible job, besides having to worry of the website for it and more. There's no way to focus if you start thinking about content, design, readability etc.
## Enter Draft...
While building the second version of the Monogatari's Documentation Draft was born, I wanted something that just built my documentation for me in a nice way.
Draft will take any HTML or Markdown files and build the menu based on those files and directories so your only worry should be writing the best documentation you can.
You can now visit the [website](http://draft.hyuchia.com) and take a look at the [template](http://draft.hyuchia.com/demo/) you get when downloading it.
Draft is an Open Source project and like all my other projects it's released under the MIT License. You can also view the code and contribute in the [GitHub Repository](https://github.com/Hyuchia/Draft).
---
# Monogatari 1.1.0
Source: https://hyuchia.com/monogatari-1.1.0
Section: Posts
Monogatari version 1.1.0 has just been released and now includes the basic Electron Files that will allow you to create to create desktop apps in a pretty simple way. You'll find all the information you need in the [documentation](https://monogatari.io/documentation/).
### 💜 Support Monogatari
Monogatari is free, open source, and built in the open — releases like this one are powered by the people who chip in to keep it going. If the engine helps you bring your stories to life, please consider sponsoring its development:
- ❤️ [GitHub Sponsors](https://github.com/sponsors/Hyuchia)
- 🧡 [Patreon](https://www.patreon.com/Hyuchia)
- ☕ [Ko-fi](https://ko-fi.com/hyuchia)
The [web's main page](https://monogatari.io/) has also received a whole new design and now expresses in a better way what Monogatari is all about.
You can [get the release](https://github.com/Monogatari/Monogatari/releases) now, so go ahead and create awesome visual novels! remember you can always contact me if you need any help.
---
# Skrifa, a Brand New Project
Source: https://hyuchia.com/new-project-skrifa
Section: Posts
After creating Codify's [Journal](http://journal.rlyfy.xyz), I wanted to try and build a simple notebook that worked offline, using web technologies and Electron to create an app.
This project is still under development since I was trying to make it with IndexedDB but it's slow as hell, and probably will end up using just Local Storage instead.
Skrifa will feature as many things as I can build on it like:
* Text Styling and alignment
* Multiple headers
* Videos and Images
* Custom HTML Code
* Icons
* And maybe support for markdown...
You can find the project on [GitHub](https://github.com/Skrifa/Skrifa) and visit the [website](https://skrifa.xyz) as well.
---
# Monogatari Web Visual Novel Engine
Source: https://hyuchia.com/monogatari-web-visual-novel-engine
Section: Posts
Monogatari is not just another web VN engine, I've seen many engines for the web, but none where exactly what I wanted, Monogatari features almost the same syntax as Ren'py, so exporting games to the web is incredibly easy and it is written using the latest HTML5, CSS3 and JavaScript Features.
The time we live in is amazing, there are lots of different devices, screens etc. that's why Monogatari is Responsive, it adapts to any screen so everyone will be able to enjoy your game, no matter what device they are on, besides since it's web based, they won't have to download anything however it's not only limited to web, you'll also be able to create desktop and mobile apps!
Visit the [Website](https://monogatari.io/)!
## Features
* Multiple Save and Load Slots
* Ren'py-like syntax
* Multi-Language Support
* Support for Music, Voice and Sounds
* Any Image the browser supports can be used for sprites or backgrounds. (Yeah, including animated GIFs and SVG)
## Browser Support
* Chrome
* Safari
* Firefox
* Maxthon
* Vivaldi
## The vision
Monogatari has been created with a purpose, to take visual novels to the next level, to make it easy for developers, artists and writers to extend their VN functionality, integrate it with more web services, create games with features that no one has ever imagined.
## Try it
You can try the [demo](https://monogatari.io/demo/) or the good VN everyone who has tried Ren'py knows, [The Question](http://monogatari.hyuchia.com/TheQuestion/)
## Start Creating
Monogatari's first release is out now, visit the [website](https://monogatari.io/demo/) to download it, you'll also find the documentation and more helpful things for your game!
## Contribute
Monogatari is an open-source project released under the MIT License, and if you want to get involve and contribute, you can visit the [GitHub page](https://github.com/Monogatari/Monogatari)
## Keep In Touch
If you like this project and you're interested on it, you can follow me on [Twitter](https://twitter.com/Hyuchia) or [Google+](https://plus.google.com/+HyuchiaDiego/)
It is time for Visual Novels to evolve...
---
# Colors, a Color Palette Sidebar Plugin for Coda
Source: https://hyuchia.com/colors-a-color-palette-sidebar-plugin-for-coda
Section: Posts
Colors is the last color palette you'll ever need. Featuring a huge collection including iOS colors, Material Design colors, Pantone colors, Metro colors, Named colors and lots of Flat colors in both RGB and hex format.
It is now available to download from the [Panic's Coda Plugins webpage.](https://panic.com/coda/plugins.php?id=125)
---
# Kirino for Ubuntu Touch
Source: https://hyuchia.com/kirino-for-ubuntu-touch
Section: Posts
Kirino started as a simple hobby, and in some way it still is, however now, I have the purpose of creating a great Assistant and Friend for everyone in any platform.
Ubuntu Touch is the First Platform to receive a native Kirino app, and I really want it to be a first class choice for everyone. There's a really long way to it, since I know it's nowhere near to that goal and that's why, I want you to feel free to contact me anytime, tell me what you like and dislike, how could I make Kirino better and contribute! every help is really appreciated!
I hope you enjoy Kirino as much as I enjoy programming it.
---
# Aegis Framework First Release
Source: https://hyuchia.com/aegis-framework-first-release
Section: Posts
[Aegis](http://aegisframework.com/) is a simple, fast and easy to use Web Development Framework. It includes almost everything you'll need to design your webpage or web application and make it functional and secure and it has finally reached a release point. This Framework has been designed to be easy to use and it has almost everything you need to create a great web page.
The documentation can be found [here](http://aegisframework.com/) and a PDF explaining it's structure is also available. [Download PDF](https://hyuchia.com/uploads/Aegis-Framework.pdf)
Any suggestions are well received. Remember Aegis is released under an MIT License, and I may sometime upload it to GitHub so people can contribute and fork it.
So what are you waiting for? [Download](http://aegisframework.com/) it now, **Learn, Design, Create!**
---
# Ren'py Syntax Highlighting Mode for Coda
Source: https://hyuchia.com/renpy-coda-syntax-mode
Section: Posts
After falling in love with [Coda](http://panic.com/coda/), I noticed there was no syntax mode for Ren'py and since I also work with Ren'py, I decided to create a Syntax Highlighting Mode which you can already download from [Panic's official Plugin list for Coda](http://panic.com/coda/plugins.php#Modes).
I know not many Ren'py programmers use Coda (Probably just me) but I hope it's useful for someone.
---
# Kirino Alpha 1.5
Source: https://hyuchia.com/kirino-alpha-1.5
Section: Posts
Kirino has reached version 1.5 of it's alpha cycle and she'll now be with you in all your devices!
## What changed?
1. Full redesign with exclusive iOS and Android themes.
2. Night mode
3. Responsive Design
4. She can now tell you the weather
5. Changing your name is now possible and easier
## Is she smarter now?
The engine has improved however, it's still the same as the Alpha 1 release, the AI will improve through the final Alpha 2.0 in a Rolling Release model
## What will be included in the future?
* Improvement in the reminders system.
* More themes.
* Social networks integration
* Native iOS and Android App
* Integration with YouTube and other services
---
# TotoTv Lap Review y Mejoras
Source: https://hyuchia.com/tototv-lap-review-y-mejoras
Section: Posts
## ¿Sus características?
La TotoTv Lap One, es una comoda y economica laptop que TotoTv saco al mercado.
Esta laptop, trae consigo varias sorpresas, que resultan bastante útiles y versátiles para cualquier tipo de trabajo y situación.
* Pantalla de 10.1 pulgadas
* Android 4.2.1 (No actualizable)
* 8 GB de memoria Interna (6 Utilizables)
* ranura para memoria micro SD de hasta 32 GB
* 3 puertos usb
* Teclado Físico (No separable)
* 1 GB de memoria Ram (En realidad solo 512 mb)
* Una gran cantidad de contenido precargado! (Apps, Juegos, Libros, Videos, Mísica)
* Procesador Dual Core de 1.5 GHz
* Cámara frontal de 0.3 MP y micrófono
* Salida mini HDMI
* Wifi
* Rooteada de Fabrica
* Pila de alta duración (Si, dura bastante)
## ¿Sus desventajas?
No todo puede ser tan bueno, sin embargo muchas cosas tienen una solución sencilla que mencionare mas adelante.
Al tener tan poca RAM, es fácil que se vuelva lenta al tener mas de una aplicación abierta el mismo tiempo
El teclado no tiene las teclas "" (Siendo programador, esto si fue un poco decepcionante)
Los botones del mousepad no son muy cómodos
La mayoría del contenido precargado esta orientado a niños, y es muy probable que no lo quieras. Esto ocupa casi 2 GB de espacio
El modo "amigable", no es muy util sin ese contenido.
No tiene BlueTooth (Sin embargo, supongo que es posible comprar un Dongle por separado gracias a sus 3 conexiones usb)
Emula la SD, por lo que no se pueden mover aplicaciones a la memoria externa
Al estar siempre en horizontal, algunas aplicaciones diseñadas para Celulares no funcionan.
El Recovery no funciona, por lo que al tratar de regresar al estado de fábrica simplemente dejará de funcionar.
## ¿Como arreglar todo esto?
¿Un poco desanimado? No lo estés!, todo esto tiene una solución que convertirá a tu TotoTv Lap en una maravilla.
1. Elimina el contenido y aplicaciones innecesarias, instala la aplicación Clean Master, con ella, podrás eliminar todo el contenido precargado (Viene en forma de APKs que no están instalados).
2. Si lo deseas, también desinstala la app de TotoTv (El modo amigo), el desinstalarla hará que se use por default el modo Avanzado (El launcher predefinido de Android)
3. Mueve aplicaciones a la Memoria Externa, si ya tienes tu SD, instala Link2SD, con ella podrás mover las aplicaciones de la memoria interna a la externa, sin embargo para ello, debes configurar tu SD tal como lo dice la página de la aplicación.
4. Desactiva las animaciones, las animaciones consumen mucha memoria, es por ello que es importante desactivarlas. Para ello, ve a Configuración/Opciones de Desarrollo.
5. Busca la sección de "Dibujo" y desactiva las opciones de Escala de animación ventana, Escala de transición animación y Escala duración animador.
6. Baja el brillo, si bien la pila dura bastante, si el brillo esta al máximo, se descarga algo rápido, por lo que es recomendable poner el brillo en lo mínimo.
### Para desarrolladores:
Si eres un desarrollador, ¡puedes programar en ella!, tienes acceso a root y hay muchas apps disponibles para ello, entre ellas:
* AIDE (Para crear aplicaciones de Android, es realmente buena, pues corre las aplicaciones que creas directamente en el dispositivo e inclusive tiene soporte a Phonegap)
* AWD-IDE (Un IDE con soporte para múltiples lenguajes)
El problema? Sigue sin haber tecla de menorr y mayor qué "< &rt;" sin embargo puedes copiar y pegar cada que las uses
## Por lo tanto...
Como verán, esta Laptop tiene sus pros y sus contras, sin embargo puede ser una gran herramienta, y su precio es realmente tentador. Esperemos que TotoTv nos siga sorprendiendo con mas equipos como este, con mejoras y que el proyecto no quede en tan solo esta Laptop.
---
# Native Applications on Joli OS and Problem Solving
Source: https://hyuchia.com/native-applications-on-joli-os-and-problem-solving
Section: Posts
Joli OS is a Linux Distro brought to us by JoliCloud, even though it's based on HTML5, it will allow us install Linux Native Applications. We have 3 choices to make this happen:
1. Install the program via a .deb package is the easiest choice since we only need to download and install.
2. Install via third parties like "Ubuntu Tweaks"
3. Add the repositories is our last choice. A simple app-add will not work so you'll have to do it this way:
* Go to the PPA main site of the software you want to add (For example: https://launchpad.net/~vala-team/+arc...) Inside there should be a link that says "Technical details about this PPA" in green color.
* By pressing it, there should be a button to select your Ubuntu version, Joli OS is based on "Lucid".
* Copy those links in you `ubuntu.list`, in order to do so, open it with this command:
* `$ sudo gedit /etc/apt/sources.list.d/ubuntu.list`
* Paste the links, save it and close it. Update your repositories:
* `sudo apt-get update`
* With this, you've added the repositories and we only need to install it.
* Open the software installer with this command:
* `$ sudo synaptic`
* Look up for your software and install it.
Sadly Joli OS has been discontinued, however you can still download and try this awesome distribution (Which I really recommend, or install it's environment in Ubuntu) .
## Fixing Problems:
If you install Joli OS in a new computer it's likely for you to note that the VGA port is not working, however it is working, it's just that it does not recognize the external screen unless you have it connected since the boot. This is a problem with the Kernel version.
