Home

Awesome

Unity hex tile editor

A hex-based tile editor for Unity. Built for Bees Won't Exist

Imgur

Check out my YouTube playlist for some examples of it in action.

To test the hex tile system without importing into your own project, just open this Unity project and load up Example Content/Example scene.unity.

If you're interested in getting involved feel free to check out the roadmap on Trello, or submit a pull request.

Contents

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> <!-- END doctoc --> <!-- END doctoc generated TOC please keep comment here to allow auto update -->

Getting started

Importing into your own project

To get started, simply copy the whole Assets/Code/HexTiles folder as well as Assets/Plugins/Fluent-State-Machine.dll into your Unity project. This requires Unity 5.3 or later and has been tested on up to Unity 2018.1.0. Note that Fluent-State-Machine is only required by the editor and does not need to be included in your builds.

Basic use

Creating a tile map

To create a new hex tile map, go to the GameObject menu or right click anywhere in the Hierarchy window in Unity and select Hex tile map from the list of types of objects to create. This will add a new object named "Hex tile map" to your scene. Select it and you will see the inspector for the tile editor which should look something like this:

Default inspector

The tile map editor works in a similar way to Unity's terrain editor - you have several different tools for interacting with the map, and these are accessible from the toolbar at the top of the editor. Click the plus icon to go into tile painting mode and create some tiles.

Tile painting

Tile paint mode

This is the main tool you will use to create tile maps. Moving the cursor over the scene view will show a blue outline where tiles will appear, and you can click and drag to place tiles.

Painting a tile

Adjusting the brush size allows you to paint over a wider area.

Brush size of 4

Adjusting the offset height allows you to click and have tiles appear at an offset to the mouse position. This can be useful when you want to create ledges between tiles at multiple levels. In offset painting mode, the paint height you selects represents the position in the hex map that should be selected by the mouse cursor and is highlighted in white. The position where a new tile will actually appear when you click is stil highlighted blue, but will be offset by the height offset value from the main paint height.

Offset height

In all these cases, you only ever need to paint the tops of tiles. Side pieces will be generated automatically when two tiles at different heights are placed next to each other.

Selecting and inspecting existing tiles

Once you have some tiles in your tile map, you can use the select mode to inspect their properties. This is accessible via the button that looks like a mouse cursor.

Select mode

Click on tiles to inspect their properties. This is useful for checking the elevation of an existing tile before painting other tiles next to it, and you can individually change materials on tiles by selecting them and choosing a different material as well.

Painting materials on existing tiles

Material paint mode can be used to easily and quickly paint different materials onto existing tiles without having to place new tiles over them. Click or drag on an existing tile in the scene view to change its material.

Material paint

Clicking Apply to all tiles will apply the currently selected material to all tiles in the tile map.

Erasing tiles

Erase mode can be used to delete existing tiles. This works in a similar way to Material paint and Paint tiles modes, as you click or drag the cursor on existing tiles to remove them. Like Material paint and Paint tiles, Erase also supports multiple brush sizes for quickly removing large areas of tiles.

Erase mode

Settings and other options

More options are available in the Settings tab, accessible via the cog icon.

Settings

Setting up materials for use with hex tile maps.

See Assets/Example Content/Textures for some examples for how to set up a texture for use with a tile map. Tops of tiles and side pieces are stored on the same texture atlas so that a map can be drawn in a single batch, with the top pieces taking up the top half of the texture and the side pieces taking up the lower half. See the Test tileset image for reference:

Test tileset

The area for the top pieces contains 4x3 tiles, which are numbered in the test tileset. Note that these are slightly stretched vertically, which is necessary to make them fit into a square texture.

The area for the side pieces is split into an upper and a lower half. The top half is only used once and the lower half is looped forever. This is useful for times when you might want the texture from the top to spill over onto the sides for a short while (for example, the grass texture in OutDoorTileset.png). Each hex has 6 sides and these are split up evenly across the texture.

Tips and best practices