Parallax in 2022 with IntyBASIC?

First Spear · September 22, 2022

Hey all.

I was reviewing the post(s) at https://forums.atariage.com/topic/274950-intybasic-parallax-scroll-technique/?do=findComment&comment=3948365

Does anyone have any recent samples on how parallax scrolling could be done, something like a road, mountain range, clouds? I understand the concepts of swapping GRAM, but the logic of "when" and "how" is elusive (to me).

Thanks.

+cmadruga · September 22, 2022

This could be helpful:

https://forums.atariage.com/topic/305640-shadow-of-the-beast-demake-experiment/#comment-4519524

+DZ-Jay · September 22, 2022

There are various ways to simulate parallax scrolling. The simplest and most obvious way is to use sprites that move at different speeds, depending on their position in the z-plane -- that is, how far away they are from the viewer: the farther objects move slower than the closer ones.

When sprites are unavailable or impractical to use, the next best thing is to employ animation of background tiles. Since the tiles do not move, you simulate the motion by shifting their contents. The principle is the same, except that you trade animation rate for displacement rate: the elements farther away animate at a slower rate than the closer ones.

The complication of this technique comes from the fact that a tile is only 8x8 pixels, but the element may need to move across the screen, and thus across tile boundaries. The way to do this is to animate the tiles of all cards encompassing the element in unison, at the same rate. To simplify this, you define the elements as patterns that can be contained within a small-ish set of tiles, and just re-use them across the screen area. Because the re-used tiles contain all the same detail, and are all animated in unison at the same rate; the end result is a smooth scrolling of numerous similarly looking elements across the screen.

Note that the size of the element pattern directly determines how many GRAM cards you will need to animate it. Of course, you need the basic set of cards necessary to display the full element, but you also need one card for each boundary touching an external tile, per axis of motion.

To illustrate, suppose you have a background screen for a totally random and completely made-up game. Let us call it, I don't know, "Cosmic Police," and it would look like this:

In this utterly fake game that does not exist, we want to scroll the screen in three zones, each one representing a specific plane at a given distance:

In the above fabricated screen, "Here" represents the terrain where the player roams, "Near" represents buildings at some distance, and "Far Away" represent the mountains far off into the horizon.

The simplest plane to animate is the "Here" one at the bottom, which is quite simple and small. Not only that, but our game calls for scrolling on a single axis (horizontal), and on a single direction (from right to left), making it easier to animate.

The entire pattern is contained within a single card. We could perhaps describe the card picture like this:

     0   1   2   3   4   5   6   7
   +---+---+---+---+---+---+---+---+
0  |###|###|###|###|###|###|   |   |
   +---+---+---+---+---+---+---+---+
1  |###|###|###|###|###|###|###|###|
   +---+---+---+---+---+---+---+---+
2  |###|###|###|###|###|###|###|###|
   +---+---+---+---+---+---+---+---+
3  |###|###|###|###|###|###|###|###|
   +---+---+---+---+---+---+---+---+
4  |###|###|###|###|###|###|###|###|
   +---+---+---+---+---+---+---+---+
5  |###|###|###|###|###|###|###|###|
   +---+---+---+---+---+---+---+---+
6  |###|###|###|###|###|###|###|###|
   +---+---+---+---+---+---+---+---+
7  |###|###|###|###|###|###|###|###|
   +---+---+---+---+---+---+---+---+

Remember, to make this work, we need not only GRAM cards for the basic pattern, but one card per boundary, per axis of motion. Because we are only moving in one direction on a solitary axis, we will need two cards:

1x for the basic pattern
1x for the card tile boundary in the horizontal axis

Pro-Tip: Notice that because our pattern is a single card, the transition to the adjacent card on the left will be the same as the transition from the adjacent card to the right. If our pattern had more than one horizontal card, we would need to account for the boundaries on both the left and right sides.

The animation is just the shifting of the contents of the card, from right to left, rotating the pixels that exit at the left boundary back into the right one.

By replicating the same picture in adjacent tiles to the left and right, the pixels that exit one tile from the left, appear to enter at the right edge of the tile immediately to its left; making the contents appear to move across tiles.

Below is an illustration of this. Note that I will only include the top row of pixels, since shifting the solid block below produces no visual change. I am also representing three adjacent cards. All three background tiles point to the same animated card.

                BACKGROUND POSITION #1                  BACKGROUND POSITION #2                 BACKGROUND POSITION #3

FRAME:    +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #0       |###|###|###|###|###|###|   |   |        |###|###|###|###|###|###|   |   |       |###|###|###|###|###|###|   |   |
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #1       |###|###|###|###|###|   |   |###|        |###|###|###|###|###|   |   |###|       |###|###|###|###|###|   |   |###|
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #2       |###|###|###|###|   |   |###|###|        |###|###|###|###|   |   |###|###|       |###|###|###|###|   |   |###|###|
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #3       |###|###|###|   |   |###|###|###|        |###|###|###|   |   |###|###|###|       |###|###|###|   |   |###|###|###|
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #4       |###|###|   |   |###|###|###|###|        |###|###|   |   |###|###|###|###|       |###|###|   |   |###|###|###|###|
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #5       |###|   |   |###|###|###|###|###|        |###|   |   |###|###|###|###|###|       |###|   |   |###|###|###|###|###|
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #6       |   |   |###|###|###|###|###|###|        |   |   |###|###|###|###|###|###|       |   |   |###|###|###|###|###|###|
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+
 #7       |   |###|###|###|###|###|###|   |        |   |###|###|###|###|###|###|   |       |   |###|###|###|###|###|###|   |
          +---+---+---+---+---+---+---+---+        +---+---+---+---+---+---+---+---+       +---+---+---+---+---+---+---+---+

The entire rotation is done in 8 animation frames, which makes sense since the entire card is 8 pixels wide: we shift one pixel per animation frame. At the end of the entire cycle, we are back at the first frame to do it all over again.

You could shift the pixels directly in GRAM, but that may cost you precious cycles. It is much more common to pre-compute the entire shifting of all the frames and store them as picture data in ROM.

The animation is accomplished in the same way you do any other animation in your program: you keep some sort of counter to tell you when you need to change to the next frame, and swap the picture when necessary.

To swap the pictures you have two choices: GRAM cycling, which is updating the card picture data in GRAM; or pre-loading all animation data into GRAM and update the indices in the background cards.

There are pros and cons to both techniques: GRAM cycling can be a little complicated to do in IntyBASIC, but swapping one card in GRAM automatically causes all background tiles pointing to it to update immediately.

Conversely, updating the indices in background tiles is quite simple and straightforward, but you will have to update all tiles in the region that represent the scrolling plane. In our example above for the terrain plane, it will be the 20 background tiles for the entire screen row.

...

Scrolling the other two planes in our background screen is done in a similar way, except that the patterns are larger than a single card. Still, they are only animating in one axis and in one direction. What changes is the number of GRAM cards necessary, and the number of animation frames needed to complete a full rotation. I leave that as an exercise to the reader.

The final component in this technique -- what makes the parallax effect actually work -- is the difference in speed of animation between all three planes.

I hope this is helpful.

-dZ.

Edited September 22, 2022 by DZ-Jay