Como criar um jogo para Android com Corona SDK (Parte 2)

Seleção de Personagem

Atualizado em 03/07/2017!

Então quer dizer que você completou com sucesso todas as tarefas da primeira etapa deste mega tutorial de como criar um jogo para Android com Corona SDK?

Meus parabéns!

Mas não respire aliviado ainda cowbow, pois muitos desafios o aguardam se espera um dia se tornar um desenvolvedor de games!

Nesta segunda parte do tutorial você vai ver:

  1. Seleção de Personagens
  2. Orientação à Objetos
  3. Joystick e Botões
  4. Conclusões e Futuro

Parte 1: Seleção de Personagens

Embora nos exemplos anteriores tenhamos apenas oferecido o Cormano como única opção de cowboy, sabemos que ele não é unanimidade entre os gamers mundo afora. Eu particularmente gostava de jogar com o Bob e suas espingardas (com largura de tiro maior), enquanto meus amigos curtiam o xerife Billy (com maior velocidade de disparos).

Como próximo passo, criaremos uma tela de seleção de personagem. Seguindo as boas práticas de programação Lua que começamos a criar com a tela de splash screen criaremos um arquivo Lua para cada tela do game, então, crie um playerselect.lua e coloque lá o código abaixo:

Uma breve explicação quanto a este código pode ser resumida no seguinte: para cada estado possível da tela, e são 4 (um para cada personagem) temos uma imagem diferente com o personagem realçado, ou seja, removemos a imagem anterior e carregamos a nova imagem na tela, dando a impressão de seleção de personagem, assim como no jogo original.

Você pode acessar essas quatro imagens da seleção e personagem neste zip aqui (é o mesmo zip de imagens de sempre).

Ao ser tocada a primeira vez, a tela realça o personagem e guarda seu nome na variável selected, no segundo toque no mesmo personagem, a tela é dispensada e a função de callback é disparada, conforme configurarmos mais adiante.

As funções deste arquivo servem para expor alguns valores para os demais arquivos do projeto (principalmente o main.lua), como por exemplo, para o main.lua saber quem foi o personagem escolhido. Usaremos ela mais tarde.

Agora, para que a tela de seleção de personagem apareça logo após a splash screen, primeiro devemos incluir esta linha como primeira no arquivo main.lua:

Depois, adicione esta linha como penúltima linha do arquivo, logo antes da chamada à tela de splash. Isso vai fazer com que a tela de player select apareça depois que a tela de splash suma:

Agora por fim, devemos configurar a função de callback do nosso objeto playerSelect, para que ele saiba o que fazer quando um personagem for selecionado. Neste caso, ele deve esconder a tela de player select e exibir a tela de jogo, mas mostrando o sprite do personagem que selecionamos.

Xiiii, isso vai dar trabalho…

Parte 2: Orientação à Objetos

Lua não é orientado à objetos. É uma linguagem simples de scripting que é perfeita para criação de lógica de jogos. Entretanto, quando se programa há anos como eu e sabe-se que bons projetos não vão longe sem um mínimo de arquitetura e por isso você já deve ter notado que estou estruturando melhor os arquivos deste projeto em pastas, arquivos, etc.

Dá uma olhada na forma final que o projeto vai ter, e já vai vendo se está fazendo o seu do jeito certo:Estrutura de pastas do projeto

Desta forma, um conceito importantíssimo para criação de bons projetos são os conceitos de orientação à objetos que entre uma de suas premissas está o fato de que não se deve repetir código. Mas se todos personagens pulam, correm e param, como que não repetiremos esse código?

A ideia é simples, vamos criar um arquivo chamado character.lua e nele vamos colocar tudo o que é comum aos personagens, como segue:

Note que este arquivo carrega os sprites de maneira dinâmica, conforme o nome que for passado por parâmetro. Isso porque cada personagem terá suas próprias sprites, ou seja, só o que muda entre os personagens é seu nome (as spritesheets possuem os nomes dos personagens) e a largura e altura das sprites. O resto é exatamente igual.

A ideia é que todos os personagens vão carregar esta biblioteca em uma variável e chamar suas funções para carregar as sprites e poder correr, pular, etc, como veremos a seguir para o personagem Billy (imagens disponíveis neste zip, o mesmo de sempre):

Billy Galopando

Note a simplicidade de criar um novo personagem usando esta arquitetura de software simplíssima baseada em Orientação à Objetos, ao criarmos o personagen Steve:

Steve galopando

Não postarei o código dos demais personagens pois acredito que sejam capazes de deduzir por vocês mesmos, pois muda-se pouquíssima coisa. Note que o que fizemos foi criar uma espécie de herança da orientação à objetos de uma forma tosca mas que funciona.

Agora que temos todos os personagens criados, vamos recriar novamente nosso main.lua para que se adeque à nova realidade. Use o código abaixo para o seu main.lua, para pouparmos tempo:

De grande diferença aqui, reduzimos a quantidade de linhas de código ao usar uma variável personagem que carrega o arquivo do personagem correspondente baseado no personagem selecionado na tela de player select. Fora isso, apenas uma série de códigos tiveram seus lugares alterados por causa da nova organização.

O que queremos a seguir, é que fique como na imagem abaixo.

Sunset Riders Lite com Cenário, Joystick e Botões

Parte 3: Joystick e Botões

Agora temos algumas adicionais que nos levarão a estudar duas bibliotecas novas: ui.lua e joystick.lua (todas as imagens, incluindo os botões e joysticks estão na pasta de imagens, enquanto que estas duas bibliotecas estão nesse zip e devem ficar na raiz do projeto).

A biblioteca ui.lua lhe permite criar botões de forma muito mais fácil e é largamente utilizado em projetos Lua. O uso do arquivo ui.lua neste game é para criar dois botões, o de pular (que dispara a função de salto do personagem) e o de atirar, que ainda não tem utilidade mas que no futuro poderia disparar projéteis com as armas dos personagens.

Este código deve ir no main.lua. Apenas pegue os fontes acima e coloque em uma posição anterior à primeira vez que você chamar a função configuraButtons, que deve ser no método start do main.lua. Eu escolhi colocar no topo do main.lua, logo abaixo da variável personagem.

Note que as imagens para os botões são duas: a normal e a de botão pressionado. Além disso, os botões disparam uma função quando selecionados, funções estas definidas nas linhas anteriores ao carregamento dos mesmos.

Note também que na função de pulo mandamos uma variável personagem pular, sem nem mesmo saber qual personagem que estamos jogando, o que é indiferente para nós. Em orientação à objetos poderíamos dizer que emulamos uma interface ou classe abstrata.

Outra biblioteca importante que usaremos hoje é a biblioteca joystick.lua (que se encontra neste zip), que cria um direcional analógico assim como o visto em controles de Playstation e Xbox. Esse joystick usa duas imagens existentes em nossa pasta de imagens e dispara um evento onMove que incluiremos no final do arquivo character.lua. Isso porque independente de personagem, ele se moverá da mesma forma, não é mesmo?

Agora, para usar o joystick.lua, use o seguinte código no início do seu main.lua (antes de você chamar essa função configuraJoystick pela primeira vez):

Olhando este código não é muito difícil de imaginar para que servem as propriedades que configuramos, sendo que as principais delas são as imagens que formam o joystick e a função que vai ser executada toda vez que o joystick for utilizado (neste caso, a onMove do personagem).

Para que o joystick apareça na tela, basta chamar a função configuraJoystick na função start do main.lua, assim como você fez com a configuraButtons. No final, sua função start deve estar se parecendo com a abaixo:

Se você testar agora, verá que tudo parece estar funcionando, mas que o joystick não está. Isso porque falta fazermos um ajuste no topo do nosso main.lua. Adicione as seguintes duas linhas:

Primeiro escondemos a barra de status e depois permitimos multi-touch no app para que seja possível usar o joystick e os botões ao mesmo tempo.

[ESTE POST ESTÁ EM MANUTENÇÃO PARA ATUALIZAÇÃO COM A VERSÃO MAIS RECENTE DO CORONA SDK. AINDA NÃO ATUALIZEI O RESTANTE DO POST. A BIBLIOTECA DE JOYSTICK PAROU DE FUNCIONAR E ESTOU BUSCANDO OUTRA.]

Continuando:

Algumas variáveis e constantes para definir a linha base de onde o personagem inicia o jogo, a escala dos trilhos, a posição XY dos textos, trilhos, a velocidade do fundo, o número de milhas percorridas pelo cowboy (sim, um dia a fase irá acabar) o tamanho do percurso em milhas, a música de vitória, a música de fundo, o canal da música de fundo (para poder desligá-la depois), os dois botões e o tempo atual do sistema, para sincronizar as atualizações dos trilhos.

Mais código:

Aqui montamos os trilhos de maneira bem simples, assim como havíamos construído antes. A diferença é a função que evita repetição de código.

Aqui temos uma função para montar os textos que usaremos na aplicação. Use esta função para exibir quaisquer textos no formato padrão do nosso jogo, basta ter as imagens corretas n pata de imagens do projeto.

Agora vamos mover os elementos:

Este código é chamado a cada atualização de tela do dispositivo e redesenha o cenário conforme o tempo do sistema. Além disso, conta quantas vezes o cenário já foi desenhado por completo para contar as milhas do projeto e dizer se o cowboy já chegou no final do projeto ou não, neste caso tocando uma música de vitória.

No último comentário é onde deve ser colocado o código do joystick, sem o comando require que já foi chamado antes no início do arquivo. Onde diz botões, deve ser colocado o código dos botões sem o comando require. Vamos ao último trecho de código do main.lua:

Este trecho define a função de início de jogo, define a função de callback da tela de seleção de personagem (uma função de callback é uma função que será executada quando a tela de seleção de personagem for fechada) e o gatilho para o evento enterFrame, que é chamado uma vez para cada refresh da tela (o que depende do framerate do dispositivo, que pode variar de 30 a 60fps).

E por fim, configura a tela de seleção de personagem (desenha) e carrega a splash screen (desenha-a também). Note que as primeiras telas do jogo são as últimas a serem desenhadas.

Os arquivos build.settings e config.lua ainda são os mesmos do último projeto de exemplo e não serão repetidos.

Pronto, nosso jogo está pronto para ser executado e até mesmo ter uma versão compilada para ser instalado em um dispositivo de verdade. Você pode baixar o APK desse projeto para testar em seu Android usando este link!

Sunset Riders Lite 0.1 lançado!

Parte 4: Conclusões e Futuro

Espero que tenham gostado deste post que ficou muito extenso pois acabei me empolgando no desenvolvimento do game. Acredito que servirá para saciar a vontade do pessoal que queria ver coisas como botões e joysticks.

Para o futuro penso que você poderia adicionar uma barra de progresso enquanto o jogo está sendo inicializado, uma animaçãozinha de abertura, alguns efeitos sonoros adicionais, tiros e alguns obstáculos a serem saltados pelos personagens para dar algum sentido à fase.

Mas este é um desafio para você, cowboy!

* OBS: curtiu o post? Então dá uma olhada no meu livro de Corona SDK clicando no banner abaixo pra aprender a criar outros tantos apps incríveis!

Livro Corona SDK
Livro Corona SDK
O que achou desse artigo?
[Total: 2 Média: 5]

Publicado por

Luiz Duarte

Pós-graduado em computação, professor, empreendedor, autor, Agile Coach e programador nas horas vagas.