O que eu aprendi prototipando e programando um Appsurdo em dupla

Nas últimas semanas fui desafiada na Academy a construir um aplicativo com a seguinte condição: o app precisava ser absurdo. Esse desafio foi chamado de Dois Unidos, por ter sido um desafio em dupla.

Para pensar sobre possíveis temas para o nosso appsurdo, criamos uma caixa morfológica com alguns interesses nossos, tecnologias que gostaríamos de aprender e um tópico aleatório (que na verdade era uma API aleatória). No fim, definimos filmes e jogos como interesses nossos, SpriteKit como tecnologia e Studio Ghibli como API para guiar o appsurdo. Pensamos em alguma ideias e, à partir delas, surgiu o Ghiblinvaders: um jogo que mistura Space Invaders com Studio Ghibli.

Ilustrando

A decisão de criar um jogo para o nosso appsurdo significava criar também ilustrações próprias, por isso, optamos por desenhar em conjunto no estilo pixel art antes mesmo de criar o protótipo. Desenhar os personagens em pixel art foi bastante importante para criar a atmosfera nostálgica do jogo e também foi um aprendizado bem divertido, pois nem eu nem a minha dupla tínhamos feito desenhos nesse estilo anteriormente.

Para criar as imagens, utilizamos no browser uma ferramenta chamada Piskel, que é um editor online que te permite criar pixel arts e também animá-las. O processo de desenhar foi mais simples do que imaginado inicialmente, mas, ainda assim, um pouco longo.

Usando como referência algumas imagens de personagens do Studio Ghibli, criamos ao longo da primeira semana as principais ilustrações do jogo.

Alguns desenhos levaram mais tempo do que outros, a Kiki e o Haku foram especialmente demorados.

Correndo com o protótipo

Enquanto a primeira semana foi dedicada à decisão do que seria o app e a ilustrá-lo, a segunda semana foi bastante corrida para resolver o protótipo e para começar a programar também. Felizmente, com todos os assets prontos, as únicas coisas que precisavam ser construídas no protótipo eram o fluxo entre as telas, o plano de fundo do jogo e dispor corretamente as ilustrações na tela para que tudo fizesse sentido. A minha segunda-feira foi basicamente dividida em construção de protótipo e assistir tutoriais sobre uso de API, enquanto a terça-feira consistiu em aperfeiçoar o protótipo e aprender sobre SpriteKit.

Nós usamos o Figma para a construção das telas por ser uma ferramenta colaborativa, amigável e fácil de ser utilizada no navegador. Estudando sobre SpriteKit, foi fácil perceber que a programação era realmente crucial para fazer o jogo funcionar, afinal, não era possível criar as mecânicas do jogo pelo protótipo no Figma. As telas ficaram simples mas já era o suficiente para começar a programar um jogo para IOS.

A tela principal do jogo varia de acordo com o personagem escolhido.

Programando em Swift e aperfeiçoando o design ao mesmo tempo

Com o protótipo encaminhado, começamos a nos ocupar com a parte de programar o Ghiblinvaders. Para isso, escolhemos o projeto tipo "game" no Xcode e utilizamos o SpriteKit. Nossa prioridade era fazer um jogo que funcionasse, então programamos as telas por ordem de importância ao invés de seguir o fluxo do protótipo.

Durante esses dias de programação, eu e minha dupla nos reunimos todos os dias em chamadas para que qualquer duvida no código fosse tirada imediatamente e para que pudéssemos tomar decisões e mudar detalhes no jogo quando necessário de forma rápida e sem barreiras de comunicação. Devo dizer que essas chamadas me facilitaram bastante o aprendizado sobre APIs, que antes eu achava bem difícil de entender (isso até tirar as dúvidas que eu tinha nessa programação colaborativa com a minha dupla).

O SpriteKit deu possibilidade de utilização de alguns efeitos visuais e sonoros que não seriam possíveis de reproduzir em um protótipo, o que acabou contribuindo para o app tomar uma forma mais interessante à partir do que tínhamos pensado anteriormente. Eu diria que o protótipo de fato funcionou como um rascunho para o resultado final do projeto.

À partir de animações disponíveis no SpriteKit, foi possível dar mais vida ao jogo.

Outro benefício de programar em conjunto foi ver os resultados com mais eficiência. Conseguimos finalizar com rapidez as mecânicas principais do jogo e logo em seguida terminamos as telas iniciais de escolha de personagem e passamos para a tela de game over, na qual as informações da API do Studio Ghibli aparecem na tela como créditos de um filme. As informações variam de acordo com o personagem escolhido.

Os créditos após perder o jogo com a personagem "Kiki".

Foi bem positivo construir o game over com o SpriteKit porque isso nos deu a possibilidade de fazer os créditos subindo aos poucos e isso foi o suficiente para dar o tempo necessário para a API dos filmes do Studio Ghibli carregar. Em termos de UX isso é um ponto muito importante, pois a sensação de espera causa um certo desconforto e pode ser bastante comum ao carregar informações de APIs.

Depois que essa tela ficou pronta, ficamos muito felizes, orgulhosos e animados que conseguimos concluir o nosso appsurdo no fim da segunda semana!

Essas últimas duas semanas me fizeram aprender várias coisas e me deram muito mais confiança para buscar novos conhecimentos. Para mim um appsurdo significa algo que te diverte e ainda assim te encanta. Acho que o Ghiblinvaders cumpriu esse papel comigo, não só no resultado final, mas principalmente no processo de criá-lo. Fazer um app dessa forma, sem perfeccionismo excessivo, tirou muitas travas que eu tinha com programação, além de ter me dado a oportunidade de trabalhar com uma pessoa com quem eu não tinha trabalhado antes, e também de trabalhar com pixel art e game design. Foi uma experiência maravilhosa!

Obrigada por ler até o fim! Espero que tenha sido útil de alguma forma e espero também que tenha gostado do nosso appsurdo! Por fim, gostaria de agradecer à minha dupla, Victor de Araújo Vieira, uma pessoa que trabalha muito bem em equipe e que me ensinou bastante durante a construção do Ghiblinvaders.