Criador de Jogos Isométricos com AI — Crie um Mundo 2.5D Explorável no Navegador

Um criador de jogos isométricos com AI pega uma descrição escrita de cena e devolve um mundo 2.5D jogável: uma grade de tiles em losango, uma câmera travada em um yaw de 45 graus, props ordenados de trás para frente e um personagem que você pode enviar a qualquer lugar com um clique. O Neta Studio faz isso no navegador. Você digita a frase, o compositor posiciona o terreno e os props na grade, e você aperta Play. Sem instalar engine, sem etapa de exportação, sem pipeline de build.

As partes que normalmente consomem um fim de semana são exatamente as que já vêm prontas: a projeção 2:1, a ordenação de profundidade e a transformação inversa de tela para tile por trás do clique para mover. O que você realmente controla é o layout, o conjunto de tiles, o personagem, as regras de movimento e até onde a câmera pode se deslocar.

Uma frase → um mundo isométrico

O compositor é a primeira tela. Um campo de texto, um tamanho de mapa em tiles e um tamanho de tile. Você descreve a cena como descreveria a um level designer, gera, e cai no editor com um mundo de grade em losango já montado. O padrão é 64 por 64 tiles, a 64 por 32 pixels por tile, o que coloca uma tela inteira de mundo dentro de uma câmera ortográfica sem precisar de zoom.

O que volta são quatro camadas. O chão armazena um id de terreno por tile e é mesclado em uma única malha, não uma malha por tile. Os props ficam sobre pegadas registradas: um barril 1x1, uma casa 3x3, um cais 2x4 que precisa tocar uma borda de água. As entidades ficam separadas dos props porque se movem e precisam de dados de pathfinding. A iluminação e a névoa ficam por cima e não afetam a ordem de ordenação.

A câmera é definida com um yaw de 45 graus e uma inclinação que corresponde exatamente a um losango 2:1, que é atan(0.5), cerca de 26,57 graus, e não os 30 graus que a maioria dos tutoriais cita. A projeção é ortográfica, então não há divisão de perspectiva e um tile na borda distante do mapa tem o mesmo tamanho em pixels que um tile na borda próxima. A ordenação de profundidade já está ativa antes mesmo de você apertar Play.

Ele escolhe a distribuição de terreno, a densidade de props por bioma e uma paleta que se mantém dentro de um único atlas. Mais importante ainda, ele registra as pegadas, que é o que mantém a oclusão correta depois. Se você pedir uma cidade portuária, recebe cais, caixotes e uma borda de água, mas ele não vai saber que o cais precisa tocar a água a menos que você diga isso.

Repinte o terreno com o pincel, arraste props da biblioteca e defina pontos de spawn. Qualquer coisa com uma regra associada, como uma ponte que precisa atravessar um rio, você mesmo posiciona. O compositor oferece um layout inicial, não uma fase pronta.

A grade em losango e a ordenação de profundidade, resolvidas

Um tile isométrico é um quadrado rotacionado 45 graus e achatado à metade da altura. Com tileW = 64 e tileH = 32, a transformação de mundo para tela é sx = (x - y) * 32 e sy = (x + y) * 16. Essa é a projeção inteira. Não é uma projeção isométrica verdadeira, e sim dimétrica a cerca de 26,57 graus, que é exatamente por isso que losangos 2:1 caem em pixels inteiros e uma grade isométrica verdadeira de 30 graus não cai. A proporção 2:1 é escolhida porque encurta os dois eixos igualmente e permite que cada sprite seja desenhado para um único ângulo de câmera.

A ordem de profundidade sob essa projeção é o algoritmo do pintor: desenhe primeiro o objeto com o menor tileX + tileY. Isso se mantém até dois objetos compartilharem uma diagonal. Uma cerca em (5, 3) e um personagem em (4, 4) ambos produzem a chave 8. Qualquer que seja a ordem que a ordenação retorne, o objeto é desenhado por cima, e se a ordenação não for estável, a ordem muda entre quadros e o par pisca na emenda. A segunda quebra é a altura. Um sprite ancorado pelo centro é ordenado pelo pixel do meio, então uma lanterna de 96 pixels é desenhada sobre um personagem parado na frente da sua base. As âncoras pertencem à parte inferior central do sprite, no tile que o objeto ocupa.

A terceira quebra é o tamanho. Um edifício 3x3 ordenado como um único objeto com chave 20 é desenhado sobre um personagem em (9, 12), chave 21, mesmo que esse personagem esteja parado na frente da coluna esquerda do edifício. A engine lê a pegada registrada e fatia qualquer coisa maior que 1x1 em faixas por coluna, então o personagem passa na frente de uma coluna e atrás da seguinte. É o mesmo motivo pelo qual um muro comprido não pode ser um único sprite.

Clique para mover em uma grade de tiles de verdade

Isso começa com a inversa da projeção. Pegue a posição do ponteiro, subtraia a origem da câmera e qualquer deslocamento de letterbox, então calcule tileX = (sx / 32 + sy / 16) / 2 e tileY = (sy / 16 - sx / 32) / 2, e depois arredonde ambos para baixo (floor). Erre o sinal no segundo termo e o personagem anda até o tile espelhado do outro lado do centro do losango. Esse é o bug no qual você vai gastar uma tarde.

Se a câmera puder girar ou se mover livremente, não guarde essa inversa em cache. Lance um raio da câmera através do ponteiro, intersecte o plano do chão e converta o ponto de impacto no mundo para tiles com as mesmas fórmulas. A versão com raycast tem poucas linhas e sobrevive a qualquer mudança de câmera.

Depois, valide. O tile clicado pode conter uma pegada de prop, ser água, estar fora do mapa ou ser inalcançável. Restrinja coordenadas fora dos limites, verifique a grade de ocupação e rode A* sobre 8 vizinhos com custo diagonal de 1,414 e sem cortar cantos entre dois tiles bloqueados. Mova em tiles por segundo em vez de pixels por segundo, para que a velocidade permaneça constante quando você mudar o tamanho do tile. Percorra os centros dos tiles ao longo de uma spline suavizada com um raio de chegada de cerca de 0,05 tiles, ou o personagem vai engasgar em cada waypoint.

Gêneros isométricos que você pode criar

Quatro gêneros cobrem a maioria dos projetos isométricos, e eles diferem nas regras de ocupação e no tempo, não na projeção. Um construtor de cidades vive de pegadas de vários tiles, uma malha viária que precisa se conectar e um modo de construção que pré-visualiza uma pegada antes de posicionar. O tático é por turnos, então o pathfinding roda para muitas unidades ao mesmo tempo e o destaque de alcance é desenhado direto na grade em losango. Um dungeon crawler usa mapas pequenos e corredores apertados, onde o fatiamento de parede por coluna mais importa, porque a câmera nunca se move. Um action RPG é em tempo real, então direção, estados de ataque e mistura de animações importam mais do que a elegância do pathfinding.

O que permanece idêntico nos quatro: o losango 2:1, a chave de ordenação, a âncora nos pés e a transformação inversa no clique. Trocar de gênero no meio do projeto muda as regras de ocupação e o loop de atualização, não o renderizador.

Jogue agora — no navegador

Todo mundo aqui roda no navegador, sem instalação e sem exportação. O grafo de cena é Three.js, o renderizador é WebGL2 com fallback para WebGL1, e o mapa carrega como geometria de chão mesclada mais props instanciados. Você aperta Play e já está caminhando. Compartilhe o mundo e outra pessoa estará caminhando nele na própria máquina, no mesmo yaw de 45 graus.

Em celulares, o mesmo caminho de clique passa por pointer events, então um toque é um clique. Os alvos de toque são tiles, o que significa que um toque um pouco impreciso em um prop de 1 tile ainda resolve para o tile certo. O zoom por pinça fica desativado por padrão em mapas com menos de 32 tiles de largura, porque o losango 2:1 já é legível na largura de um celular. Se a taxa de quadros cair, corte a quantidade de props antes de cortar o tamanho do mapa; a instanciação ajuda mais do que apagar terreno.

Mini World é o caso de mapa pequeno: uma ilha em losango compacta, alguns props, um personagem, clique para mover por tudo. É a forma mais rápida de observar a mesclagem de chão e a ordenação por tile se comportarem, porque você vê o mapa inteiro de uma vez e não há onde uma chave de ordenação ruim se esconder.

The Cyclops' Island é o caso em que a oclusão realmente importa: props altos, colunas de parede e um personagem que caminha atrás deles. Observe a quina de um edifício enquanto o personagem passa por ela. A faixa da frente é desenhada sobre o personagem, a faixa de trás é desenhada sob ele, e em nenhum momento o personagem atravessa a parede.

O Agent Sprite Forge produz folhas de personagem desenhadas para o ângulo isométrico, com o pivô já na parte inferior central e a altura do quadro igualada à altura do seu tile. Mantenha a câmera no yaw padrão e uma folha basta. Ative a rotação de câmera e você vai precisar de uma folha por passo de yaw, porque um sprite desenhado para 45 graus fica errado a 90.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de criar e coloque-a em um mundo onde alguém possa caminhar — uma ilha pequena, um planeta, uma esquina chuvosa. Todo mundo neste site foi feito a partir de uma descrição escrita e publicado como uma página que você pode jogar.

FAQ