Uma ilha isométrica jogável no navegador, com personagem 2D em 8 direções.
Código, arte, animações, sons e vozes criados com Inteligência Artificial.

▶ Jogar no navegador · Rodar localmente · Documentação técnica · LinkedIn do autor

Iso Miko é um projeto independente, feito para estudo, experimentação e aprendizado. A ideia foi testar até onde dá para chegar construindo um jogo pequeno, mas caprichado, com IA em todas as etapas: a ilha pintada, a personagem e as animações dela, os efeitos, os sons, as falas e o código.

O foco é a movimentação natural de uma personagem 2D em 8 direções: parar, andar, correr, deslizar e lançar bola de fogo. O cenário é uma pintura isométrica transformada em mapa jogável, com alturas, escadas, paredes e objetos que escondem a personagem quando ela passa por trás.

Apresentação inicial: na primeira visita, a Iso Miko apresenta a ilha com voz e texto.	A ilha: praia, degraus de pedra, escadaria até o torii, cascata e mar animado.

• Animação dirigida pela distância: a cadência do passo acompanha a velocidade e os pés não patinam. O giro passa pelas direções intermediárias em vez de estalar.
• Pipeline de sprites: as spritesheets geradas por IA chegam com escala variando, tremido e ciclos desalinhados. Ferramentas próprias em Node normalizam altura, alinham o tronco, detectam o ciclo do passo e montam os atlas.
• Cenário a partir de uma pintura: a ilha é ampliada com rede neural (Real-ESRGAN), recortada e classificada pixel a pixel (areia, grama, pedra, água). Cada pixel ganha profundidade, para a personagem sumir atrás de árvores, rochas e do torii.
• Física: colisão com deslize rente às paredes, degraus com altura contínua, deslize com impulso e atrito, bola de fogo que explode ao bater.
• Som medido: cada arquivo é medido ao carregar (sonoridade BS.1770) e equilibrado pelo alvo da mixagem. Os passos são fatiados do arquivo e tocados no instante em que o pé toca o chão.

Os detalhes de cada parte estão na documentação técnica.

https://userjesus.github.io/iso-miko/

• Precisa de computador, com teclado e mouse. Em celular e tablet aparece um aviso explicando a limitação.
• Precisa de um navegador com WebGL. Foi desenvolvido e testado no Chrome.
• Na primeira visita, a apresentação aparece antes do jogo. Depois de concluída, ela não se repete. Para rever, abra com ?apresentacao no fim do endereço.

Precisa do Git e do Node.js 24 (a versão usada no desenvolvimento; o deploy também usa a 24).

git clone https://github.com/userJesus/iso-miko.git
cd iso-miko
npm install
npm run dev

Abra http://localhost:5180. Com npm run dev, a tecla ' (` no teclado americano) mostra o painel de ajustes: velocidades, passada, som, câmera e um demo automático das 8 direções.

Os assets já processados estão versionados em public/, então o jogo roda sem estes passos. Eles só são necessários se você mudar a arte original em assets-src/:

O npm run level usa o Real-ESRGAN para ampliar a pintura. O executável não vai no repositório: baixe a versão para Windows e extraia em .tools/esrgan/. Sem ele, o pipeline amplia com Lanczos e avisa. Todos aceitam --debug (ex.: npm run sprites -- --debug), que grava imagens de conferência em .sprite-debug/.

O jogo é publicado pelo workflow .github/workflows/deploy.yml a cada push na main: ele instala as dependências, roda npm run build e publica o dist/. O andamento fica na aba Actions.

Para publicar um fork: em Settings → Pages, escolha Source: GitHub Actions e faça um push na main. O jogo fica em https://<seu-usuário>.github.io/<nome-do-repositório>/. Como o build usa caminhos relativos (base: './' no vite.config.ts), funciona com qualquer nome de repositório.

Tecnologias: three.js (renderização WebGL), TypeScript, Vite, sharp (processamento de imagem nos pipelines), lil-gui (painel de ajustes), Real-ESRGAN (ampliação da pintura) e a fonte Fredoka.

assets-src/     arte e sons originais (como saíram da geração por IA)
tools/          pipelines em Node que transformam a arte em assets do jogo
public/         assets processados, servidos pelo jogo
src/            o jogo (TypeScript)
  character/    locomoção, deslize, bola de fogo, escolha de frame
  level/        cenário: alturas, colisão, profundidade e oclusão
  fx/           projétil, explosão e poeira
  audio/        mixagem, medição de sonoridade, sons do jogo
  ui/           HUD, apresentação, aviso para celular, painel de ajustes
docs/           documentação técnica e imagens do README

A estrutura arquivo por arquivo está na documentação técnica.

Código e assets sob a licença MIT: pode usar, estudar, modificar e redistribuir, mantendo o aviso de copyright. A exceção é a fonte Fredoka, que segue a SIL Open Font License.

As artes de divulgação ficam em docs/media/, incluindo as versões para o LinkedIn em docs/media/linkedin/.

Feito por Jesus. LinkedIn · GitHub

Iso Miko is an open-source isometric web game (three.js + TypeScript + Vite) focused on natural 8-direction movement of a 2D character: idle, walk, run, slide and fireball, on a hand-painted island turned into a playable level with heights, stairs, walls and per-pixel occlusion. Code was written with Claude Opus 5.5; art and sprite-sheet animations were generated with ChatGPT, using motion references from Move Studio (the author's own tool); sound effects and voice lines come from ElevenLabs.

Play it in the browser (desktop only: keyboard and mouse). To run locally: git clone https://github.com/userJesus/iso-miko.git && cd iso-miko && npm install && npm run dev, then open http://localhost:5180. MIT licensed.