Denthor/Asphyxia’s VGA trainers: Chain-4 Scrolling

This trainer is on full-screen scrolling in Chain-4, by request. This is actually very easy to do (and smooth), and holds a lot of potential, as I am sure you can immediately imagine.

DENTHOR, coder for ...
_____   _____   ____   __   __  ___  ___ ___  ___  __   _____
/  _  \ /  ___> |  _ \ |  |_|  | \  \/  / \  \/  / |  | /  _  \
|  _  | \___  \ |  __/ |   _   |  \    /   >    <  |  | |  _  |
\_/ \_/ <_____/ |__|   |__| |__|   |__|   /__/\__\ |__| \_/ \_/
smith9@batis.bis.und.ac.za
The great South African Demo Team! Contact us for info/code exchange!

Grant Smith, alias Denthor of Asphyxia, wrote up several articles on the creation of demo effects in the 90s. I reproduce them here, as they offer so much insight into the demo scene of the time.

These articles apply some formatting to Denthor's original ASCII files, plus a few typo fixes.

What is full-screen scrolling?

I seem to recall doing this in a previous tutorial, but here goes again! Full-screen scrolling is when the entire screen moves in a particular direction, with the new picture scrolling on to the screen. Um. Think of movie credits. The screen, filled with text, is scrolled off the top of the screen while the new text is scrolled on from the bottom. This is full-screen scrolling.

Full-screen scrolling is not limited to movie credits. Games like Raptor have you flying over a scrolling landscape while you are shooting down the bad guys. In this tutorial we will be doing vertical scrolling, but the code can very easily be altered for horizontal scrolling too.

Remember that we will be using Chain-4 to do our scrolling, so you may want to brush up on Part 1 in which that was covered. I will assume a brief knowledge of how chain-4 works for this tutorial.

The theory

The theory behind full-screen scrolling in Chain-4 is actually very simple.

Picture if you will, a screen that is two monitors high. Chain-4 actually has four, but for this we only need two. Now, for this screen that is two monitors high, we can only see one monitor’s worth. Here it is in ASCII:

    +-------------+  Screen two monitors high
    |             |
    |             |
    |             |
    |             |
    |+-----------+|
    ||           ||
    ||           ||<- This is the bit we can see, one monitor's worth
    ||           ||
    |+-----------+|
    +-------------+

We can move the bit we can see up or down the enlarged screen. So, for example, if the screen two monitors high had a picture on it, we could move the bit we see up and down to try glimpse the entire picture. Think of it in this way: the screen is a large painting, but we can only see though a small magnifying glass. We can move this magnifing glass around the painting, but can never see the painting all at once.

This actually works in our favour. Anything done outside the bit we are looking through cannot be seen, so we can do our work without changing our screen.

On to scrolling. The method we will use this time is as follows:

1) Draw the next line to be seen just above and just below the part we can see.

      +------------+ The enlarged screen
      |            |
      |            |
      |111111111111|  The new part of the picture
      |+----------+|
      ||          || The bit we can see
      |+----------+|
      |111111111111|  The new part of the picture
      +------------+

2) Move the view up one pixel so that the new part of the picture is visible at the top of the screen.

3) Repeat Steps 1) and 2) until the whole screen is filled. Our screen will look as follows :

     +---------------+
     |+-------------+|
     ||3333333333333||
     ||2222222222222|| Viewscreen
     ||1111111111111||
     |+-------------+|
     |333333333333333|
     |222222222222222|
     |111111111111111|
     +---------------+

Check this picture with steps 1) and 2), you will see that this is correct.

4) Set our viewport to the bottom of the enlarged screen.

     +---------------+
     |333333333333333|
     |222222222222222|
     |111111111111111|
     |+-------------+|
     ||3333333333333||
     ||2222222222222|| New position of viewscreen
     ||1111111111111||
     |+-------------+|
     +---------------+

As you can see, the bit we will be looking at is exactly the same as before, we are now just at the bottom of the larger screen instead of the top!

5) Jump back to 1). The entire sequence can begin again, and we can have infinite scrolling in the upward direction. Clever huh?

Our code

In the sample code, we have 21 different icons. What we do is decide what the next row of icons is going to consist of. We then draw the next line of pixels above and below the viewscreen according to what icons we are displaying. We then scroll up one pixel and begin again. When we have completed a row of icons, we randomly select a new row and begin again. Our icons are 16x16, so exactly 20 fit across a 320 pixel screen.

When we hit the top of our enlarged screen, we flip down to the bottom which looks exactly the same as the screen we have left. In this manner we have obtained smooth, infinite full-screen scrolling!

Extra bits

As you will see from the code, it would be the work of but a few minutes to extend our landscape across the two unused screens, thereby allowing limited horizontal movement along with our vertical movement. In fact, the entire routine could easily be made to be a horizontal scrolling routine.

A map of sorts could be generated, with one byte equaling one terrain type. In this manner, the terrain scrolled over could be set, as in a flying game (Flying Shark, Raptor etc). The terrain could also easily be replaced with letters for our movie-style credits.

Free direction scrolling, i.e. scrolling in all directions, is a very different matter, with very different methods to get it to work. Perhaps this will be discussed in a later trainer. But for now, work with this, know it, understand it, and think up many great things to do with it! How about a full-screen text scrolly? A game? Go wild!

In closing

Well, I hope you enjoyed this, the latest trainer. The sample program is a little short, but that is because the concept is so simple. Attached is a file, PICCS.DAT, which contains the terrain and letters for the sample program. They were .CEL’s, which I loaded into the des^ variable, which I then dumped to disk, for easy access later. The .CEL’s were drawn on short notice, but still produces some nice terrain.

I have received a few requests for future trainers, and most of them are for effects, so I guess that is what will be done from now on. A surprising number have told me not to do a sound trainer and stick with graphics stuff, with only a few asking for sound stuff, so I will hold off on that until there is more of a demand.

I am still open to suggestions for future trainers, and of course suggestions for improving the series. Leave me mail!