Ooops
January 15, 2021, 06:30:53 PM

Author Topic: [bmx] How to use tiles by KamaShin [ 1+ years ago ]  (Read 404 times)

Offline BlitzBot

  • Jr. Member
  • **
  • Posts: 1
[bmx] How to use tiles by KamaShin [ 1+ years ago ]
« on: June 29, 2017, 12:28:41 AM »
Title : How to use tiles
Author : KamaShin
Posted : 1+ years ago

Description : As I've seen a few questions here and there on the forums about tiles and tiles tutorials, I decided to write a short tutorial... Level: beginner

Code :
Code: BlitzMax
  1. rem
  2. The method I'm going to describe is ONE method to do things, not THE method... it works and is pretty simple:
  3.  
  4. First of all, you must have your tiles stored in one picture (a .bmp or .png) that we will load using the LoadAnimeImage.
  5. Thus, each tile must have the same dimensions (I'll assume for the tutorial that our tiles are 32*32).
  6. end rem
  7.  
  8. Global Width:Int = 800, Height:Int = 600 'This is the resolution of our "game"
  9. Global MapWidth:Int, MapHeight:Int 'These are the width and height of our map (unknown for now since the map hasn't been created yet)
  10. Global TileSize:Int = 32 'I'm assuming that the tiles are squares
  11. Global MyMap:Int[60,30] 'A map is a matrix of integer: here, 60 tiles width and 30 tiles height
  12. MapWidth = 60*TileSize
  13. MapHeight = 30*TileSize
  14. Global OffsetX:Int = 0, OffsetY:Int = 0 'Since there is no camera we can move around, we'll simulate one by "moving" the tiles themselves
  15.                                                                                 '(we won't really move them, just calculate very simply where they must be drawn)
  16. Global TheTiles:TImage 'the variable that will store all our tiles in memory, ready to be drawn
  17.  
  18. Graphics Width, Height, 32, 60 'see the doc if you don't know what these commands do
  19. SetBlend ALPHABLEND 'ALPHABLEND is usefull only if your tiles/objects have transparency effects
  20. HideMouse()
  21. SetColor 255,255,255
  22.  
  23. TheTiles = LoadAnimImage("AnyPathYouWant/YourTiles.png", TileSize, TileSize, 0, NumberOfTilesInYourPicture, FILTEREDIMAGE|MASKEDIMAGE) 'see the doc to know how this works
  24. rem
  25. TheTiles will store each tile as a frame... However, we won't be using TheTiles as an animation but as an array (vector) storing all the tiles.
  26. Thus, the matrix MyMap will only store integers, each integer refering to a tile in TheTiles
  27. end rem
  28.  
  29. 'If you want to do things right, you should write a map editor that would let you fill your map with tiles... since this is not the purpose
  30. 'here, I'll use a small loop that will randomly fill MyMap
  31.  
  32. Local i:Int, j:Int
  33. For i=0 To 29 'using mathematics convention, i represent the rows and j the columns which is why i varies from 0 to 29 (30 rows)
  34.         For j=0 To 59 'and j from 0 to 59 (which makes 60 columns)
  35.                 MyMap[j,i] = Rand(0, NumberOfTilesInYourPicture-1) 'note that in MyMap[j,i] j is in first position and i comes second
  36.                                                                                                                    'see the doc to know how Rand works and notice that the max value is
  37.                                                                                                                    'the number of tiles in MyTile minus 1 (because MyTile works like a 0 based array)
  38.         Next
  39. Next
  40. 'there, our map has been filled with tiles (randomly so it will probably be ugly but that's not our concern here)
  41.  
  42. 'next,we will be writing the loop that draws the map and allows the user to move around the map
  43. Local x:Int, y:Int, TileToDraw:Int
  44. rem
  45. x and y will represent the x and y position of the tile that is about to be drawn
  46. TileToDraw is the index of the tile in TheTile to be drawn
  47. end rem
  48. Repeat
  49.  
  50.         Cls
  51.        
  52.         For i=0 To 29
  53.                 For j=0 To 59
  54.                         x = j*TileSize-OffsetX 'simple mathematics here: j*TileSize is the absolute x coordinate of our tile... We then substract
  55.                                                                    'OffsetX to simulate the fact that the "camera" may have moved along the x axis
  56.                                                                    'OffsetX represent the distance between the left border of the map and the left border of our fake camera
  57.                         y = i*TileSize-OffsetY 'same as above
  58.                         TileToDraw = MyMap[j,i] 'remember? MyMap stores the index of the tiles in TheTiles... this variable TileToDraw could be bypassed
  59.                                                                         'by calling directly MyMap[j,i] in the next line, but I used TileToDraw for clarity
  60.                         DrawImage TheTiles, x, y, TileToDraw 'see the doc to know how this function works
  61.                 Next
  62.         Next
  63.        
  64.         Flip
  65.         'OK... now the tiles are drawn... let's allow the user to move around the map... we'll be doing this using the mouse
  66.         'moving the mouse to the extrem left of the screen should move our fake camera to the left... and so on with the 3 other borders
  67.         TestMouseMove()
  68.         FlushMem()
  69.  
  70. Until KeyHit (KEY_ESCAPE)
  71.  
  72. Function TestMouseMove()
  73.         If MouseX() <= 0 Then 'means that the mouse is "on" the left border of the screen
  74.                
  75.                 OffsetX :- 1 'remember that OffsetX has been defined as the distance between the left border of the map and the left border of the "camer"
  76.                                          'thus, moving the "camera" to the left means reducing the distance of thos 2 borders
  77.                 If OffsetX < 0 Then 'we've moved the camera out of the map, too far on the left
  78.                         OffsetX = 0
  79.                 End If
  80.                
  81.         ElseIf MouseX() >= Width Then 'means that the mouse is on the right border
  82.                
  83.                 OffsetX :+ 1 'there, we're increasing the distance between our borders because the "camera" is moving right
  84.                 If OffsetX > MaxWidth-Width 'we've moved the screen to far on the right... notice that it's not Offset > MaxWidth
  85.                                                                         'but OffsetX > MaxWidth-Width, that's because we're testing OffsetX with the RIGHT border of the screen,
  86.                                                                         ' not the left border, and OffsetX represent the left border
  87.                         OffsetX = MaxWidth-Width
  88.                 End If
  89.        
  90.         End If
  91.        
  92.         If MouseY() <= 0 Then 'the mouse is on the upper border of the screen, we must move the "camera" up
  93.                
  94.                 OffsetY :- 1
  95.                 If OffsetY < 0 Then
  96.                         OffsetY = 0
  97.                 End If
  98.                
  99.         ElseIf MouseY() >= Height Then 'the opposite now
  100.        
  101.                 OffsetY :+ 1
  102.                 If OffsetY > MaxHeight-Height Then
  103.                         OffsetY = MaxHeight-Height
  104.                 End If
  105.        
  106.         End If
  107. End Function
  108.  
  109. rem
  110. Well, that's it for now... you do have a Map, filled with tiles, drawing correctly, and you can "move" around the map...
  111. There is still a lot of improvements you can do here though:
  112. first is the fact that EVERY tiles are drawn... for a 60*30 maps this is beginning to be a bit hard on the computer... with larger map
  113. it will become veeeeeery slow, so the first improvement would be to draw only the tiles that are visible on screen (or partially visible)
  114. another improvement would be to create a type TTile that would store the frame of the tile and the x/y coordinates of the tile, and thus,
  115. you would only calculate the x and y coordinate of the tile once, when it is created, and then draw it using OffsetX/OffsetY to still simulate
  116. the fake "camera"... MyMap would then become an array of TTile rather than of Integers...
  117. You could even then create a type TMap that would store several matrix of tiles allowing what is called layers, and another matrix called
  118. for example Mask, that would work for collisions (if MyMap.Mask[j,i]=0 then player can move on tile j,i else not)...
  119. but first of all, you'll want to create a tile editor :)
  120. end rem


Comments :


jankupila(Posted 1+ years ago)

 Too long lines of code..


tonyg(Posted 1+ years ago)

 They're comments... but it could have been made easier to read.


 

SimplePortal 2.3.6 © 2008-2014, SimplePortal