Newbie: Scrolling background

CptGreenwood · Post by **CptGreenwood** » Tue Jul 17, 2007 9:34 am

Hi,

I've searched this forum for half an hour now but I can't find what I need. Maybe it's to simple to mention...

How can I code a scrolling backgound for a space game? Say, I have a tilable bitmap with a starry backgound. Now my spacecraft should remain at center screen an when I move the backgound should scroll in the opposite direction (horizontaly, vertically and diagonaly). So how can I make a bitmap virtually "endless"? For the beginning let's imagine a simple sidescroller...

Do you have any code examples?

Psychophanta · Post by **Psychophanta** » Tue Jul 17, 2007 10:57 am

Yes, there is at least an example of that in the package of PB compiler. Check at the folder "sources", then "keyboard.pb" or something like that ( i can't check it now, but i remember that nice example)

Besides of it, there are tons of examples in this forum and in purearea.net

CptGreenwood · Post by **CptGreenwood** » Tue Jul 17, 2007 11:25 am

I've seen the "keyboard.pb" example. It moves background sprites but not endlessly. If you move far enough in one direction the background "ends". I'll look in purearea but if everybody has an example on hand, please tell.

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Jul 17, 2007 11:42 am

one easy way is to use the same sprites over and over.

e.g. on a 800x600 screen you can use 400x300 sprites, then you'll need at least 3x3 of them.

but a far easier way for a starfield is to use an array that hold the stars and to "swap" it at the end of the screen.
for the stars themselves you can use sprites or plot, just as you like.

...got to install PB first to code a small example, this is a new machine here, didn't install it yet...

CptGreenwood · Post by **CptGreenwood** » Tue Jul 17, 2007 12:09 pm

one easy way is to use the same sprites over and over.

e.g. on a 800x600 screen you can use 400x300 sprites, then you'll need at least 3x3 of them.

Even if I have 3x3 sprites of this kind, how do I wrap them around when the player flies beyond the end of that 3x3 array?

but a far easier way for a starfield is to use an array that hold the stars and to "swap" it at the end of the screen.
for the stars themselves you can use sprites or plot, just as you like.

...got to install PB first to code a small example, this is a new machine here, didn't install it yet...

looking forward couriously...

Fluid Byte · Post by **Fluid Byte** » Tue Jul 17, 2007 12:27 pm

You mean something like this?

Code: Select all

InitSprite() : InitKeyboard()

OpenWindow(0,0,0,640,480,"Seamless BG",#WS_OVERLAPPEDWINDOW | 1)
OpenWindowedScreen(WindowID(0),0,0,640,480,0,0,0)

CreateSprite(0,160,160)

hdc = StartDrawing(SpriteOutput(0))
For i=0 To 159
	CVL = ((i * 180) / 159) + 35	
	Box(0,i,160,1,RGB(255-CVL,CVL,255-CVL))	
Next

SetRect_(qrc.RECT,0,0,160,160)
DrawEdge_(hdc,qrc,#EDGE_RAISED,#BF_RECT)

StopDrawing()

SetFrameRate(60)

Repeat
	EventID = WindowEvent()
	
	ClearScreen(0)
	
	ExamineKeyboard()

	If KeyboardPushed(#PB_Key_Right)
		SPDX.f - 2 : If SPDX = -160 : SPDX = 0 : EndIf
	EndIf
	
	If KeyboardPushed(#PB_Key_Left)
		SPDX.f + 2 : If SPDX = 160 : SPDX = 0 : EndIf
	EndIf

	If KeyboardPushed(#PB_Key_Up)
		SPDY.f - 2 : If SPDY = -160 : SPDY = 0 : EndIf
	EndIf
	
	If KeyboardPushed(#PB_Key_Down)
		SPDY.f + 2 : If SPDY = 160 : SPDY = 0 : EndIf
	EndIf

	For X = -1 To 4
		For Y = -1 To 3
			DisplaySprite(0,X * 160 - SPDX,Y * 160 + SPDY)
		Next
	Next

	FlipBuffers()	
Until EventID = #WM_CLOSE Or KeyboardPushed(1)

[edit]included movement[/edit]

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Jul 17, 2007 12:43 pm

@fluid

quite ok, simple example for wrapping of identical sprites.
wrapping of different ones is a more complicated....

but the API isn't really necessary.
a outlined box would have done it.
not a good idea to bluff a beginner with such api calls.

PS: and also better use the PB-Constants....

CptGreenwood · Post by **CptGreenwood** » Tue Jul 17, 2007 12:47 pm

Yes, exactly this kind of movement I mean. The background should be a space image which is NOT tiled on the visual part of the screen like your color squares are, but constantly repeated while scrolling.

CptGreenwood · Post by **CptGreenwood** » Tue Jul 17, 2007 12:50 pm

@Kaeru Gaman
You're right. I hoped that this works with simple PB commands too because API is a bit advanced stuff, but I've got this example's message.
If it works with a star image...

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Jul 17, 2007 1:01 pm

the content of the sprite is absolutely meaningless...
and btw, the API there was only used to put the edges on the sprites.

I used the skeleton of Fluid's code to build one with a single star-sprite
half the size of the screen, displayed 3x3 times.
I think it's not SO ungly that it is repetetive.

Code: Select all

InitSprite() : InitKeyboard()

OpenWindow(0,0,0,640,480,"Scrolling Stars")
OpenWindowedScreen(WindowID(0),0,0,640,480,0,0,0)

CreateSprite(0,320,240) ;creating a 320x240 sprite
StartDrawing(SpriteOutput(0))
  For n=0 To 499         ; filling it with 500 dots at
    col = Random(255)     ; randomly gray-value
    Plot( Random(319), Random(239), RGB(col,col,col))
  Next
StopDrawing()

SetFrameRate(60)

Repeat
   EventID = WindowEvent()
   
   ClearScreen($000000)
   
   ExamineKeyboard()

   If KeyboardPushed(#PB_Key_Right)
     BGX +2 : If BGX > 319 : BGX = 0 : EndIf
   EndIf
   
   If KeyboardPushed(#PB_Key_Left)
     BGX -2 : If BGX < 0 : BGX = 319 : EndIf
   EndIf

   If KeyboardPushed(#PB_Key_Up)
     BGY -2 : If BGY < 0 : BGY = 239 : EndIf
   EndIf
   
   If KeyboardPushed(#PB_Key_Down)
     BGY +2 : If BGY > 239 : BGY = 0 : EndIf
   EndIf

  For n=0 To 2
    For t=0 To 2
      DisplaySprite(0, 320 * n - BGX, 240 * t - BGY)
    Next
  Next

   FlipBuffers()   
Until EventID = #PB_Event_CloseWindow Or KeyboardPushed(#PB_Key_Escape)

> is NOT tiled on the visual part of the screen
that is really a BAD idea, because sprites should never be bigger than the screen.
if you need it to be less repetetive, use a lot of different sprites,
but always smaller than the screen and tiled.

after all, if you just want Dots (or very small stars) in the background, the plot-array sure is a better idea...
I will show up with it soon...

CptGreenwood · Post by **CptGreenwood** » Tue Jul 17, 2007 1:14 pm

Great! This is exactly what I looked for.
The "whow"-part is the loop in which the sprites are drawn. Could you explain (in a tutorial manner

) how the result is archieved? Thanx in advance.

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Jul 17, 2007 3:03 pm

uffa... ok.. I made a sketch

the red area is the visible screen.
the blue matrix is the 3x3 "map" of the sprites.

when starting, the upper left four sprites fill the screen, the thirs row / third line is outside, invisible. (pic.1)

moving your "starship" right/down moves the background-stars up/left.
the variables BGX and BGY are increased according to the keys pushed.
the coordinates of the sprites are decreased by BGX/BGY, to shift the sprites up/left. (pic.2)

in the end, the sprites are that far up/left, that the first row / first line is almost invisible, only one pixel will be left. (pic.3)
if you go one more step then, the variables will be reset to 0,
and the movement starts over at pic.1

of course, the swapping effect appears everytime any axis needs it,
only for the demonstration here I explaned both axis at the same time.

the two loops do the following:
first loop For n = 0 To 2 counts the rows, inner loop counts the lines.
the first row starts at x=0, and the sprite is 320pix wide, so the second row starts at x=320.
the the thirs starts at x=640, so we can achieve those values by n * 320
same for the Y-Values for the lines: t * 240
at the end we subtract BGX from the X and BGY from the Y coordinate,
to achieve the soft scrolling as explained with the sketch above.

Fluid Byte · Post by **Fluid Byte** » Tue Jul 17, 2007 3:36 pm

Dude, you should write some offical tutorials. You're good at it!

CptGreenwood · Post by **CptGreenwood** » Tue Jul 17, 2007 3:57 pm

Agreed. That made it quite clear. Thanx allot. Now I'm going to begin my little game...

Kaeru Gaman · Post by **Kaeru Gaman** » Tue Jul 17, 2007 4:10 pm

Dude, you should write some offical tutorials. You're good at it!

thanks.

I often don't have the nerves to write big tutorials, thats the problem...