The Basics of Tints & Picture Overlays
hiddenone
by
hiddenone
on
December 16, 2020
December 16, 2020

The Basics of Tints & Picture Overlays

The Basics of Tints & Picture Overlays
by

hiddenone

on

December 16, 2020

A common complaint about RPG Maker games is that many of them look the same since they use the default tiles that come with the program. There are a ton of ways to deal with that complaint, from editing tiles to buying brand new tilesets, but for this tutorial we’ll look at a simpler method: using tints and pictures to improve our games’ appearance.

Using both Tint Screen and Show Picture gives us another way to control the mood of the game, so we can take a bright cave and turn it into a dingy and spooky place just with the use of a well-placed tint and image.

But before we jump into playing with both tints and pictures, let’s take a look at the Tint Screen event command.

What does Tint Screen do?

Tint Screen gives us a way to change the entire screen’s color tone without needing to edit the sprites and tiles. So if our game takes place at multiple times of day, instead of needing three different tilesets to show midday, evening, and night we can just use the Tint Screen to let our players easily see the time of day.

The event command is split into two main sections, Color Tone and Duration. The Duration section is pretty straightforward, it lets us control how long it takes for the tint to take effect. If we want the screen to slowly fade to a dark twilight while our characters are having a long conversation we can set it to a duration of 999 frames (the longest possible duration, which takes about 16.5 seconds) with the ‘Wait for Completion’ option unchecked, so that the event will keep going while the screen is tinting. On the other hand, we could set the duration to only a few frames with the ‘Wait for Completion’ checked if we need a fire to suddenly break out around our player. And if we just need to have the tint instantly change, a duration of 1 frame gives us that. Picking the right Duration is all dependent on the scene we’re making, so make sure to playtest the event to figure out what works best.

The Color Tone section is a bit more complex, but it’s what gives us the control we need to get our screens looking just right. The Red, Green, and Blue sliders let us affect how intense those separate colors are, while the Gray slider controls the overall color intensity. The Red, Green, and Blue sliders count from -255 to 255, with negative numbers decreasing the saturation and positives increasing it. While most games won’t ever need to hit the mins and maxes, it is interesting to take a look at them:

Clearly some of these (I’m looking at you, maxed Green!) would make for an uncomfortable experience when playing a game, but they can give us an idea of what changes with each slider. Decreasing Red can give us a cooler looking screen that could almost fit a cloudy day, while increasing Blue could work if we want to give an underwater vibe.

The Gray slider is a lot simpler than the other ones, it goes from 0 to 255 with 0 being no change and 255 turning it all to grayscale.

Since Gray affects all the colors, we can use it to temper the other tones, turning the painfully bright colors into something that’s easier on the eyes. Adding some gray to the screen could also help make the game’s look fit the story, since a desaturated world would fit a more serious story.

Of course, it can feel a bit daunting to figure out what tint to use, so Tint Screen has some presets that we could use to get us moving in the right direction:

Now that we understand Tint Screen, we can take a look at the Show Pictures command.

The basics of using Show Picture

There are a few cool options when it comes to the picture-related commands, but for this tutorial we’ll just focus on two of them: Show Picture and Erase Picture. They both do exactly what you’d think, giving us a simple way to add in screen overlays without needing plugins.

The easiest way to do overlays is to have an image that’s the same size as the screen or, as in the case of this example, half the size of our screen:

And we just use Show Picture (remembering that with our half-sized image we need to up the scale to 200%) to drop the image over our game.

With that, we’ve got an overlay!

There are things to keep in mind when using pictures like this though. The first issue is that now our players will be looking at a lot of blackness! For certain games that can increase our player’s fear since they can only see so far around them, but for most games we want our player’s to be able to see the maps we worked so hard on. Luckily that’s an easy thing to fix, we can always adjust the Opacity so that the overlay is visible, but not so solid that players can’t see the rest of the screen.

Another thing is since the picture is tied to the screen and not the player, if our map isn’t big enough to keep the character centered it’s possible for the player to lose sight of their character behind the overlay.

Adjusting the Opacity like mentioned above can help, but sometimes we just need to make sure we keep our players in mind when we add our overlays. The most important thing is that our players can see and enjoy the game, so we need to make sure that we’re not making it hard to play our games. One way we can keep the player centered on the screen by extending our maps farther than the player can actually travel with physical barriers or map transfers, but if we can’t do that then we’re better off not using picture overlays on certain maps.

But even if there are situations where gameplay warrants leaving out overlays, cutscenes can often make use of them. Since we have full control over cutscenes, we can add in picture overlays to make it look like we’re looking at a tv screen or add in some black bars at the top and bottom of the screen to give it a cinematic feel. It’s easy to add a picture at the start of a cutscene and remove it at the end, so we can add in some interesting effects just with the use of Show Picture.

Adding tint and picture changes to transfer events

Now that we know about Tint Screen and Show Picture, we can consider adding them to map transfers to make locations feel different. So let’s take a look at how we could make a transfer in and out of a dark cave.

Entering the cave is pretty straightforward, since it’ll be dark inside we want to tint the screen to a cool color and add in our cave overlay so the player can’t easily see the full map. Transfer Player does include an option to fade the screen in and out in the command itself, but since we don’t want the player to see the picture suddenly pop into existence we should set the Transfer Fade to ‘None’ and instead use the Fadeout Screen command at the start of the event and Fadein Screen once it’s finished so the tinting and picture is hidden from our players.

Of course, we need to make sure that when our players exit the cave the gloomy cave atmosphere doesn’t follow them, so our exit transfer event needs to erase the overlay and set the screen tint back to our normal outside one. We could just use one tint, but for this example let’s pretend our game has a day and night cycle. We’ll need to make sure our tint matches the right time of day, to keep it simple let’s use a variable that is set to 1 when it’s daytime and 2 when it’s nighttime. That way we can have Conditional Branches check what our variable is set to and have the right Tint Screen used.

Now our players can change maps and have the right screen effects depending on the map they’re on and the time of day in the game!

What type of overlays would you use in your games? Do you have any special tints that you’ve come up with for scenes or maps?

Recommended Posts