DEV Community

loading...

Criação de um jogo através do MIT app inventor

🐙 Lukão 🐙
・3 min read

Reingressei na faculdade em 2020 e uma das matérias para o semestre chama-se "desenvolvimento de dispositivos móveis". Pensei que escreveria uns aplicativos em Kotlin ou Flutter, mas como a sala ainda não teve aulas de programação, fomos introduzidos ao MIT App Inventor. De início, fiquei um pouco triste, mas decidi estudar a ferramenta para verificar o valor dela na introdução à programação.

Sobre o app

Gosto de estudar ouvindo música. Assim que abri o aplicativo, cliquei numa playlist do David Bowie, então me surgiu a incrível ideia de criar um jogo no qual um gato chamado "Major Tom" (Space Oddity) enfrenta as "Spiders from Mars" (Ziggy Stardust). Viajei? Muito! Mas o resultado ficou bacana!

GIF do game

Desenvolvimento

Arte

O app foi feito em aproximadamente 4 horas. Delas, quase duas foram destinadas às artes e duas ao código. Toda a parte visual foi criada especificamente para esse game através do site Piskel. Quanto aos sons, busquei por músicas do estilo "lo-fi" na Audio Library do Youtube.

Interface do PiskelInterface do site Piskel.

Código

De agora em diante, chamarei o App Inventor de AI.

O AI possui vários componentes nos quais o usuário pode arrastar para a tela, bem semelhante ao "designer" do Android Studio. Eles vão desde componentes de interface, como botões e textos, até, pasmem, componentes de integração com o firebase

Paleta de componentes do AI

Paleta de componentes do AI

Cada um desses componentes possui blocos de código específicos, como eventos (cliques em botões e colisões em sprites) e alteração de propriedades do componente (troca de imagens, nome, label, altura, largura etc).

Exemplos de blocos de código
Exemplos de blocos de código para o Major Tom

Veja que os blocos possuem formas e encaixes. "Programar" no AI é como brincar de Lego: é só sair encaixando blocos.

Pensei em uma lógica simples para o app, pois não sabia até que ponto o AI limitaria a ideia:

  • cada sprite possui lógica para movimentação e colisão;
  • o movimento do player é feito através do acelerômetro do celular;
  • a colisão entre os sprites é responsável pelo score e pela barra de vida do Major Tom;
  • a colisão do laser e da aranha nas bordas do celular altera a visibilidade deles, tornando-os invisíveis;
  • assim que a aranha colide com qualquer objeto, ela retorna ao ponto de "spawn" vertical, mas em uma posição horizontal aleatória;
  • assim que a tela é tocada, a visibilidade do laser é alterada e a posição dele é resetada para a frente do player, dando a impressão de que se trata de um novo disparo;
  • assim que a barra de vida é zerada, a tela de score é chamada passando o valor da variável "score". Existe um bloco que faz isso automaticamente.

Ao final, a única questão limitante foi o tamanho do app, que não pode passar de 10Mb. O "código" final ficou da seguinte forma:

Código finalCódigo completo

Dificuldades

Houve dois momentos nos quais senti algum tipo de dificuldade: o primeiro foi trabalhar com a lista de músicas que tocam ao fundo. Não sei se não prestei atenção pois implementei a feature às 3 da manhã, mas demorei a entender que só precisava digitar o nome da música dentro de um bloco para tocá-la. O segundo, que não solucionei (apesar de nem ter tentado o bastante), foi quando utilizei outro celular para testar e percebi que o app não era responsivo. Entretanto, uma lida a mais na Documentação teria resolvido o problema.

Conclusão (?)

Por mais que estivesse cético quanto ao valor do AI no começo, achei o processo divertido e didático. Abstrair o conceito de objetos e atributos para "blocos" é genial (mas não inovador, pois há outras ferramentas que fazem isso, como o "GameMaker Studio"), tornando-o uma excelente forma de introdução à programação, mesmo para crianças (4 ou 5 anos com supervisão de um adulto).

Discussion (3)

Collapse
leitoraincomum profile image
Fernanda Souza

Estamos em um barco parecido, esse ano iniciei uma graduação e temos uma disciplina que usa o MIT AI. De início, achei que a ferramenta era extremamente boba, até entrar na parte de banco de dados e começar a reviver um antigo pesadelo com ele, rs. Enquanto era só salvar uma lista, a vida tava simples, mas quando começou a ficar mais robusto, comecei a sofrer.
Enfim, procurando sobre a ferramenta aqui, achei seu artigo e AMEI seu jogo.

Sucesso pra nós.

Fernanda

Collapse
cephalopodluke profile image
🐙 Lukão 🐙 Author

Obrigado pelo comentário, Fernanda !

Espero que esteja dando tudo certo por aí ! =D

Pode mandar um salve se precisar =D

Collapse
fabiou_s2 profile image
FABIøUU 🥝

Opa manito, suave? Consegue me mandar os blocos em uma melhor resolução? Meu irmão está tentando fazer algo parecido, mas não está conseguindo fazer os inimigos spawnarem de forma aleatória. Please :)