Como criar um jogo a partir de um template: 7 passos para iniciantes
Da escolha do template até um jogo com o seu nome: os arquivos que você abre, o que mudar primeiro e como testar, hospedar ou virar app.
O jeito mais rápido de criar um jogo quando você está começando é partir de um jogo pronto. Escolha um template de jogo, jogue a demo, leia o manual e troque os textos, as artes e as fases um arquivo de cada vez, testando depois de cada mudança, até o jogo ser seu. Depois disso você hospeda a pasta do jogo num site ou transforma em app. Sem aprender uma engine antes, sem página em branco.
Este guia segue esse caminho em sete passos, com nomes de arquivos reais tirados das páginas e dos manuais dos nossos templates, para você ver como é "mudar as fases" antes de comprar qualquer coisa. Ele foi escrito para quem nunca publicou um jogo: professor, profissional de marketing, desenvolvedor web testando jogos pela primeira vez. Quando um passo exige Node.js ou um editor de código, a gente avisa.
Como criar um jogo a partir de um template: os sete passos
- Escolha um template parecido com o jogo que você quer.
- Jogue a demo até conhecer todas as telas.
- Leia o manual e encontre os arquivos que ele cita.
- Troque textos e idiomas.
- Troque as artes e a marca.
- Mude fases, palavras ou regras.
- Teste, depois hospede o jogo ou transforme em app.
A ordem importa. Texto é a mudança mais segura, então você começa por ela e aprende como os arquivos funcionam. Regras ficam por último porque podem quebrar o jogo de um jeito que demora a aparecer.
Ver templates de jogos para começar
Passo 1: escolha um template perto da sua ideia
Um template só economiza tempo quando você aproveita a maior parte dele. Se você quer um jogo de palavras, comece por um jogo de palavras; transformar um jogo de futebol num quiz é reescrever, não personalizar. Três perguntas ajudam a escolher.
- O que o jogador faz? Toca em pares, traça palavras, mira chutes, organiza peças. Escolha o template cuja ação principal combina.
- Como você vai mudar? Algumas edições aceitam a maior parte das mudanças num arquivo de configuração; outras são projetos em TypeScript que você recompila. A página do produto diz qual é qual.
- Onde ele vai rodar? Todas as nossas edições rodam a partir de um site estático. Apps nativos e publicação em lojas não vêm em nenhuma edição.
Os preços da nossa loja vão de US$ 5 a US$ 59 no preço de tabela, com pagamento em reais por Pix ou cartão na cotação do dia para quem está no Brasil. Cada página de produto tem uma demo ao vivo e uma lista chamada "Não incluído nesta edição". Leia essa lista com a mesma atenção que os recursos.
Passo 2: jogue a demo como quem testa
Jogue a demo por meia hora, não por dois minutos. Abra todos os menus, termine uma fase, perca outra, troque o idioma, recarregue a página e veja se o progresso continua lá. Anote cada tela e cada texto que aparece. Essa lista é o seu mapa para os próximos passos: cada item dela mora em algum arquivo.
Jogue também no celular. Se os seus jogadores vão usar celular, a demo no celular é o teste de verdade do template, não a demo no notebook.
Jogar a demo do Tenguin, puzzle de pares de números
Passo 3: abra o pacote e leia o manual
Um template é uma pasta, não um programa que se instala. Nos nossos pacotes você encontra as mesmas partes, descritas em cada página de produto:
- game/: o jogo pronto para hospedar, com index.html, artes, sons e fontes. É isso que vai para o ar.
- Código-fonte: o código legível que você edita. Em algumas edições, como o Ricopop, os arquivos de game/ já são o próprio código, sem etapa de build. Em outras, como o Gridspark, há uma pasta de código separada que você recompila para dentro de game/.
- Documentação: um manual ilustrado. O do Gridspark traz instalação, personalização, 20 perguntas frequentes e solução de problemas; Ricopop e Zabum trazem também um START-HERE.txt.
- THIRD-PARTY-LICENSES: os avisos de fontes e bibliotecas. Nossos termos pedem que eles fiquem junto do seu produto.
Leia os capítulos de instalação e personalização do manual antes de mexer em qualquer coisa. Eles dão o nome dos arquivos, e cada mudança dos próximos passos começa por um desses nomes.
Passo 4: troque primeiro os textos e os idiomas
Os textos ensinam como os arquivos estão organizados, com pouco risco. Exemplos reais das nossas páginas de produto:
- Gridspark: os textos da interface ficam em src/locales.js.
- Pinloop, Trimora e Twirldrop: os textos da interface estão no i18n.ts, e o brand.ts guarda o nome do jogo.
- Bodoku: os textos ficam nos dicionários de src/i18n, e a página avisa para manter intactos os marcadores de interpolação.
- Golazo: os textos estão nos dicionários de idioma, e as seleções no teams.js.
Os marcadores são a armadilha. Uma linha como "Fase {n} concluída" precisa manter o {n} exatamente igual, em todos os idiomas. Mude as palavras em volta, nunca as chaves.
Os idiomas também pesam na escolha. A maioria das nossas edições traz 14 idiomas de interface; Letter River, Plop e Zabum trazem 3. Tirar um idioma é mais fácil que acrescentar, e acrescentar significa traduzir todas as linhas, não só o menu.
Passo 5: troque as artes e a marca
A licença permite white label: você pode trocar o nome e a logo da Polar Games pelos seus, e alterar código, artes e sons dentro do seu produto. O jeito de fazer depende da edição.
- Tenguin: a maior parte das configurações fica num arquivo só, tenguin.config.js, ao lado do index.html: título, caminho da logo, cor de destaque, idioma padrão, recompensas e preços. Mude um valor, suba o arquivo e recarregue. Sem build.
- Bodoku e Frogdoku: as artes são declaradas em src/art/manifest.ts.
- Pinloop: o brand.ts guarda o título, as cores, os 30 alvos e os 12 cenários; sons e músicas ficam em public/audio.
- Ricopop: música e efeitos são arquivos MP3 que você pode trocar, e o ricopop.config.js controla a tela de "toque para começar" e o botão de tela cheia.
Mantenha o mesmo tamanho e formato da imagem que você substitui. Uma logo com o dobro da largura empurra o menu de um jeito que o código não esperava.
Ver o Pinloop e o arquivo brand.ts
Passo 6: mude fases, palavras ou regras
É aqui que o seu jogo deixa de parecer mais uma cópia. É também onde as ferramentas de teste mais ajudam.
- Ricopop: as 50 fases são mapas de texto em src/levels.js. A ferramenta opcional node tools/validate.mjs confere se toda fase continua possível de vencer depois que você edita um mapa.
- Letter River: palavras e dicas ficam em source/words/en.js, pt.js e es.js, e a geração das fases em source/js/levels.js. O node test/check.js valida as listas de palavras e as 80 fases por idioma.
- Deepforge: câmaras, picaretas, equilíbrio e textos ficam em source/src/data/chambers.ts.
- Gridspark: as constantes das regras e a paleta de cores estão em src/config.js, e as regras do puzzle em game.js, board.js, generator.js e shapes.js.
Regras são a mudança mais arriscada. Mexa num número de cada vez, jogue três rodadas e só então mexa no próximo. Se o jogo ficar estranho, volte à cópia "original" e compare.
Ver o Letter River, jogo de palavras com listas editáveis
Passo 7: teste, depois hospede ou vire app
Teste num servidor local, não com dois cliques
Várias páginas de produto nossas dizem com todas as letras que o jogo não roda a partir de file://, o endereço que aparece quando você dá dois cliques no index.html. Teste por um servidor web local: muitos editores de código têm um, e as ferramentas opcionais de desenvolvimento do Ricopop incluem um. Edições escritas em TypeScript precisam de Node.js para recompilar: o Gridspark, por exemplo, roda npm test e npm run build para copiar os arquivos jogáveis para game/; o Pinloop gera dist/, que você copia para game/.
Hospede
Suba o conteúdo de game/ para qualquer hospedagem estática HTTP(S). Nossas edições não precisam de PHP nem de banco de dados para jogar; Zabum e Ricopop têm ranking opcional em PHP, desligado por padrão. Mantenha todas as pastas ao lado do index.html, como dizem os manuais.
Ou transforme em app
Ferramentas como o Capacitor colocam um jogo web dentro de um projeto Android ou iOS. A página de primeiros passos do Capacitor pede uma pasta com os arquivos web prontos e um index.html na raiz, adiciona as plataformas com npx cap add android e npx cap add ios e copia os arquivos com npx cap sync. Isso já é um passo além da primeira semana de um iniciante, e nenhuma edição nossa inclui build nativo nem publicação em loja; orçamos esse trabalho à parte.
- Toda tela da lista do passo 2 mostra os seus textos e as suas artes.
- O progresso sobrevive a uma recarga da página.
- O jogo funciona no celular, na orientação que você espera.
- Os avisos de THIRD-PARTY-LICENSES continuam junto dos arquivos.
- Você consegue explicar o que mudou, arquivo por arquivo.
O que a licença deixa você fazer com o seu jogo
Cada compra dá uma licença perpétua e não exclusiva para um produto final, seu ou de um cliente. Os jogadores podem acessar de graça ou com monetização por anúncios. Você pode alterar código, artes e sons, e trocar o nosso nome e a nossa logo. Não pode revender nem compartilhar o template, o código ou os recursos isoladamente, como template, kit ou pacote de recursos. O suporte dura 6 meses, ou 12 com a extensão, e cobre instalar e usar os arquivos entregues e defeitos reproduzíveis. Personalização e recursos novos são serviços à parte, com orçamento antes.
Ler os termos completos da licença
Perguntas frequentes sobre como criar um jogo
Dá para criar um jogo sem saber programar?
Dá para mudar bastante coisa sem programar: textos, cores, imagens e algumas configurações ficam em arquivos simples. O Tenguin guarda a maior parte das configurações num único arquivo. Mudar regras ou fases numa edição em TypeScript exige ler um pouco de código e usar Node.js para recompilar.
O que eu preciso ter instalado?
Um editor de código e um navegador bastam para edições sem etapa de build, como Ricopop e Golazo. Edições em TypeScript precisam de Node.js e npm para recompilar; cada página de produto informa a versão.
Posso vender ou publicar o jogo que criei com um template?
Você pode publicar como um produto final, seu ou de um cliente, grátis ou com anúncios. Não pode revender o template ou o código sozinho. Para app pago ou compras dentro do jogo, pergunte antes.
Por que meu jogo abre com a tela em branco quando clico no index.html?
Quase sempre porque ele foi aberto por file://. Rode num servidor web local ou suba numa hospedagem, como os manuais explicam.
Quanto tempo leva?
Depende de quanto você muda. Textos e logo podem levar um dia; fases, artes e regras novas levam mais. Comece pelos textos, publique uma versão de teste e acrescente o resto em rodadas.
Comece por um jogo
Escolha um template, jogue a demo por meia hora e leia o capítulo de personalização do manual. Se os arquivos que ele cita parecem algo que você consegue mudar, você achou o seu ponto de partida. Se preferir que a gente faça as mudanças, mande o template e a sua lista, e respondemos com um orçamento.