OpenFL - Creating the Map
This is the first tutorial in the RPG series. These tutorials will go through the process of creating a role-playing game using OpenFL.
What is a tile-based game?
A tile-based game is a game which utilizes tiles as a building block. It's a great way to speed up development by making it easier to create levels and simplifies gameplay logic like enemy artificial intelligence.
The usual way of making a game is to draw every single rock, door, tree and whatever else is needed for every level. Games usually have plenty of levels and it is not practical to draw a new tree or rock every time it is needed. So it makes sense to draw a couple trees and reuse them throughout your game.
This works well except rocks, trees, doors come in many different shapes and sizes. If they can all be within a certain size it will greatly simplify collisions, map creation, drawing and lots of other things.
That's the gist of tile-based games. Put everything inside a tile or a series of tiles. Our tile size is going to be 40 pixels, 40 width and 40 height. I picked this because it scales well and looks good on mobile and desktop.
We can draw all of our tiles in multiple files but many tiles extend past one tile, like a big rock will probably take four tiles. Small rocks will take one tile. So it is easier drawing all of our tiles in one big image this is called a Tilesheet.
Now we have a tilesheet how do we construct an entire world out of it? By numbering each tile it can be easily identified in game. Tiles start from zero and increment up.
Creating a map of numbers
The easiest way to place a large amount of tiles is to create a multi-dimensional array of integers. Inside the array goes the tile ids. Tile 18 is grass and 24 is sand.
We have a tilesheet and a multi-dimensional array describing our map. The next step is to transform our tilesheet into a more useful format in code.
This will take
tilesheetData (our big tilesheet image) and split it up into smaller images. It then places it into
_tileDatas for easy access later. Remember to take a look at the OpenFL Docs if are not familiar with any of these classes.
TileData is a class which holds all the data about a tile. Right now it only holds the
bitmapData. But it is easily extensible to add new attributes like
I created a
TileLayer class which creates and holds all the tiles for a tile map.
bottomLayer instance needs a reference to the tilesheet so it can create the proper tiles. The
setMap method will then place all the tiles in the multi-array.
You should then see something like this.
It isn't much but it is a first step.
Creating multiple tile maps and layering them on top of each other is a great way to reduce tile duplication and to place tiles above characters. For example how would you place a rock on sand and grass? You can draw it twice for both backgrounds or you can create a rock with a transparent background and place it on a higher layer.
Lets first create a new class
MapData to contain all our map information.
Lets add two more layers. The order in which
addChild is called is important.
topLayer has to be added last to ensure it is on top.
And you will get something like this:
Grabbing the source
You can grab the source code for all the tutorials here.
Next tutorial: Creating the Hero