Guru
Joined: 11/12/2012
Location: United KingdomPosts: 11174
| Posted: 11:35am 12 May 2020 |
The PAGE command
In the second post in this thread we met the PAGE COPY command and now understand how to move information from one page to another. This can be the complete page using PAGE COPY or part of a page using BLIT.
We have also investigated the PAGE WRITE command that allows us to select the page where graphics commands will write their data
In this post we will look at the two other PAGE sub-commands: PAGE SCROLL and PAGE STITCH
PAGE SCROLL
PAGE SCROLL does what it says. It scrolls a selectable page (doesn't need to be page 0) horizontally and/or vertically by a selectable amount. In addition it allows you to control what happens to the area vacated by the action of the scroll.
PAGE SCROLL pageno, x, y [,fillcolour]
Some examples:
LOAD JPG "bondi":DO:LOOP
load a sample jpg in 800x600x16 resolution
LOAD JPG "bondi":PAGE SCROLL 0, 100,100:DO:LOOP
scroll the picture 100 right and 100 up, moving the scrolled off area to the now vacated part of the screen. Note that the vertical move always happens first. If you need the sideways move first you will need to use the command twice.
LOAD JPG "bondi":PAGE SCROLL 0, 100,100,-1:DO:LOOP
scroll the picture 100 up and 100 right, leave the vacated off area as-is
LOAD JPG "bondi":PAGE SCROLL 0, 100,100,RGB(RED):DO:LOOP
scroll the picture 100 up and 100 right,replace the vacated area with a fixed colour
Time to load a 800x600 full colour jpg was 347 milliseconds
Worst case time to scroll the image with image wrap was 125 milliseconds. All other lower resolutions or lower colour depths will be faster.
Of course moving a 800x600 image with 2 bytes per pixel takes a little time but try this example program at 320x200x16
option explicit
option default none
dim x%(9),xd%(9)
dim y%(9),yd%(9)
dim integer i,c,f, xp, yp,k,t
dim float s
' Work in 320x200 resolution RGB565
mode 3,16
cls
'create the coordinates of a star outline
for i=0 to 9 step 2
x%(i)=-(SIN(rad(i*36))*20)
y%(i)=-(COS(rad(i*36))*20)
x%(i+1)=-(SIN(rad((i+1)*36))*7.6)
y%(i+1)=-(COS(rad((i+1)*36))*7.6)
next i
'Set to write to page 1 and clear it
page write 1
cls
'create 40 random stars on page 1 using the polygon fill command
do
c=rnd()*255 + ((rnd()* 255)<<8) + ((rnd()* 255)<<16)
f=rnd()*255 + ((rnd()* 255)<<8) + ((rnd()* 255)<<16)
xp=rnd()*mm.hres
yp=rnd()*mm.vres
s=rnd()
t=0
for i=0 to 9
xd%(i)=x%(i)*s+xp
yd%(i)=y%(i)*s+yp
if xd%(i)<0 or yd%(i)<0 or xd%(i)>=MM.Hres or yd%(i)>=MM.Vres then t=1
next i
if t=0 then
polygon xd%(), yd%(), c, f
k=k+1
endif
loop until k=40
k=0
'
'Now lets see how fast scroll really is
do
page copy 1 to 0,d 'copy page 1 to page 0 during frame blanking
page scroll 1,2,1 'scroll page 1 immediately after
loop
option default none
dim x%(9),xd%(9)
dim y%(9),yd%(9)
dim integer i,c,f, xp, yp,k,t
dim float s
' Work in 320x200 resolution RGB565
mode 3,16
cls
'create the coordinates of a star outline
for i=0 to 9 step 2
x%(i)=-(SIN(rad(i*36))*20)
y%(i)=-(COS(rad(i*36))*20)
x%(i+1)=-(SIN(rad((i+1)*36))*7.6)
y%(i+1)=-(COS(rad((i+1)*36))*7.6)
next i
'Set to write to page 1 and clear it
page write 1
cls
'create 40 random stars on page 1 using the polygon fill command
do
c=rnd()*255 + ((rnd()* 255)<<8) + ((rnd()* 255)<<16)
f=rnd()*255 + ((rnd()* 255)<<8) + ((rnd()* 255)<<16)
xp=rnd()*mm.hres
yp=rnd()*mm.vres
s=rnd()
t=0
for i=0 to 9
xd%(i)=x%(i)*s+xp
yd%(i)=y%(i)*s+yp
if xd%(i)<0 or yd%(i)<0 or xd%(i)>=MM.Hres or yd%(i)>=MM.Vres then t=1
next i
if t=0 then
polygon xd%(), yd%(), c, f
k=k+1
endif
loop until k=40
k=0
'
'Now lets see how fast scroll really is
do
page copy 1 to 0,d 'copy page 1 to page 0 during frame blanking
page scroll 1,2,1 'scroll page 1 immediately after
loop
For many simple early games they used a seamless background that was a single image that could be scrolled horizontally, vertically, or even both with no obvious join
Try the attached with
load jpg "seamless":do: page scroll 0,1,1:loop
seamless.zip
Now you should be able to see how to create a slideshow with one picture smoothly replacing another from the right. I'll provide some pseudo code for you to complete and try for yourself.
load an image to page 1
load an image to page 2
loop
copy page 1 to page 0 during frame blanking
scroll page 1 left by a "n" pixels
BLIT n pixels from the left of page 2 to the right of page 1
scroll page 2 left by "n" pixels
If you have just used all of page 2 then load the next image to page 2
end loop
PAGE STITCH
PAGE STITCH is really only a short form way of doing what was proposed above with scroll and BLIT
PAGE STITCH frompage1, frompage_2, topage, offset
This says we are going to take columns from the right side of frompage1 and columns from the left side of frompage2 and copy them to topage as a single action. The offset parameter determines how many columns are going to be taken from frompage2 - perhaps the offset parameter was badly named?
This single command makes it very easy to create a horizontally scrolling background across a number of separate images.
This video shows how fast this can take place
The example code presented below slows this down by syncing everything up with frame blanking to get a very smoothly moving image. As the monitor frame rate is 75Hz and the scroll is happening 2 pixels at a time the movement is limited to 150 pixels per second. Remove the ",b" parameter in the page copies to see things at maximum speed.
' test stitch
' Run at 320x200x16 bit mode
mode 3,16
'clear the first 7 video pages
For i= 0 to 6: page write i:cls:next i
'now write each part of the background image to a separate page
' doing this at the beginning ensures the program won't stall waiting for images to be loaded
page write 2
load png "part01",,,15
page write 3
load png "part02",,,15
page write 4
load png "part03",,,15
page write 5
load png "part04",,,15
' Main program loop
do
'merge pages 2 and 3 stepping 2 pixels at a time
for i=0 to MM.Hres step 2
page stitch 2,3,6,i
page copy 6 to 0,b
next i
' now page 2 is used up so merge pages 3 and 4
for i=2 to MM.Hres step 2
page stitch 3,4,6,i
page copy 6 to 0,b
next i
' finally merge pages 4 and 5
for i=2 to MM.Hres step 2
page stitch 4,5,6,i
page copy 6 to 0,b
next i
'we are now at the rightmost side of the composite image so we can start moving back left
for i= MM.Hres to 0 step -2
page stitch 4,5,6,i
page copy 6 to 0,b
next i
for i= MM.Hres-2 to 0 step -2
page stitch 3,4,6,i
page copy 6 to 0,b
next i
for i= MM.Hres-2 to 0 step -2
page stitch 2,3,6,i
page copy 6 to 0,b
next i
' Once all the way left then start again
loop
' Run at 320x200x16 bit mode
mode 3,16
'clear the first 7 video pages
For i= 0 to 6: page write i:cls:next i
'now write each part of the background image to a separate page
' doing this at the beginning ensures the program won't stall waiting for images to be loaded
page write 2
load png "part01",,,15
page write 3
load png "part02",,,15
page write 4
load png "part03",,,15
page write 5
load png "part04",,,15
' Main program loop
do
'merge pages 2 and 3 stepping 2 pixels at a time
for i=0 to MM.Hres step 2
page stitch 2,3,6,i
page copy 6 to 0,b
next i
' now page 2 is used up so merge pages 3 and 4
for i=2 to MM.Hres step 2
page stitch 3,4,6,i
page copy 6 to 0,b
next i
' finally merge pages 4 and 5
for i=2 to MM.Hres step 2
page stitch 4,5,6,i
page copy 6 to 0,b
next i
'we are now at the rightmost side of the composite image so we can start moving back left
for i= MM.Hres to 0 step -2
page stitch 4,5,6,i
page copy 6 to 0,b
next i
for i= MM.Hres-2 to 0 step -2
page stitch 3,4,6,i
page copy 6 to 0,b
next i
for i= MM.Hres-2 to 0 step -2
page stitch 2,3,6,i
page copy 6 to 0,b
next i
' Once all the way left then start again
loop
Here are the images used in this demo
Parts.zip
Hopefully you can see from this short post that it is very easy to create and manipulate moving images on the screen. Of course, this needn't be anything to do with games. Scrolling graphs etc. are just as easy.
Edited 2020-05-13 01:46 by matherp