Como fazer um jogo no Bitsy: guia do primeiro jogo terminado

Se você nunca terminou um jogo na vida e quer mudar isso hoje, aprender como fazer um jogo no Bitsy é o caminho mais curto que existe. O Bitsy é um editor gratuito que roda dentro do navegador, no endereço bitsy.org, sem instalar nada e sem escrever uma linha de código. Em uma tarde dá para sair do zero e ter um arquivo pronto para mandar para alguém. Ele não vai fazer o próximo grande sucesso, e tudo bem: a proposta é outra. É a porta de entrada mais simples para quem quer sentir, de verdade, como é criar um mundinho jogável e colocá-lo de pé.

Este guia é para o iniciante absoluto: a criança ou adolescente curioso, o pai ou a mãe procurando uma primeira ferramenta para o filho, ou o artista que quer contar uma micro-história em pixel art. Vou explicar o que o Bitsy faz, montar com você o primeiro jogo passo a passo e ser honesto sobre onde ele para, para você saber qual é o degrau seguinte.

O que é o Bitsy e para que ele serve

O Bitsy foi feito para criar pequenos mundos que a gente explora andando numa grade. Você controla um personagem (o avatar), caminha por salas, esbarra em outros personagens que dizem alguma coisa, pega itens e usa saídas para passar de uma sala para outra. É basicamente isso. A graça está em usar essas peças simples para contar uma história curta ou criar um clima.

Três coisas definem o espírito da ferramenta:

• Roda no navegador, de graça. Você abre bitsy.org e o editor já está lá, na mesma página onde o jogo aparece. Nada de download, conta ou pagamento.
• É pixel art minúscula. Cada peça é desenhada numa gradinha pequena, quadradinho por quadradinho. Não precisa saber desenhar bem; o tamanho reduzido é generoso com quem está começando.
• Usa poucas cores. Por padrão, um jogo do Bitsy tem uma paleta enxuta: uma cor de fundo, uma cor para os tiles e uma cor para os sprites. Essa limitação não é defeito, é o que mantém tudo simples e coeso.

Antes de abrir o editor, vale conhecer o vocabulário. São só cinco palavras e elas se repetem o tempo todo.

O vocabulário do Bitsy

• Sala (room): a tela onde a ação acontece, uma grade quadrada. Seu jogo é feito de uma ou várias salas ligadas entre si.
• Tile: a peça de cenário. É o que forma paredes, chão, água, grama. O mesmo tile pode ser repetido pela sala inteira.
• Sprite: um personagem. O avatar é um sprite especial (você), e todo outro sprite pode ter uma fala.
• Item: algo que o jogador pega ao passar por cima. Some do chão quando coletado e pode mostrar uma mensagem.
• Saída (exit): um ponto que teleporta o jogador para outra sala (ou outro lugar da mesma sala). É assim que o seu mundo cresce.

Guardadas essas cinco palavras, o resto é desenhar e clicar.

Como fazer um jogo no Bitsy: o passo a passo

Abra bitsy.org. Você vai ver o jogo de exemplo rodando de um lado e, do outro, as ferramentas de edição divididas em abas: uma para desenhar tiles, outra para sprites, outra para itens, e os controles da sala. Não tenha pressa de entender tudo. Vamos construir uma cena pequena e cada aba vai fazer sentido conforme você a usa.

1. Crie a sua primeira sala

O editor já começa com uma sala. Antes de mais nada, limpe o cenário do exemplo para ter espaço livre. Selecione a ferramenta de tile, escolha "apagar" ou o tile vazio e passe pela grade tirando o que não interessa. Sobrou uma sala em branco: é a sua tela.

Agora desenhe um tile de parede. Na aba de tiles, crie um novo tile e pinte, quadradinho por quadradinho, algo que pareça uma parede (um bloco cheio já resolve). Com esse tile selecionado, volte para a sala e contorne as bordas, formando um quarto fechado. Pronto: você tem um espaço com limites por onde o avatar não passa, porque no Bitsy tiles de parede bloqueiam a passagem.

Capriche pouco. O objetivo agora é entender o fluxo, não fazer arte de galeria.

2. Coloque o avatar no lugar certo

O avatar é o único sprite que já existe desde o começo: é o personagem que o jogador controla. Na aba de sprites, selecione o avatar e, se quiser, redesenhe o bonequinho na gradinha para ter a sua cara. Depois clique dentro da sala, numa posição livre, para definir onde ele começa. Teste andando com as setas do teclado na janela do jogo, ali do lado. Ele deve caminhar pela grade e esbarrar nas paredes que você desenhou.

Esse é o primeiro momento mágico: já dá para se mexer dentro de algo que era uma tela em branco há dois minutos.

3. Adicione um personagem com diálogo

Aqui o Bitsy começa a virar história. Na aba de sprites, crie um novo sprite (não o avatar). Desenhe um personagem, um bicho ou um objeto que fale, tanto faz. Posicione-o na sala, num canto que o jogador vá alcançar.

Com esse sprite selecionado, procure o campo de diálogo e escreva a fala dele, por exemplo: "Você chegou. Estava te esperando." Volte ao jogo, ande até encostar no personagem e a caixa de texto aparece. Essa é a ferramenta narrativa central do Bitsy: quase toda a história é contada por essas falas curtas quando o jogador toca em alguém.

Dica: escreva pouco por caixa. Frases curtas cabem melhor e mantêm o ritmo.

4. Espalhe um item para o jogador pegar

Itens dão ao jogador algo para fazer além de andar e conversar. Na aba de itens, crie um novo item e desenhe-o (uma chave, uma flor, uma moeda). Coloque-o em algum ponto do chão da sala. Você pode associar uma mensagem que aparece no momento da coleta, algo como "Você encontrou a chave."

Quando o jogador passa por cima, o item some do chão e, se você configurou, a mensagem surge. Simples assim. Com um item e um diálogo você já tem os ingredientes de uma micro-missão: converse com o personagem, descubra que falta a chave, ache a chave.

5. Crie uma saída para uma segunda sala

Um jogo de uma sala só já conta como jogo terminado, mas ligar duas salas é o que dá sensação de mundo. Crie uma segunda sala (um novo espaço em branco, com suas próprias paredes). Depois use a ferramenta de saída: você marca um ponto na primeira sala e indica para qual sala e para qual posição ele leva. Faça o caminho de volta também, com outra saída na segunda sala apontando para a primeira, para o jogador não ficar preso.

Teste andando até a saída. Ao pisar nela, o avatar deve reaparecer na outra sala. Agora o seu mundinho tem dois ambientes, e é aí que a exploração ganha vida.

6. Exporte o jogo como HTML

Chegou a hora de transformar isso num jogo que abre sozinho. No Bitsy, procure a opção de exportar (geralmente em "Download" ou "Export"). Ele gera um único arquivo HTML: esse arquivo é o seu jogo inteiro, cenário, personagens, falas e tudo. Abra-o em qualquer navegador para conferir, ou mande para um amigo, que ele vai conseguir jogar clicando duas vezes.

Faça também o seguinte, e isso é importante: guarde os dados do jogo (o texto que o próprio Bitsy usa para reconstruir o projeto). Se você fechar a aba sem salvar esses dados, não dá para voltar a editar depois. Salve num arquivo de texto seu, por segurança. Se quiser publicar de verdade, dá para subir o HTML em sites como o itch.io e ter um link para compartilhar.

Terminou? Então parabéns de verdade: você tem um jogo completo, do começo ao fim. Muita gente que sonha em fazer jogos nunca chega nesse ponto.

O que o Bitsy NÃO faz (e por que isso é bom agora)

Ser honesto sobre os limites evita frustração. O Bitsy foi desenhado para ser pequeno, e algumas coisas simplesmente não estão no cardápio:

• Movimento é em grade, casa por casa. Não existe corrida livre, pulo nem física. O personagem anda como num tabuleiro.
• Não tem ação. Nada de mirar, atirar, apanhar dano ou tempo correndo. O jogo é sobre explorar e ler.
• Os jogos são minúsculos. Poucas salas, poucas cores, telas pequenas. Isso é característica, não bug.
• Sem menus complexos, inventário elaborado ou save de progresso no formato que engines grandes oferecem.

Por que isso é uma vantagem para quem começa? Porque tira todas as decisões difíceis do caminho. Você não trava escolhendo motor, resolução, sistema de física ou linguagem. Sobra energia para a única coisa que importa no primeiro jogo: ter uma ideia e levá-la até o fim. Terminar um projeto pequeno ensina mais do que abandonar um projeto ambicioso na metade.

Terminou o primeiro jogo? Esse é o degrau, não o topo

Se você chegou até aqui e gostou da sensação de criar, ótimo, é exatamente esse o objetivo. O Bitsy cumpriu o papel de porta de entrada. O erro seria parar por aqui achando que criar jogos é só isso, ou desistir por sentir que faltou "movimento de verdade". O caminho natural é subir um degrau.

O próximo passo lógico continua acessível e sem susto: o Scratch. Ele ainda é visual, mas já traz lógica de jogo real, movimento livre, pontuação, colisões e interação. Veja no nosso guia de como criar um jogo no Scratch como fazer essa transição sem dor. É o passo que transforma "montei um mundinho" em "programei um comportamento".

Se quem vai criar é uma criança mais nova, ainda em fase de alfabetização, comece mais atrás: o ScratchJr para crianças usa blocos com ícones em vez de texto e é feito para essa idade. E se você é pai ou mãe tentando entender como apoiar esse interesse sem gastar errado nem empurrar cedo demais, vale ler o nosso guia para pais cujo filho quer criar jogos, que organiza a jornada por etapas.

Depois do Scratch vem o mundo das engines de verdade, onde os jogos deixam de ser minúsculos e você aprende a programar para valer. Mas uma coisa de cada vez. Hoje, o combinado é simples: abra o bitsy.org, siga os seis passos deste guia e não feche a aba sem exportar o seu primeiro jogo. Terminar um projeto, por menor que seja, é o hábito que separa quem sonha em fazer jogos de quem faz. Comece pequeno, termine de verdade e dê o próximo passo quando a vontade bater. Ela vai bater.