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

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

4 jogos mobile open-source feitos com Corona SDK

Atualizado em 16/04/2017!

O post de hoje é sobre Corona SDK, meu framework para jogos mobile 2D favorito (tanto que traduzi um livro a respeito). Muitos desenvolvedores que eu conheço têm boas ideias para jogos. Boas ideias que nunca são postas em prática. As desculpas variam, desde a clássica falta de tempo, até mais esdrúxulas como “não sei por onde começar”. Se existe uma desculpa mais aceitável é a de que jogos são complexos e muito diferentes dos sistemas tradicionais que estamos acostumados a desenvolver. Jogos são os chamados ‘sistemas de tempo real’. Muitos desenvolvedores não tem a mínima ideia de como o código fonte de um jogo deve se parecer, como ele deve ser organizado, etc. Principalmente em linguagens menos usuais como Lua, por exemplo.

A ideia deste artigo é mostrar o trabalho de Michael Wilson do estúdio de games mobile Ponywolf. Ele criou três incríveis projetos de jogos feitos com Corona SDK, que rodam em diversas plataformas mobile, para que os desenvolvedores possam estudar e até mesmo usar como base para seus próprios jogos. Totalmente free! Ou seja, você pode baixar os fontes dos projetos, mudar as imagens, dar uma mexida aqui e outra ali, e lançar rapidamente a sua versão do game!

Além disso, tem o projeto Corona Cannon, feito pelo pessoal da Corona Labs mesmo, um game no melhor estilo Angry Birds.

Você pode baixar cada um dos projetos no Corona Marketplace. Não esqueça de dar o seu feedback ao Michael nos foruns do Corona!

Match 3 Space RPG

match-3-space-rpg

Este protótipo open-source é um projeto completo que mistura jogos do estilo “match 3” (combina 3, arcade-puzzles tipo Bejeweled) e RPGs old-school com infinitas possibilidades e itens para colecionar. Este template foca em design modular e organização do projeto, assuntos importantíssimos para desenvolvedores iniciantes. Caso seu inglês esteja afiado, dê uma olhada nessa série de vídeos onde Michael Wilson e Charles McKeever (Dev Evangelist do Corona) discutem o projeto e a abordagem de criação do mesmo.

Clique aqui para baixar o Match 3 Space RPG.

Sticker Knight Platformer

sticker-knight-platformer

Este projeto open-source é um jogo de plataforma (tipo Mario) baseado na temática de fantasia medieval. Ele não é um jogo completo, mas um ponto de partida para aprender técnicas modernas de desenvolvimento de jogos usando Corona e Lua. Ele inclui módulos gratuitos que podem ser usados para diversos jogos, como:

  • sistema de jogo baseado em plataformas (Platformer hero)
  • Componentes comuns a jogos desse tipo (Enemies, pickups, spikes, e exits)
  • Importação de mapas do Tiled
  • pontuação (Score counter)
  • pacote de efeitos para jogos (Game FX – ponyfx.lua)

Clique aqui para baixar o Sticker Knight Platformer.

Endless Sk8boarder

endless-sk8boarder

Este é um protótipo incompleto de jogo mobile do gênero endless runner (aqueles em que o personagem principal não pára de correr nunca, tipo Pepsi Man), com a temática de skate. Ele não é um jogo completo, mas um ponto de partida (assim como o anterior) para aprender técnicas ainda mais avançadas (considere os jogos anteriores como básico e intermediário, respectivamente) de programação com Corona e Lua. Esse jogo inclui módulos gratuitos que você pode usar para criar outros jogos, incluindo:

  • física de skateboarding
  • funções para gerar corrimãos, obstáculos, terreno, etc de maneira infinita proceduralmente
  • backgrounds Parallax (que se movem independente do terreno)
  • Importação do Tiled das telas do jogo
  • pontuação (Score counter)
  • pacote de efeitos para jogos (Game FX – ponyfx.lua)

Se seu inglês estiver bom, dê uma olhada nessa série de vídeos onde o projeto e as funcionalidades são explicadas passo-a-passo.

Clique aqui para baixar o Endless Sk8boarder.

Corona Cannon

Este jogo open-source gratuito para Corona SDK é no melhor estilo Angry Birds, onde você aponta um canhão para destruir insetos. É um projeto completo que inclui 10 fases, 2 localizações diferentes, gráficos Retina, música e suporte a controles wireless, mostrando todo o poder da plataforma!

Esse projeto foi feito no final de 2016, com a ideia de revitalizar um game open-source que vinha nas versões iniciais do Corona que era o Ghosts vs Monsters. Ela contempla uma excelente ideia de arquitetura e foi feita propositalmente para expor essas complexidades e diferentes APIs.

Clique aqui para baixar o Corona Cannon.

E aí, o que achou desses protótipos open-source? Tentadores, não?

* 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