No momento, você está visualizando Primeiros passos com Microsoft MakeCode Arcade + Jogo exemplo


O que você vai ver neste post:

 

 

O que é o MakeCode Arcade?

O MakeCode é um projeto da Microsoft para facilitar o uso de programação na Educação.

Toda a programação pode ser vista instantaneamente, o que facilita muito o desenvolvimento da mesma.

Segundo a Microsoft, pelo próprio site do MakeCode:

O objetivo principal do MakeCode é apresentar a programação de uma forma que seja acessível e convidativa. Para fazer isso, MakeCode usa o modelo de programação de blocos para permitir que o usuário aprenda os conceitos de codificação de uma forma mais tangível. Uma vez que o usuário se sinta confortável com os elementos de codificação e estrutura, ele pode progredir para criar programas mais complexos. Os blocos são mapeados diretamente para linhas reais de código em uma linguagem de programação. Assim, uma vez que o usuário tenha um senso de confiança e familiaridade com o funcionamento dos blocos, ele pode fazer a transição para a codificação de programas mais complexos na própria linguagem de programação.

Mais especificamente o MakeCode Arcade é uma extensão do projeto inicial, porém voltado para o desenvolvimento de jogos.

 

Como acessar?

Para ter acesso ao MakeCode Arcade, basta acessar: https://arcade.makecode.com, e clicar no ícone:

 

Com isso, você será redirecionado para a página de programação e teste.

Pela tela inicial é possível notar que o objetivo é realmente o de desenvolver jogos, uma vez que a programação fica ao lado da tela de execução:

Na canto esquerdo superior é possível ver um “dispositivo” contendo controles direcionais e dois botões “A” e “B”.

Esse “dispositivo” irá simular seu equipamento, e em sua tela preta irá apresentar o jogo desenvolvido.

Já na área clara, que ocupa a maior parte da sua tela é a área responsável pelo desenvolvimento da programação.

 

Blocos de programação

Toda a programação no MakeCode é feita através da conexão de diferentes blocos de programação, com funções bem definidas.

Ela é dividida em:

Os principais grupos de funções da imagem acima, são:

  • Sprites: Bloco de funções voltadas para desenvolvimento dos personagens, tais como: Jogador (Player), Projétil (Projectile), Comida (Food), Inimigo (Enimy), Adicionar um novo tipo (Add a new kind …);
  • Controller: Bloco de funções voltadas para desenvolvimento do controle de seus personagens;
  • Light: Bloco de funções voltadas para desenvolvimento movimentação de luz (pixel);
  • Game: Bloco de funções voltadas para desenvolvimento das funcionalidades do jogo, como vitória ou fim de jogo;
  • Music: Bloco de funções voltadas para desenvolvimento de fundo musical do jogo;
  • Scene: Bloco de funções voltadas para desenvolvimento do cenário e fases do jogo;
  • Info: Bloco de funções voltadas para desenvolvimento e apresentação das informações, como Vidas, Placar, etc;
  • Loops: Bloco de funções voltadas para desenvolvimento ações que se repetem para sempre ou sob certas condições;
  • Logic: Bloco de funções voltadas para desenvolvimento da lógica, como “Se -> Então”, comparações, etc;
  • Variables: Bloco de funções voltadas para a criação e utilização de variáveis;
  • Math: Bloco de funções voltadas para desenvolvimento da lógica da programação, incluindo operações básicas, porcentagem, mínimos e máximos, etc.

 

Bem como o bloco de funções avançadas, sendo que as principais são apresentadas abaixo:

  • Animation: Bloco de funções voltadas para desenvolvimento de animações, tanto para seus personagens, quanto para o cenário;
  • Images: Bloco de funções voltadas para desenvolvimento de imagens feitas pela própria programação, ou seja, não são imagens prontas;
  • Functions: Bloco de funções voltadas para desenvolvimento das suas próprias funções;
  • Arrays: Bloco de funções voltadas para desenvolvimento de listas;
  • Text: Bloco de funções voltadas para desenvolvimento e apresentação de textos nos jogos;
  • Extensions: Aqui você poderá utilizar extensões com finalidades específicas, este recurso está sempre em desenvolvimento, uma vez que novas demandas na programação são constantes.

 

Quando se clica em cada um desses blocos de funções, uma variação da mesma é apresentada, ou seja, existem MUITAS funções já prontas para serem combinadas e utilizadas.

Com todas essas funções, as possibilidades para se desenvolver ótimas ideias são altas e bem intuitivas.

 

Exemplo

Vamos desenvolver nosso primeiro exemplo de jogo, chamei de Come Come.

 

Lógica:

INÍCIO

  • Definir o mapa,
  • Definir a comida (bicho),
  • Definir nosso personagem (lagartinho),
  • Definir a posição inicial do Bicho, como aleatória,
  • Definir a posição inicial do Lagartinho,
  • Definir o movimento do Lagartinho com os direcionais,
  • Fazer a câmera seguir o Lagartinho,
  • Iniciar uma contagem regressiva (10s),
  • Definir o placar como “Zero”,
  • Caso o Lagartinho encoste no Bicho, destruir o Bicho 1, aumentar o placar em 10 pontos e tocar um som,
  • Ao ser destruído, um novo Bicho deve surgir em um novo local do mapa e a contagem regressiva deve ser reiniciada,
  • Caso a contagem regressiva finalize, o jogo acaba, ou seja, o Lagartinho irá perder,
  • Caso o placar atinja 50 pontos, o jogo acaba, ou seja, o Lagartinho irá ganhar.

FIM

 

Com isso, nossos bloco de programação ficarão como segue:

Bloco 2:

Bloco 3:

Bloco 4:

Bloco 5:

 

Caso queira ver toda a programação junta, basta ver a próxima imagem:

 

Desenvolvendo o Cenário:

 

Para criar seus próprios personagens, basta clicar no bloco cinza, que se encontra entre o termo “sprite” e “of kind”, como na imagem abaixo:

 

Desenvolvendo o personagem principal – Lagartinho:

Desenvolvendo o Bicho:

 

Veja como ficou:

 

E ai, quais são suas ideias que poderiam virar jogos?

Deixe suas sugestões aqui nos comentários, vamos programar!


Como referenciar este post: Primeiros passos com Microsoft MakeCode Arcade + Jogo exemplo. Rodrigo R. Terra. Publicado em: 18/2/2021. Link da postagem: (http://www.makerzine.com.br/educacao/primeiros-passos-com-microsoft-makecode-arcade-jogo-exemplo/).

Deixe um comentário