 January 15, 2021, 06:30:53 PM

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

#### 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

jankupila(Posted 1+ years ago)

Too long lines of code..

tonyg(Posted 1+ years ago)