Do protótipo à base: a ilhota chega ao iPhone

Seven Tides é um jogo cozy de construir ilhas em hexágonos, em 3D low-poly. Você é Lia, uma aprendiz de cartógrafa que naufraga num arquipélago que afundou há cem anos. Cada hex que ela posiciona é um pedaço de terra que o mar devolve. A ideia central do jogo cabe numa frase: a terra devolve o que você cuida. Se você corta a floresta inteira de uma vez, o solo cansa; se planta, deixa descansar e combina bem os vizinhos, a ilha rende mais.

O plano é uma campanha de sete ilhas mais um final, pensada para 50 a 70 horas, e um pós-jogo sem fim. Vai rodar no navegador do computador e, pelo Capacitor, no iPhone; o Android vem depois.

Somos o Studio125, e este é o primeiro registro do nosso processo. Antes de qualquer coisa: ainda não dá para jogar. O que existe hoje é a base, a ilhota inicial com o visual que queremos, rodando no computador e no iPhone. É disso que trata este post.

De protótipo a base

O jogo começou como um protótipo de um arquivo HTML só, com o Three.js carregado de CDN. Serviu para achar o visual e a sensação, mas não dava para testar nem para levar ao celular. A Fase 0 foi reconstruir tudo como projeto de verdade, sem mudar a cara:

O que mudou por baixo (e por que importa):

• TypeScript estrito, Vite e Three.js numa versão fixa, em vez de um arquivo solto com scripts de terceiros. O app agora funciona offline: nenhuma fonte ou biblioteca vem de fora.
• Regras separadas da tela. A parte que decide as coisas (matemática dos hexágonos, sorteio, câmera, hora do dia) não conhece o Three.js; um verificador automático barra qualquer import que quebre essa separação.
• Sorteio com semente. O protótipo sorteava árvores e arbustos a cada carga. Agora a ilhota é a mesma toda vez, o que torna possível comparar versões e, mais tarde, simular a campanha inteira para medir o tempo de jogo.
• Câmera que enquadra a ilha em retrato e em paisagem, e perfis de qualidade desktop e mobile, porque o WebView do celular tem menos memória gráfica e pode perder o contexto 3D (o app se recupera sozinho).

O visual foi conferido item a item contra o protótipo, lado a lado: céu, água e espuma, silhueta da ilha, luz e sombras, bloom, tilt-shift, correção de cor e adereços. Os oito itens fecharam como “igual”.

Do meio-dia ao pôr do sol

A hora do dia é um controle no painel “Visual”. Tudo muda junto: céu, luz do sol, cor da água e o tom geral da imagem.

Um detalhe técnico que nos agradou: o Three.js atual soma 2,6 vezes mais brilho no bloom do que a versão do protótipo para o mesmo valor. Foi preciso baixar a força de 0,55 para 0,19 para a espuma e a lamparina brilharem como antes, e não estourarem.

O farol

Lá longe, já há um farol apagado, e um barquinho que dá voltas ao redor da ilha. Reacender esse farol é o objetivo do capítulo 1.

No iPhone, e o bug da ilha escura

O mesmo build roda dentro de um shell Capacitor no simulador do iPhone, em pé e deitado, com as áreas seguras respeitadas (notch, Dynamic Island, barra inferior).

Quando abrimos no simulador, a ilha estava quase preta. No computador estava tudo certo. A causa estava na sombra: o tipo de sombra suave que o Three.js usava (PCF) não funciona no WebKit do iOS, e tudo caía em sombra. A saída foi trocar para sombras de variância (VSM), que dão o mesmo visual macio e funcionam em todo lugar.

(As árvores mudaram de lugar entre as duas capturas porque a semente da ilha foi trocada no meio do caminho.)

A orientação final do celular, em pé ou deitado, ainda não está decidida. Vamos decidir depois de ter o gesto de posicionar um hex, que é o que mais depende dela, e com medidas num aparelho de verdade.

Escolhendo a ilha

Como a ilhota agora vem de uma semente, escolhemos a disposição das árvores por olho. Testamos doze, e ficamos com a 11.

Como estamos construindo

Cada fase tem uma especificação escrita antes do código, com requisitos numerados, e cada requisito vira teste. Cada tarefa é um commit pequeno, e para conferir se os testes realmente pegam erros, quebramos o código de propósito e vemos se algum teste falha. Na checagem visual, o critério é nosso: cada item só fecha quando dizemos que está igual ao protótipo.

O que vem agora

1. Fase 1, o motor do prólogo: coletar recursos, cartas na mão, objetivos, equilíbrio da ilha e save automático. É a primeira vez que dá para jogar.
2. Fase 2, a prévia de vizinhança: ao escolher uma carta, os números verdes e vermelhos aparecem sobre os vizinhos antes de confirmar. É o que transforma o jogo num quebra-cabeça.
3. A decisão de orientação do celular, e então o capítulo 1, com o faroleiro Bento.

No próximo post mostramos o prólogo jogável.