Alright, in the last article we covered how to fade a picture to black, now let's focus on the reverse, fading a screen's palette from black to a picture, and not just any picture, but one that is already animating and carrying on in the background.
First off understand once again we are NOT going be creating a 240-size table, no, just the nice and small 32 we have.
But now let's think about it. If the whole screen is black, how do you fade to the correct colors ? I mean if you look at the original fade routine it changes a lighter color to a darker and that new darker color is processed in the next pass. So how do you go from darkest to original colors ?
I'll let you think about that for a minute.
Got an answer ? Well, yes and no. Unfortunately the way you described is very complex and tedious. There's a much easier way.
TO LOAD THIS CART in Pico-8, type:
load #ioac |
To explain this, let's first off make a sample program that uses an iris opening. That is, a black circle will close in on a scene and open. Two keys (O) and (X) will close and open the iris and not be affected by what is going on in the background which is bouncing blocks.
You see the way the palette is fading to black in my earlier code is essentially drawing a black circle from the center and working your way outward. So how do you do this in reverse ?
Reversing time of course. :)
Pico-8 is fast enough that we don't need to create a massive lookup table that covers each color from where it WAS to where it IS now. No, all we need to do is multiple steps of FADING OUT but in reverse order.
You remember the IRIS opening above. You see that it is not drawing small circles from the center to out, no, it is drawing a circle larger than the screen, 3x thickness so no holes appear in it, and then works its way down.
But it is NOT just drawing one set, it draws all the way from the edge of the screen to the new smaller size inside, each machine cycle. So every single frame it is drawing multiple circles until it reaches its goal.
We're going to do the exact same thing with our palette dim method.
To do so, let's start a new project. Now instead of a single shot to dim the colors we put it in a loop so it COUNTS down the number of dimmed colors and does so. To reverse the effect we diminish the number of times we call it essentially "reversing time."
Here is the cart:
TO LOAD THIS CART in Pico-8, type:
load #cfc |
That concludes my tutorial on fading, not just to black but back again using the reverse order of levels of brightness via the palette.
Later we'll take a look at the ability to both lighten and darken pixels, not the entire palette but single elements around it, one pixel at a time.
imma use this comment to pin this tutorial in my profile. Thank you for more wonderful examples. amazing work, as always.
Glad you like it, @chizel9000. Where in your profile this is pinned ? And yes, every good game should have a nice fade-in and fade-out ability.
In most other languages it's pretty simple to fade from black to an image:
((( load image ))) for i=255 to 0 step -1 drawpicture setalpha i drawrectangle(0,0,1024,768) flip next |
[Please log in to post a comment]
