Wasabi M uses a project to organize settings, maps, tile sets, and sprite definitions. Because of this, the first step in working with Wasabi M is to create a new project and configure at least one tile set and map. This tutorial will walk you through this basic setup process.

Step 1 – Start Wasabi M

When you start Wasabi M, the startup window will appear. Make sure that “Create a new project” is selected, and click “Ok”.

Step 2 – Project Settings

Wasabi M will display the Project Details window for you automatically when you start with a new project.

Each setting in this window is important:

• Project Name: The name of the project, for your own reference.
• Base Directory: This must be set to the root directory of your project. The Data Directory and Class Directory settings are relative to this directory. When working in FlashDevelop, this directory will generally be the same directory which contains the .as3proj file.
• Data Directory: This directory will be used by Wasabi M to export CSV files used to create individual map layers.
• Class Directory: Wasabi M will export .as files into this directory. One file will be created per map, along with a base map class file, and a supporting assets file.
• Project Package: Specifies the package name used for the generated ActionScript classes. It’s important that this setting corresponds correctly to the Class Directory setting (for example, if the Class Directory is “src/com/wasabi/ruins/maps/” the Project Package will need to be “com.wasabi.ruins.maps”).
• Assets Class Name: Wasabi M generates a single class which contains embedded tile set resources that may be shared by multiple maps within a single project; this setting determines the name of that class.
• Export Target: Choose the version of flixel you want to generate code for. Currently, flixel 1.45 and 1.47 are supported.
• Screen Size: Wasabi M uses the screen size width and height to provide a screen sized grid when editing tile maps. Be sure to use the un-zoomed size of the screen (for example, if your game has a resolution of 320×200 with a zoom factor of 2 in flixel, make sure to set the width to 320, and the height to 200 — do not multiply the size by the zoom setting or the grid will be inaccurate).

Once you have configured each of the project settings, click “Ok”.

Step 3 – Create a Tile Set

Before you can begin editing a map, you must configure your projects first tile set. To do so, choose “Tilesets” from the “Project” menu to display the Manage Tilesets windows.

Click the green “Add Tileset” button inside the Manage Tilesets window to display the New Tileset window.

Here is an overview of the New Tileset window:

• Image File: The full path to the image file containing the tile set. This can be either a tile strip (a single row of tiles) or a tile sheet (a grid of tiles). It is often easiest to use the “…” button to browse for a particular file.
• Name: The internal name of the tile set. This will be set for you automatically if you have used the browse button to choose a tile set image file, but you may change it if you wish.
• Treat this image as a tile sheet: If your image is a grid of tiles, check this box and specify the tile width and height below. If your image is a single row of tiles, leave the box unchecked and Wasabi M should automatically detect the tile size based on the height of the image.
• Tile Width and Tile Height: For a tile sheet, you must specify the width and height of each tile (in pixels).

After selecting your image file (and configuring the tile size, if necessary) click “Ok”. The new tile set will appear in the list in the Manage Tilesets window.

If you need to make any changes to the tile set, you can do so at any time by selecting it in the Manage Tilesets window. Note that changing the size of the tiles within a tile set will impact all of the maps using that tile set.

Click “Ok” to close the Manage Tilesets window.

Step 4 – Create a Map and a Layer

With a tile set configured, you can now create the first map in your project and add the first layer to it.

Choose “Add Map” from the “Project” menu; this will add a new map to the project.

Select the new map from the list on the left side of the main window and choose “Layers” from the “Map” menu to display the Layers window.

Click the green “Add Layer” button in the top left corner of the Layers window to display the New Layer window. To configure the new layer adjust the following fields in the New Layer window:

• Layer Name: This is the internal name of the layer, used primarily within Wasabi M for your own reference.
• Flixel layer (FlxLayer) name: Wasabi M uses this value to generate variable and property names when exporting the project. This name should be a valid ActionScript3 identifier.
• Tileset image: Choose the tile set for this layer from the drop down list; each layer can make use of only a single tile set. If you need to add a new tile set, click the “…” button to display the Tileset Manager window.
• First Visible Tile Index and First Collidable Tile Index: specify the index of the first tile that flixel will render, and the first tile which flixel will use for collisions.
• Width and Height: Specify the size of the layer in tiles.
• Horizontal and Vertical Scroll Rate: Adjust the speed at which this layer scrolls relative to flixel’s camera. Values greater than 1 cause the layer to scroll more quickly and values less than 1 more slowly (a value of 0 causes the layer to remain fixed regardless of the camera’s movement).
• Horizontal and Vertical Offset: Specify the offset of the origin of the layer in pixels, if desired.

When you have configured the layer settings, click “Ok” to close the New Layer window; then close the Layer Manager window.

You can use the Layer Manager window to make changes to layers at any time. Take note that if you resize a layer to a smaller size, any tiles outside the edges of the new layer size will be lost.

Step 5 – Paint

You can now select tiles from the tile selector on the right hand side of the main window, and paint them onto the layer in the center of the window.

Left clicking will paint the selected tile, while right clicking will paint with the tile at index 0 (this can be useful to quickly erase tiles).

Step 6 – Save and Export

Once you’ve painted some tiles onto your first map’s layer click the disk icon on the toolbar or choose “Save” or “Save As” from the “File” menu to save your project. Your saved project will contain all of your tile sets, maps, and layers (and later your sprites as well).

It’s a good idea to save often (and occasionally to save a backup copy of your project under a different name) to protect your work (and, in the case extra backup copies, to allow you to revert to an earlier version of your project if you decide you’ve made changes you’re not happy with) — especially since Wasabi M is still in development.

After saving your project, you can export it by clicking the yellow box icon on the toolbar or choosing “Export” from the “File” menu.

Wasabi M will generate the CSV and AcrionScript files for your project in the directories you specified in your project’s details.

Note: Wasabi M will overwrite these generated files whenever you export your project, so it’s best to avoid making any manual changes to the files after they’ve been exported (since the changes will be lost if you export the project again).