6 - Loading the Tilemap
One of the great things about using Ogmo with HaxeFlixel is that there is already a built-in class to load and use the maps. However, it's not in the 'standard' HaxeFlixel library - we have to install the flixel-addons library to get access to it.
-
Open up a new command prompt and enter:
haxelib install flixel-addons
BASHThis should run and install the new library. Close the command prompt window when it's finished.
-
Jump back into VSCode and open up your
Project.xml
file. We need to tell our project to include flixel-addons in the libraries. -
Look for a line that says:
<!--<haxelib name="flixel-addons" />-->
XMLand change it to:
<haxelib name="flixel-addons" />
XMLSave this change - you're now playing with flixel-addons!
-
Go back to your
PlayState
, and, underneath where theplayer
variable is defined, add:var map:FlxOgmo3Loader; var walls:FlxTilemap;
HAXEWe're basically just creating an object to hold our Ogmo map, and then another one to hold the
FlxTilemap
that we will generate from the Ogmo map. -
In
create()
, before we setup the player object, add:map = new FlxOgmo3Loader(AssetPaths.turnBasedRPG__ogmo, AssetPaths.room_001__json); walls = map.loadTilemap(AssetPaths.tiles__png, "walls"); walls.follow(); walls.setTileProperties(1, NONE); walls.setTileProperties(2, ANY); add(walls);
HAXEThis just loads our room file into our
FlxOgmo3Loader
object, generates ourFlxTilemap
from the 'walls' layer, and then sets tile 1 (our floor tile) to not collide, and tile 2 (walls) to collide from any direction. Then we add our tilemap to the state. -
Now, we need to make our player object get placed in the right location on the map. So, change where we initialize our player from:
player = new Player(20, 20);
HAXEto:
player = new Player(); map.loadEntities(placeEntities, "entities");
HAXEWe're simply telling our
map
object to loop through all of the entities in our 'entities' layer, and call theplaceEntities()
for each one (which we're about to make now). -
Let's make the
placeEntities()
function now. When we callloadEntities()
on our map, it will pass the data of all of the placed entities to whatever function we want. In our function, we need to take this information and do something with it. It will look like this now:function placeEntities(entity:EntityData) { if (entity.name == "player") { player.setPosition(entity.x, entity.y); } }
HAXESo, if this function gets passed an entity with the name "player", it will set our player object's
x
andy
values to the entity'sx
andy
values. -
Now, we want to add collisions to our state, so the player will bump into walls instead of just walking through them. So, in
update()
, aftersuper.update(elapsed);
add:FlxG.collide(player, walls);
HAXEAll this does is check for overlaps between our player and the walls tilemap each
update()
call. If there are any overlaps, the objects are automatically separated from each other. -
Finally, we want to make a small tweak to the player sprite. It's a good idea to make sure that your player has a decent chance of making it through doorways. Since by default, our player sprite is the same size as our tiles (16x16 pixels), it makes it so the player has to thread the needle to make it through 1-tile wide doorways. To remedy this, we're going to change the player sprite's size and offsets. This won't change what is actually displayed for the player's graphic, only its hitbox.
So, in the
Player
class, in the constructor, under where we set thedrag
, add:setSize(8, 8); offset.set(4, 4);
HAXE -
Since we just changed the player's hitbox, we want to visualize it! Switch to
HTML5 / Debug
in the status bar and build the project. You can now pressF2
to bring up HaxeFlixel's powerful debugging overlay.Press the 3D-ish looking cube button in the upper right corner to render hitboxes:
If you look closely, you can see that the player's is smaller than the tiles now.
In the next part, we'll talk about some small tweaks to the camera.