ENPT
Todos os projetos

Mr Frog eats bugs

Game Designer
Ir para01 O Jogo
01

O Jogo

Mr.Frog eats bugs é um jogo survivors-like incremental em que você controla um sapo, comendo os insetos que nascem ao seu redor e se aprimorando para ficar mais forte.

O jogo inteiro gira em torno de um único clique: o primeiro clique lingua um inseto para dentro da boca do sapo, o seguinte cospe ele como um projétil. Alguns insetos são perigosos demais para serem linguados, então o único jeito de lidar com eles é atirando outros insetos neles.

Cada inseto comido vira moeda para quatro aprimoramentos que deixam você sobreviver mais, andar mais rápido, alcançar mais longe e liberar ondas mais difíceis.

  • O sapo parado

    Parado

  • O sapo parado com um inseto na boca

    Boca cheia

    Pronto pra cuspir

  • O sapo andando

    Andando

  • O sapo caindo

    Morrendo

O sapo parado, de boca cheia, andando e morrendo
O sapo voltando para a tela rastejando
De volta pra mais

Quando o sapo morre, ele volta rastejando para a tela, pronto para gastar o que comeu em aprimoramentos e começar a próxima run.

02

Contribuição

Mr.Frog foi feito em uma jam de 3 dias por uma equipe de sete pessoas, com dois game designers: eu e Davi Figueiredo, que fizemos o design juntos.

  • Conceito do jogo: as primeiras ideias e como elas se juntaram no jogo final;
  • Inimigos: o brainstorm, as regras de forma e cor e o design de cada inseto;
  • Aprimoramentos: o sistema de upgrades, seus custos e seu balanceamento;
  • Ondas: a composição de inimigos e o intervalo de spawn de cada onda, e o pool de ondas;
  • Menus: os layouts do menu e o fluxo entre as telas;
  • Juiciness e produção: o planejamento de partículas e animações, e a lista de todos os sons e sprites que a equipe precisava.
03

Inspirações

Mr.Frog mistura algumas coisas que a gente adora em algo pequeno o suficiente para uma jam.

Arte de The Binding of Isaac, com o Isaac chorando cercado de monstros
The Binding of Isaac

Uma única sala vista de cima em que os inimigos vêm de todos os lados, com um personagem pequeno se defendendo no meio.

Arte de Everything is Crab, uma criatura azul com garras de caranguejo
Everything is Crab

Tanto de gameplay quanto de visual: uma criaturinha fofa evoluindo de tanto comer, cercada de outras criaturas num ritmo de survivors-like.

Abertura de Hora de Aventura, com o Finn e o Jake em cima de uma montanha
Hora de Aventura

O tom fofo e meio esquisito, com contornos grossos e personagens que são engraçados só de olhar.

Além disso, os survivors-like em geral deram o loop: ondas de inimigos, uma run que acaba quando você morre e aprimoramentos entre as runs.

Antes de qualquer arte ser desenhada, colamos o sapo em cima de outros jogos para testar como ele ficaria numa arena vista de cima e num cenário de pântano:

O sapo colado em uma sala de The Binding of IsaacO sapo com a língua para fora em cima de um manguezal do MinecraftGameplay de Everything is Crab, com o jogador cercado de criaturas
04

As duas primeiras ideias

O jogo começou como duas ideias diferentes, as duas sobre um sapo comendo insetos.

Mockup de um sapo no meio da tela com abelhas e um escorpião ao redor
Ideia 1: o sapo survivors

Um sapo andando livre por uma arena num survivors-like, cercado de insetos que ele pode comer e coisas que ele não pode, como o escorpião.

Mockup de um sapo na parte de baixo da tela mirando a língua numa abelha, com setas mostrando ele pulando para os lados
Ideia 2: o sapo da língua

Um sapo visto de lado que pula para a esquerda e para a direita na parte de baixo da tela e mira a língua nos alvos ao redor.

Gold Miner de cabeça para baixo, com a garra subindo até uma pepita de ouro
Gold Miner, de cabeça para baixo

A segunda ideia veio do Gold Miner: virando ele de cabeça para baixo, a garra que desce atrás do ouro vira uma língua que sobe atrás dos insetos.

O sapo com uma língua vermelha comprida esticada até um ponto
Uma mistura das duas

Da primeira ideia, o sapo anda livre pela arena; da segunda, ele lingua tudo com uma língua que se mira.

05

Brainstorm de inimigos

Com o loop principal decidido, a próxima pergunta era o que linguar. Listamos ideias de inimigos pela forma como eles interagem com a língua e com os projéteis: inimigos que você precisa evitar, inimigos que valem um projétil ou três, inimigos com escudo, pesados que puxam o sapo, explosivos, invocadores e mais.

Cada ideia foi marcada como "fazer com certeza" (✔) ou "fazer se der tempo" (★), o que manteve a lista realista para uma jam de 3 dias.

Quadro de ideias de inimigos, cada nota descrevendo quantos projéteis o inimigo vale, algumas marcadas com check e outras com estrela
O brainstorm de inimigos. ✔ significa "fazer com certeza", ★ significa "fazer se der tempo"
06

Regras de design

Para que cada inseto fosse fácil de entender de relance, cada um segue uma regra de forma e cor:

  • Redondos e azuis: lentos e bobinhos;
  • Quadrados e amarelos: rápidos e mais agressivos;
  • Pontudos e vermelhos: não lingue. Nunca.

Também tinha uma decisão sobre os projéteis: cada inimigo teria sua própria versão de projétil, ou todo inseto comido viraria um projétil genérico? Fomos com um projétil para cada inimigo, para que você sempre veja o que está prestes a cuspir. Os projéteis giram enquanto voam.

Quadro de regras de design: redondos e azuis são lentos, quadrados e amarelos são rápidos e agressivos, pontudos e vermelhos significam morra; e a escolha entre um projétil por inimigo ou um projétil genérico
O quadro de regras de design. A estrela marca a opção de projétil que escolhemos
  • Projétil da mosca, uma mosca azul encolhida

    Mosca

  • Projétil da abelha, uma abelha amarela encolhida

    Abelha

  • Projétil do besouro, um besouro sem carapaça encolhido

    Besouro

O projétil de cada inseto comestível

Mais dois projéteis foram desenhados mas ficaram de fora do jogo: o genérico, da opção que não escolhemos, e um do escorpião, já que o escorpião não pode ser comido.

  • Projétil genérico, uma bola verde com pedaços de todos os insetos

    Genérico

    Não usado

  • Projétil do escorpião, um escorpião rosa encolhido

    Escorpião

    Não usado

07

Os insetos

Quatro insetos entraram no jogo, cada um com sua própria velocidade e sua própria reação a ser linguado.

  • A mosca, um inseto azul redondo de olhos vermelhos

    Mosca

    Lenta · Comestível

    Lenta e fácil, o lanchinho perfeito. Vai para dentro da boca ao ser linguada e é cuspida na direção mirada.

  • A abelha, um inseto amarelo quadrado e bravo

    Abelha

    Rápida · Comestível

    O inseto mais rápido, então coma ela antes que ela chegue em você. Funciona igual à mosca.

  • O besouro, um inseto amarelo com carapaça azul

    Besouro

    Lento · Blindado

    A primeira linguada quebra a carapaça, a segunda come ele. Projéteis também quebram a carapaça antes de matar.

  • O escorpião, um inseto rosa pontudo com contorno vermelho

    Escorpião

    Médio · Perigoso

    Não pode ser linguado, a língua machuca você. O contorno vermelho avisa para cuspir outros insetos nele.

Todo inseto machuca o sapo ao encostar e morre ao ser atingido. O besouro tem um segundo sprite para depois que perde a carapaça:

O besouro sem carapaça andando
Besouro sem carapaça

Depois da primeira linguada ou do primeiro projétil, o besouro está a um golpe de ser comido.

Cada inseto foi descrito primeiro em um card de design, listando o que acontece quando ele é linguado, cuspido, encostado e danificado, com a vida, a velocidade (as botinhas) e o valor dele:

Card de design da moscaCard de design da abelhaCard de design do besouroCard de design do escorpião

O valor no canto de cada card vem de um plano antigo: cada inseto valeria uma quantidade diferente de uma moeda só (mosca 1, abelha 2, besouro 3, escorpião 4). Depois abandonamos isso para que cada inseto funcione como sua própria moeda.

08

Conteúdo cortado

Alguns designs não entraram na versão da jam:

StinkbugCard de design do Stinkbug

Um inseto que explode ao ser cuspido, encostado ou danificado, matando na hora todos os insetos ao redor. Comer ele transformaria o próximo tiro em um projétil explosivo.

O inseto do frenesiCard de design de um inseto sem nome

Um inseto sem nome que deixaria o sapo em frenesi ao ser comido. Ele nunca passou da fase de ideia.

Mockup de uma abelha rainha grande cercada de abelhas menores
A Abelha Rainha

Um chefe para o fim do jogo, cercado pelas abelhas dela. Foi planejado, mas não ficou pronto até o fim da jam.

09

Aprimoramentos

O sistema de aprimoramentos partiu do Bento Bugs, em que você gasta o que coleta numa prateleira de potes, cada um subindo o nível de um atributo diferente.

Tela de aprimoramentos de Bento Bugs, três potes de vidro com upgrades nas etiquetas
Bento Bugs

Aprimoramentos mostrados como potes numa prateleira, com o nível na etiqueta.

As primeiras ideias de upgrades eram três linhas com preços em moedas: uma para a língua (alcance, velocidade da língua e hold time), uma para vida e velocidade de movimento, e uma que multiplicava o valor de todo inseto.

Três tabelas de níveis e preços em moedas, para a língua, para vida e velocidade, e para o valor dos insetos
As primeiras ideias de upgrades, ainda com preços em moedas

Na versão final não existem moedas nem valores de inseto: cada inseto é sua própria moeda, e todo upgrade custa uma mistura delas.

  • Ícone do upgrade Mais corações, um coração vermelho

    Mais corações

    2 níveis

  • Ícone do upgrade Tênis maneiro, as pernas do sapo com tênis de asinhas

    Tênis maneiro

    8 níveis

  • Ícone do upgrade Língua maior, a língua do sapo esticada

    Língua maior

    10 níveis

  • Ícone do upgrade Mais insetos, uma mosca, uma abelha e um escorpião com um sinal de mais

    Mais insetos

    7 níveis

Os quatro aprimoramentos

Os aprimoramentos ficam num tronco na tela inicial. Passar o mouse em um mostra o que o próximo nível faz e quanto custa.

O tronco de upgrades com os quatro aprimoramentos no nível 1O tronco de upgrades com o Mais insetos em destaque, mostrando Liberar Onda 2 por 10 moscas

O número de níveis de cada aprimoramento vem do escopo que queríamos:

  • Mais insetos, 7 níveis: oito ondas eram suficientes para uma jam, e a primeira já está liberada desde o começo;
  • Mais corações, 2 níveis: o sapo chega no máximo a 3 corações;
  • Tênis maneiro, 8 níveis: passos suficientes para uma progressão suave da velocidade, até +200%;
  • Língua maior, 10 níveis: alterna entre alcance e velocidade da língua, cinco níveis de cada, os dois até +100%.

Os custos acompanham as ondas: os preços pedem insetos que você só consegue depois de liberar as ondas em que eles aparecem, então o Mais insetos dita o ritmo de todos os outros upgrades.

Mais corações

NívelEfeitoCusto
11 → 2 de vida10 :fly: 9 :bee:
22 → 3 de vida20 :fly: 6 :scorpion: 4 :beetle:

Tênis maneiro

NívelVelocidade de movimentoCusto
1+0% → +10%3 :fly:
2+10% → +25%7 :fly:
3+25% → +40%10 :fly: 3 :bee:
4+40% → +60%15 :fly: 5 :bee:
5+60% → +80%18 :fly: 10 :bee: 4 :scorpion:
6+80% → +100%20 :fly: 15 :bee: 6 :scorpion:
7+100% → +150%20 :fly: 20 :bee: 8 :scorpion:
8+150% → +200%25 :bee: 9 :scorpion: 4 :beetle:

Língua maior

NívelEfeitoCusto
1Alcance +0% → +10%4 :fly:
2Velocidade da língua +0% → +10%8 :fly:
3Alcance +10% → +25%11 :fly: 4 :bee:
4Velocidade da língua +10% → +25%16 :fly: 7 :bee:
5Alcance +25% → +50%20 :fly: 10 :bee: 6 :scorpion:
6Velocidade da língua +25% → +50%21 :fly: 15 :bee: 8 :scorpion:
7Alcance +50% → +75%22 :fly: 20 :bee: 9 :scorpion:
8Velocidade da língua +50% → +75%30 :bee: 11 :scorpion: 6 :beetle:
9Alcance +75% → +100%35 :bee: 11 :scorpion: 8 :beetle:
10Velocidade da língua +75% → +100%40 :bee: 13 :scorpion: 10 :beetle:

Mais insetos

NívelPool de ondasCusto
1Ondas 1–210 :fly:
2Ondas 1–315 :fly:
3Ondas 1–420 :fly: 8 :bee:
4Ondas 2–525 :fly: 15 :bee:
5Ondas 3–630 :fly: 17 :bee: 9 :scorpion:
6Ondas 4–720 :bee: 15 :scorpion:
7Ondas 5–850 :bee: 15 :scorpion: 8 :beetle:
10

Ondas

O jogo tem oito ondas, cada uma com sua própria mistura de insetos e um intervalo de spawn que vai de 1,5 segundo na primeira onda até 0,5 segundo na última. As moscas dominam as primeiras ondas, abelhas e escorpiões tomam conta do meio, e os besouros chegam no final.

Uma run passa por todas as ondas do pool, em ordem. O upgrade Mais insetos adiciona a próxima onda a ele, mas só quatro ondas podem estar no pool ao mesmo tempo: a partir da quinta, liberar uma onda tira a mais antiga, então uma run passa pelas ondas 2 a 5, depois 3 a 6, e assim por diante. Assim as runs ficam mais difíceis em vez de só mais longas.

Junto com o limite de quatro ondas, uma escolha que fizemos mais tarde, no balanceamento das ondas: a run inteira usa o intervalo de spawn da maior onda do pool. Com as ondas 3 a 6 liberadas, por exemplo, os insetos nascem a cada 0,75 segundo desde a primeira onda da run.

Tabela das oito ondas com o intervalo de spawn e quantos de cada inseto elas têm, com as ondas 5 a 8 dentro de um quadrado verde
Planejamento das ondas. O quadrado verde mostra o pool no último nível, ondas 5 a 8
11

A arena

A arena é uma clareira no pântano. Os insetos nascem logo fora da tela do jogador, então estão sempre chegando pelas bordas, o que pode ser dentro da arena ou na área ao redor dela. Essa área de fora é um grande colisor que só o sapo não consegue atravessar: os insetos entram por ali livremente.

A arena, uma clareira clara no pântano com poças, cercada de árvores e raízes do lado de fora da borda
A arena
12

Menus

Os menus passaram por nove layouts antes de escolhermos um. A maioria explorava onde os upgrades deveriam ficar e como o jogador vai deles até uma nova run. O planejamento também mapeou um fluxo entre telas, com créditos e uma tela de opções.

Fomos com o número 8, que coloca tudo na tela inicial, com o nome temporário do jogo, Frongue.

Nove mockups numerados do menu, com o painel de upgrades em lugares diferentes
Os layouts de menu que exploramos
O layout escolhido, a tela inicial com o tronco de upgrades, ligada por setas vermelhas às telas da run, dos créditos e das opções
O layout escolhido e o fluxo planejado entre as telas

Na versão da jam, o menu é só esta tela: o tronco de upgrades e botões para começar uma run, tocar um som de sapo (com algumas variações), ver os créditos e sair.

A tela inicial de Mr.Frog eats bugs, com o logo, o sapo, quatro botões de vitória-régia e o tronco de upgrades
O menu no jogo
13

Juiciness e produção

Com o principal pronto, uma lista de juiciness foi para o quadro: projéteis girando ao serem atirados, um balançadinho nos personagens andando, tooltips bonitinhas, e sons e efeitos de hover nos botões. Ao lado, quatro efeitos de partícula, que entraram todos no jogo:

  • Partículas de cuspe ao atirar;
  • Poeirinha quando um inseto morre;
  • Poeirinha do chão atrás do sapo;
  • Estrelinhas ao comprar um upgrade.
Quadro de juiciness com ideias como projétil girando e tooltips, e os quatro efeitos de partícula desenhados ao lado das notas
O planejamento de juiciness, com os efeitos de partícula que foram feitos

Para manter a arte e o som no rumo, também listamos todos os efeitos sonoros e todas as animações que o jogo precisava, personagem por personagem, e fomos marcando conforme ficavam prontos.

Duas listas, uma de efeitos sonoros e uma de sprites e animações, com todos os itens marcados
A lista de sons e animações
14

Considerações finais

Por mais que eu goste do resultado deste projeto, acho que ele merecia atenção em alguns aspectos que deixariam a experiência do jogo melhor. Alguns ficaram de fora por causa do escopo e do tempo, outros a gente simplesmente esqueceu ou deixou passar.

Um dos pontos que mais de uma pessoa comentou é que o menu principal e o menu de aprimoramentos não deveriam ser o mesmo. Isso foi pensado no planejamento dos menus (como este documento menciona rapidamente no tópico 12), mas nunca chegou à versão final da jam.

Dedicar mais tempo ao balanceamento dos custos e efeitos dos aprimoramentos e aos inimigos que aparecem em cada onda também é importante, já que gastamos só metade do curto tempo de desenvolvimento nisso.

Claro que tudo isso pode entrar em atualizações futuras, junto com as ideias que foram cortadas do conteúdo final.