Rock solid tile map scrolling - knowledge gathering

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|602\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> On Topic -> Rock solid tile map scrolling - knowledge gathering
Page : 1 2 Next Prev
Mon, 25 Mar 2013, 06:05
waroffice	I have been doing tile map engines for years and every time I start one I managed to go through the same set of failures and successes. What I would like is the communities advice on the maths involved in getting this correct and efficient. What I have so far is a tile map that does smooth scrolling around the whole map and the map will stick when it is near the edge so you don't get black bit for example but it feels dirty somehow, like I was more trial and error rather than a thought out process. Only this time around in GLB I seem to have hacked it together rather than any thought gone in to the maths. What I would like is your methods and why you choose/chose that way? Or to enlighten me to a 'standard practice' What I do understand is how to store/render/edit a tile map, this part I know im ok at. What I struggle with is getting the function of the map to be: * Reusable, so it doesn't matter on map size or screen size or if its part of the editor or the game itself * Efficient, dont want to waste any cycles * <more coming soon> I found this by searching the forums but it doesn't really answer my question
Mon, 25 Mar 2013, 07:13
Dabz	For me, i don't use a set tilemap system that's reusable, i generally built them along with the game, ground up everytime, for me, implementing such a setup could get a bit tunnel visionary and distract from actually building a game, as in, why go to implementing isometric maps when, really, ill never use it! I remember an old coder called Skully, he was building a tilemap engine, on the basis it would help him quickly build games for his kids... He was on for months and months, it ended up being some sort of framework, and if i recall, he abandoned it, and i don't think he ever made a game with it either! Though, that's probably not what you want to hear, so, when it comes to what you do want to hear, you can do no wrong and check out the include files for the tilemap editor called Mappy, i haven't a link at hand, but, its on google, and dissecting a couple of those will probably give you a better idea on the best practices when it comes to general purpose tilemapping! Dabz -=-=- Intel Core i5 6400 2.7GHz, NVIDIA GeForce GTX 1070 (8GB), 8Gig DDR4 RAM, 256GB SSD, 1TB HDD, Windows 10 64bit
Mon, 25 Mar 2013, 07:28
Jayenkai	Here's how I do it.. (As most people are aware, my methods aren't perfect, follow my advice with that in mind!) Step one.. Simple loop for x=0 to MapWidth for y=0 to MapHeight dx=(xTileWidth)-ScrollX dy=(yTileHeight)-ScrollY if dx>-TileWidth and dx<ScreenWidth+TileWidth and dy>-TileHeight and dy<ScreenHeight+TileHeight DrawImage(TileImage,dx,dy,TileMap[(yMapWidth)+x]) endif next next --v Add in your scrolling.. AimX=PlayerX-(ScreenWidth/2) AimY=PlayerY-(ScreenHeight/2) ScrollX=ScrollX-((ScrollX-AimX)/8) ScrollY=ScrollY-((ScrollY-AimY)/8) ' Throw in your limits here.. 'I can never remember which way around they go, but it's something like... If ScrollX<0 then ScrollX=0 if ScrollX+ScreenWidth>TileWidthMapWidth then ScrollX=(TileWidthMapWidth)-ScreenWidth ' or maybe it's subtracting, or something.. grrr.. trial and error bit!! for x=0 to MapWidth for y=0 to MapHeight dx=(xTileWidth)-ScrollX dy=(yTileHeight)-ScrollY if dx>-TileWidth and dx<ScreenWidth+TileWidth and dy>-TileHeight and dy<ScreenHeight+TileHeight DrawImage(TileImage,dx,dy,TileMap[(y*MapWidth)+x]) endif next next --v Then build on from that. If you're finding it too slow, narrow down the drawing to PlayerX-(so many tiles) to PlayerX+(so many tiles), and the same for y... Making a bog standard tilemap isn't tricky, and I've never found myself having to use an off the shelf one. It takes a couple of minutes to make a tiny half-working engine, and you can easily add your own special elements into it, without the need for a huge Multi-Purpose thing taking up all the space. -=-=- ''Load, Next List!''
Mon, 25 Mar 2013, 07:33
waroffice	Thanks Dabz, I get that I could spend days/weeks/millennia creating an engine but since I started this project in 2001 im in no rush! Jay, I think thats similar to what I have. Could you explain your variables and why you are doing things like the /8 etc. One phrase I like is "Explain like I'm 5"
Mon, 25 Mar 2013, 07:45
Jayenkai	Show=Show-((Show-Aim)/8) If you hunt all my code for the past 3 or 4 years, you'll see that over and over and over and over and over again, in hundreds of different places. It's a secret ingredient, and once I found it, I couldn't stop using the bloody thing!! The simplest example I can give is this.. ShowScore#=ShowScore#-((ShowScore#-Score#)/8) if (ShowScore-Score)<5 then ShowScore=Score Text(100,100,int(ShowScore)) --v You update Score, the display shows "ShowScore", which goes "tickity-tickity-tickity" every time you update it. It's a really really simple effect, but it makes the score tick up nice and gently, instead of always jumping up in chunks. Want to see it in action? Any and all of my Monkey games have been using it. In the tilemap, it works pretty much the same.. You set an AimX and AimY co-ordinate, and the nice little function smoothly moves ScrollX and ScrollY to meet up to it's location. (Again, be sure they're all floats so it's smooth!) You might also want to add a "if abs()<5" check to lock it when it's close, but that also has an awkward "click" type effect, so it's probably best to do a "if aimx<scrollx then scrollx=scrollx-1" type thing instead, when they're close. -=-=- ''Load, Next List!''
Mon, 25 Mar 2013, 08:30
waroffice	That looks cool, I will apply the technique later tonight. Not sure how it will apply to a guy moving around a map. Some quick pseudo code. Player presses RIGHT key Set AIMx to CurrentX+1 PlayerX=PlayerX-((PlayerX-AIMx)/8) // Gradually move player right --v on to your tile map display, one thing I have noticed in coding, if it doesn't look simple its probably badly formatted or worked out. I will try your method this evening and see if it works for me. Thanks Jay
Mon, 25 Mar 2013, 08:40
Jayenkai	For player positions, I've stopped using "Position on the entire map", and switched to "Tile, and offset" instead.. PlayerX,PlayerY = Grid Reference PlayerOX,PlayerOY = Offset. So you have DrawX=(PlayerXTileWidth)+(PlayerOXTileWidth)-ScrollX then you move PlayerOX-0.1, and when PlayerOX<-0.5 then PlayerOX=PlayerOX+1;PlayerX=PlayerX-1; and pluses, and y'ses When checking surroundings you simply look up Grid[(PlayerY*MapWidth)+PlayerX], without having any nasty divisions to do. -=-=- ''Load, Next List!''
Mon, 25 Mar 2013, 08:47
waroffice	oh I get you, I think I did this but in the reverse. I started with the player being on a tile and controlling the offset but found it clunky and my brain couldn't handle it. This was a long time ago however so I guess I could switch back. It really is simple but I think I'm tunnel vision'd into doing it the same way every time. I will get my code sorted tonight and post for all to see.
Mon, 25 Mar 2013, 08:52
steve_ancell	The tilemaps I have done for my Mutant Monty clone are done in plain old Notepad.
Mon, 25 Mar 2013, 10:50
Dabz	PlayerX*TileWidth I used bit-shifting when checking tilemaps, sorta:- Local x = playerX shr 5 local y = playerY shr 5 'Check left If tilemap[x-1,y] = WALL 'There a wall to the left, so, dont go any further EndIf --v Taking into consideration of removing the offset of the map, e.g. playerX = playerX - mapOffsetX People tend to go banana's when using bitshifting for some very odd reason, but, it's a free optimization, and, when your working with tiles that are generally 8x8 (Shr 3), 16x16 (Shr 4) , 32x32 (Shr 5) etc etc, it's, well, more natural. As well as, you can also shift the other way using Shl. GLBasic doesnt have bitshifting commands build in, but, you can drop into inline C++ and use the bitshifting operators << and >>. Thats my way anyway, and, exactly how I do drawing and collisions for Croco:- bamboocoder.com/misc/croco/croco.html Where, in Croco, the ball has 8 collision points that I check, which, if you play it and hit a bit of wall with one of the corners of the ball, it's work its way up or down (Depending on if you hit the bottom or top of the ball) Dabz -=-=- Intel Core i5 6400 2.7GHz, NVIDIA GeForce GTX 1070 (8GB), 8Gig DDR4 RAM, 256GB SSD, 1TB HDD, Windows 10 64bit
Mon, 25 Mar 2013, 10:55
rockford	GLBasic has ASL() and ASR()
Mon, 25 Mar 2013, 11:07
Dabz	ASL() and ASR() GOD DAMN IT!!!!! I looked everywhere at the time for bit shifting commands... In the docs, on the forum, behind my couch... Typical!!! Never mind though, thanks for the future heads up Mr R! Dabz -=-=- Intel Core i5 6400 2.7GHz, NVIDIA GeForce GTX 1070 (8GB), 8Gig DDR4 RAM, 256GB SSD, 1TB HDD, Windows 10 64bit
Mon, 25 Mar 2013, 11:47
Jayenkai	LOL
Mon, 25 Mar 2013, 12:10
waroffice	I use bit wise functions to store flags for each cell. Like if enemy can spawn. Collision data etc I'm on my phone (picking misses up from gym) so difficult to find my code!
Mon, 25 Mar 2013, 15:43
waroffice	PlayerX,PlayerY = Grid Reference PlayerOX,PlayerOY = Offset. So you have DrawX=(PlayerXTileWidth)+(PlayerOXTileWidth)-ScrollX then you move PlayerOX-0.1, and when PlayerOX<-0.5 then PlayerOX=PlayerOX+1;PlayerX=PlayerX-1; and pluses, and y'ses Sorry Jay im not getting this. My guy just goes whizzing off the screen or jumps around. here is my code (the relevant parts) so far TYPE Actor // Data type for players, can be used for NPCs too Name$ X# Y# Health% MaxHealth% Experience# Speed% Inventory[15] ENDTYPE GLOBAL playerOX#, playerOY# GLOBAL Player AS Actor Player.X=10 Player.Y=10 Player.Speed=1 playerOX=0 playerOY=0 FUNCTION DrawMap: x, y, x_off, y_off,w ,h LOCAL u,v FOR u = 0 TO w FOR v = 0 TO h IF (u+x_off<=map_data.width) AND (v+y_off<=map_data.height) DRAWANIM 0,map[u+x_off][v+y_off].L1_tile,x+(utile_height),y+(vtile_height) // Layer 1 DRAWANIM 0,map[u+x_off][v+y_off].L2_tile,x+(utile_height),y+(vtile_height) // Layer 2 DRAWANIM 0,map[u+x_off][v+y_off].L3_tile,x+(utile_height),y+(vtile_height) // Layer 3 DRAWANIM 1,7,(Player.Xtile_height)+(playerOX)-(x_offtile_height),(Player.Ytile_height)-20+(y_offtile_height) // Player DRAWANIM 0,map[u+x_off][v+y_off].L4_tile,x+(utile_height),y+(vtile_height) // Layer 4 ENDIF NEXT NEXT ENDFUNCTION FUNCTION CheckKeys: KeyCheck() IF KEY(200) // UP ENDIF IF KEY(208) // DOWN ENDIF IF KEY(203) // LEFT ENDIF IF KEY(205) // RIGHT IF playerOX>0.5 playerOX=1 ELSE playerOX=playerOX+0.1 ENDIF ENDIF IF KEY(16) // Q = reset Player.X=10 Player.Y=10 playerOX=0 playerOY=0 ENDIF ENDFUNCTION FUNCTION movePlayer: dir% IF playerOX<0 Player.X=Player.X-Player.Speed-(playerOX/8) ELSEIF playerOX>0 Player.X=Player.X+Player.Speed-(playerOX/8) ENDIF ENDFUNCTION MAINLOOP: WHILE NOT KEY(1) CheckKeys() movePlayer(0) DrawMap(pOffx,pOffy,off_x,off_y,25,19) // Draws the map by offseting the render point by poff and where to start the map by moff SHOWSCREEN WEND --v If you need any more just ask but I think that should be all I have
Mon, 25 Mar 2013, 16:01
Jayenkai	What!. No! What!!? Hmmm... If keydown(right) PlayerOX=PlayerOX+0.1 Endif If PlayerOX>0.5 then PlayerOX=PlayerOX-1;PlayerX=PlayerX+1 --v (With apologies for chaos due to having just typed that on an iPad!! -=-=- ''Load, Next List!''
Mon, 25 Mar 2013, 16:06
waroffice	That did it, time for a shower. Thanks
Tue, 26 Mar 2013, 14:57
waroffice	Right thanks to Jay's intervention I can move around a map, its not 100% the effect i was after but it will do for now, I know I can solve that. Now I have the collisions working too. This is how I work it: Each cell has an integer value to represent if you can WALK OFF that tile in a direction, I then compare the integer to a list using the bitwise AND function (bAND in GLBasic) and it will move if it will allow. eg: The function below is called on key presses to check you can move in that direction CONSTANT cNorth = 8 CONSTANT cEast = 4 CONSTANT cSouth = 2 CONSTANT cWest = 1 FUNCTION chkWalk%: dir% LOCAL result=0 // Set result to = SELECT dir // Chose Direction you want to travel in CASE 0 // Want to walk up IF (getGridY()>=1)// AND (getGridY()<map_data.height) // Make sure you are within the map boundries IF bAND(map[Player.X][Player.Y].Collision%,cNorth)=cNorth // check that to see if the value cNorth (8) is present in the map data result=0 // If yes you cannot walk that way ELSE result=1 // Else you can ENDIF ENDIF CASE 1 // Want to walk right IF (getGridX()<map_data.width-1) IF bAND(map[Player.X][Player.Y].Collision%,cEast)=cEast result=0 ELSE result=1 ENDIF ENDIF CASE 2 // Want to walk down IF (getGridY()<map_data.height-1) IF bAND(map[Player.X][Player.Y].Collision%,cSouth)=cSouth result=0 ELSE result=1 ENDIF ENDIF CASE 3 // Want to walk left IF (getGridX()>=1)// AND (getGridX()<map_data.width) IF bAND(map[Player.X][Player.Y].Collision%,cWest)=cWest result=0 ELSE result=1 ENDIF ENDIF ENDSELECT RETURN result ENDFUNCTION --v
Tue, 26 Mar 2013, 15:27
waroffice	And it was going so well... for some reason my sprites are not rendering in the right order. If I load a different anim file will this be higher up the z order than the ones below? for example I load in my tiles and player anims LOADANIM "TILES.png",0,32,32 // 0 is the handle LOADANIM "player.png",1,32,32 // 1 is the handle --v Then on the render.. FOR u = 0 TO w FOR v = 0 TO h IF (u+x_off<=map_data.width) AND (v+y_off<=map_data.height) IF L1 THEN DRAWANIM 0,map[u+x_off][v+y_off].L1_tile,x+(utile_height),y+(vtile_height) IF L2 THEN DRAWANIM 0,map[u+x_off][v+y_off].L2_tile,x+(utile_height),y+(vtile_height) IF L3 THEN DRAWANIM 0,map[u+x_off][v+y_off].L3_tile,x+(utile_height),y+(vtile_height) DRAWANIM 1,7,(Player.Xtile_height)-(x_offtile_height),(Player.Ytile_height)-(y_offtile_height) // Player IF L4 THEN DRAWANIM 0,map[u+x_off][v+y_off].L4_tile,x+(utile_height),y+(vtile_height) ENDIF NEXT NEXT --v Produces this image, I have turned off layers 1 - 3 which all render in the right order.
Tue, 26 Mar 2013, 15:36
Jayenkai	Huh.... Just a guess, here, but it might be GLBasic doing otherwise useful batch drawing, which may be buggering it up somewhere along the lines. Suggest you try using a third spritesheet for "overlay", (even if it uses the same gfx) and see if it works any better..? -=-=- ''Load, Next List!''
Tue, 26 Mar 2013, 15:49
waroffice	dammit... --- thats with loading a second set of tiles!
Tue, 26 Mar 2013, 16:11
waroffice	I have updated the download if anyone wants a play Latest build
Wed, 27 Mar 2013, 04:20
waroffice	I submitted a post on the GLBasic forum for assistance www.glbasic.com/forum/index.php?topic=9068.0
Wed, 27 Mar 2013, 04:37
Dabz	I noticed on the glbasic website that the image reference numbers 0 and 2 are the same image file "TILES.png"... Obviously as logic suggests it should load it up twice and not share anything in common with one another... But, have you tried something like having a copy of TILES.png called TILES2.png and then loading that up as image reference 2? Maybe underneath something is going tits up and GLBasic is throwing a bit of a drawing wobbler. Just an idea, shouldn't work, but, you never know! Dabz -=-=- Intel Core i5 6400 2.7GHz, NVIDIA GeForce GTX 1070 (8GB), 8Gig DDR4 RAM, 256GB SSD, 1TB HDD, Windows 10 64bit
Wed, 27 Mar 2013, 04:56
waroffice	I'm at work so can't test the theory out. It could work I guess
Wed, 27 Mar 2013, 06:33
waroffice	I have figured it out It is looping through the map and rendering the player at every layer and every time a cell is rendered. #iFail I will fix it later
Page : 1 2 Next Prev