Creating your first map graph

Introduction

During these tutorials, we're going to make your first map generator with Map Graph.

When you're done, you'll be familiar with the basics of Map Graph.

These tutorials contain videos that demonstrate some of the steps, which will make it easier to follow along if you're a visual learner. If you prefer, you can choose to ignore them, all the steps are described in text.

Please note: The instruction videos mostly serve as a visual aide to demonstrate how everything should be connected together. Some of the details are no longer accurate, because the videos are made using an older version of Map Graph.

For example, the actual node creation menu will look different than in the videos. When in doubt, check the written instructions.

Tilemaps or Prefabs

Map Graph is compatible with Unity's tilemap system and we'll be using tilemaps in these tutorials. However, you don't need to use the tilemap system and can simply use prefabs instead. If you want to use prefabs, please take a look at the "Using prefabs instead of tilemaps" tutorial after you've finished the "Creating your first map generator" tutorials.

Shortcuts

These tutorials tend to describe the "complicated" way of doing things. The reason for this is that it will help give you better understanding of how Map Graph works. Tips will be given throughout that will explain how to do certain things more quickly or differently.

Support

If you get stuck or notice any mistakes, please sent an e-mail to support@insanescatterbrain.com.

Creating a Map Graph file

Right-click in the project window and select Create/Map Graph/Map Graph.

Opening the Map Graph editor

To open the Map Graph file in the Map Graph editor window:

  1. Select your newly created Map Graph file in the project window.
  2. In the inspector, click the "Open in graph editor" button. (Or double-click it in the project window.)

Adding nodes

Let's add our first node:

  1. Open the node creation menu by right-clicking empty space in the editor and select Add Node (or by pressing spacebar).

    Since there's nothing in there yet, anywhere will do.

  2. Select Textures/Empty Texture.

Tip: Instead of navigating through the different categories, you can simply type the name of the node you're looking for in the search bar.

The Empty Texture node outputs an empty texture of the given size and will fill it with the default color. If the default color is left empty, it will be transparent.

Next, add a constant node of type Vector2Int, which we can use for the size:

  1. Open the node creation menu again and select Constant/Vector2Int
  2. Fill the X and Y fields, let's say 50 by 50.

We're leaving the default color empty, so the texture port will now output a transparent texture of 50 by 50 pixels.

Next, let's randomly fill some of those pixels with a color:

  1. Add a Randomly Fill Texture node, by right-clicking and selecting Add Node and Textures/Randomly Fill Texture.
  2. Connect the Empty Texture output port of the Empty Texture node to the Texture input port of the Randomly Fill Texture node.
  3. Create a float constant node by selecting Constant/float, give it a value (let's say 10) and connect it to Fill Percentage.
  4. Create a color constant node by selecting Constant/Color32, pick a color and connect it to Draw Color.

Tip: You can add new nodes by clicking a port and dragging the connection onto empty canvas space. This will open the create node menu, with only the nodes that can be connected to that port.

Creating a node using this method will automatically connect it to the port.

The Randomly Fill Texture node will now fill 10% of the pixels of the empty texture.

Running the graph

So now that you have a graph with some nodes, lets see if it works. The graph itself doesn't do anything. It just contains the nodes, which represent a set of instructions that need to be executed in a certain order. In order to run those instructions, we need to use a Map Graph Runner.

  1. Go to the hierarchy window and add a new empty object to your scene, give it an appropriate name, Map Graph for example.
  2. Add the Map Graph Runner component to it, by selecting Component/Map Graph/Map Graph Runner.
  3. In the inspector window, fill the Graph field with the Map Graph file you just created.

Tip: You can do also select the Map Graph file in the project window and click the "Add to scene" button in the inspector window. This basically executes steps 1-3 for you.

  1. Open up the Map Graph editor again.

    Tip: You can also do this from the Map Graph Runner inspector, by clicking Open Graph.

  2. Click Run Graph.

You'll now see in the Map Graph editor, how the Randomly Fill Texture node has randomly filled your empty texture with the draw color.

From graph to map

Ok, so now we have a graph and a way to run it, great! But right now it doesn't create a map for us yet. So let's start working on that now.

Map Graph can either generate tilemaps or generate game objects from prefabs.

In this example we'll go with a tilemap. So we'll want to install the 2D Tilemap Editor package:

Note: Depending on which version of Unity and project template you're using it may be installed by default, in which case you can skip these steps.

  1. Open up the package manager, by selecting Window/Package Manager.
  2. Select 2D Tilemap Editor.

    You may need to switch to the "Packages: Unity Registry" view.

  3. Click Install.

Preparing the assets

Now we'll create the assets we need. First we want two tiles, a floor tile and a wall tile.

You'll need to import two textures for these tiles. You can download and import the ones I used in the videos here or you can get some prettier ones. For the purposes of this tutorial, it's best if they're perfectly square though.

Make sure that you set the import settings correctly:

  1. Texture Type to Sprite.
  2. Pixels Per Unit to match the width/height of the texture. (The sprites provided are 16x16.)

    This will make it so that the sprites are 1x1 in world units.

Now we can create the tiles we need, one for floors and one for walls:

  1. In the project window, right-click and select Create/Tile, name this one Floor.

    More recent versions of Unity no longer have the option for creating a single tile, in which case the Create/Tile option will be missing. Map Graph fills this gap by now providing the Create/Map Graph/Tile option, which does pretty much the same thing.

    Alternatively, you can follow steps to create a Tile Palette and the floor and wall tiles:

    1. Create a Tile Palette (which should be located under: Create/2D/Tile Palette/Rectangular, depending on the version of Unity you're using).
    2. Open the Tile Palette editor under Window/2D/Tile Palette.
    3. Make sure the Tile Palette you just created is selected.
    4. Select the floor and wall sprites in the project window and drag them onto the palette editor.
    5. Unity will ask you to provide a name for a new folder in which it will store your new tiles.
  2. Select the tile file and assign the appropriate sprite to it.
  3. Repeat this for the Wall tile.

Next, you'll need to create a Tileset:

  1. In the project window, right-click and select Create/Map Graph/Tileset.
  2. In the project window, select the Tileset asset and create two tile types. In the inspector:
    1. Click + to add a type to the set.
    2. Rename the "New Tile Type" to Floor.
    3. Now add a tile to the type you just created:
      1. Select the Floor type.
      2. Click + under the "Floor Tiles" section.
      3. Assign the Floor tile to the newly created tile field.
    4. Repeat for the Wall type.

Tip: If you add more tiles to a tile type, one of them will be picked each time a tile of that type is placed. So if you want to have more random variation in what walls look like, for example, you could add more tiles to the Wall type. We'll just use the one for now.

Next, we need a Named Color Set. This let's Map Graph know which colors represent which tile types:

  1. Right-click in the project window and select Create/Map Graph/Named Color Set.
  2. Select the named color set asset.
  3. In the inspector, click + to add a named color to the named color set.
  4. Rename the "New Color" to Floor.
  5. Select the color in the color field that you want to represent floor.

    I'm using white for floors and black for walls, but you can use any color you want.

  6. Repeat these steps 3-5 for a color named Wall.

Tip: You can create a Named Color Set by selecting the Tileset asset in the project window and clicking "Generate & link Named Color Set" in the inspector window.

This will generate a Named Color Set with a named color for each tile type in a Tileset.

It will also link the Named Color Set to the Tileset, which means that whenever a tile type is added, deleted or renamed, a corresponding named color is also added, deleted or renamed.

This saves you some time and more importantly, not having to sync the sets by hand, will help you avoid errors.

You can learn more about about linking Named Color Sets here.

Next, assign the named color set to the graph:

  1. Select the graph asset in the project window.
  2. In the inspector, assign the named color set you just created to Named Color Set field.

Adding and assigning parameters

In addition to assigning the named color set, we'll want to pass the tileset and a tilemap to the graph runner. We can achieve this by adding parameters. Select the Map Graph file and in the inspector:

  1. Click + under the "Input Parameters" section and select Tilemap to create a new input parameter of the type Tilemap.
  2. Rename "New Input Parameter" to something more descriptive. Let's call it Map.
  3. Repeat these steps but name it Tiles and give it the type Tileset.

We need the tileset to tell the graph runner which tiles to use and the tilemap parameter to tell the graph runner in which tilemap to place those tiles.

So let's add a tilemap to the scene and pass the parameters to the Map Graph Runner.

  1. Add a tilemap to the scene by selecting GameObject/2D Object/Tilemap.

    Depending on your Unity version, you may need to select GameObject/2D Object/Tilemap/Rectangular instead.

  2. Assign the parameters the Map Graph Runner:
    1. Select the Map Graph Runner object in the hierarchy.
    2. Assign the tilemap object to the Map parameter.
    3. Assign the tileset you created earlier to the Tiles parameter.

Now that we've created and assigned the assets we need, open up the graph editor again.

Creating more nodes

Start by deleting the constant color node, as we're going to replace that with a Named Color node:

  1. Select constant color node.
  2. Press the <delete> key on your keyboard.

Now create the Named Color node:

  1. Open the node creation menu and select Colors/Named Color.
  2. Make sure Floor is the selected value.
  3. Connect the Named Color node's output port to the Default color port of the Empty Texture node.

    This will fill the empty texture with the Floor color.

Create another Named Color node:

Tip: You can right-click a node and select "Duplicate Node" to create a copy of it.

  1. Select Wall for this one.
  2. Connect it to Draw color on the Randomly Fill Texture node.

    This will randomly place the wall color on the texture.

Create a Texture To Tilemap Data node:

  1. Open the node creation menu and select Tilemaps/Texture To Tilemap Data.

    This node will convert the texture data into a tilemap, based on the tileset and the graph's named color set.

  2. Connect the Texture output port of the Randomly Fill Texture node to Texture input port of the Texture To Tilemap Data node.

Create an input node for the Tiles (Tileset) parameter:

  1. Open the node creation menu and select Input/Tiles.
  2. Connect the output port of Tiles to the Tileset input of the Texture To Tilemap Data node.

Create a Copy Tilemap Data node:

  1. Open the node creation menu and select Tilemaps/Copy Tilemap Data.

    This node will copy the tilemap data from the Data source port to the tilemap connected to the Copy To Target port.

  2. Connect the Tilemap output port of the Texture To Tilemap Data node to the Data source input port on the Copy Tilemap Data node.

Tip: Instead of using a Texture To Tilemap Data and a Copy Tilemap Data node, you can use a Texture To Tilemap node, which does the same, in a single node.

Create an input node for the Map (Tilemap) parameter:

  1. Open the node creation menu and select Input/Map.
  2. Connect the output port of Map to the Copy To Target input port on the Copy Tilemap Data node.

Running the graph runner

You're now ready to generate the tilemap:

  1. Go back to the scene view.
  2. Select the Map Graph Runner in the hierarchy view.
  3. Click the Run Graph button in the inspector.

And there it is, your first generated map!

Obviously, it's still very basic, but we're going to work on that in the 3rd tutorial.

3. Adding more nodes

In the next tutorial we're go look at how we can use what we created here to generate maps at runtime.

2. Running a graph at runtime