Hi everyone
I would like to share a code I made to load a tiled map, made with
Tiled Map Editor. This is a software you can use to make map for your game.
Before we start, I would like to thank
Red Eye for his Xml parser function he shared. To use this code, you will need them.
You can download the xml_parser file (agk file with all functions we need) in this topic :
http://forum.thegamecreators.com/?m=forum_view&t=193049&b=41
I attached my sample, in this topic, so you can download it, and launch it with AppGameKit if you want to test.
Also, this is a simple code to show how to load a file made with Tiled Map Editor. But it's very simple and functions like layer of the software are not cover in this example. But it's a good start for someone who wonder how he could do to load a map
Let's get started.
1. In Tiled Map Editor
For this example, we don't use layer, so there is only one unique layer for a simple map. Also, I didn't use the 64 base encoder, so in the Preferences of Tile Map Editor, be sure to desactivate this option.
You can save your map (file / save as) in tmx format. In this example I used a map already done (a sample of Tiled Map Editor). When you save your map, be sure to copy the tmx file AND the image file (that contains the tiles), in the "media" folder of your project. (See example attached to this topic).
Also, we have to make a few modification in the tmx file (witch is an xml file), we have to remplace all
" characters by
'
It's very easy to do that with an editor like Notepad+ with the "search/replace" function. That's because the xml parser need ' instead of " (and it works better in AGK).
2. In AGK
If we open the tmx file with and editor we have something like this :
<?xml version='1.0' encoding='UTF-8'?>
<map version='1.0' orientation='orthogonal' width='40' height='40' tilewidth='32' tileheight='32'>
<tileset firstgid='1' name='Desert' tilewidth='32' tileheight='32' spacing='1' margin='1'>
<image source='tmw_desert_spacing.png' width='265' height='199'/>
</tileset>
<layer name='Ground' width='40' height='40'>
<data>
<tile gid='30'/>
<tile gid='30'/>
<tile gid='30'/>
<tile gid='30'/>
<tile gid='30'/>
<tile gid='30'/>
........
The aim of the game, is to retreive this informations. In the "tile" section, "gid" is in fact the tile number of the image file. In my example, we have an image file with 48 tiles, so if I look at the xml file, "gid = '30' /> is in fact the image number 30 in the file.
Here's the code :
#Include "xmlparser.agc"
SetVirtualResolution(1280,720)
SetSyncRate(60,0)
//Setup xml file
maxLines = xml_SetupFile("desert.tmx")
xml_Loadfile("desert.tmx", maxLines)
tileMap = LoadImage("desert.png",1)
tileMapWidth = 40
tileMapHeight = 40
Global tileWidth = 33
Global tileHeight = 33
Global tileCount = 48
Global tilexCount = 0
Global tileyCount = 0
x = 0
y = 0
For i = 0 To maxLines - 1
eleName$ = xml_getElement(i)
If eleName$ = "tile"
tile = Val(xml_getAttributeContent("gid",i))
tileSprite = CreateSprite(tileMap)
SetSpriteAnimation(tileSprite,tileWidth,tileHeight,tileCount)
SetSpriteFrame(tileSprite,tile)
SetSpritePosition(tileSprite,x,y)
tilexCount = tilexCount + 1
If tilexCount = tileMapWidth
tileyCount = tileyCount + 1
tilexCount = 0
EndIf
x = tilexCount * 32
y = tileyCount * 32
EndIf
Next i
rem A Wizard Did It! (Thank's AGK lol)
Do
Sync()
Loop
And now some explainations :
First, we include the xml_parser file. We use here SetVirtualResolution to make the code more easier to understand.
We setup the xml file with the functions of the xml parser file and we load our tile image.
tileMapWidth and
tileMapHeight are variable that retrieve the size of the map, here, this is a 40 tiles X 40 tiles map.
tileWidth and
tileHeight are the size of a tile. In this example we have 33 X 33.
33 ? why not 32 ? that's because in our image we have some marges (1 pixel each side). In the LoadImage instruction we added 1 to the bBlackToAlpha parameter to make them transparent
tileCount is the total number of tile in the image file.
tilexCount,
tileYCount,
x,
y are some variables for calculation purposes.
In the For/Next loop, we read the "gid" part of the xml file, to retrieve the number of the tile to display. We create a new sprite, and we use SetSpriteAnimation to cut the image file into tile. The SetSpriteFrame command select the good tile to display, and SetSpritePosition to place the sprite.
We repeat all of these for each tile, line by line (we increment x and y and test tileXCount to make the program drop to the next line, once one is completed).
And...that's all
I hope this small example could help someone and you enjoy it. Feel free to make it better if you want, this is just a start to show how we can use the very good xml parser of Red Eye and how to load a Tiled Map Editor map in AGK.
See you soon ! Thank you
PS : the sample file is attached to this topic