16 Jul 2014

Tech: "Old Movie"-Filter

Some people asked about a tutorial on how I did the graphical effects I used in Baum. It's really a lot simpler than it looks, so I'm going to quickly go through what I did. Sample code will be in GML, but I'll try and explain it in general terms.


(All of the effects belong in the Draw-Event)
- Make the screen flicker
For this, I just drew a rectangle in a random grey-value and a low random opacity across the whole screen.

// I used intensity to balance how extreme the effects appeared; default in Baum is 1
draw_set_alpha(random(.2*global.intensity));
draw_set_color(make_color_hsv(0,0,irandom_range(100,200)));
draw_rectangle(0,0,room_width,room_height,false);

- Darken the corners
This one is so simple, yet does so much to enhance the mood of a game. I use it in several of my games. Just draw a gradient from fully transparent in the center to a somewhat transparent black on the edges. I used a background, which is probably the quickest and easiest method to do it in Game Maker. (You can download the image I used right here.)

/* Try drawing this before or after the screen flicker, to see how you like it better; I drew this one first */
draw_background_ext(bgrOverlay,0,0,1,1,0,c_black,.8);


- Shake it up
To get even more of a flickery effect, I made every object in the game draw itself on a random position within a small radius (1 pixel) around itself. This makes it shake just enough to create a neat little dynamic effect while not hampering gameplay.

// I used this script instead of draw_self();
draw_sprite_ext(sprite_index, image_index, x + random_range(-global.intensity, global.intensity), y + random_range(-global.intensity, global.intensity), image_xscale, image_yscale, image_angle, image_blend, image_alpha);

- Draw some random stuff
To get some more variety into the flicker effect, I just drew some vertical lines of random position, alpha, value and thickness across the screen. Also, I reused the sprites from my only particle effect in the game, and drew single images from it randomly positioned, colored and scaled on screen. Experiment with different images to create really weird effects. Don't overdo it though, as it can easily distract and irritate your players.

draw_set_alpha(random(.2*global.intensity));
repeat(3*global.intensity) {
       // draw random sprites:
       draw_sprite_ext(sprParts, irandom(5), irandom(room_width), irandom(room_height), random_range(1, 6), random_range(1, 6), random(360), make_color_hsv(0, 0, irandom(255)), .1);
       // draw vertical lines:
       var _rd = random(room_width);
       draw_line_width_color(_rd, 0, _rd, room_height, random(5), make_color_hsv(0, 0, irandom(255)), make_color_hsv(0, 0, irandom(255)));
}

So that's it, really. Have fun experimenting with this. Let me know if any of you found this useful and I might do some more (advanced) tech stuff in the future. Cheers.