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

Cormano parado

Atualizado em 03/07/2017!

A ideia deste post é mostrar aos leitores do blog como desenvolver um esboço de jogo para Android simples, onde um caça-recompensas do oeste americano galopa em seu alazão pelo deserto selvagem. Na verdade é apenas um remake do game Sunset Riders do SNES, mais especificamente da fase 2, em que os personagens estão montados à cavalo.

Se você nunca mexeu com Corona SDK antes, sugiro dar uma olhada na amostra grátis do meu livro sobre o assunto. Clique neste link e informe seu email que você receberá as primeiras 40 páginas em instantes por email.

Apenas Android? Não, esse tutorial funciona para qualquer uma das plataformas suportadas pelo Corona SDK, como iOS, por exemplo.

Copyrights? Esse jogo mobile nunca foi e nunca será lançado, uma vez que os direitos do game Sunset Riders (um dos meus favoritos do SNES) pertencem à Konami. Meu intuito aqui é apenas com o propósito didático de ensinar como fazer um game 2D para celulares.

Você vai ver nesta primeira parte do tutorial:

  1. Configurando o ambiente e criando o projeto
  2. Configurando o projeto
  3. SpriteSheet
  4. Animando seu primeiro Sprite
  5. Animando o cenário
  6. Iniciando a aplicação parado
  7. Festa de Rodeio
  8. Música do Bônus Stage!
  9. Splash Screen

Parte 1: Configurando o ambiente e criando o projeto

Primeiro de tudo você deve ter baixado na sua máquina o Corona SDK.

Você encontra ele em coronalabs.com, é gratuito e exige um cadastro apenas para fins de controle futuro, pois caso você venha a cobrar pelo seu app, terá de comprar uma licença.

Opcionalmente, você pode usar algum editor de Lua para uso com Corona SDK também. Neste post falo de um deles que é bem bacana, o Corona Editor.

Uma vez que tenha o Corona SDK instalado em sua máquina, você deve criar uma pasta para seu projeto com o nome que mais lhe agrada. Eu pus o nome de SunsetRiders, e dentro desta pasta, deve-se criar o arquivo main.lua, que conterá o código principal de nossa aplicação. Este arquivo será aberto com o Corona Simulator para ver como anda sua aplicação.

A título de curiosidade: o Corona SDK assume aparência de Android caso rode no Windows e a aparência de iPhone caso rode em Mac. Essas aparências são ajustáveis no menu “Windows->View as”, porém no Windows se limitam apenas a dispositivos com Android. Isso não muda nada para nós, é apenas uma skin.

Parte 2: Configurando o projeto

Como nossa aplicação será um cavaleiro galopando, necessitaremos que a animação rode na horizontal.

Existem duas maneiras de fazer isso: uma delas é indo no menu Hardware e mandando o Corona Simulator rodar para direita e a outra é criando um arquivo de configuração de compilação (build.settings). A segunda opção é mais bacana pois fará com que o Simulator já fique na posição certa sempre que der um Ctrl + R para recompilar o projeto. Crie um arquivo build.settings e cole o seguinte conteúdo dentro:

Você precisará também de um arquivo de configuração para que sua animação rode sempre em tela cheia.

Você consegue isso criando um arquivo config.lua e adicionando o código a seguir, que determina a resolução do app e se ela usará zoom ou não.

Pronto, sua animação está devidamente configurada e pronta para ser codificada.

It’s time to pay!

Parte 3: Sprite Sheet

Antes de codificar qualquer coisa, eu tive de sair à cata dos sprites do Sunset Riders, para poder animá-los via Lua. Lua é a linguagem que vamos utilizar no Corona SDK, basicamente uma linguagem de scripting bem simples que você pode saber mais neste post.

Para quem não sabe o que é uma sprite sheet ou sequer uma sprite (não, não é a bebida de limão da Coca-cola), aqui vai uma breve introdução: sprites são os chamados “bonequinhos” dos games 2D, e sprite sheet (folha de sprites) nada mais é do que uma imagem única contendo todos os movimentos do bonequinho. Ou seja: ele caminhando para um lado, para o outro, atirando, etc. Tudo depende do game.

No meu caso, para começar, queria o Cormano galopando no deserto, então tratei de catar no Google a sprite sheet dele à cavalo. O Corona permite animar sprites em tamanhos diferentes, mas tudo fica mais simples se cada sprite for do mesmo tamanho, por isso dei uma editada nas imagens menores para que todas ficassem com a mesma largura.

Usei o software Fireworks CS5 para isso, mas qualquer software de edição de imagens serve (como o gratuito Gimp), não esquecendo que o fundo deve ser transparente e a extensão deve ser PNG.

O resultado da minha sprite sheet segue abaixo. Todas as imagens deste tutorial épico de como criar um jogo para Android podem ser obtidas neste link e devem estar dentro de uma pasta ‘image’ na pasta do seu projeto (essa é uma boa prática de programação, separar as imagens dos códigos):

Cormano galopando -minha spritesheet

Parte 4: Animando seu 1º sprite

Uma vez que você tenha a spritesheet em mãos, com fundo transparente, extensão .PNG e imagens com mesmo tamanho, você pode começar a animá-la usando Lua. É tudo muito simples e o código abaixo mostra como fazê-lo, considerando que o nome da minha spritesheet é cormano.png, coloque o seguinte código em um arquivo main.lua na raiz do seu projeto (o main.lua é o coração de um jogo feito com Corona SDK):

O código acima está bem documentado, mas ainda assim, cabem algumas explicações. Primeiro, sheetCormanoOptions define as configurações da spritesheet do Cormano correndo. Essa informação é usada em conjunto do path (caminho) da imagem do Cormano que fica na pasta image, lembra?

Na sequência criamos uma table Lua (uma estrutura de dados da linguagem) com uma animação (sequence) dentro, dizendo esta animação se chama normalRun, que a quantidade de frames dela é 6, que a animação dura 500ms e que o loop é do sprite 1 ao 6.

Depois, usamos o objeto display para adicionar um novo sprite na tela do dispositivo, usando as configurações anteriores de sheet e sequence. Esse objeto passa por uma configuração, escala e depois mandamos ele rodar com a função play.

Se você abrir este projeto no Corona Simulator, verá Cormano galopando em uma tela preta.

É hora de colocar um cenário ao fundo!

Parte 5: Animando o cenário

Já fizemos um grande avanço colocando o cowboy mexicano a correr pela tela de seu dispositivo, agora vamos colocar o famoso cenário de velho oeste presente na segunda fase do game, onde Cormano e seus amigos correm ao lado dos trilhos de trem para encontrar Hawkeye, um foragido da justiça. Antes que eu me empolgue falando deste clássico da minha infância, vamos ao que interessa.

Busquei no Google Imagens uma imagem do cenário de Sunset Riders, onde aparecem os trilhos, o deserto e as montanhas ao fundo. Como essa imagem deve ficar correndo ao fundo da animação para dar a impressão de que Cormano está galopando para algum lugar, usaremos um recurso bastante comum nos games 2D de corrida, onde o cenário fica se movendo repetidamente com a mesma imagem de fundo, dando a impressão de movimento.

A imagem que utilizei para o fundo é esta (todas as imagens podem ser obtidas neste link e devem ficar em uma pasta ‘image’):

Sunset Riders - Stage 2

Como essa imagem correrá da esquerda para direita incessantemente, eu dei uma editada nela para que o lado direito, quando “colado” ao lado esquerdo, não houvesse quebras de continuidade, parecendo que é uma imagem com width infinito.

O código para que a imagem fique correndo da esquerda para direita é bem simples e consiste apenas em criar duas imagens e juntá-las.

Criei um evento de atualização da cena onde o x da imagem é incrementado e quando a mesma termina, inicia-se o processo novamente do zero, alternando os objetos de imagem entre o original e a cópia.

É mais difícil de explicar do que de fazer, então inclua este código no início do seu main.lua, antes do código anterior:

Esse código deve ir antes porque a ordem em que os objetos são instanciados define a sobreposição dos mesmos. Se colocarmos o cenário de fundo depois do Cormano, ele será sobreposto e não aparecerá na tela do seu smartphone.

Bom, o código acima não anima o cenário, apenas o apresenta na tela. Para que ele fique correndo da esquerda para direita, criei uma função ‘move’ que adiciono ao listener enterFrame, que é executado quando a aplicação aparece na tela do smartphone.

Nesta função, que é apresentada abaixo, realizo um cálculo com base no tempo de execução do sistema e incremento a posição dos trilhos, dando a impressão de movimento. Note que este código de movimento, deve ser colocado depois do código do Cormano galopando, para encerrar seu main.lua com chave de ouro.

Se você fez tudo certo até agora você deverá ver nuestro hermano Cormano galopando faceiro pelo deserto do Wild West americano.

Cormano galopando

Agora daremos um pouco mais de interatividade, iniciando a animação com Cormano parado, permitindo que ele corra quando o usuário tocar nele. Além disso, incluíremos uma nova animação, de Cormano saltando: quando o usuário chacoalhar o dispositivo (desde que ele tenha um acelerômetro) nosso cowboy dará um salto. E por fim, se o usuário tocar na tela do lado esquerdo, Cormano aumentará a velocidade do galope, enquanto que se os toques forem à direita da tela, ele diminuirá o galope. Ufa, mãos à obra!

Parte 6: Iniciando a aplicação parado

Adicione o código abaixo para que Cormano inicie a aplicação parado. Isso mesmo, você usará a imagem parado.png para simular nuestro mexicano aguardando por algo ou alguma coisa. Somente quando o usuário tocar sobre a imagem é que ela iniciará a corrida frenética rumo a lugar nenhum (todas as imagens podem ser obtidas neste link).

Este código deve ser adicionado logo depois do bloco de código que dá um play na variável running (a animação de Cormano correndo). Na verdade você deve remover este play, pois ele não começará mais correndo, mas sim parado. Inclusive note que ele define que a animação do Cormano correndo ficará invisível, para que somente a imagem de Cormano parado fique na tela.

Agora vamos ao código para que Cormano inicie a corrida a um simples toque do usuário (coloque este código no final do arquivo main.lua, pois ele dá o start no jogo):

Note que criamos uma função start que troca a visibilidade das imagens e dá um play na animação (definindo antes qual a sequence que será executada). Esta função responderá pelo evento tap (um toque rápido) sobre a animação running. Também coloquei o listener do Runtime que dispara a função move, para iniciar a animação do cenário aqui também (remova o local anterior em que esta linha de código ficava).

Com estes códigos já é possível testar e notar que Cormano começa a aplicação parado e somente inicia o trote quando tocam nele.

Parte 7: Festa de Rodeio

A próxima etapa é fazer com que Cormano salte com seu alazão caso o usuário chacoalhe seu smartphone (todas as imagens podem ser obtidas neste link e devem estar na pasta ‘image’).

O Corona Simulator permite que você teste a chacoalhada com o atalho Ctrl + Up Arrow ou no menu Hardware -> Shake. O código do salto é um pouquinho mais complicado pois ele exige algumas coisas diferentes: 1ª – a animação deve ser executada somente uma vez, 2º – depois que a animação terminar, o galope deve continuar.

Tendo isso em vista, vamos ao código. Primeiro, adicione uma nova sequence ao main.lua (incluindo as configurações da animação do salto):

Agora, colocamos o seguinte código, antes da função start:

Note que agora carregamos a imagem cormano-jump.png, onde temos os frames do pulo de Cormano. Esta sprite sheet eu encontrei junto à anterior na Internet mesmo. O restante da configuração não tem nada de diferente da animação de Cormano galopando vista anteriormente, e na última linha nota-se que a animação ficará invisível até que seja necessário, ou seja, até que o usuário chacoalhe o smartphone (o que vamos fazer agora na sequência).

Depois de criar o objeto da animação (jumping), devemos seguir codificando:

Este código é um pouco mais xarope que os anteriores, então preste bastante atenção!

Temos uma função pulo que testa o valor do evento para ver se é um Shake ou não. Existe uma diferença grande de um Shake para os outros movimentos sentidos pelo acelerômetro, então este teste é necessário para garantir que Cormano somente pulará se o usuário chacoalhar rapidamente seu smatphone.

O restante da função é simples, basta esconder as animações que não queremos e botamos o pulo a rodar. Já na função fimPulo, devemos colocar a animação do galope rodando novamente quando o evento anterior terminar, senão Cormano ficará eternamente no ar!!!

E por fim, adicionamos dois listeners, um relacionado ao acelerômetro para o Runtime mesmo (o dispositivo) e outro relacionado à animação de pulo, para que ela avise o sistema quando terminar (phase == ended).

Agora, para finalizar esta etapa antes de entrarmos na parte de áudio, vamos incluir um listener para ação de tocarmos o Cormano galopante, para que ele volte a ficar parado. Inclua este código exatamente antes da última linha (em que definimos o listener que inicia as animações com um tap):

Bônus Stage

Parte 8: Música do Bônus Stage!

Consegui alguns MIDIs da trilha sonora original de Sunset Riders em um CD antigo contendo resources para RPG Maker, incluindo a famosa MIDI da Bônus Stage, onde o jogador tinha de acertar malfeitores que saíam detrás de barris, janelas, carroças, etc. Tive de converter os MIDIs para .wav, que é o formato que o Corona suporta. Não lembro onde fiz essa conversão, mas acho que foi com o software Audacity.

Além desse áudio, separei um áudio de relincho de um cavalo e de galope, obtidos no excelente site SoundJax.com. Com estes sons em mãos, iniciaremos a codificação de algumas partes novas do projeto. Baixe o zip de todos os audios do projeto nesse link. Coloque eles dentro de uma pasta audio na raiz do seu projeto (semelhante ao que fizemos com as imagens).

Insira o código abaixo na primeira linha do seu main.lua:

Aqui carregamos o som do relincho, do galope e da música de background em variáveis locais, preparando tudo para ser tocado (play) mais tarde. Na sequencia, definimos uma função para parar a música de background quando a aplicação terminar.

Agora uma linha antes da função start, adicione as seguintes linhas, que vão posicionar um texto de Start no nosso app. Achei interessante a idéia de incluir esse textos informativo (e outros que virão mais tarde) na tela. Para isso, criei algumas imagens com uma fonte de faroeste que baixei no excelente DaFont.com, com vários dizeres (todas as imagens do projeto podem ser baixadas neste link).

Além dessas novas linhas, algumas funções anteriores serão alteradas, conforme segue. Primeiro, nossa função start deve ficar assim:

Aqui, quando o jogo começa de verdade (após o usuário tocar no Cormano), o cavalo vai relinchar e o galope e a música de fundo vão entrar em loop infinito. Por fim, o texto de Start vai sumir. Note também que defini um canal (channel) diferente para cada áudio, o que me permitirá depois pausar eles em separado.

Agora, vamos alterar nossa função stop, para ficar como abaixo:

Aqui, a única mudança foi a adição do audio.stop onde passo o canal 2 para ser interrompido (som do galope). E por fim, a última função que vamos modificar é a do pulo, para tocar também o som de relincho, além da animação:

Com estes códigos em seu arquivo-fonte original, já será possível testar sua aplicação agora com sons, tanto do cavalo quanto música de fundo!

Cormano Start

Parte 9: Splash Screen

As splash screens são as clássicas telas de abertura do jogo, onde geralmente temos uma imagem e um menu. No nosso caso, será apenas uma imagem estática do jogo original que achei na Internet, que quando tocada, se fecha, exibindo a tela anterior da pilha de execução. Para esta tela criei um arquivo chamado splashscreen.lua que eu apenas invoco usando require no main.lua (essa imagem está nesse zip).

Splash Screen do Sunset Riders Lite

 

Para chamar essa tela de splash screen no seu main.lua, coloque a seguinte linha de código após a última linha do main.lua:

Esta única linha carrega o código do arquivo splashcreen.lua, e como foi chamada por último, a imagem dela vai ficar por cima das demais, até que o usuário toque nela e dispare a função dismiss que remove a mesma, mostrando o jogo logo atrás.

Seleção de Personagem

O que achou? Preparado para a segunda parte deste mega tutorial?
Confere a parte 2 do post aqui 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: 6 Média: 4.7]

Publicado por

Luiz Duarte

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