Level/map editors

Needs:

• Layers
• Means of determining tile size
• Means of determining grid size

Options

external editor

Use tiled map editor

A guide to level creation with Tiled [ + how to use it with pygame ]

make 2 folders, a tmx and a tsx folder

Without using tiled map editor

reasons

– small game

– online editor

internal editor

Or, just have a built in edit mode

Determining format

layers and parts

file formats

.json data file

tilemap

So, the idea is:

layer – map location x, map location y, tileset x, tileset y

but, for more detail, and slightly more abstracted, the format is:

layer – source – destinationX, destinationY, sourceX, sourceY

How to build a Tile Set Map Editor using HTML Canvas

The down side with this one is that it DOESN’ T output data (as .json or similar…) That would be VERY useful…

has layers

export whole image – png

clear canvas

format –

//Bottom

   {

      //Structure is “x-y”: [“tileset_x”, “tileset_y”]

      //EXAMPLE: “1-1”: [3, 4],

   },

   //Middle

   {},

   //Top

   {};

normailse the mouse clicks in the editor to the base grid size (32×32 for example…)

FLOW of a BASIC EDITOR

make a basic editor interface

UI – 

	CLEAR	EXPORT DATA	EXPORT IMAGE	EXPORT LAYER (IMAGE)
SRC
	edit layer ITEMS
	edit layer TOP
	edit layer MID
	edit layer FLOOR

amount of layers is determined by incoming file

what about a new file?

Texture Packer

https://gammafp.github.io/atlas-packer-phaser/editor

Some basics

Make a new map (.tmx file) – save into tmx folder

orientation: orthogonal

Tile layer format: CSV

Tile render order: Right Down

Map size: w: 24tiles h: 24tiles – 768×768

Tile size: w 128px w 128px

make a new tileset (.tsx file) – save into tsx folder

Type: Based on a Tileset Image

Image – tiles.png

Tile width: 128px (same as tile size width in map)

Tile height: 128px (same as tile height width in map)

Keep layers locked when not in use

Objects

create a new tileset > use type: collection of images

Terrains (39:00)

special tiles that react to their surroundings

corners

edges

corners + edges

Simplest Terrain Set

IMPORTANT: Make sure that EACH rule you are laying down is UNIQUE – or if not, that the tiles are INTENDED to be a variation on a theme – e.g. not totally different…

Make a new tileset (.tsx file) – save into tsx folder

Type: Based on a Tileset Image

Image – terrain_corner.png

Tile width: 128px (same as tile size width in map)

Tile height: 128px (same as tile height width in map)

Save into tsx folder

Click on the ‘Terrain Sets‘ icon

Select ‘+’ icon (lower right) and ‘New Corner Set’

Name it ‘Ground’

Create to ‘textures’: red for ‘Dirt’ and green for ‘Grass’

Draw it like this:

A simple set up:

IMPORTANT: when starting out – use the tileset (NOT the Terrain Set) – and bucket fill the dirt – Tiled Editor needs a starting point…

Use the ‘Patterns’ tab (bottom right) to see which terrains have been used:

All of them!

Case study – A link to the past

Detailed features are clustered together:

See the clusters of bushes/grass blades/flowers 

There are occasionally individual, but mostly in groups

The cliff wall also has interlacing of tiles for change in direction. Red is one set (mainly for horizontal) and Green (mainly for vertical):

What are the specs to be used?

Tiles: (8×8)x2 > 16×16

The tile grid for LoZ is 16 tiles wide by 14 tiles high (including 3 tiles for the status display at the top of the screen). Each tile is 16×16 pixels. Link operates on a half-tile grid, though (32×28 tiles, 8×8 pixels each).

TILES – 8×8

GRID – 32×28 (+6 for UI) – 256px x 224px

DOUBLE TILES – 16×16

GRID – 16×14 (+3 for UI) – 256px x 224px

in the tileset – click on the various images that need custom properties

Create a new property called “name,” and give the image a name.

Setting up Tiled for general awesomeness

Animated tiles

‘Layers’

‘Beginning’ ‘first part’ ‘second part’

Exit – 

Entrance – 

Hole – BLACK

Transport – 

Items – RED – this would be what is INSIDE a pot, for example, NOT if there is a pot there…

Sprite – PINK – Sprite ID and name

Overworld

Dungeons

Music

WOrldmaps

Monologue

the map is 5F

Export

if I want a tileset change, “import tileset” to my current map just long enough to change it

 then “export tileset” from that map.

This will make the tileset external again and, voila, the tileset is changed for all maps that reference it.

Added several export options

These new options can be applied to all export formats, including when

using the Export action to save a map to TMX or JSON.

The options are implemented by making a copy of the map and processing

this copy to apply the selected operations before passing the map to the

writer.

Implemented export options:

* Option to embed tilesets, which avoids needing to load external .tsx

  or .json tileset files.

* Option to detach templates, which allows using the templates feature

  without needing to care about loading external template files. Of

  course, when a lot of template instances exist it will make the map

  file bigger.

* Option to resolve object types and properties. This means copying down

  the type when inherited from the tile, and copying down custom

  properties set on either the object’s tile or the object’s type.

Like this: