Posts Tagged ‘contrast’

[NO SPOILERS] Fun with shaders for LD37, part 1!

Posted by (twitter: @avaskoog)
Friday, December 16th, 2016 2:34 pm

Hey! They’re not all too advanced, but I still thought I’d share a little something on the custom shaders that were written for our LD37 entry, LOCK AND RELOAD. c:

Since the posts easily get a bit lengthy, I’ll divide this into a series of more bite-sized posts so that I don’t have to sacrifice all too much clarity for the sake of space. We’ll start with the main shader that gives the game its look and feel!

(ノ◕ヮ◕)ノ*:・゚✧

Some of the effects are connected to slightly fundamental parts of the story, and since the game ended up being really short due to time constraints, I recommend you play the game first to avoid the spoilers and get the most out of the game with it’s little twists! So I’ll be adding a “read more” tag at to some parts to hide some of the stuff from the front page of the blog.

Note: the game was made in Unity and the shaders were written accordingly and so any code will be given as boiled down versions of the shader code written for that, but obviously everything is readily convertible to something like GLSL with minor to no changes.


 

Post effect filter

This one won’t spoil a thing as it is the very first thing to see upon starting the game: the wonky colour effects and checkerboard overlay. There’s also a dark vignette as well as some increased contrast.

View post on imgur.com

This effect applies to the whole final rendered image rather than individual objects and is therefore done in one step at the end of each frame, simply applying the shader to each pixel, or fragment.

Let’s go! ᕕ( ᐛ )ᕗ

The low-fi colour effect

This is achieved by first multiplying the colour values (which are all normalised between 0.0 and 1.0) by some factor, then rounding the numbers so that any resulting decimals disappear, and then dividing the values back down again by the original factor. This effectively decreases the colour variation. The smaller the factor, the greater the effect.

col.rgb *= factor;
col.rgb = round(col.rgb);
col.rgb /= factor;

ld37_shd_couleur

Contrast

The contrast effect is fundamentally not so complicated. It can be done in different ways, but for this particular game what I found worked best was to subtract some of the intensity of the colour if the original colour was below some tolerance value, but multiply it by some factor if it were above it.

col.rgb += (col.rgb < tolerance) ? 0.5 : 1.5;

ld37_shd_contr

Checkerboard

Alternating dark and bright squares are all over the screen. This isn’t some texture; just a little bit of maths. By checking the position of each pixel on the screen and figuring out whether it’s even using the modulo operator (which gives the remainder of a division), we can figure out whether the number is evenly divisible by two and thereby whether it’s odd or even.

If we multiply the coördinates by some factor to pretend that the screen is smaller or bigger than it really is, we can control how big the squares get. We apply the effect by darkening odd squares and leaving even ones untouched or vice versa.

col.rgb -= ((floor(x * s) % 2.0) - (floor(y * s) % 2.0)) * darkness;

ld37_shd_chekrs

Vignette

In this case, a vignette is a darkening of the corners of the screen. We’re basically applying darkness to the whole screen except an oval in the middle, leaving the corners dark but the middle unaffected. Circles are easy. We can achieve an oval by pretending that our rectangular canvas is in fact square.

fixed ratio = height / width;
fixed2 middle = fixed2(0.5 * ratio, 0.5);

We can then check the distance from the center to the current fragment, adjusted for the rectangle’s ratio, to get its position inside a circle, which will appear as an oval thanks to the ratio.

fixed2 pos = fixed2(x * ratio, y);
fixed factor = length(pos - middle);
col.rgb -= factor * darkness;

ld37_shd_vign1

You will probably want to adjust some values by multiplying them by various factors to make your vignette look the way you want.

That’s it for this part! In the next one (and I won’t be posting it right away as I don’t want to be spammy), we’ll be talking about the first of the two effects in the game that required extra cameras and render textures!

Stay tooned! ☆

Switch: a (very) late Contrast entry!

Posted by
Friday, August 10th, 2012 8:36 am

Hello everyone,

I made a mini-game called “Switch”. It was meant to be for the MiniLD 36 with the theme Contrasts, but I was busy then and could not get to work on the game. I still wanted to make the game though and I finished it today in Processing (I love Processing; almost no “housekeeping” code).

How to play: Move the mouse so that the green ball only travels on the white areas. Click to swap black for white and vice versa. Press ‘r’ to reset the game. Try to finish the track!

Here is a link: http://switch.netai.net/

Nat —||—

A Theft of Colours

Posted by (twitter: @gritfish)
Sunday, July 15th, 2012 5:57 am
A Theft of Colours

For a game that was all about contrast – I gave myself the challenge of working to a high-contrast, 16 colour palette, arrows, and one other button.

I started out with really quite over-the-top expectations for this mini LD. I’d planned out a game with 10 levels, with cutscenes in between telling a story. But in the end I only really got started on Thursday/Friday, and only had a working level by this afternoon. So this is the stripped down, gameplay only version of the game I’d planned to make.

There’s something about the old EGA palette that just takes me back to playing Alleycat/Commander Keen (I can’t even look at that blue/purple combination without drifting off), and I made it a little hard/tricky to try and get that feeling of nostalgia to shine through in the gameplay as well as the graphics.

Matt (@brainfed) provided music, and although he initially struggled with getting the ‘french’ sound, I think he came up with a great ‘sneaking’ theme, and two other tracks that I’ll work into the game when I finish the rest as I originally intended it. Josh (@joshuatreee) helped out too, providing in-between frames for the walk cycles, and the Eiffel tower painting. Both were great collaborators to bounce ideas off, and we might go into LD24 as a team.

This is my third Ludum Dare game, and in each one I’ve hit a massive memory management stumbling block on the last afternoon. This time, entire levels failed to unload properly, which resulted in the game running faster for some reason. Eventually I fixed it, but on the way created one of the funnier bugs I’ve caused making games – A second player would spawn in, standing on the head of the first one. You could then knock this unresponsive doppelganger flying into the oncoming guards. Matt and I both enjoyed playing around with it, so I make work that mechanic into something else down the line.

Play the game here. We’d all love some feedback, and I’m really keen to hear if any colourblind people are able to play the game and if they have any problems with the colour mechanic.

[cache: storing page]