| |
serato
Registered: Feb 2021
Posts: 7 |
Release id #242834 : Layers
A few people have asked how the effects in Layers work, so I'll try to explain here in 2 parts.
Pt.1 The Big Scroller
This part has the appearance of smooth scrolling large vector letters. Without the background pattern it would be even more convincing, but really the large text is built from character tiles. Of course the really innovative effect is the full screen +/- 7° rotation at 50fps.
Full Screen Rotation
For small angles a rotation can be approximated by combining horizontal and vertical skews. For efficiency I limit myself to skewing whole character columns and rows, and for visual smoothness limit the step to 1 pixel per 8 pixel character row/column. 1 pixel per 8 = maximum rotation of arctan(1/8) = 7.125°. Being 40 characters wide the maximum vertical skew needed will be 40 pixels, or 5 characters' worth. Similarly 25 rows demands 25 pixels of horizontal skew.
So now the problem is how to accomplish the skews. The VIC has 8 pixel hardware scrolling, and because the raster is scanned from top to bottom I can update the horizontal scroll value for each character row. When I need to shift more than 8 pixels I can horizontally offset the characters in the screen matrix.
This leaves the problem of vertical skew, which I accomplish by pre-rendering all 8 vertical shifts into separate entries in the character set. Each screen character can be viewed as a small portal. When a column is shifted the portal partially overlaps two source tiles. So each "portal" is uniquely defined by the two tiles it overlaps above and below. Because the 8 vertical shifts consumes 8 character definitions, there is only room for 256/8 = 32 unique "portals" in the character set. The large scroll text is drawn using just 15 tiles, and carefully designed to use no more than 32 of the 225 possible above/below combinations.
Rendering the Matrix
The source matrix contains all the portal values stored x8, ie %xxxxx000. As each new column is about to scroll into view I make 8 copies of it OR'd with 0..7 which are cached while the column is on screen.
Constructing an image starts with calculating the horizontal and vertical skew values with a simple line algorithm. These are split into the fine part (mod 8) and coarse part (div 8).
A fairly short section of speed code copies (LDA $,y / STA $,x) a row of matrix values onto the screen, looping up to 7 times to draw 7 screen rows (ie y index 0..7, x index 0, 40 ... 200, 240). This block is duplicated 4 times to cover all 25 rows. Each frame all the LDA's in the speed code are updated with the coarse and fine vertical offsets into the cached matrix values. To accomodate horizontal shifts of >8 pixels, the the x index of each row has the coarse x offset added.
The "Parallax" Background
The main scroll loop moves the screen left at 3px / frame, and the parallax effect is achieved by shifting the background tile 2px / frame to the right, leaving a net shift of 1px / frame. This results in 4 shifts, so 4 sets of the entire character set are pre-baked and then cycled per frame. |
|
... 2 posts hidden. Click here to view all posts....
|
| |
Raistlin
Registered: Mar 2007
Posts: 575 |
Wow, great write-up Serato! Awesome effect. |
| |
Stone
Registered: Oct 2006
Posts: 170 |
Great write-up! We had a similar setup on the Scrollwars intro, although there the code was super simple. The real hard work was done by PAL in creating 2 distinct tilesets where each layer had to fit in the 5/3 bit addressable range. |
| |
Copyfault
Registered: Dec 2001
Posts: 467 |
WOW! This is the extra cream on top of the already outstanding release! Thank <3 you for this detailed write-up, Serato! |
| |
CreaMD
Registered: Dec 2001
Posts: 3036 |
Awesome engineering. I wonder if someone else will ever try to replicate / build upon this idea. |
| |
PAL
Registered: Mar 2009
Posts: 270 |
Because Serato is a splendid and just nice dude he put this explanation out here and he even never took his own credits for the way he actually nailed it to function every frame in realtime, THE NEVER DONE BEFORE... because he is a superiour coder and a lovely person... Lets have fun... the c64 have much more to offer than just movie like demos... coderporn coming up... |
| |
Oswald
Registered: Apr 2002
Posts: 5029 |
I have a question, sprites can only be shown by VICII behind 10 and 11 pixels, yet the char layer seems to be 4 coloured ?
topmost layer has 4 colors, so the transparent layer of it is a 5th "color" ? maybe you use d800 for the extra color. |
| |
Jammer
Registered: Nov 2002
Posts: 1293 |
I thought about exact same thing today but my guess is PAL used the same gray for %01 as background sprites do? Screen has 4 colours total. BTW, pay attention to front layer's highlights what happens in there - freeze frame might help ;) |
| |
papapower
Registered: Aug 2021
Posts: 6 |
Great explanation, thanks |
| |
serato
Registered: Feb 2021
Posts: 7 |
Quoting OswaldI have a question, sprites can only be shown by VICII behind 10 and 11 pixels, yet the char layer seems to be 4 coloured ?
Top layer is 3 colours and transparent. As Jammer guessed, colour %01 matches the back layer sprite colour. The hi-lights on the front layer are transparent and the back layer does show through, but the effect is not jarring and resembles reflections. |
| |
anonym
Registered: Jan 2002
Posts: 250 |
Thank you for explaining :) |
| Previous - 1 | 2 - Next |
