Se você não sabe o que é Corona SDK, leia este post!
Comprem o livro neste link para que o tradutor ganhe sua comissão! O site de compras é o PagSeguro do UOL e tenho 100% de qualificações positivas.
Foi em 2012 que conheci Corona SDK e que começou minha paixão pelo desenvolvimento amador de games mobile como hobby. Nesse mesmo ano conheci o livro Beginning Mobile App Development with Corona e decidi que ia ajudar o autor, o Dr. Brian Burton, a fazer a versão nacional chamada Criando Aplicações Móveis com Corona, sendo o primeiro livro em Português sobre o assunto, e até hoje um dos únicos materiais em nosso idioma. Cinco anos e centenas de compradores depois…
Corona, mais forte do que nunca!
Quando conheci o Corona em uma revista da Info, era um framework indie de desenvolvimento mobile que suportava Android e iOS com programação em Lua. Tinha alguns milhares de desenvolvedores ao redor do mundo e era desenvolvido por uma empresa chamada Ansca Mobile, fundada por dois ex-engenheiros da Adobe, do time de games do Flash.
Hoje, a empresa se chama Corona Labs e seu framework é utilizado por mais de 200 mil desenvolvedores ativos ao redor do mundo, com uma imensa comunidade online, muito material e exemplos disponíveis e diversos aplicativos em seu portfólio. Com atualizações praticamente mensais, Corona é gratuito para todos desenvolvedores, e seduz a cada dia novos estúdios digitais e programadores freelancer que encontram no seu poder e simplicidade a amálgama perfeita para desenvolver aplicativos, games e livros interativos para Android, iOS, Mac OSX, Windows, Amazon Fire, Apple TV, Fire TV e Android TV.
Some a isso um tempo livre que entrou em minha agenda e a vontade de voltar a programar jogos e temos a combinação perfeita para lançar uma nova versão do livro que já faz cinco anos que foi lançado em Português, e cuja última atualização tinha sido em 2014.
O que há de novo no livro?
Corona evoluiu muito desde o seu lançamento, e o livro não apenas vem para corrigir erros antigos mas para expandir as possibilidades com o framework com muitas correções em códigos que deixaram de funcionar, um novo apêndice traduzido sobre a linguagem Lua, indicações diferentes de ferramentas e muitas páginas adicionais, sem mudar em nada o preço final! Veja as principais novidades da nova versão do livro:
nova biblioteca Graphics 2.0;
integração com Apple Game Center e Google Play;
suporte à JSON;
monetização com anúncios;
novas ferramentas para look & feel nativo;
mockups;
nova biblioteca Widgets 2.0;
Eventos do sistema e Ferramentas (acelerômetro, giroscópio, GPS, mapas e notificações)
Gráficos Avançados com filtros, geradores, efeitos compostos e LiquidFun
São quase 500 páginas de dicas, tutoriais, exemplos de games e apps completos e muito mais! Sério, tudo que você precisa saber sobre como criar games e apps com Corona SDK está neste livro.
Obviamente não esquecemos dos antigos compradores e todos podem baixar a nova versão do livro gratuitamente. Para isto, basta acessar o link abaixo do site do autor e informar o e-mail que usaram para compra do livro. Pronto! Você receberá por e-mail uma cópia novíssima e atualizada do livro para aproveitar ainda mais o nosso framework mobile favorito!
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!
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:
Lua
1
localplayerSelect=require("playerselect");
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:
Lua
1
playerSelect.configuraTela();
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:
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:
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
-- Arquivo contendo toda a lógica comum a todos os personagens
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):
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
-- Arquivo contendo toda a lógica do personagem Billy
module(...,package.seeall);
localchar=require("character");
localnomeChar="billy";
functiongetVelocidade()
returnchar.getVelocidade();
end
functionstart()
char.start();
end
char.galopandoConfig(nomeChar,96,80,5)
char.jumpingConfig(nomeChar,80,97,3);
char.paradoConfig(nomeChar);
functionisParado()
returnchar.isParado();
end
functiongalopar()
char.galopar(nomeChar);
end
functionparar()
char.parar();
end
functionpulo()
char.pulo(nomeChar);
end
functiononMove(event)
char.onMove(event);
end
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:
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
-- Arquivo contendo toda a lógica do personagem Steve
module(...,package.seeall);
localchar=require("character");
localnomeChar="steve";
functiongetVelocidade()
returnchar.getVelocidade();
end
functionstart()
char.start();
end
char.galopandoConfig(nomeChar,96,79,5)
char.jumpingConfig(nomeChar,80,95,3);
char.paradoConfig(nomeChar);
functionisParado()
returnchar.isParado();
end
functiongalopar()
char.galopar(nomeChar);
end
functionparar()
char.parar();
end
functionpulo()
char.pulo(nomeChar);
end
functiononMove(event)
char.onMove(event);
end
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.
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.
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
localui=require("ui");
functionjumpButtonEvent(event)
personagem.pulo();
end
functionshotButtonEvent(event)
print("shot");
end
functionconfiguraButtons()
jumpButton=ui.newButton{
default="image/jump-button.png",
over="image/jump-button-over.png",
onRelease=jumpButtonEvent,
x=display.contentWidth-50,
y=display.contentHeight-75
};
shotButton=ui.newButton{
default="image/shot-button.png",
over="image/shot-button-over.png",
onRelease=shotButtonEvent,
x=display.contentWidth-50,
y=display.contentHeight-150
};
end
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?
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
functiononMove(event)
if(waiting.isVisible==false)then
localjoyX=event.joyX
localjoyY=event.joyY
if(joyX~=falseandjoyY~=false)then
if(joyX>0)then
if(running.x<display.contentWidth-55)then
running.x=running.x+5;
end
elseif(running.x>30)then
running.x=running.x-5;
end
end
if(joyY>0)then
if(running.y<250)then
running.y=running.y+5;
end
elseif(running.y>180)then
running.y=running.y-5;
end
end
end
end
end
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):
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
localjoystickClass=require("joystick");
functionconfiguraJoystick()
joystick=joystickClass.newJoystick{
outerImage="",
outerRadius=60,
outerAlpha=0,
innerImage="image/joystickInner.png",
innerRadius="",
innerAlpha=1,
backgroundImage="image/joystickDial.png",
background_x=0,
background_y=0,
backgroundAlpha=1,
position_x=0,
position_y=baseline-100,
ghost=0,
joystickAlpha=0.4,
joystickFade=true,
joystickFadeDelay=2000,
onMove=personagem.onMove
}
end
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:
Lua
1
2
display.setStatusBar(display.HiddenStatusBar);
system.activate("multitouch");
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:
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
--variáveis e constantes
localstarted=false;
localbaseline=280;
localescalaTrilhos=1.3;
localtrilhosY=baseline-115;
localtextoX=150;
localtextoY=baseline-175;
localvelocidadeFundo=0.2;--quanto maior mais rápido
localmilhas=0;--número de milhas percorridas pelo cowboy
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.
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.
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:
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
--função de início
localfunctionstart()
if(playerSelect.isVisible()==false)then
personagem=require(playerSelect.getSelected());
configuraJoystick();
configuraButtons();
backChannel=audio.play(backMusic,{loops=-1});
started=true;
textoStart.isVisible=false;
personagem.start();
end
end
playerSelect.callback(start);
Runtime:addEventListener("enterFrame",move);
playerSelect.configuraTela();
localsplashScreen=require("splashscreen");
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!
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!
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.
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:
codigo 1
Lua
1
2
3
settings={
orientation={default="landscapeRight"}
}
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.
codigo 2
Lua
1
2
3
4
5
6
7
8
9
application=
{
content=
{
width=320,
height=480,
scale="zoomEven"
},
}
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):
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):
codigo 3
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
-- cormano galopando
--configuramos largura e altura dos sprites, bem como o nro. deles
--criamos um objeto de display com todas as configs anteriores
localrunning=display.newSprite(sheet,sequences)
--posicionamos o objeto na tela
running.x=display.contentWidth/4+40
running.y=225--distância do cavalo ao chão
running.xScale=1.2
running.yScale=1.2
--manda rodar
running:play()
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’):
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:
trilhos2.x=610-- Quando um dos trilhos termina, aparece o outro
trilhos2.y=baseline-115
trilhos2.yScale=1.3
-- cormano galopando
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.
codigo 5
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
-- movendo os elementos
localtPrevious=system.getTimer()
localfunctionmove(event)
if(running.isVisible)then--só move cenário se Cormano estiver correndo
localtDelta=event.time-tPrevious
tPrevious=event.time
localxOffset=(0.2*tDelta)
trilhos.x=trilhos.x-xOffset
trilhos2.x=trilhos2.x-xOffset
if(trilhos.x+trilhos.contentWidth)<0then
trilhos:translate(610*2,0)
end
if(trilhos2.x+trilhos2.contentWidth)<0then
trilhos2:translate(610*2,0)
end
end
end
-- faz tudo acontecer
Runtime:addEventListener("enterFrame",move);
Se você fez tudo certo até agora você deverá ver nuestrohermano Cormano galopando faceiro pelo deserto do Wild West americano.
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):
código 1
Lua
1
2
3
4
5
6
7
8
9
10
11
12
--função de início
localfunctionstart(event)
waiting.isVisible=false;
running.isVisible=true;
running:setSequence("normalRun")
running:play()
--faz tudo acontecer
Runtime:addEventListener("enterFrame",move);
end
waiting:addEventListener("tap",start);
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):
Lua
1
2
3
4
5
6
7
8
9
10
localsequencesCormano2={
{
name="jump",
start=1,
count=3,
time=500,
loopCount=1,
loopDirection="forward"
}
}
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:
código 3
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
localfunctionpulo(event)
if(event.isShake==true)then
waiting.isVisible=false;
running.isVisible=false;
jumping.isVisible=true;
jumping:setSequence("jump")
jumping:play()
end
end
localfunctionfimPulo(event)
if(event.phase=="ended")then
waiting.isVisible=false;
running.isVisible=true;
running:setSequence("normalRun")
running:play()
jumping:pause();
jumping.isVisible=false;
end
end
Runtime:addEventListener("accelerometer",pulo);
jumping:addEventListener("sprite",fimPulo);
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):
Lua
1
2
3
4
5
6
7
localfunctionstop(event)
waiting.isVisible=true;
running.isVisible=false;
running:pause()
end
running:addEventListener("tap",stop);
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).
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
localtextoX=display.contentWidth/2;
localtextoY=baseline-175;
--função para configurar um novo texto a ser exibido
Além dessas novas linhas, algumas funções anteriores serão alteradas, conforme segue. Primeiro, nossa função start deve ficar assim:
Lua
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
localfunctionstart(event)
audio.play(backMusic,{loops=-1,channel=1});
textoStart.isVisible=false;
audio.play(relincho,{loops=1,channel=3});
audio.play(galope,{loops=-1,channel=2});
waiting.isVisible=false;
jumping.isVisible=false;
running.isVisible=true;
running:setSequence("normalRun")
running:play()
--faz tudo acontecer
Runtime:addEventListener("enterFrame",move);
end
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:
Lua
1
2
3
4
5
6
localfunctionstop(event)
audio.stop(2);--para o som de galope
waiting.isVisible=true;
running.isVisible=false;
running:pause()
end
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:
codigo 2
Lua
1
2
3
4
5
6
7
8
9
10
localfunctionpulo(event)
if(event.isShake==true)then
audio.play(relincho,{loops=1,channel=3});
waiting.isVisible=false;
running.isVisible=false;
jumping.isVisible=true;
jumping:setSequence("jump")
jumping:play()
end
end
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!
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).
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:
Lua
1
localsplashScreen=require("splashscreen");
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.
