Mappy Tutorial

Things You Need

 * TileStudio to create Tiles.
 * Mappy To Create the Map.
 * Mappy Exporter Script which can be found [[Media:MappyExporter.zip|here]].

Setting Up
Firstly, install TileStudio by downloading the zip file containing the program, and extracting to the desired destination. Keep in mind, TileStudio is not needed for this tutorial if you prefer to make tiles in other graphic applications, but it is still a nice little program to have and can help you make tileset's quite quickly.

Next, install Mappy and remember the directory you installed it to. Extract the Export SGAv2.lua file from the MappyExporter zip file and put it into the luascr folder of the Mappy installation path.

For example: E:\MAPWIN\luascr\

You will also need to put these two files in the Mappy editor folder to allow mappy to work with PNG files.

The last thing you need to do is to open MAPWIN.ini file in the Mappy directory and change the following line from:

lua01="Whatever is here" to lua01=Export SGAv2.lua

This will link the script to your list of tools in Mappy.

Making Tilesets
A Tileset is a series of tiles or graphics inside a single bitmap file. For example:



We can see that we have multiple tiles in the one bitmap, which is how tiles are used inside Mappy and MappyLoader.

Valid Tilesets vs Invalid Tilesets
MappyLoader has specific rules to it's Tilesets.

1: Tileset must be of the PNG format. 2: Last 24 Tiles must be event tiles.

Valid Tileset

Invalid Tileset

This tutorial won't cover how to make tiles but for further information check the TileStudio website, it has some tutorials on how to make some nice tiles.

Alternatively you can download the above [[Media:GrassTileSet.png|tileset]] and use as you wish.

We will be using the above [[Media:GrassTileSet.png|tileset]] for this tutorial.

Creating a new Map
Open the Mappy program and click File and then click New Map. You will be presented with a dialogue box with several fields to fill out. The first row of input boxes are the tile's width and height, since our tiles are 50x50 in dimensions, enter 50 and 50 in these boxes. The second row are the number of tiles on the X axis and the number of tiles on the Y axis, we'll make an 80x80 sized map, so enter 80 and 80.

You can choose between Truecolor and 8bit color formats, select Truecolor. Ignore the Advanced Options.

Once you have done this, click OK.

A new map will have been created, and now you will have to import your tiles. Click File and then Import, and an Open File dialogue box with appear. Open the [[Media:GrassTileSet.png|GrassTileSet]] and we'll see on the right hand side in the Still Blocks window that our Tileset has been cut up into it's tiles.

Making your Map
Before we proceed there are some things that you need to be aware of. Firstly, if you click the Layer button in the top Menu bar, you will see a variety of options for adding, deleting, moving and altering layers. But you will also see the number of layers you have in your current map, numbered from 0 to 7. These numbers are important as they represent the order in which they will be drawn in your game, layer 0 being first to be drawn, layer 7 being the last to be drawn.

With this said, always put the tiles you want as 'background' effects in layers 0 or 1.

For this tutorial we will only need 4 layers, so go ahead and add 3 new layers. Once you have done this, click the layer button in the top menu bar and you should see 4 layers available and 4 layers greyed out (layers that don't exist yet). Select layer 1.

Layer 1 will be our foreground layer, so anything we draw on this layer will be drawn on top of Layer 0. Mappy does not have an eraser tool as such, so if you want to erase a tile that you have drawn so that it is transparent again, select Tile 0, this is always transparent. Draw a small grass patch with a border or trees that has a hole in the center for water as shown below:



Now that we've made the foreground, lets make the background. Select Layer 0 by going to the top menu bar, clicking the Layer button and selecting Layer 0.

We are presented with another blank page, but what we want to see is the foreground so we know where to paint our water tiles. Click Layer in the top menu bar, then click Onion Skin at the bottom of the list, click Enable Onion Skin and make the background layer 'All'.

Now you should see the foreground, even though we have Layer 0 selected, but theres one more thing to do that will make things easier. Click Layer at the top menu bar, and at the bottom of the list click Background layers darkened. This will darken all the layers that are showing, but ARE NOT selected, this is extremely helpful as it helps us identify which layer we are currently editing.

Now with Layer 0 selected and the foreground showing behind darkened, paint some Water on the hole you made for the water in layer 1, you should have something like this:



Creating and Drawing Animated Tiles
Creating animated tiles is fairly easy in Mappy, the first thing you do is right click on the Still Blocks window on the right which shows all of the tiles you can use to draw, and once clicked, the heading of the window should change to Anim blocks, and there should not be any tiles available, this is normal.

Once you've done this, click Edit and then click New, and a new animated tile will have been created in the Anim Blocks window. This animated tile at the moment, doesn't have any frames, so lets add those frames now.

Double click on the Animated Tile in the Anim Blocks window, and a Anim Properties dialogue should appear. The first thing we want to change is the reference image which is the image you see if the top left part of the dialogue. This is merely the image that will be used in the Anim Blocks window, and is just used to help you identify each different animated tiles, click on it and select any tile you want.

At this stage, the only thing you need to do is add the frames. Click Insert at the top right of the dialogue. You will now see a filmstrip of all the tiles you have avaliable in your map (the ones you imported at the start). To add frames, simply click on each frame you want once, in sequence. Take note of the numbers that appear on the right hand side of the filmstrip as these numbers indicate the index of the frames you have selected, so if you make a mistake, cancel and do it again.

For this tutorial, just choose a few different tiles, since we haven't made proper animation tiles. Let's select the water tile, tree tile and grass tile. Once done, click OK.

You should now see 3 Frames in your Anim Properties, if you don't repeat the last few paragraphs, if so, click OK to add your new animated tile.

That's it!, now you can paint the animated tiles like you would with any other tile in the Still Blocks, but for the purpose of the tutorial, Select Layer 1 and paint animated tile in the center of the lake as shown below:



Collision Layer
The Collision Layer is a special layer that can occupy any 1 of the 8 layers that you can use in Mappy. The only condition to this is that the layer you decide to use as the collision layer, can only be used as the collision layer, the reason for this will be explained as the tutorial progresses.

The Collision Layer will start off blank (except for the layers you can see in the background if you have Onion Skin enabled). A Collidable tile is a tile on the map that 'Does Not' use Tile 0. Tile 0 is the blank tile as we mentioned before, and it represents, a blank, empty tile.

To paint the collisions for our map, go ahead and select layer 2, this will be our collision layer for this map, and then select the last tile, the tile with number 24 on it, and paint on all the trees and the lake. You should end up with something like this.



As you can see, we've painted all the tiles we want to be collidable with the 24 Tile, you can use any tile except Tile 0 to paint collisions. Remember, if you make a mistake and want to remove a collision tile from your map, you MUST USE TILE 0 using any other tile will not remove the collision tile.



Event Layer
Like the Collision Layer, the Event layer is a special layer, that can occupy any 1 of the 8 layers that you can use.

Only the special Tiles 1 to 24 can be used with the event Layer, it doesn't matter what your tiles 1 to 24 look like, all that matters is that they are the Last 24 Tiles in the TileSet. MappyLoader will assume that the last 24 tiles are the event tiles, so it is extremely important that your Tilesets are valid. See Tilesets above for the description of a valid Tileset.

So what is an event? An Event is anything you want to be, a player's or enemies spawn. An Item spawn point maybe? Anything you want it to be.

So we'll decide that Tile 1 will be the Player spawn event. Select layer 3 and paint the 1 Tile somewhere on the map.

You should have something like this once you have painted your event tile.



Exporting
The last thing we need to do, is export our map. This is a really simple process.

You will need to have done the instructions for setting up Mappy at the top of the tutorial in order to export your map.

To export your map, click Custom on the top menu bar, and then click Export SGAv2. You will be asked if you want to export your map, click OK.

Next you'll be presented with a Save As dialogue box, find the location that you want to save your map, choose a name, and type .sga as it's extension and then click Save.

For example:



Next a box will appear with the title Select Collision Layer, what this option is asking you do to, is type in the layer that you are using as the collision layer. Since we used layer 2 as the collision layer, we should type 2, and then click OK'.

Next a box will appear with the title Select Event Layer, what this option is asking you do to, is type in the layer that you are using as the event layer. Since we used layer 3 as the event layer, we should type 3, and then click OK'.

Congratulations, you've exported your map. Theres only 1 last thing to do to make it a valid map. You must find the tileset that you used in mappy and place it in the same place as the map, Both the map and the tileset must have the same name.

For example: