Let's create a classic retro effect.
Flames!



As with all of these tutorials, you can hit F5 at pretty much any step of the process to see how the changes in code have impacted the program.

-=-=-

Start with a fresh new project.




We'll start with a simple blank loop.
Set the screen to 420x240 pixels, create a loop, and get it running at a standard framerate using VSync


Once that's working, we'll add a small orange rectangle to the bottom of the screen.
Colour 255,100,0, and the rectangle being 200,230 (top left) to 220,240 (bottom right)




A rectangle!

Next, we add a simple copy-based scroll.


Here we ask the GCopy function to copy from Layer 0.
The Graphics Target (GTarget) is set to 0 by default.
We ask it to take everything from 0,0 (top left) to 420,240 (bottom right) from that layer.
Then we ask it to copy it to the same layer with a top left position 1 pixel higher (0,-1)
(And the final 0 is the copy method. Since we're not working with transparencies, we can get away with 0, which is the quickest method)


The result may be miscronstrued, as it grows its way up the screen.
It's important to note that we aren't drawing a longer rectangle. All we're drawing is the small square at the bottom, and then the program is scrolling it up the screen.


Our next step is to draw over the entire area with a feint black rectangle.
By using a very low transparency value (10/255) then drawing over everything, it means that with every frame, the image will get darker and darker.

As long as we keep drawing a fresh rectangle at the bottom of the screen, and the darken/scroll method is working correctly, the scrolling image will appear to fade away as it scrolls.



Now lets add a little randomness to the proceedings.



Change the Green value in our color from 100, to being Rnd(230). This means, each frame, it'll choose a random green value between 0 and 230. Since we have full red mixed in with the green, this will produce any colour between red and almost yellow.
These are perfect colours for our flame.

When you next run the program, you'll see a nice flickering effect, with a trail coming from it.


Next, we'll place this flickering box inside a for-next loop, so we can repeat it multiple times each frame.
As well as this, we'll ask for a random position (x), as well as a random height (h).
Changing the GFill command slightly, we'll draw from x-1 to x+1 (3 pixels in width) and high from 240-h to 240.



You should now have a lovely flickering flame effect on your screen.



Lovely!

Things to Try

Play with the colours of the flames. Try making a icey blue flame!

You can change the RGB command to a HSV command, and play around with Hues instead of RGB values.

Tweak some of the other settings. Make the flame larger. Change the speed of the scrolling with the GCopy command.

You can also change the colour of the overlay, so that instead of "fading" to black, it maybe fades to purple. And play around with different amounts of transparency, too.

Using a drawing "Buffer"

Here, we've used the GTarget as a buffer. Drawing to the buffer, but then retaining the contents of the buffer for the next frame, so as to create a persistent effect.

This has multiple uses, including doing "proper" backgrounds. You can draw tiles to the buffer, and try moving the buffer around the screen. Or draw fields of grass, dirt, and other textures and scroll through them.

SmileBASIC can hold 4 of these buffers at a time (0,1,2 and 3), but you can additionally switch to GTarget 4, where the sprites are stored, as well as GTarget 5 where the font is.

Using a combination of buffer drawing and sprite drawing simultaneously, you can achieve some fairly impressive effects.
For now, stick with the default GTarget 0, and see what you can make.