Simple RPG map in Love2D

Prerequisites

A basic understanding of Lua, Love2D, and Tiled Map Editor.

Resources

• Tiled Map Editor
• Simple Tiled Implementation
• Keeney's Map Pack

Preperation

I'm going to assume that you have the resources and Tile Map Editor downloaded and installed on your system. To prep, we'll be setting up our working directory and copying over our tileset to be worked with.

It's important to keep your projects and files organized, so take some time if needed to find something that's comfortable for you. I have a ~/Code/Games directory within my user directory that I store my projects in for example.

Project Structure

Within your projects directory, create a new directory for this tutorial and call it simple-rpg-map. From here, let's scaffold our directories with the following:

|-- simple-rpg-map
    |-- src/
        |-- lib/
        |-- maps/
        |-- tiles/
        |-- conf.lua
        |-- main.lua

Copying Resources

Great! We have our directories set up and ready to go. Now let's copy over our resources so they're ready to go.

Lib

Extract Simple Tiled Implementation and copy the entire sti folder to your lib directory.

Tiles

Extract Kenney's Map Pack and copy the Tilesheet/mapPack_tilesheet.png file to your tiles directory. From here, rename it to overworld.png.

Our directory should now look like the following:

|-- simple-rpg-map
    |-- src/
        |-- lib/
            |-- sti/
        |-- maps/
        |-- tiles/
            |-- overworld.png
        |-- conf.lua
        |-- main.lua

Creating Our Map

Now the fun begins! Let's create our map shall we? Go ahead and fire up Tiled Map Editor and create a new map. You'll be presented with the following:

Go ahead and leave the orientation, layer format, and render order as their defaults. Since we're creating your basic 2D overhead map these are the exact settings we need.

The tileset we copied from Kenney's Map Pack are made up of 64x64 pixels - so go ahead and set the width and height to 64. Lastly, we're going to set our map size to 15 x 15 as well.

Property	Value
Orientation	Orthogonal
Tile layer format	Base64 (uncompressed)
Tile render order	Right Down
Map size width	15 tiles
Map size height	15 tiles
Tile size width	64 px
Tile size height	64 px

Save the map within your projects maps directory, and also give it the name overworld.

Loading Our Tileset

Now that we have our map, we can load in our tileset. In the bottom right corner of Tiled Map Editor, you'll find the Tilesets panel. In the bottom left corner of that panel, you'll find a small icon that looks like a piece of paper with a gold star. Click that little guy to create a new tileset.

You'll be presented with another window much like we were when we first created our map:

As the name of our tileset, give it Overworld. Next, click on the Browse button and select your overworld.png image from your tiles directory. Finally, set the tile width and height to 64, and ensure that the margin and spacing values are set to 0.

Property	Value
Name	Overworld
Type	Based on Tileset Image
Source	path/to/your/tiles/overworld.png
Tile width	64 px
Tile height	64 px
Margin	0 px
Spacing	0 px

Again, save the tileset within your tiles directory with the name of overworld. Afterwards, you'll be presented with a new tab with your loaded tileset:

Switch back to your map - you'll now find your newly loaded tileset in the bottom right panel. Play around from here by painting with your tiles and come up with an overworld of your own. Here's what I came up with:

Once you have your map, export it as a lua file; File > Export As..., and I'm sure you've guessed it: save it to your maps directory as overworld.

That wraps up the portion of creating our map! Now let's get this thing rendered in Love.

Configuring Love2D

Let's configure some base settings with our game. Open up your conf.lua file and place the following:

function love.conf(t)
    t.window.title = "Simple RPG Map"
    t.window.width = 960
    t.window.height = 960
end

If a file called conf.lua is found within your game folder, it is automatically ran before Love goes through its load process.

Our conf.lua file contains one function, love.conf. This method takes one argument: a table in which you can override the default configuration values that Love comes set up with out of the box. Here, we're simply setting a few things for our project:

• The window's title
• The window's width
• The window's height

The title is self-explanatory, however, you may be wondering where I got the values of the width and height from. In reality, you can set these to whatever you want. But in our case, since we want to display our entire map, and we know the dimensions of our tiles and map, we can estimate how large our map is as a whole.

64 * 15 = 960

Loading Our Map

We're currently interested in loading our map we created earlier into our game. So first off, we need to pull in the Simple Tiled Implementation library.

local sti = require "lib/sti"

Not too shabby. Now let's use it to load our map. Create a method below that called love.load(), and here we will add the following:

map = sti("maps/overworld.lua")

And that's all that's needed. Our map is now loaded within our game instance. However, if you go to run your game, you'll still see a pretty black window.

Drawing Our Map

To wrap this tutorial up, we'll finally draw our map to the screen.

Create a new love.draw() method and add the following:

map:draw(0, 0)

If you fire up your game, you should be presented with your map!

Conclusion

You've learned how to create and export a map from Tiled Map Editor for use within the Love2D engine. You've also learned how to pull in and require a plugin to load and render your map into your game instance. At the end of this, your lua files should contain the following:

conf.lua

function love.conf(t)
    t.window.title = "Simple RPG Map"
    t.window.width = 960
    t.window.height = 960
end

main.lua

local sti = require "lib/sti"

function love.load()
    map = sti("maps/overworld.lua")
end

function love.draw()
    map:draw(0, 0)
end

In the next tutorial, we'll look at how we can add a controllable character to our map to move around our world.