Hello again… agora que você já instalou o CoronaSDK e baixou o esqueleto do projeto, podemos começar a colocar a mão na massa e dar vida ao nosso game (clone). Por enquanto temos apenas uma tela preta, parece ruim, mas já está funcionando e com todas as configurações necessárias para continuarmos o desenvolvimento.

Antes de baixar os assets e colocar nosso background, vou explicar como o CoronaSDK funciona e quais configurações estão nos arquivos iniciais.

Rodando o game

Quando o Simulador inicia o projeto ele “lê”, na sequência, os seguintes arquivos fundamentais para qualquer projeto em Corona:

1. config.lua
2. main.lua

Se vc for esperto, vai perceber que na nossa raiz também existe um arquivo “build.settings”, ele contém instruções sobre como compilar o projeto para determinado OS, irrelevante por enquanto.

Vamos começar com o config.lua:

application = {
	content = {
		width = 144,
		height = 256,
		scale = "zoomEven",
		fps = 60
	},
}

Esse bloco diz para o engine como é nosso aplicativo (ou game), passando as instruções explicadas abaixo:

• width: Largura
• height: Altura
• scale: Como redimensionar nosso game *
• fps: Frames Por Segundo

* Hoje em dia existem diversos tamanhos e formatos de telas nos devices (celulares), por isso temos que nos preocupar em como o game vai se comportar em cada um deles. Mais detalhes no decorrer deste tutorial… para os apressados, as opções são: “letterbox”, “zoomEven”, “adaptive” e “zoomStretch”. Leia sobre elas aqui.

Se você trabalha ou já trabalhou com desenvolvimento web, vai perceber que o arquivo “config.lua” parece um json, mas na verdade é uma tabela (em Lua), vale a pena entender melhor como elas funcionam, clique no link para ler mais.

Agora o main.lua:

Esse é o principal cara do seu game, tudo começa aqui, por isso é importante entender como utilizá-lo de maneira eficiente. Nosso esqueleto está bem simples, vamos lá.

-- No antialias (pixelart games)
display.setDefault('magTextureFilter', 'nearest')
display.setDefault('minTextureFilter', 'nearest')

local composer = require('composer')

composer.recycleOnSceneChange = true
composer.effectList.fade.from.transition = easing.outQuad
composer.effectList.fade.to.transition = easing.outQuad
-- composer.gotoScene('scenes.menu')

#tip: Se ainda não percebeu, é com -- que criamos comentários em Lua.

Agora calma, vamos por partes:

-- No antialias (pixelart games)
display.setDefault('magTextureFilter', 'nearest')
display.setDefault('minTextureFilter', 'nearest')

Essas duas primeiras linhas, dizemos ao compilador como ele deve redimensionar nossas imagens, como nosso game é em “pixel-art”, a melhor opção é “nearest”, vai por mim. Na sequência…

local composer = require('composer')

composer.recycleOnSceneChange = true
composer.effectList.fade.from.transition = easing.outQuad
composer.effectList.fade.to.transition = easing.outQuad

O composer é responsável por cuidar das nossas “cenas”. Todo game possui pelo menos uma. Mas o que é diabos é uma cena? Você pergunta, explico: É o que está na tela… WHAT?

Relax, olha só como é fácil… assim vc vai entender melhor.
Algumas cenas “comuns” são:

• Menu
• Configurações
• Fases:
  • Tutorial
  • Fase 01 …. N
• Game Over
• Placar

Sacou? Conforme a gente for criando o game (e as cenas) tudo fica mais claro… não se preocupe. Vamo-que-vamo, vai ficar legal!

Baixando os Assets

Antes de tudo, um ponto muito importante aqui. NÃO use imagens em seus jogos sem que tenha o direito, de preferência por escrito, de quem as criou. Pirataria é crime e uso ilegal de imagens também, existe um tal de “Direito Autoral” que deve ser respeitado.

As imagens e sons do FlappyBird são de propriedade do Dong Nguyen, como este tutorial é puramente educacional e sem fins lucrativos, vamos utilizá-las. Pronto, agora… baixe aqui os assets do Flappy Bird e coloque no diretório “assets” do seu projeto, ficando:

Pronto, tudo no lugar… vamos fazer algumas coisa aparecer logo na tela antes que vc desista de continuar.

Incluindo nosso background

Dentro da pasta “scenes” já deixei um arquivo chamado “_template.lua”, ele servirá como base para todas as nossas cenas. Para começar, faça uma cópia do “_template.lua” e renomeie para “game.lua” (ainda dentro de scenes).

Dentro do arquivo que está na raiz “main.lua”, remova o comentário da linha “–composer.gotoScene(‘scenes.menu’)” e altere o que está dentro do parenteses para ‘scenes.game’, ficando:

composer.gotoScene('scenes.game')

Se ainda está com o Simulador aberto, ele deve atualizar sozinho… se não, abra o simulador o projeto, a tela ainda está preta. Vamos atualizar agora o arquivo “scenes/game.lua”. Abra-o.

Vamos alterar a função “scene:create(event)” deixando dessa maneira:

-- create()
function scene:create(event)
    local group = self.view
	local background = display.newImageRect("assets/sprites/background_day.png", 144, 256)
	background.anchorX, background.anchorY = 0, 0
    background.x, background.y = 0, 0
	group:insert(background)
end

Apareceu uma imagem no simulador? Boa… vou explicar o que as novas linhas fazem, uma por uma.

local background = display.newImageRect("assets/sprites/background_day.png", 144, 256)

Aqui criamos uma variável “local” (dentro do escopo) do tipo “display.newImageRect”, que é como o Corona exibe sprites na tela. Os parâmetros são:

1. Caminho do arquivo
2. Largura da imagem
3. Altura da imagem

background.anchorX, background.anchorY = 0, 0
background.x, background.y = 0, 0

Agora, mudamos o “pivot” da imagem para 0, 0… ou seja, no topo superior esquerdo e posicionamos a imagem na tela, também em 0, 0. Mais pra frente vc vai entender o que isso faz, vem comigo.

group:insert(background)

Para finalizar, incluímos nosso background no grupo “group”. Todos os objetos do tipo “display” devem estar dentro deste grupo para que o composer saiba como tratar os elementos quando mudarmos de cena. Complicado? Nem é… vc chega lá!

É isso ai, agora já temos alguma coisa rodando e nosso game “começa” a existir. No próximo post vamos incluir o chão animado (dando ilusão de estar passando), além do pássaro e suas animações básicas!

See you there…
Hugs!

<< Voltar ao índice