Tiled is general purpose game map editor, with support of several map formats (XML, JSON), multi plataform and runs installed or from browser, supports plugins to read and write others map formats and all free (under GPL license).
Installing
You can lauch Tiled via Java Web Start or download it’s lastest version zip file. After download it just unzip it and run:
java -jar tiled.jar
Make sure you have at least Java 1.5 installed and configured.
Creating a empty map
After lauching it, open the menu File → New and create a new 10×10 orthogonal map with 32×32 tiles.
Like this one
Creating a tileset
Now we need to add a tileset to start drawing a map. Let’s use this one
Save the tileset image above. Open the menu Tilesets → New Tileset select Reference tileset image and browser to find the tileset image you saved. Keep tile width and height as 32 and tile spacing and margin as 0.
Notice a new tab on the Tile palette section.
Working with layers
Select the first grass tile from the tileset and select the fill tool ( icon) to create a grass field. Use the paint tool ( icon) to add some stones and trees at random locations on grass. On the Layers section double click at Layer Name and put a name like “field”.
Now let’s create another layer to put the buildings and streets. We can do that by opening the menu Layer → Add Layer or just clicking the icon on layer’s section. Let’s call it “city”.
Now build your city by selecting tiles on the palette and using the paint tool. There’s tiles for horizontal and vertical street and all kinds of intersection. For the building you can click and drag in the palette to select multiple tiles at once.
Saving
You can save the map as tmx (XML Tiled map file) , JSON, LUA, wlk, map (Mappy) or export it as a image. There’s some options accessible on the Edit → Preferences menu like use base-64 gziped encoding.
Thanks to Adam Turk and Bjørn Lindeijer for developing that great project.
In a next post I want to show how to integrate this with a Java/JavaFX game.
Tá fazendo um jogo? Você tem postado tanto sobre isso… xD
Para usar tilesets…. vai ser algum RPG old-school-like? =~~
xD
nah, o Silveira vai lançar um framework pra mmo’s ao estilo FFIII rodando javafx…
acho q está na hora d’eu instalar “jfxdk” aqui…
As imagens indicam um renascimento do batalhão? 🙂
Samuel, talvez. ¬_¬
hello Silveira;
thanks for this great tutorial 🙂
i have some question about the tool;
can i use it to generate a dynamic map;
i mean the tile location will change according to a specific information in the database;
the game that am creating is browser base game;
if that is not doable with that tool, could u please give me some direction to get started 🙂
thanks again 😉
Hi Mona,
This tool can will export the map as a XML file that you can open writing your application in any language.
As a XML file, you can make it dynamic by using a dynamic language in the server side and load information from your database.
Yes, you can use this tool for that you need but you’ll need write additional code for that in your application.
Olá. Estou usando um pluguin que escrevi para o Tiled exportar diretamente para JavaFX.
Se vc se interessar, te envio (acho q fica um pouco grande para opstar o código aqui).
@Marcelo poxa que legal, onde está o código?
where i can get sdk javaFX for linux ?help me ..
Confirm to my email please
Vou postar aqui mesmo. Gera um jar com esta classe aà embaixo, e com este manifest e joga no diretório pluguins do tiled
Manifest
—————————-
Manifest-Version: 1.0
Writer-Class: tiled.plugins.fx.FXMapWriter
—————————–
Classe de exportação do Plug-in
————————————
package tiled.plugins.fx;
import java.awt.Rectangle;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Iterator;
import tiled.core.Map;
import tiled.core.TileLayer;
import tiled.core.TileSet;
import tiled.io.MapWriter;
import tiled.io.PluginLogger;
public class FXMapWriter implements MapWriter
{
public void writeMap(Map map, String filename) throws IOException
{
writeMap(map, new FileOutputStream(filename));
}
public void writeMap(Map map, OutputStream out) throws IOException {
Iterator ml;
TileLayer layer;
ml = map.getLayers();
Formatter writer = new Formatter(out);
int pos1 = map.getFilename().lastIndexOf(File.separator) + 1;
String n = map.getFilename().substring(pos1).replace(“.”, “_”);
writer.format(“// Generated by Tiled – JavaFX Pluguin \r\n”);
writer.format(“var %s = Tilemap {\r\n”, n);
writer.format(“\twidth: %d\r\n”, map.getWidth());
writer.format(“\theight: %d\r\n”, map.getHeight());
writer.format(“\ttileWidth: %d\r\n”, map.getTileWidth());
writer.format(“\ttileHeight: %d\r\n”, map.getTileHeight());
Rectangle b = map.getBounds();
writer.format(“\tbounds: javafx.geometry.Rectangle2D {\r\n”);
writer.format(“\t\tminX: %d\r\n”, b.x);
writer.format(“\t\tminY: %d\r\n”, b.y);
writer.format(“\t\twidth: %d\r\n”, b.height);
writer.format(“\t\theight: %d\r\n”, b.width);
writer.format(“\t}\r\n”);
writer.format(“\timages: [\r\n”);
java.util.Map tileMap = new HashMap();
ml = map.getLayers();
while (ml.hasNext()) {
layer = (TileLayer)ml.next();
for (int y = 0; y < layer.getHeight(); y++)
for (int x = 0; x < layer.getWidth(); x++) {
if (layer.getTileAt(x, y)!=null) {
TileSet ts = layer.getTileAt(x, y).getTileSet();
if (!tileMap.containsKey(ts)) {
writer.format(“\t\tjavafx.scene.image.Image {\r\n”);
String s = new File(layer.getTileAt(x, y).getTileSet().getTilebmpFile()).toURI().toURL().toString();
writer.format(“\t\t\turl: \”%s\”\r\n”, s);
tileMap.put(ts, tileMap.size());
writer.format(“\t\t},\r\n”);
}
}
}
}
writer.format(“\t]\r\n”);
ml = map.getLayers();
writer.format(“\tlayers: [\r\n”);
while (ml.hasNext()) {
layer = (TileLayer)ml.next();
writer.format(“\t\tTilelayer {\r\n”);
writer.format(“\t\t\tname: \”%s\”\r\n”, layer.getName());
writer.format(“\t\t\twidth: %d\r\n”, layer.getWidth());
writer.format(“\t\t\theight: %d\r\n”, layer.getHeight());
writer.format(“\t\t\tvisible: %s\r\n”, layer.isVisible());
writer.format(“\t\t\ttiles: [“);
for (int y = 0; y < layer.getHeight(); y++)
for (int x = 0; x < layer.getWidth(); x++)
if (layer.getTileAt(x, y)!=null)
writer.format(“%d,”, layer.getTileAt(x, y).getId() );
else
writer.format(“-1,”);
writer.format(“]\r\n”);
writer.format(“\t\t\timages: [“);
for (int y = 0; y < layer.getHeight(); y++)
for (int x = 0; x – 1) {
var imgIndex = layer.tileImage(col, row);
var imageTilesPerRow = (images[imgIndex].width / tileWidth) as Integer;
insert
ImageView {
image: images[imgIndex];
x: col * tileWidth
y: row * tileHeight
viewport: Rectangle2D {
minX: ( tileValue mod imageTilesPerRow ) * tileWidth
minY: ( tileValue / imageTilesPerRow ) * tileHeight
height: tileWidth,
width: tileHeight
}
}
into con;
}
}
}
}
return Group {
content: con;
};
}
}
public class Tilelayer {
public-init var name: String;
public-init var width: Integer = 10;
public-init var height: Integer = 10;
public-init var tiles: Integer[];
public-init var images: Integer[];
public-init var visible: Boolean;
public function tileValue(x: Integer, y: Integer) : Integer {
return tiles[x + (y * width) ];
}
public function tileImage(x: Integer, y: Integer) : Integer {
return images[x + (y * width) ];
}
}
Hi.. Parece que o blog pensou que generics era html.
Apaga o comment de cima.
Postei o código aqui: http://freetexthost.com/tnihvpted5
many thanks! helped me get started.
I was wondering what exactly the “Add Object Group” does?
And how do you make it so that you can’t pass through walls and stuff…like a collision layer?
Chris, right now I’m mapping it by hand. I wrote a few posts on that, http://silveiraneto.net/2008/11/06/javafx-defuse-the-bomb/ and http://silveiraneto.net/2008/10/30/javafx-rectangular-collision-detection/.
The best thing to do is use the a layer in the Tiled itself to map the collision blocks.
para colisão e qualquer outra propriedade que se desejar coloacar nas tiles pode-se fazer em Tileset->Tileset Manager->botão edit
Escolha a tile e coloque as propriedades que quiser (colisão, dano – se a tile for um espinho por exemplo) e assim vai…
hi, you’ve stated that you were going to write a tutorial on how to import the map into a java game, do you have this tutorial, i could really use it
[…] seu site pessoal, está disponibilizada uma ferramenta ótima para candidatos à produção de games e […]
Bom gostaria de mostrar a vocês o meu projeto.
– Engine 2d para jogos em formato RPG.
http://www.einformacao.com.br/index.php?option=com_kunena&view=topic&catid=14&id=18&Itemid=1155#22