GMBR
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Últimos assuntos
» Alguém aí quer um tutorial?
por Raffxz Ontem à(s) 17:48

» [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor
por TRFN Ontem à(s) 09:54

» [Vídeo] Tutorial jogo de plataforma completo com o GameMaker
por TRFN Ontem à(s) 09:52

» EvoluShip (DevLog)
por JOZ. Sex 05 Ago 2022, 21:57

» Aulas particulares. Alguém?
por Pit Bull Seg 01 Ago 2022, 15:41

» Ajuda menu interativo
por Y0hh Ter 26 Jul 2022, 15:43

» Dúvida de programação
por Y0hh Ter 26 Jul 2022, 15:39

» como fazer parguntas e aceitar respostas escritas pelo player
por Y0hh Ter 26 Jul 2022, 15:36

» Block Room
por Joton Dom 24 Jul 2022, 20:29

» Beyond the Storm - Um remake não-oficial de Tyrian! (Devlog)
por leo150250 Qui 21 Jul 2022, 13:35

» [Mini Evento] Mini Jam Musical #2
por Diemorth Ter 21 Jun 2022, 15:29

» Moth-Kubit Grimes RPG 2D
por theguitarmester Ter 21 Jun 2022, 11:11

» Kingdom And Slaves
por theguitarmester Seg 20 Jun 2022, 11:40

» Como fazer o texto no draw_gui seguir o player pela room?
por Willy Ter 07 Jun 2022, 14:09

» Achar o valor da variável de uma instância
por Asutsuo Qui 26 Maio 2022, 16:17

» Prof Hero - Animação 2D
por efraim leonardo Qua 25 Maio 2022, 19:45

» grappling hook
por gabrielsantos Seg 23 Maio 2022, 22:37

» Endless Fire
por Wallace_ank Qui 12 Maio 2022, 14:08

» alguém entende movimento de nave ?
por chinogamo Sex 06 Maio 2022, 23:59

» [Tutorial] Básico ao avançado - Movimentação avançada 2D
por chinogamo Qua 04 Maio 2022, 18:44

» Criação de Game MMORPG
por GabrielXavier Qua 04 Maio 2022, 16:51

» tenho uma duvida
por chinogamo Dom 01 Maio 2022, 10:32

» [Mini Evento] Mini Jam de Arte #3
por Diemorth Dom 24 Abr 2022, 22:44

» Flupye Ranch (#LD50)
por JOZ. Sex 22 Abr 2022, 12:59

» [Mini Evento] Mini Jam de Roteiros #2
por Diemorth Seg 18 Abr 2022, 15:33


[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor

4 participantes

Ir para baixo

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor

Mensagem por Mr.Rafael Sex 24 Jun 2022, 12:41

Tutorial de Como Criar Exports Para o Tiled Map Editor

Introdução

O Tiled Map Editor é um editor de níveis gratuito e open-source.

Esta ferramenta é especialmente útil para quando se está desenvolvendo jogos sem game engines. Independente de quais bibliotecas/frameworks você use, é muito difícil fazer um jogo sem ter pelo menos uma ferramenta visual para ajudar, principalmente quando você quer que um jogo tenha várias fases.

O Tiled é excelente em situações como essa, pois te ajuda a evitar ter que criar um editor inteiro do zero, e muitas bibliotecas/frameworks e até game engines suportam importar/exportar mapas feitos nele.

Infelizmente, "muitas" não é igual a "todas": A Phaser, por exemplo, permite a importação de arquivos TMX diretamente, enquanto o GameMaker Studio 2 utiliza seu próprio formato de fases, e não possui opção de importação.

Em situações como essa, o Tiled oferece opções para exportar suas fases para vários outros formatos. No caso do exemplo acima, o Tiled permite exportar nossos mapas diretamente para o formato do GMS2.

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 01

Mas e quando temos uma biblioteca/framework que não suporta o formato do Tiled? Ou quando estamos usando uma game engine com muitas funcionalidades boas, mas com um editor de fases péssimo/obsoleto?

E é daqui que surge este tutorial: estarei ensinando como escrever nossos próprios exports para o Tiled.

Assim como fiz no meu antigo tutorial do Blender, não pretendo estender muito nesse também. No mais, é outro tutorial destinado a mim mesmo. Se de repente eu esquecer ou precisar de informação extra, pretendo ir deixando aqui o que eu for aprendendo, de forma simples e objetiva.

Iniciando

Afim de estender suas funcionalidades, o Tiled oferece suporte a extensões, que podem ser escritas em JavaScript. Isso inclui, é claro, nossos próprios exports.

Começando pelo começo... vamos baixar o Tiled:
Link de download do Tiled Map Editor

Depois de instalado, abra o Tiled e vá em "Editar > Preferências...".

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 02

Na aba "Plugins", você encontrará o diretório de extensões lá embaixo. Clique em "Abrir..." e você terá a pasta aberta em seu explorador de arquivos.

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 03

As extensões do Tiled são escritas em JavaScript. Para instalar uma extensão, tudo que precisamos fazer é copiar um arquivo .js para esta pasta. Isso, é claro, inclui também a nossa própria extensão de export.

Quando um arquivo .js é copiado para esta pasta, o Tiled carrega a extensão automaticamente. Não é necessário fechar nem reabrir nada.

Documentação


Para não se perder no tutorial, recomendo guardar estes links. Esta é a documentação oficial do Tiled:

  • Scripting — Tiled Documentatino
  • Tiled Scripting API

Para este tutorial, utilizaremos a função tiled.registerMapFormat(shortName, mapFormat), que convenientemente já possui um exemplo para nós escrito na documentação.

Arquivos do tutorial


Caso ache necessário, os arquivos usados para fazer o tutorial estão disponíveis abaixo:
Link de download do conteúdo do tutorial

O jogo

Para ajudar a criar nosso export de exemplo, vamos imaginar um jogo...

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 04

Vamos chamar este jogo de Dungeon Quest!
Este dungeon crawler é composto de 3 camadas.

O chão, em uma camada de tiles onde os personagens podem atravessar livremente:

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 05

As paredes, em uma camada de tiles que bloqueia o movimento:

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 06

E os sprites, em uma camada de objetos que representarão nossos personagens:

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 07

O jogo contém 5 sprites:

  • Herói: personagem principal controlado pelo jogador.
  • Ogro: inimigo do jogador.
  • Dinheiro: coletáveis que aumentam a pontuação do jogador.
  • Comida: coletáveis que aumentam a saúde do jogador.
  • Porta: Quando o herói avança até ela, o jogador vai para a próxima fase.

Este é o tileset que usaremos (créditos: Loveable Rogue, por Surt):

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Tileset

Simples, não é? Veja como esta fase aparece no editor:

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 08

Para converter nosso mapa corretamente, ele deverá possuir 3 camadas:

  • Sprites (camada de objetos)
  • Walls (camada de tiles)
  • Floor (camada de tiles)

O formato

Nosso formato de fases será um arquivo JSON contendo esta estrutura:

Código:
{
   "width": 160,
   "height": 160,
   "floor": [
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1]
   ],
   "walls": [
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
      [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1]
   ],
   "player": { "x": 0, "y": 0 },
   "exit": { "x": 0, "y": 0 },
   "coins": [
      { "x": 0, "y": 0 }
   ],
   "food": [
      { "x": 0, "y": 0 }
   ]
   "enemies": [
      { "x": 0, "y": 0 }
   ]
}

O formato não é tão complicado. O fato de ser um JSON torna as coisas ainda mais fáceis para nós, já que o JSON é suportado naturalmente pelo JavaScript.

Já temos um jogo, um tileset, um mapa e uma estrutura de arquivo. Vamos começar!

A extensão

Script


Abra o Tiled e mantenha ele aberto. Feito isso, vamos até o diretório de extensões para criar um arquivo chamado dungeon_quest.js. O código inicial do nosso arquivo será este:

Código:
/// <reference types="@mapeditor/tiled-api" />

/**
 * Exporter de exemplo para o nosso jogo, o Dungeon Quest.
 */
let dungeonQuestExporter = {
   /** Nome do exporter. */
   name: "Dungeon Quest level",

   /** Extensão de arquivo que será salvo. */
   extension: "json",
   
   /**
     * Exporta o arquivo.
     *
     * @param {TileMap} map Mapa.
     * @param {string} fileName Nome do arquivo.
     */
   write(map, fileName) {
      // Dados do mapa exportado.
      let mapData = {
         width: 0,
         height: 0,
         floor: [],
         walls: [],
         player: { x: 0, y: 0 },
         exit: { x: 0, y: 0 },
         coins: [],
         food: [],
         enemies: []
      };
      
      // Criar e escrever arquivo...
      let file = new TextFile(fileName, TextFile.WriteOnly);
         file.write(JSON.stringify(mapData));
         file.commit();
   }
};

// Registrar exporter no Tiled...
tiled.registerMapFormat("dungeon", dungeonQuestExporter);

Assim que você criar e salvar este arquivo, o Tiled carregará nossa extensão automaticamente. Note como a nossa opção de exportar já aparece imediatamente:

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 09

Fique de olho também no console embaixo do editor. Erros de script aparecerão lá:

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 10

Para escrever o nosso export, usaremos as funções da API do Tiled para ler as propriedades do mapa e adaptaremos ela de acordo com a estrutura que decidimos anteriormente. O formato já está expresso na variável mapData, então tudo que precisamos fazer é ir preenchendo seus valores aos poucos.

Vamos começar pelo mais fácil: o tamanho.

Tamanho do mapa


O tamanho do mapa pode ser obtido utilizando os seguintes valores:

  • map.width: Largura do mapa, em tiles.
  • map.height: Altura do mapa, em tiles.
  • map.tileWidth: Largura dos tiles.
  • map.tileHeight: Altura dos tiles.

No nosso formato, queremos o tamanho da fase inteira. Para isso, é só multiplicar os valores.

Código:
// Dados do mapa exportado.
let mapData = {
   width: map.tileWidth * map.width,
   height: map.tileHeight * map.height,
   floor: [],
   walls: [],
   player: { x: 0, y: 0 },
   exit: { x: 0, y: 0 },
   coins: [],
   food: [],
   enemies: []
};

Camadas


Para converter nossa fase, teremos que explorar todas as camadas do mapa. Para isso, utilizaremos este loop:

Código:
// Percorrer camadas...
for(let i = 0; i < map.layerCount; i++) {
   let layer = map.layerAt(i);
   
   // Ações para camadas de tiles:
   if(layer.isTileLayer) {
      // ...
   }
   
   // Ações para camadas de objetos:
   else if(layer.isObjectLayer) {
      // ...
   }
}

As funções para obter as camadas são auto-explicativas:

  • map.layerCount: Retorna a quantidade de camadas do mapa.
  • map.layerAt(index): Retorna um objeto de camada no índice específicado.

Depois de obter a camada, podemos fazer uso dos seguintes valores:

  • layer.width: Largura da camada, em tiles.
  • layer.height: Altura da camada, em tiles.
  • layer.isTileLayer: Indica se a camada é de tiles.
    layer.isObjectLayer: Indica se a camada é de objetos.

Vamos começar pelos tiles.

Tiles


As camadas de tiles possuem uma função que nos ajudará bastante:
  • layer.cellAt(x, y): Retorna uma célula nas coordenadas de tile especificadas.

Com isso, podemos percorrer todos os tiles da camada e organizá-los em uma Array 2D, do jeito que está a estrutura do nosso formato de mapas.

Para deixar o código de conversão mais limpo, vamos criar uma nova função to2DArray(layer), que converterá esta camada para nós:

Código:
/**
 * Converte uma camada em uma Array 2D.
 *
 * @param {TileLayer} layer Camada.
 * @returns {number[][] | null}
 */
function to2DArray(layer) {
   // Caso a camada não seja de tiles, a função não continuará...
   if(!layer.isTileLayer) {
      return null;
   }

   // Linhas do tileset (Array 2D).
   let rows = [];

   // Percorrer linhas da camada...
   for(let y = 0; y < layer.height; y++) {
      let column = [];

      // Percorrer colunas da camada...
      for(let x = 0; x < layer.width; x++) {
         column.push(layer.cellAt(x, y).tileId);
      }

      // Salvar tiles coletados:
      rows.push(column);
   }

   return rows;
}

E como vamos diferenciar o chão das paredes?
Para isso, utilizaremos os nomes das camadas como referência. Com isso, conseguimos obter os tiles:

Código:
// Percorrer camadas...
for(let i = 0; i < map.layerCount; i++) {
   let layer = map.layerAt(i);
   
   // Encontrar tiles...
   if(layer.isTileLayer) {
      let layerName = layer.name.toLowerCase();
      let expected = ["floor", "walls"];
      
      if(expected.includes(layerName)) {
         mapData[layerName] = to2DArray(layer);
      }
   }
   
   // Ações para camadas de objetos:
   else if(layer.isObjectLayer) {
      // ...
   }
}

Com isso, agora temos Arrays 2D!
Vamos aos objetos.

Objetos


Para ler os objetos, utilizamos este valor:
  • layer.objects: Array de objetos da camada.

E como vamos diferenciar os objetos, se não declaramos nada neles?
Para isso, utilizaremos o ID do tile que compõe o objeto. Isto pode ser obtido usando o valor mapObject.tile.id.

Você pode descobrir os IDs selecionando um tile no editor e verificando suas propriedades.

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor 11

Na imagem acima, descobrimos que o herói possui o ID 15.
Vamos identificar todos os IDs e oranizá-los em constantes:

Código:
/** ID do sprite do herói. */
const SPR_PLAYER = 15;

/** ID do sprite do ogro. */
const SPR_ENEMY = 16;

/** ID do sprite do dinheiro. */
const SPR_COINS = 17;

/** ID do sprite da comida. */
const SPR_FOOD = 18;

/** ID do sprite da porta. */
const SPR_EXIT = 19;

Agora é só percorrer os objetos:

Código:
// Percorrer objetos...
for(let mapObject of layer.objects) {
   let tileId = mapObject.tile.id;

   // Herói.
   if(tileId === SPR_PLAYER) {
      mapData.player.x = mapObject.x;
      mapData.player.y = mapObject.y;
   }

   // Ogro.
   else if(tileId === SPR_ENEMY) {
      mapData.enemies.push({ x: mapObject.x, y: mapObject.y });
   }

   // Dinheiro.
   else if(tileId === SPR_COINS) {
      mapData.coins.push({ x: mapObject.x, y: mapObject.y });
   }

   // Comida.
   else if(tileId === SPR_FOOD) {
      mapData.food.push({ x: mapObject.x, y: mapObject.y });
   }

   // Saída.
   else if(tileId === SPR_EXIT) {
      mapData.exit.x = mapObject.x;
      mapData.exit.y = mapObject.y;
   }
}

Resultado


Com tudo já escrito, este é o nosso código final:

Código:
/// <reference types="@mapeditor/tiled-api" />

/** ID do sprite do herói. */
const SPR_PLAYER = 15;

/** ID do sprite do ogro. */
const SPR_ENEMY = 16;

/** ID do sprite do dinheiro. */
const SPR_COINS = 17;

/** ID do sprite da comida. */
const SPR_FOOD = 18;

/** ID do sprite da porta. */
const SPR_EXIT = 19;

/**
 * Converte uma camada em uma Array 2D.
 *
 * @param {TileLayer} layer Camada.
 * @returns {number[][] | null}
 */
function to2DArray(layer) {
   // Caso a camada não seja de tiles, a função não continuará...
   if(!layer.isTileLayer) {
      return null;
   }

   // Linhas do tileset (Array 2D).
   let rows = [];

   // Percorrer linhas da camada...
   for(let y = 0; y < layer.height; y++) {
      let column = [];

      // Percorrer colunas da camada...
      for(let x = 0; x < layer.width; x++) {
         column.push(layer.cellAt(x, y).tileId);
      }

      // Salvar tiles coletados:
      rows.push(column);
   }

   return rows;
}

/**
 * Exporter de exemplo para o nosso jogo, o Dungeon Quest.
 */
 let dungeonQuestExporter = {
   /** Nome do exporter. */
   name: "Dungeon Quest level",

   /** Extensão de arquivo que será salvo. */
   extension: "json",
   
   /**
     * Exporta o arquivo.
     *
     * @param {TileMap} map Mapa.
     * @param {string} fileName Nome do arquivo.
     */
   write(map, fileName) {
      // Dados do mapa exportado.
      let mapData = {
         width: map.tileWidth * map.width,
         height: map.tileHeight * map.height,
         floor: [],
         walls: [],
         player: { x: 0, y: 0 },
         exit: { x: 0, y: 0 },
         coins: [],
         food: [],
         enemies: []
      };

      // Percorrer camadas...
      for(let i = 0; i < map.layerCount; i++) {
         let layer = map.layerAt(i);

         // Encontrar tiles...
         if(layer.isTileLayer) {
            let layerName = layer.name.toLowerCase();
            let expected = ["floor", "walls"];

            if(expected.includes(layerName)) {
               mapData[layerName] = to2DArray(layer);
            }
         }

         // Encontrar objetos...
         else if(layer.isObjectLayer) {
            let layerName = layer.name.toLowerCase();
            let expected = ["sprites"];

            if(expected.includes(layerName)) {

               // Percorrer objetos...
               for(let mapObject of layer.objects) {
                  let tileId = mapObject.tile.id;

                  // Herói.
                  if(tileId === SPR_PLAYER) {
                     mapData.player.x = mapObject.x;
                     mapData.player.y = mapObject.y;
                  }

                  // Ogro.
                  else if(tileId === SPR_ENEMY) {
                     mapData.enemies.push({ x: mapObject.x, y: mapObject.y });
                  }

                  // Dinheiro.
                  else if(tileId === SPR_COINS) {
                     mapData.coins.push({ x: mapObject.x, y: mapObject.y });
                  }

                  // Comida.
                  else if(tileId === SPR_FOOD) {
                     mapData.food.push({ x: mapObject.x, y: mapObject.y });
                  }
                  
                  // Saída.
                  else if(tileId === SPR_EXIT) {
                     mapData.exit.x = mapObject.x;
                     mapData.exit.y = mapObject.y;
                  }
               }
            }
         }
      }
      
      // Criar e escrever arquivo...
      let file = new TextFile(fileName, TextFile.WriteOnly);
         file.write(JSON.stringify(mapData));
         file.commit();
   }
};

// Registrar exporter no Tiled...
tiled.registerMapFormat("dungeon", dungeonQuestExporter);

Ao exportar o arquivo de mapa visto no exemplo, o arquivo gerado é este:

Código:
{"width":160,"height":160,"floor":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,10,10,10,10,-1,-1,-1,-1,-1],[-1,10,10,10,10,-1,-1,-1,11,-1],[-1,10,10,10,10,-1,-1,-1,11,-1],[10,10,10,10,10,-1,-1,-1,11,-1],[-1,10,10,10,10,-1,-1,-1,11,-1],[10,10,10,10,10,-1,-1,-1,11,-1],[-1,10,10,10,10,-1,11,11,11,-1],[-1,10,10,10,10,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]],"walls":[[8,5,9,-1,7,8,9,-1,0,-1],[1,-1,-1,-1,-1,1,0,-1,-1,-1],[1,-1,-1,-1,-1,1,-1,-1,-1,0],[13,-1,-1,-1,-1,1,-1,0,-1,-1],[-1,-1,-1,-1,-1,13,0,-1,-1,-1],[6,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[3,-1,-1,-1,-1,-1,-1,-1,-1,-1],[1,-1,-1,-1,-1,3,-1,-1,-1,-1],[8,5,5,5,5,14,-1,-1,-1,0]],"player":{"x":128,"y":48},"exit":{"x":48,"y":16},"coins":[{"x":0,"y":80},{"x":0,"y":112},{"x":16,"y":128},{"x":16,"y":144},{"x":32,"y":144}],"food":[{"x":96,"y":160},{"x":144,"y":144}],"enemies":[{"x":16,"y":32},{"x":32,"y":64},{"x":64,"y":48},{"x":64,"y":96}]}

Vamos formatar este arquivo utilizando o Prettier e ver o resultado:

Código:
{
  "width": 160,
  "height": 160,
  "floor": [
    [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, 10, 10, 10, 10, -1, -1, -1, -1, -1],
    [-1, 10, 10, 10, 10, -1, -1, -1, 11, -1],
    [-1, 10, 10, 10, 10, -1, -1, -1, 11, -1],
    [10, 10, 10, 10, 10, -1, -1, -1, 11, -1],
    [-1, 10, 10, 10, 10, -1, -1, -1, 11, -1],
    [10, 10, 10, 10, 10, -1, -1, -1, 11, -1],
    [-1, 10, 10, 10, 10, -1, 11, 11, 11, -1],
    [-1, 10, 10, 10, 10, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1]
  ],
  "walls": [
    [8, 5, 9, -1, 7, 8, 9, -1, 0, -1],
    [1, -1, -1, -1, -1, 1, 0, -1, -1, -1],
    [1, -1, -1, -1, -1, 1, -1, -1, -1, 0],
    [13, -1, -1, -1, -1, 1, -1, 0, -1, -1],
    [-1, -1, -1, -1, -1, 13, 0, -1, -1, -1],
    [6, -1, -1, -1, -1, -1, -1, -1, -1, -1],
    [-1, -1, -1, -1, -1, -1, -1, -1, -1, 0],
    [3, -1, -1, -1, -1, -1, -1, -1, -1, -1],
    [1, -1, -1, -1, -1, 3, -1, -1, -1, -1],
    [8, 5, 5, 5, 5, 14, -1, -1, -1, 0]
  ],
  "player": { "x": 128, "y": 48 },
  "exit": { "x": 48, "y": 16 },
  "coins": [
    { "x": 0, "y": 80 },
    { "x": 0, "y": 112 },
    { "x": 16, "y": 128 },
    { "x": 16, "y": 144 },
    { "x": 32, "y": 144 }
  ],
  "food": [
    { "x": 96, "y": 160 },
    { "x": 144, "y": 144 }
  ],
  "enemies": [
    { "x": 16, "y": 32 },
    { "x": 32, "y": 64 },
    { "x": 64, "y": 48 },
    { "x": 64, "y": 96 }
  ]
}

Nosso export está finalizado! Agora, podemos utilizar o Tiled para criar e exportar fases para nosso jogo diretamente.

Fim


E este é o fim do tutorial. É difícil encontrar informação decente sobre extensões do Tiled, pelo menos em português. Então acho que será algo muito útil de se guardar por aqui.

Antes de conhecer esta API de extensões, o que eu fazia era converter para JSON e depois passava o arquivo em outro script, que cortava as partes que o Tiled exporta que eu não precisava e reorganizava no formato do jogo que eu estava desenvolvendo. Com uma extensão, eu consigo transformar as fases com muito mais facilidade.

Espero que isso ajude em alguma coisa. Até mais! flw

o/
Mr.Rafael
Mr.Rafael

Games Ranking : Nota A

Notas recebidas : A-C-B-A-A
Data de inscrição : 05/10/2010
Reputação : 93
Número de Mensagens : 499
Prêmios : [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty

Medalhas x 0 Tutoriais x 2 Moedas x 0

Ouro x 1 Prata x 1 Bronze x 3

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

theguitarmester gosta desta mensagem

Ir para o topo Ir para baixo

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty Re: [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor

Mensagem por theguitarmester Sex 24 Jun 2022, 16:21

Ferramenta interessante, e bom tutorial, simples mais útil, e, é bom as vezes tirar um tempo pra escrever coisas, fazer algo diferente e criar conteúdo, talvez alguém que leia nem venha a usar isso, mas só de ser apresentado para essa ferramenta, já pode ter ideias de pesquisar por ela e por outras com ideias similares e então agregar algo a sua pilha de desenvolvimento...

E possivelmente tu vai ajudar algumas pessoas com esse tutorial mas nunca saberá quem, mas faz parte de ensinar coisas na internet, e é bacana Very Happy
theguitarmester
theguitarmester

Games Ranking : Nota C

Notas recebidas : B + C
Data de inscrição : 28/02/2012
Reputação : 134
Número de Mensagens : 2166
Prêmios : [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty

Medalhas x 0 Tutoriais x 4 Moedas x 0

Ouro x 2 Prata x 2 Bronze x 1

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 1
Plataformas :
  • Unity


http://guitarmester.no.comunidades.net/index.php?pagina=19362978

Ir para o topo Ir para baixo

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty Re: [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor

Mensagem por guest Ontem à(s) 02:02

@Mr.Rafael

Faço questão de deixar um agradecimento aqui, não pelo tutorial em si, afinal ele me ajudou em absolutamente nada pra entender como trabalhar com objetos no Tiled, mas pelo vislumbre da relativa facilidade em criar um export customizado.

Não é segredo que o editor de rooms do GM(insira_sua_versao_aqui) beira o ridículo no que se refere a tileset, mas até mesmo manipular objetos pode se tornar um fator de desânimo pro seu workflow.

Abaixo um pequeno exemplo de máscaras de colisão que utilizo:
[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Phase_10

São 28 instâncias de 8x8 px que alongadas compõe o "terreno" e alguns "delimitadores" usados pelo comportamento dos inimigos. Parece bastante simples adicionar e ajustar isso no editor do GM... parece... deveria ser... mas não.

Esticar com o mouse muitas vezes resulta em comprimentos/larguras inconsistentes com o grid, cliques pra deselecionar que adicionam mais um instância do primeiro objeto que a lista dispõe e nem vamos falar sobre tentar mover uma instância que está sobreposta pela área da sprite de outra...

O Tiled não só faz a mesma coisa (essa imagem acima é exportada dele, por sinal) como dispõe de inúmeras facilidades:
- Layers (OK, o GMS 2 introduziu isso, mas não chega nem no chulé do que o Tiled permite);
- Manipuladores (handlers) bem explícitos pra transformar os shapes (objetos);
- Ferramentas como "balde de tinta" e possibilidade de selecionar/adicionar múltiplos tiles de uma vez;
- Possibilidade de gerar um "sorteio" de tiles (muito útil pra preencher uma área com um grupo de tiles de maneira aleatória);
- Suporte à definição de propriedades/flags/etc. customizados nos tiles e objetos;

Essa é uma pequena lista que me vem à mente agora APENAS no que tange o básico que deveria existir no editor do GM, visto o porte da engine em outros $entidos.

Mas enfim, com a motivação propiciada por este tutorial acabei buscando mais uma vez aprender a trabalhar com objetos no Tiled e não apenas consegui como obtive o seguinte export custom:
[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Export10

E não meus caros, isso ai não é nenhum prettier.io da vida, é o output direto do Tiled!

Pra quem quiser conferir o source:
guest
guest

Games Ranking : Sem avaliações

Data de inscrição : 07/08/2022
Reputação : 0
Número de Mensagens : 1
Prêmios : [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty Re: [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor

Mensagem por TRFN Ontem à(s) 09:54

@Mr.Rafael

Gostei bastante do tutorial, parabéns pela iniciativa! Sem dúvidas vai ajudar bastante a galera do fórum. Tutorial bem detalhado, show demais!

_________________

Aulas de desenvolvimento Web.   study
Para saber mais, basta me contactar via MP.
 cyclops
Desenvolvedor PHP, CSS, Javascript e HTML5 blz

Acesse: https://site13.com.br/
Meu Git: https://github.com/TRFN
avatar
TRFN

Games Ranking : Nota C

Notas recebidas : C + C + C
Data de inscrição : 16/01/2012
Reputação : 70
Número de Mensagens : 1184
Prêmios : [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty

Medalhas x 0 Tutoriais x 1 Moedas x 0

Ouro x 1 Prata x 0 Bronze x 2

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Plataformas :
  • Game Maker 8.0 ou 8.1
  • Game Maker Studio 2.0
  • Tululoo Game Maker
  • Web Tecnology
  • Javascript
  • Outros


https://linkedin.com/in/trfn

Ir para o topo Ir para baixo

[TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor Empty Re: [TUTORIAL][2D] Como Criar Exports Para o Tiled Map Editor

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos