How do you scroll 2d top-down map with rotation

Author

Message

sskethan

15

Years of Service

User Offline

Joined: 20th Sep 2008

Location: Oshawa, ON. Canada

Posted: 20th Nov 2011 16:25

Link

I'm trying to get the character to scroll the map when he comes to the edge. I found a few tutorials, but they are all about scrolling in 4 direction. I would like the character to rotate. here is how far i have got so far. Can someone please help me figure this out. Thanks.

`set screen resolution
set display mode 1024, 768, 32
backdrop on
`setup syncing
sync on
sync rate 60

`********************************************************************************

gosub LoadMedia
    gosub DeclareVariables
    gosub createplayer

`********************************************************************************

do
  
    drawmap() 
    scrollmap()
    displayinfo()
    
    gosub controls
    gosub HandleWeapon
    
    sync
LOOP

`********************************************************************************

LoadMedia:

`load sound "media\sounds\arrow_001.wav",101

load image "media\level\sand_001.bmp",1,1

load image "media\player\arrow_001.png",111,111

return

`************************************************************************************

DeclareVariables:

#constant SCREENSIZEX 1024
    #constant SCREENSIZEY 768

type bot
        xpos as integer
        ypos as integer
    endtype
    
    Global xscroll as integer
    Global yscroll as integer
 
    dim player(0) as bot
    player(0).xpos=screen width()/2
    player(0).ypos=screen height()/2
    
    `store the coordinates that will make the player be at the centre of the screen
    ScreenCentreX = SCREENSIZEX / 2
    ScreenCentreY = SCREENSIZEY / 2
   
    angle#=0

`Max bullet life
    MaxLife = 200
    MaxNumOfBullets=200
    Dim Bullets(maxnumofbullets,111) 
    `Number of milliseconds between each bullet
    BulletWait = 400

return

`************************************************************************************

createplayer:

create animated sprite 101, "media\player\skeleton_walk_001.png",24,3,101

sprite 101, player(0).xpos, player(0).ypos, 101
    offset sprite 101,sprite width(101) /2,sprite height(101) /2
    
    `Set the character sprite to always draw to the front
    set sprite priority 101,1
    set sprite 101, 0, 1

return

`************************************************************************************

controls:
    
    ` plays the idle animation
    play sprite 101,25,48,100
    
    rotate sprite 101,angle#
    
    ` moves sprite forward (W)
    if keystate(17)=1
        play sprite 101,1,24,40
        move sprite 101, 3
        a#=wrapvalue((360.0-angle#)+180.0)
        inc screencentrex,sin(a#)*1.0
        inc screencentrey,cos(a#)*1.0
    endif
    
    ` rotates sprite left (A)
    if keystate(30)=1
        angle#=wrapvalue(angle#-4.0)
    else
    
    ` rotates sprite right (D)
    if keystate(32)=1
        angle#=wrapvalue(angle#+4.0)
        endif
    endif

return

`************************************************************************************

HandleWeapon:

`Loop through each bullet
    for b = 111 to MaxNumOfBullets

`Fire Sprite
    if spacekey()=1 and Bullets(b,101)=0 and (timer()-LastCreated) > BulletWait
        `play sound 101
        sprite b, sprite x(101),sprite y(101),111
        scale sprite b,40
        offset sprite b, sprite width(101) /2, sprite height(101) /2 +40
        rotate sprite b,sprite angle(101)
        Bullets(b,101)=1
        Bullets(b,111)=0
        show sprite b
        move sprite b,6
        `Store time when bullet was last created, to allow a few secs between each create
        LastCreated = timer()
    endif

`If fired while moving
    if Bullets(b,101)=1
        move sprite b,6
        l = bullets(b,111)
        inc 1
        Bullets(b,111)=l
    endif

`Stop if at end of life and decrement bullets
    if Bullets(b,111) > maxlife
        Bullets(b,101)=0
        hide sprite b
    endif
next b

return

`************************************************************************************

function scrollmap()

if player(0).xpos<64 then player(0).xpos=64:xscroll=xscroll+2
   if player(0).xpos>screen width()-64 then player(0).xpos=screen width()-64:dec xscroll,2
   if player(0).ypos<64 then player(0).ypos=64:yscroll=yscroll+2
   if player(0).ypos>screen height()-64 then player(0).ypos=screen height()-64:dec yscroll,2

`Here we are setting up to roll the scroll back to its start position
   if xscroll>62 then xscroll=0
   if xscroll<-62 then xscroll=0
   if yscroll>62 then yscroll=0
   if yscroll<-62 then yscroll=0
   
endfunction

`************************************************************************************

function drawmap()

`Draw to screen
    for lpy = -1 to screen width() /64+1
    for lpx = -1 to screen height() /64+1
        paste image 1,lpy*64+yscroll,lpx*64+xscroll
    next lpy
next lpx

endfunction

`************************************************************************************

function displayinfo()

text 0,10,"FPS: "+STR$(Screen FPS())
text 0,30,"W A S D to move"
text 0,50,"space key to shoot"

endfunction

+ Code Snippet

`set screen resolution
set display mode 1024, 768, 32
backdrop on
`setup syncing
sync on
sync rate 60

`********************************************************************************

    gosub LoadMedia
    gosub DeclareVariables
    gosub createplayer

`********************************************************************************

do
  
    drawmap() 
    scrollmap()
    displayinfo()
    
    gosub controls
    gosub HandleWeapon
    
    sync
LOOP

`********************************************************************************

LoadMedia:

   `load sound "media\sounds\arrow_001.wav",101

    load image "media\level\sand_001.bmp",1,1

    load image "media\player\arrow_001.png",111,111

return

`************************************************************************************

DeclareVariables:

    #constant SCREENSIZEX 1024
    #constant SCREENSIZEY 768

    type bot
        xpos as integer
        ypos as integer
    endtype
    
    Global xscroll as integer
    Global yscroll as integer
 
    dim player(0) as bot
    player(0).xpos=screen width()/2
    player(0).ypos=screen height()/2
    
    `store the coordinates that will make the player be at the centre of the screen
    ScreenCentreX = SCREENSIZEX / 2
    ScreenCentreY = SCREENSIZEY / 2
   
    angle#=0

    `Max bullet life
    MaxLife = 200
    MaxNumOfBullets=200
    Dim Bullets(maxnumofbullets,111) 
    `Number of milliseconds between each bullet
    BulletWait = 400

return

`************************************************************************************

createplayer:

    create animated sprite 101, "media\player\skeleton_walk_001.png",24,3,101

    sprite 101, player(0).xpos, player(0).ypos, 101
    offset sprite 101,sprite width(101) /2,sprite height(101) /2
    
    `Set the character sprite to always draw to the front
    set sprite priority 101,1
    set sprite 101, 0, 1

return

`************************************************************************************ 

controls:
    
    ` plays the idle animation
    play sprite 101,25,48,100
    
    rotate sprite 101,angle#
    
    ` moves sprite forward (W)
    if keystate(17)=1
        play sprite 101,1,24,40
        move sprite 101, 3
        a#=wrapvalue((360.0-angle#)+180.0)
        inc screencentrex,sin(a#)*1.0
        inc screencentrey,cos(a#)*1.0
    endif
    
    ` rotates sprite left (A)
    if keystate(30)=1
        angle#=wrapvalue(angle#-4.0)
    else
    
    ` rotates sprite right (D)
    if keystate(32)=1
        angle#=wrapvalue(angle#+4.0)
        endif
    endif

return

`************************************************************************************

HandleWeapon:

    `Loop through each bullet
    for b = 111 to MaxNumOfBullets

    `Fire Sprite
    if spacekey()=1 and Bullets(b,101)=0 and (timer()-LastCreated) > BulletWait
        `play sound 101
        sprite b, sprite x(101),sprite y(101),111
        scale sprite b,40
        offset sprite b, sprite width(101) /2, sprite height(101) /2 +40
        rotate sprite b,sprite angle(101)
        Bullets(b,101)=1
        Bullets(b,111)=0
        show sprite b
        move sprite b,6
        `Store time when bullet was last created, to allow a few secs between each create
        LastCreated = timer()
    endif

    `If fired while moving
    if Bullets(b,101)=1
        move sprite b,6
        l = bullets(b,111)
        inc 1
        Bullets(b,111)=l
    endif

    `Stop if at end of life and decrement bullets
    if Bullets(b,111) > maxlife
        Bullets(b,101)=0
        hide sprite b
    endif
next b

return 

`************************************************************************************

function scrollmap()

   if player(0).xpos<64 then player(0).xpos=64:xscroll=xscroll+2
   if player(0).xpos>screen width()-64 then player(0).xpos=screen width()-64:dec xscroll,2
   if player(0).ypos<64 then player(0).ypos=64:yscroll=yscroll+2
   if player(0).ypos>screen height()-64 then player(0).ypos=screen height()-64:dec yscroll,2

   `Here we are setting up to roll the scroll back to its start position
   if xscroll>62 then xscroll=0
   if xscroll<-62 then xscroll=0
   if yscroll>62 then yscroll=0
   if yscroll<-62 then yscroll=0
   
endfunction


`************************************************************************************

function drawmap()

    `Draw to screen
    for lpy = -1 to screen width() /64+1
    for lpx = -1 to screen height() /64+1
        paste image 1,lpy*64+yscroll,lpx*64+xscroll
    next lpy
next lpx

endfunction

`************************************************************************************ 

function displayinfo()

text 0,10,"FPS: "+STR$(Screen FPS())
text 0,30,"W A S D to move"
text 0,50,"space key to shoot"

endfunction

Attachments

Login to view attachments

Back to top

Profile PM Email

Darkzombies

13

Years of Service

User Offline

Joined: 25th Dec 2010

Location: In multiple tabs, most likely youtube.

Posted: 20th Nov 2011 18:25 Edited at: 20th Nov 2011 18:26

Link

Oh pretty much you just scroll the environment instead of the player. So scroll the projectiles (So they stay at the same speed) and the trees and stuff like that and the player stays still, and the environment moves at the same speed as you we're moving.

+ Code Snippet

if playerX < screen edge `(I don't know your resolution)
   move player goes here
else
   move environment goes here
endif

This only works for the X coord, and the left side (I think lol)
But you can easily add the right side (use playerX > 0) and the Y's

Its not too hard. The hard part is having to move all of your environment, if you have it all neat then you can just do a for next and select the array's and move all of their X and Y values (Of course types would be needed for this)

P.S. I didn't even read your code so don't get mad at me lol

-------------------------------------------------------------

Back to top

Profile PM Email

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 20th Nov 2011 21:36 Edited at: 20th Nov 2011 21:38

Link

Something like this? I'm not entirely sure what you're talking about. You want the character to rotate but all pre-existing tutorials are about scrolling the map in 4 directions? So are you trying to make the character move or the map? 'Cause you mentioned two different subjects.

Global MapWidth = 70
Global MapHeight = 70
Global MapTileSize = 48
Global MapOffsetX = 0
Global MapOffsetY = 0
Global MapViewportWidth = 0  : MapViewportWidth  = 640 / MapTileSize
Global MapViewportHeight = 0 : MapViewportHeight = 480 / MapTileSize

Type Tile
	color as dword
EndType

rem maximum amounts the map can scroll in world coordinates
maxScrollX = MapWidth*MapTileSize - 640
maxScrollY = MapHeight*MapTileSize - 480
rem player's on-screen boundaries
scrollBoundX1 = 100 : scrollBoundX2 = 540
scrollBoundY1 = 75  : scrollBoundY2 = 405

rem build random map
dim map(MapWidth,MapHeight) as Tile
for x = 1 to MapWidth
	for y = 1 to MapHeight
		map(x,y).color = rgb(rnd(255),rnd(255),rnd(255))
	next y
next x

sync on
sync rate 120

do
	cls

rem player controls
	if rightkey() then pa = wrapvalue(pa+2)
	if leftkey() then pa = wrapvalue(pa-2)
	if downkey()
		px# = px# + cos(pa)*2
		py# = py# + sin(pa)*2
	endif
	if upkey()
		px# = px# - cos(pa)*2
		py# = py# - sin(pa)*2
	endif
	
	rem keep player within its boundaries
	if px# > scrollBoundX2-22 then px# = scrollBoundX2-22 : inc MapOffsetX, 2
	if px# < scrollBoundX1+22 then px# = scrollBoundX1+22 : dec MapOffsetX, 2
	if py# > scrollBoundY2-22 then py# = scrollBoundY2-22 : inc MapOffsetY,2
	if py# < scrollBoundY1+22 then py# = scrollBoundY1+22 : dec MapOffsetY,2
	
	rem scroll map according to player
	if MapOffsetX < 0 then MapOffsetX = 0
	if MapOffsetY < 0 then MapOffsetY = 0
	if MapOffsetX > maxScrollX then MapOffsetX = maxScrollX
	if mapOFfsetY > maxScrollY then MapOffsetY = maxScrollY

rem draw map
	drawMap(MapOffsetX, MapOffsetY)
	
	
	rem draw player
	ink rgb(255,255,0)
	circle px#, py#, 22
	circle px#, py#, 21
	line px#, py#, px#-cos(pa)*24, py#-sin(pa)*24
	
	
	
	rem show player's boundaries. Pushing beyond the boundaries
	rem will scroll the map
	ink rgb(255,0,0),0
	line scrollBoundX1,scrollBoundY1,scrollBoundX2,scrollBoundY1
	line scrollBoundX1,scrollBoundY2,scrollBoundX2,scrollBoundY2
	line scrollBoundX1,scrollBoundY1,scrollBoundX1,scrollBoundY2
	line scrollBoundX2,scrollBoundY1,scrollBoundX2,scrollBoundY2

rem hide extra tiles, just for sake of this demo
	ink 0,0
	box 640,0,800,480
	box 0,480,800,600
	
	
	rem 
	ink rgb(255,255,255),0
	set cursor 0,490
	print "Player World X: ",MapOffsetX+px#
	print "Player World Y: ",MapOffsetY+py#

sync
loop

function drawMap(offsetX as float, offsetY as float)
	sx = int(offsetX / MapTileSize)
	sy = int(offsetY / MapTileSize)
	ox = offsetX mod MapTileSize
	oy = offsetY mod MapTileSize
	
	ex = sx + MapViewportWidth+1
	ey = sy + MapViewportHeight+1
	if ex >= mapWidth then ex = mapWidth-1
	if ey >= mapHeight then ey = mapHeight-1
	
	for y = sy to ey
		for x = sx to ex
			ink map(x+1,y+1).color, 0
			ix = (x - sx)*MapTileSize - ox
			iy = (y - sy)*MapTileSize - oy
			box ix, iy, ix+MapTileSize, iy+MapTileSize
		next x
	next y
endfunction

+ Code Snippet

Global MapWidth = 70
Global MapHeight = 70
Global MapTileSize = 48
Global MapOffsetX = 0
Global MapOffsetY = 0
Global MapViewportWidth = 0  : MapViewportWidth  = 640 / MapTileSize
Global MapViewportHeight = 0 : MapViewportHeight = 480 / MapTileSize

Type Tile
	color as dword
EndType

rem maximum amounts the map can scroll in world coordinates
maxScrollX = MapWidth*MapTileSize - 640
maxScrollY = MapHeight*MapTileSize - 480
rem player's on-screen boundaries
scrollBoundX1 = 100 : scrollBoundX2 = 540
scrollBoundY1 = 75  : scrollBoundY2 = 405


rem build random map
dim map(MapWidth,MapHeight) as Tile
for x = 1 to MapWidth
	for y = 1 to MapHeight
		map(x,y).color = rgb(rnd(255),rnd(255),rnd(255))
	next y
next x


sync on
sync rate 120


do
	cls

	rem player controls
	if rightkey() then pa = wrapvalue(pa+2)
	if leftkey() then pa = wrapvalue(pa-2)
	if downkey()
		px# = px# + cos(pa)*2
		py# = py# + sin(pa)*2
	endif
	if upkey()
		px# = px# - cos(pa)*2
		py# = py# - sin(pa)*2
	endif
	
	rem keep player within its boundaries
	if px# > scrollBoundX2-22 then px# = scrollBoundX2-22 : inc MapOffsetX, 2
	if px# < scrollBoundX1+22 then px# = scrollBoundX1+22 : dec MapOffsetX, 2
	if py# > scrollBoundY2-22 then py# = scrollBoundY2-22 : inc MapOffsetY,2
	if py# < scrollBoundY1+22 then py# = scrollBoundY1+22 : dec MapOffsetY,2
	
	rem scroll map according to player
	if MapOffsetX < 0 then MapOffsetX = 0
	if MapOffsetY < 0 then MapOffsetY = 0
	if MapOffsetX > maxScrollX then MapOffsetX = maxScrollX
	if mapOFfsetY > maxScrollY then MapOffsetY = maxScrollY
	

	rem draw map
	drawMap(MapOffsetX, MapOffsetY)
	
	
	rem draw player
	ink rgb(255,255,0)
	circle px#, py#, 22
	circle px#, py#, 21
	line px#, py#, px#-cos(pa)*24, py#-sin(pa)*24
	
	
	
	rem show player's boundaries. Pushing beyond the boundaries
	rem will scroll the map
	ink rgb(255,0,0),0
	line scrollBoundX1,scrollBoundY1,scrollBoundX2,scrollBoundY1
	line scrollBoundX1,scrollBoundY2,scrollBoundX2,scrollBoundY2
	line scrollBoundX1,scrollBoundY1,scrollBoundX1,scrollBoundY2
	line scrollBoundX2,scrollBoundY1,scrollBoundX2,scrollBoundY2

	rem hide extra tiles, just for sake of this demo
	ink 0,0
	box 640,0,800,480
	box 0,480,800,600
	
	
	rem 
	ink rgb(255,255,255),0
	set cursor 0,490
	print "Player World X: ",MapOffsetX+px#
	print "Player World Y: ",MapOffsetY+py#
	

	sync
loop



function drawMap(offsetX as float, offsetY as float)
	sx = int(offsetX / MapTileSize)
	sy = int(offsetY / MapTileSize)
	ox = offsetX mod MapTileSize
	oy = offsetY mod MapTileSize
	
	ex = sx + MapViewportWidth+1
	ey = sy + MapViewportHeight+1
	if ex >= mapWidth then ex = mapWidth-1
	if ey >= mapHeight then ey = mapHeight-1
	
	for y = sy to ey
		for x = sx to ex
			ink map(x+1,y+1).color, 0
			ix = (x - sx)*MapTileSize - ox
			iy = (y - sy)*MapTileSize - oy
			box ix, iy, ix+MapTileSize, iy+MapTileSize
		next x
	next y
endfunction

"You're not going crazy. You're going sane in a crazy world!" ~Tick

Back to top

Profile PM Email Website

sskethan

15

Years of Service

User Offline

Joined: 20th Sep 2008

Location: Oshawa, ON. Canada

Posted: 21st Nov 2011 16:21

Link

Darkzombies
Thank you very much for the help.

Quote: "
P.S. I didn't even read your code so don't get mad at me lol
"

I would never. This is a wonderful site. Very helpful people.

Phaelax
That is a great example. Exactly what im trying to do. Thank you so much.

Back to top

Profile PM Email

sskethan

15

Years of Service

User Offline

Joined: 20th Sep 2008

Location: Oshawa, ON. Canada

Posted: 26th Nov 2011 20:45 Edited at: 27th Nov 2011 16:18

Link

I have figured out how to get the sprite to move and scroll the screen now. Thank you everyone. But I'm stuck on the rotate when i run the program the sprite is facing 90 degrees but walks left when i press forward making him walk sideways.

DeclareVariables:

#constant SCREENSIZEX 1024
    #constant SCREENSIZEY 768
    
    Global MapWidth = 70
    Global MapHeight = 70
    Global MapTileSize = 64
    Global MapOffsetX = 0
    Global MapOffsetY = 0
    Global MapViewportWidth = 0  : MapViewportWidth  = 1024 / MapTileSize
    Global MapViewportHeight = 0 : MapViewportHeight = 768 / MapTileSize

`maximum amounts the map can scroll in world coordinates
    maxScrollX = MapWidth*MapTileSize - 1024
    maxScrollY = MapHeight*MapTileSize - 768

`player's on-screen boundaries
    scrollBoundX1 = 100 : scrollBoundX2 = 920
    scrollBoundY1 = 70  : scrollBoundY2 = 690

Type Tile        
        color as dword
    EndType
    
    `store the coordinates that will make the player be at the centre of the screen
    px# = SCREENSIZEX / 2
    py# = SCREENSIZEY / 2
    
    angle#=0

controls:
    
    ` plays the idle animation
    play sprite 101,25,48,100
    
    rotate sprite 101, angle#

` rotates sprite left (A)
    if keystate(30) then angle#=wrapvalue(angle#-3)
    
    ` rotates sprite right (D)
    if keystate(32) then angle#=wrapvalue(angle#+3)
    
       ` moves sprite forward (W)
    if keystate(17)
        play sprite 101,1,24,40
        py# = py# - sin(angle#)*3
        px# = px# - cos(angle#)*3               
    endif

return

`************************************************************************************

player:

sprite 101, px#, py#, 101
    offset sprite 101,sprite width(101) /2,sprite height(101) /2
    
    `Set the character sprite to always draw to the front
    set sprite priority 101,1
    set sprite 101, 0, 1

return

+ Code Snippet

DeclareVariables:

    #constant SCREENSIZEX 1024
    #constant SCREENSIZEY 768
    
    Global MapWidth = 70
    Global MapHeight = 70
    Global MapTileSize = 64
    Global MapOffsetX = 0
    Global MapOffsetY = 0
    Global MapViewportWidth = 0  : MapViewportWidth  = 1024 / MapTileSize
    Global MapViewportHeight = 0 : MapViewportHeight = 768 / MapTileSize

    `maximum amounts the map can scroll in world coordinates
    maxScrollX = MapWidth*MapTileSize - 1024
    maxScrollY = MapHeight*MapTileSize - 768

    `player's on-screen boundaries
    scrollBoundX1 = 100 : scrollBoundX2 = 920
    scrollBoundY1 = 70  : scrollBoundY2 = 690

    Type Tile        
        color as dword
    EndType
    
    `store the coordinates that will make the player be at the centre of the screen
    px# = SCREENSIZEX / 2
    py# = SCREENSIZEY / 2
    
    angle#=0


controls:
    
    ` plays the idle animation
    play sprite 101,25,48,100
    
    rotate sprite 101, angle#

    ` rotates sprite left (A)
    if keystate(30) then angle#=wrapvalue(angle#-3)
    
    ` rotates sprite right (D)
    if keystate(32) then angle#=wrapvalue(angle#+3)
    
       ` moves sprite forward (W)
    if keystate(17)
        play sprite 101,1,24,40
        py# = py# - sin(angle#)*3
        px# = px# - cos(angle#)*3               
    endif

return

`************************************************************************************

player:

    sprite 101, px#, py#, 101
    offset sprite 101,sprite width(101) /2,sprite height(101) /2
    
    `Set the character sprite to always draw to the front
    set sprite priority 101,1
    set sprite 101, 0, 1

return

I got it. All a needed to do is change line
rotate sprite 101, angle#
to
rotate sprite 101, (angle#)-90
and the sprite walks correctly

Back to top

Profile PM Email

sskethan

15

Years of Service

User Offline

Joined: 20th Sep 2008

Location: Oshawa, ON. Canada

Posted: 2nd Dec 2011 20:50

Link

Could someone please help me to figure out how to add a data map like this

`store tile data at the end of the program so its out of the way
data 10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1,11, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10

+ Code Snippet

`store tile data at the end of the program so its out of the way
data 10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1,11, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,10
data 10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10

to this code supplied by Phaelax

Global MapWidth = 40
Global MapHeight = 40
Global MapTileSize = 64
Global MapOffsetX = 0
Global MapOffsetY = 0
Global MapViewportWidth = 0  : MapViewportWidth  = 1024/ MapTileSize
Global MapViewportHeight = 0 : MapViewportHeight = 768/ MapTileSize

Type Tile
        color as dword
EndType

rem maximum amounts the map can scroll in world coordinates
maxScrollX = MapWidth*MapTileSize - 1024
maxScrollY = MapHeight*MapTileSize - 768
rem player's on-screen boundaries
scrollBoundX1 = 100 : scrollBoundX2 = 920
scrollBoundY1 = 70  : scrollBoundY2 = 690

rem build random map
dim map(MapWidth,MapHeight) as Tile
for x = 1 to MapWidth
        for y = 1 to MapHeight
                map(x,y).color = rgb(rnd(255),rnd(255),rnd(255))
        next y
next x

sync on
sync rate 120

do
        cls

rem player controls
        if rightkey() then pa = wrapvalue(pa+2)
        if leftkey() then pa = wrapvalue(pa-2)
        if downkey()
                px# = px# + cos(pa)*2
                py# = py# + sin(pa)*2
        endif
        if upkey()
                px# = px# - cos(pa)*2
                py# = py# - sin(pa)*2
        endif
        
        rem keep player within its boundaries
        if px# > scrollBoundX2-22 then px# = scrollBoundX2-22 : inc MapOffsetX, 2
        if px# < scrollBoundX1+22 then px# = scrollBoundX1+22 : dec MapOffsetX, 2
        if py# > scrollBoundY2-22 then py# = scrollBoundY2-22 : inc MapOffsetY,2
        if py# < scrollBoundY1+22 then py# = scrollBoundY1+22 : dec MapOffsetY,2
        
        rem scroll map according to player
        if MapOffsetX < 0 then MapOffsetX = 0
        if MapOffsetY < 0 then MapOffsetY = 0
        if MapOffsetX > maxScrollX then MapOffsetX = maxScrollX
        if mapOFfsetY > maxScrollY then MapOffsetY = maxScrollY

rem draw map
        drawMap(MapOffsetX, MapOffsetY)
        
        
        rem draw player
        ink rgb(255,255,0)
        circle px#, py#, 22
        circle px#, py#, 21
        line px#, py#, px#-cos(pa)*24, py#-sin(pa)*24
        
        
        
        rem show player's boundaries. Pushing beyond the boundaries
        rem will scroll the map
        ink rgb(255,0,0),0
        line scrollBoundX1,scrollBoundY1,scrollBoundX2,scrollBoundY1
        line scrollBoundX1,scrollBoundY2,scrollBoundX2,scrollBoundY2
        line scrollBoundX1,scrollBoundY1,scrollBoundX1,scrollBoundY2
        line scrollBoundX2,scrollBoundY1,scrollBoundX2,scrollBoundY2

rem hide extra tiles, just for sake of this demo
        ink 0,0
        box 640,0,800,480
        box 0,480,800,600
        
        
        rem 
        ink rgb(255,255,255),0
        set cursor 0,490
        print "Player World X: ",MapOffsetX+px#
        print "Player World Y: ",MapOffsetY+py#

sync
loop

function drawMap(offsetX as float, offsetY as float)
        sx = int(offsetX / MapTileSize)
        sy = int(offsetY / MapTileSize)
        ox = offsetX mod MapTileSize
        oy = offsetY mod MapTileSize
        
        ex = sx + MapViewportWidth+1
        ey = sy + MapViewportHeight+1
        if ex >= mapWidth then ex = mapWidth-1
        if ey >= mapHeight then ey = mapHeight-1
        
        for y = sy to ey
                for x = sx to ex
                        ink map(x+1,y+1).color, 0
                        ix = (x - sx)*MapTileSize - ox
                        iy = (y - sy)*MapTileSize - oy
                        box ix, iy, ix+MapTileSize, iy+MapTileSize
                next x
        next y
endfunction

+ Code Snippet

Global MapWidth = 40
Global MapHeight = 40
Global MapTileSize = 64
Global MapOffsetX = 0
Global MapOffsetY = 0
Global MapViewportWidth = 0  : MapViewportWidth  = 1024/ MapTileSize
Global MapViewportHeight = 0 : MapViewportHeight = 768/ MapTileSize

Type Tile
        color as dword
EndType

rem maximum amounts the map can scroll in world coordinates
maxScrollX = MapWidth*MapTileSize - 1024
maxScrollY = MapHeight*MapTileSize - 768
rem player's on-screen boundaries
scrollBoundX1 = 100 : scrollBoundX2 = 920
scrollBoundY1 = 70  : scrollBoundY2 = 690


rem build random map
dim map(MapWidth,MapHeight) as Tile
for x = 1 to MapWidth
        for y = 1 to MapHeight
                map(x,y).color = rgb(rnd(255),rnd(255),rnd(255))
        next y
next x


sync on
sync rate 120


do
        cls

        rem player controls
        if rightkey() then pa = wrapvalue(pa+2)
        if leftkey() then pa = wrapvalue(pa-2)
        if downkey()
                px# = px# + cos(pa)*2
                py# = py# + sin(pa)*2
        endif
        if upkey()
                px# = px# - cos(pa)*2
                py# = py# - sin(pa)*2
        endif
        
        rem keep player within its boundaries
        if px# > scrollBoundX2-22 then px# = scrollBoundX2-22 : inc MapOffsetX, 2
        if px# < scrollBoundX1+22 then px# = scrollBoundX1+22 : dec MapOffsetX, 2
        if py# > scrollBoundY2-22 then py# = scrollBoundY2-22 : inc MapOffsetY,2
        if py# < scrollBoundY1+22 then py# = scrollBoundY1+22 : dec MapOffsetY,2
        
        rem scroll map according to player
        if MapOffsetX < 0 then MapOffsetX = 0
        if MapOffsetY < 0 then MapOffsetY = 0
        if MapOffsetX > maxScrollX then MapOffsetX = maxScrollX
        if mapOFfsetY > maxScrollY then MapOffsetY = maxScrollY
        

        rem draw map
        drawMap(MapOffsetX, MapOffsetY)
        
        
        rem draw player
        ink rgb(255,255,0)
        circle px#, py#, 22
        circle px#, py#, 21
        line px#, py#, px#-cos(pa)*24, py#-sin(pa)*24
        
        
        
        rem show player's boundaries. Pushing beyond the boundaries
        rem will scroll the map
        ink rgb(255,0,0),0
        line scrollBoundX1,scrollBoundY1,scrollBoundX2,scrollBoundY1
        line scrollBoundX1,scrollBoundY2,scrollBoundX2,scrollBoundY2
        line scrollBoundX1,scrollBoundY1,scrollBoundX1,scrollBoundY2
        line scrollBoundX2,scrollBoundY1,scrollBoundX2,scrollBoundY2

        rem hide extra tiles, just for sake of this demo
        ink 0,0
        box 640,0,800,480
        box 0,480,800,600
        
        
        rem 
        ink rgb(255,255,255),0
        set cursor 0,490
        print "Player World X: ",MapOffsetX+px#
        print "Player World Y: ",MapOffsetY+py#
        

        sync
loop



function drawMap(offsetX as float, offsetY as float)
        sx = int(offsetX / MapTileSize)
        sy = int(offsetY / MapTileSize)
        ox = offsetX mod MapTileSize
        oy = offsetY mod MapTileSize
        
        ex = sx + MapViewportWidth+1
        ey = sy + MapViewportHeight+1
        if ex >= mapWidth then ex = mapWidth-1
        if ey >= mapHeight then ey = mapHeight-1
        
        for y = sy to ey
                for x = sx to ex
                        ink map(x+1,y+1).color, 0
                        ix = (x - sx)*MapTileSize - ox
                        iy = (y - sy)*MapTileSize - oy
                        box ix, iy, ix+MapTileSize, iy+MapTileSize
                next x
        next y
endfunction

I have tried several different ways but keep getting a blank white screen

Back to top

Profile PM Email

EricB

12

Years of Service

User Offline

Joined: 3rd Nov 2011

Location:

Posted: 9th Dec 2011 16:51

Link

This is the relevant part of the code. I helped the original author with this part as well.
old code
ink map(x+1,y+1).color, 0 `<<<<< note ink command
ix = (x - sx)*MapTileSize - ox
iy = (y - sy)*MapTileSize - oy

new code
paste image map(x+1,y+1),ix,iy `<<changed to paste image
ix = (x - sx)*MapTileSize - ox
iy = (y - sy)*MapTileSize - oy

Back to top

Profile PM

sskethan

15

Years of Service

User Offline

Joined: 20th Sep 2008

Location: Oshawa, ON. Canada

Posted: 9th Dec 2011 18:07

Link

thank you for getting back ... I noticed that. I should have replied here. Rotation and scrolling are working great now.

Back to top

Profile PM Email

Sorry your browser is not supported!

Newcomers DBPro Corner / How do you scroll 2d top-down map with rotation

Attachments