Using Instagram Filters in your Visual Novel

🏆️ 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 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
• Screenshot

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:

<!-- Monogatari CSS Libraries -->
<link rel="stylesheet" href="./engine/core/monogatari.css">
<link rel="stylesheet" href="./style/main.css">

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:

<!-- Monogatari CSS Libraries -->
<link rel="stylesheet" href="./engine/core/monogatari.css">
<link rel="stylesheet" href="./style/instagram.min.css">
<link rel="stylesheet" href="./style/main.css">

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-<filter_name> to the element you want to apply the filter to. You can take a look at all the filters available in their website.

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:

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

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

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

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

<div class="filter-lofi"></div>

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 to learn more about the filter CSS property and all the many things you can create with it!