Mixed Juice

Como foi o processo de criação para o Swift Student Challenge na WWDC21?

Matheus Andrade
Apple Developer Academy | UFPE

--

Olá! Meu nome é Matheus Andrade, sou estudante de Engenharia da Computação e membro da Apple Developer Academy Recife, e hoje irei descrever um pouco como foi o processo de desenvolvimento da minha segunda submissão para o Swift Student Challenge na WWDC21, onde desenvolvi um projeto que me permitiu ser vencedor do desafio pelo segundo ano consecutivo.

O que é a WWDC?

Em primeiro lugar, se você não conhece a WWDC e/ou o Swift Student Challenge, fica tranquilo que você já vai descobrir o que é cada um deles…

A WWDC é a Apple Worldwide Developers Conference, uma conferência organizada pela Apple Inc. que acontece anualmente na Califórnia. E, todo ano, ocorre um desafio para os desenvolvedores do mundo inteiro: o Swift Student Challenge. Para poder participar desse desafio, é preciso estar de acordo com alguns critérios (como idade, e instituição de ensino) e enviar um Playground com uma cena interativa de até 3 minutos.

Como o desafio é global, os vencedores podem estar em qualquer lugar do mundo. Assim, após as submissões, cada uma delas é avaliada seguindo os critérios de realização técnica, criatividade da ideia e conteúdo de respostas escritas na inscrição, onde depois de um período de algumas semanas, o resultado é anunciado pela Apple, próximo ao início da WWDC.

Se ainda restou dúvidas ou tem curiosidade sobre a WWDC ou o sobre o Swift Student, basta acessar os links a seguir para uma explicação da própria Apple: WDDC, Swift Student Challenge.

Mixed Juice

Agora que você já sabe o que é a WWDC e o Swift Student Challenge, vou começar a descrever um pouco sobre como foi o processo de submissão esse ano, onde eu desenvolvi um jogo de raciocínio lógico chamando Mixed Juice.

WWDC20

É meio estranho, mas eu costumo dizer que o meu processo de submissão para a WWDC21 começou na realidade em 2020, quando eu fiz a minha primeira e vencedora submissão para o Swift Student Challenge: o The Blind Maze.

Após o resultado da WWDC20, comecei a olhar os outros projetos submetidos não só naquele ano, mas também nos anos anteriores. A cada projeto visto, despertava em mim uma vontade enorme de fazer outro projeto para submeter no ano seguinte (no caso, 2021) e tentar estar entre os vencedores novamente.

Passei as minhas férias me prometendo iniciar o projeto, mas a minha procrastinação nunca me permitiu sair da anotação de ideias (acredito que todo estudante universitário reconhece esse sentimento). Mas aí é que está, apenas essa anotação das ideias já me deu um impulso muito bom para esse ano, pois quando o período de submissão desse ano se aproximava e novas ideias iam surgindo, eu conseguia misturar essas ideias novas, com as ideias anotadas no meu bloquinho de notas.

Ideação

Como dito antes, é fato que minhas anotações me ajudaram bastante na construção do Mixed Juice. Entretanto, a ideia do Mixed Juice em si só saiu durante o período de submissão do desafio, quando eu lembrei de alguns jogos que meus primos e eu jogávamos quando éramos crianças.

Foi então que pensei no Mixed Juice como um jogo inspirado em Mastermind (ou Senha). Um jogo Mastermind geralmente é feito utilizando pinos com algumas cores para formar uma senha aleatória e pinos pretos (ou laranja, como na imagem abaixo) e brancos para validar essa senha.

Jogo Mastermind

O jogo original é multijogador e a sua jogabilidade se baseia no seguinte procedimento:

  • Uma pessoa escolhe uma senha de cores aleatória dispostas em, geralmente, 4 posições;
  • O outro jogador tem algumas tentativas para adivinhar a senha criada, geralmente em 10 chances;
  • A cada rodada, a pessoa que criou a senha indicará ao outro jogador, quão perto a sua tentativa está da senha correta, usando: pino preto para cor certa na posição certa, branco para cor certa mas na posição errada e a falta de pinos indica que o jogador errou uma cor.

Note que esse feedback não indica qual cor está certa ou qual cor está errada, mas sim que existem cores certas e cores erradas. Tornando assim, o jogo ainda mais interessante (e mais difícil haha).

Assim, com a ideia inicial consolidada, comecei a construir e reinventar conceitos do jogo para torná-lo ainda mais interessante e divertido. Decidi então, utilizar a temática de receitas de sucos secretos como uma analogia para as senhas do Mastermind, onde os ingredientes eram formado por 4 frutas e a senha era gerada automaticamente pelo jogo, evitando que fosse necessário um segundo jogador na cozinha.

Portanto, com a ideia praticamente pronta, era hora de começar o design do jogo.

Design

É bem verdade que o design do Mixed Juice mudou bastante desde que comecei a desenhá-lo no papel e no Figma. Existiram algumas versões do jogo, umas que tornariam a experiência do jogador mais fácil e outras que tornariam mais difícil. Desse modo, decidi misturar um pouco as duas e manter o nível do jogo como intermediário, fazendo com que fosse possível vencer o jogo em poucas rodadas, caso você conseguisse desvendar algumas frutas logo de início, mas que fosse difícil caso você não tivesse essa sorte logo de cara. Desse modo, no Mixed Juice, o jogador tem 8 tentativas para desvendar cada receita secreta.

Assim, ao fim de alguns dias desenhando no papel, Figma e Illustrator, essa foi a cara final da tela do jogo do Mixed Juice:

Tela do Jogo

Após criar e implementar a tela principal do jogo, idealizei um personagem para dar cara ao Mixed Juice. Foi então que criei o Chef Leo, o chef de cozinha conhecido por ser o melhor criador de sucos do Brasil e do mundo, mas que era conhecido também por ser um pouco egoísta pelo fato de não compartilhar as suas receitas abertamente. Trazendo, assim, a metáfora das senhas e o jogo para se adivinhar qual seria a receita secreta do Chef.

Desse modo, busquei algumas referências de chefs de cozinha e fui tentando desenhar o meu próprio chef no papel. E, os resultados do esboço do Chef Leo e a sua versão feita no Illustrator são mostradas a seguir:

Desenhos feitos à mão e no Illustrator, respectivamente.

Assim, com a tela do jogo pronta e com um personagem para dar vida ao jogo, restava apenas criar o Menu Principal e um onboarding para os usuários do Mixed Juice, afinal ninguém sabe como solucionar as receitas do Chef Leo logo de cara, certo!?

Depois de alguns dias desenhando telas e menus diferentes, decidi fazer algo mais simples e que passasse a mensagem. E, os resultados das novas telas são mostrados abaixo:

Telas de Menu e Onboarding.

Assim, com o design completo. Os problemas que restavam eram "apenas" de programação: a última e mais demorada etapa do processo de construção.

Implementação

Durante a ideação do projeto, eu ja havia pensado em alguns frameworks que eu poderia utilizar na construção do Playground. Entretanto, quando cheguei a conclusão de criar o Mixed Juice, eu estava em um Challenge da Academy, construindo um aplicativo em SwiftUI, assim como havia saído de um outro Challenge cujo objetivo era aprender o básico de SwiftUI.

Nesse caso, o Swift Student Challenge e o Mixed Juice surgiriam como uma oportunidade perfeita para que eu pudesse aprender ainda mais sobre SwiftUI e entender mais como o framework funciona, as suas particularidades e benefícios proporcionados.

Portanto, toda a implementação do playground foi feita em SwiftUI, visto que além de me proporcionar um aprendizado maior, me permitiu também construir um ambiente de código limpo, reutilizável, intuitivo e de rápida implementação.

Além disso, utilizei o framework AVKit para inserir alguns efeitos sonoros no jogo quando o usuário executa algumas ações, como por exemplo: clicar nos botões iniciais, selecionar um fruta, inserir ou remover uma fruta na receita, ligar o liquidificador, limpar o liquidificador e quando o jogador vence o jogo (descobrindo a receita) ou perde a partida.

E, nesse ponto, o jogo estava pronto. Faltava apenas escrever os textos para a submissão do projeto, descrever como meu jogo funcionava e inserir detalhes como sons e créditos no playground.

Conclusão

Como descrito nos pontos anteriores, o processo de submissão não foi o mais organizado e homogêneo, mas isso não indica que o processo foi falho ou que trouxe complicações. Muito pelo contrário, toda a correria e vontade de fazer dar certo o meu projeto, fez com que eu aprendesse muito sobre detalhes de implementação, detalhes da ideia, detalhes no design do Playground e, principalmente, detalhes na minha própria personalidade e força de ultrapassar as barreiras que surgiam no caminho. Tenho certeza que todo esse processo foi bastante engrandecedor e cada detalhe contribuiu para que o Mixed Juice estivesse entre os 350 vencedores do desafio ao redor do mundo.

Projeto

Se você chegou até aqui a partir do meu GitHub, perfeito! Você já sabe mais um meio de me encontrar ou ver meus projetos. Entretanto, para você que caiu aqui de paraquedas, mas curtiu o meu processo de desenvolvimento e submissão para o Swift Student Challenge da WWDC21, deixarei aqui o link para o repositório do meu projeto Mixed Juice e, caso queira dar uma olhada em outros projetos feitos por mim, também deixo disponível o meu GitHub.

Créditos

Por fim, como forma de agradecimento às pessoas que me ajudaram, de alguma forma, na construção do meu Playground, deixo aqui os meus agradecimentos aos mentores e alunos da Apple Developer Academy Recife que mantiveram um ambiente de apoio e incentivo, o qual foi muito importante durante todo o desafio e ajudou bastante no processo, assim como deixo aqui os créditos para autores de recursos de design utilizados, fontes customizadas e sons utilizados no jogo, que estão disponíveis online:

Fontes:

Assets:

Efeitos Sonoros:

Por fim, gostaria de me mostrar aberto a dúvidas quanto ao processo de submissão ou em relação ao meu projeto, ou até mesmo qualquer outro assunto. Qualquer coisa, só mandar uma mensagem.

Muito obrigado por ler até o fim! Abraços e até a próxima…

--

--

Matheus Andrade
Apple Developer Academy | UFPE

Estudante de Engenharia da Computação, membro do RobôCIn, Apple Developer Academy - UFPE alumni, e Engenheiro de Software @ AID FADE/UFPE.