Construir um jogo de cobra - criação de Interface

Nesta série de tutoriais, você aprenderá como criar um jogo  como o Snake. O objetivo do game é coletar as maçãs na tela para ganhar pontuação. Leia!

Resumo da Aplicação

Usando gráficos pré prontos, nós codificaremos um jogo viciante usando lua e as API's do Corona Sdk.

O jogador será capaz de alcançar a maça, usando o paddle na tela, você pode modificar os parametros no código para customizar o jogo.

Aparelhos Alvo

A primeira coisa que temos que fazer é selecionar a plataforma que  queremos que o nosso app rode, desta forma seremos capazes de escolher o tamanho para as imagens que iremos utilizar.

A plataforma IOS tem estas características:

• 1024x768px, 132 ppi
• 2048x1536, 264 ppi
• 320x480px, 163 ppi
• 960x640px, 326 ppi
• 1136x640, 326 ppi

Por conta do Android ser uma plataforma open source, há diferentes aparelhos e resoluçôes. Algumas das características de tela mais comuns são:

• 800x1280px, 216 ppi
• 854x480px, 228 ppi
• 720x1280px, 306 ppi

Neste tutorial, Nós focaremos na plataforma do IOS com o design gráfico, especificamente desenvolvendo para distribuir para um iPhone/iPod touch, mas o código apresentado aqui deve aplicar-se ao desenvolvimento Android com o Corona SDK também.

Step 3: Interface

Uma interface simples e amigável será usada. Isto envolve multiplas formas, botôes, bitmaps e mais.

Os recursos de interface gráfica necessários para este tutorial podem ser encontrados em anexo.

Exportar Gráficos

Dependendo do aparelho que você selecionou,você pode precisar exportar os gráficos na ppi recomendada, você pode fazer isso no seu editor de imagem favorito.

Eu usei o Adjust Size... função no Preview app no Mac OS X.

Lembre de dar às imagems um nome descritivo e salva - lás na sua pasta de projeto.

Som

Nós usaremos Efeitos Sonoros para melhorar a experiência no jogo, os sons usados neste aplicativo foram gerados pelo AS3SFXR

Configuração do Aplicativo

Um arquivo externo será usado para fazer a aplicação iniciar em modo fullscreen em todos os aparelhos, o arquivo config.lua. Este arquivo mostra o tamanho original da tela e o método usado para dimensionar aquele conteúdo no caso o aplicativo está rodando numa resolução diferente de tela.

1

2

application =

3

{

4

    content =

5

    {

6

        width = 320,

7

        height = 480,

8

        scale = "letterbox"

9

    },

10

}

Main.lua

Vamos Escrever o Aplicativo!

Abra seu editor de lua prederido(qualquer editor funcionará, mas você não terá reconhecimento de syntax) e prepare-se para escrever seu maravilhoso aplicativo. Lembre-se de salvar o arquivo como main.lua na sua pasta de projeto.

Estrutura do Código

Nós estruturaremos nosso código como se isso fosse uma classe. Se você sabe ActionScript ou Java, você deve achar a estrutura familiar.

1

2

Necesary Classes

3

4

Variables and Constants

5

6

Declare Functions

7

8

    contructor (Main function)

9

10

    class methods (other functions)

11

12

call Main function

Esconda a barra de status

1

2

display.setStatusBar(display.HiddenStatusBar)

Este código esconde a barra de status A barra de status é aquela que fica no top da tela do aparelho que mostra o tempo, sinal e outros indicadores.

Fundo

Um gráfico simples é usado como o background para a interface, a próxima linha de código armazena o armazena.

1

2

-- Graphics

3

4

-- [Background]

5

6

local bg = display.newImage('bg.png')

Tela de Título

Este é a página de título, ela será a primeira tela interativa a aparecer no nosso jogo, estas variáveis guardam seus componentes.

1

2

-- [Title View]

3

4

local titleBg

5

local playBtn

6

local creditsBtn

7

local titleView

Tela de Créditos

Esta tela mostrará os créditos e direitos de cópia do jogo, esta variável será usada para guardar isso.

1

2

-- [CreditsView]

3

4

local creditsView

Fundo do Jogo

Esta imagem será posicionada em cima do nosso background. As linhas a seguir também guardam os gráficos para o pad.

1

2

-- [Game Background]

3

4

local gameBg

5

6

-- [Pad]

7

8

local up

9

local left

10

local down

11

local right

Maçã

Este é a imagem da maça, referenciada na proxima variável. Coletando estes itens aumentará a cobra.

1

2

-- [Apple]

3

4

local apple

Cabeça

A primeira parte da cobra estará no principio da fase. A hit area will be created on top of it and both will be grouped in the head variable.

1

2

-- Head

3

4

local headGFX

5

local headHitArea

6

local head

Partes da Cobra

Esta imagem será adicionada toda vez que a cobra comer uma maçã.

Pontuação

A próxima linha lida com o textfield que mostrará a pontuação.

1

2

--  Score

3

4

local score

Variáveis

Estas são variáveis que nós usaremos, leia os comentários no código para saber mais sobre elas.

1

2

-- Variables

3

4

local dir --current direction of the snake

5

local started --used to start the timer

6

local timerSrc

7

local speed = 500

8

local mConst = 17 --# of pixels to move every timer count

9

local apples --apples group

10

local lastPart --last part added to snake

11

local firstPart

12

local parts -- parts group

13

local current = 0 --a number assigned to each part

Declare as funções

Declare all functions as local at the start.

1

2

-- Functions

3

4

local Main = {}

5

local startButtonListeners = {}

6

local showCredits = {}

7

local hideCredits = {}

8

local showGameView = {}

9

local gameListeners = {}

10

local movePlayer = {}

11

local hitTestObjects = {}

12

local update = {}

Construtor

A seguir nós criaremos a função que inicializará toda a lógica do jogo.

1

2

function Main()

3

	-- code...

4

end

Adicione o title view

Agora nós posicionaremos o title view na fase e chamaremos a função que adicionara o tap listener para os botôes.

1

2

function Main()

3

	titleBg = display.newImage('titleBg.png', display.contentCenterX - 100.5, 40.5)

4

	playBtn = display.newImage('playBtn.png', display.contentCenterX - 27, display.contentCenterY + 10)

5

	creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 48, display.contentCenterY + 65)

6

	titleView = display.newGroup(titleBg, playBtn, creditsBtn)

7

8

	startButtonListeners('add')

9

end

Na proxima vez...

Nesta parte da série você aprendeu a interface e a configuração básica do jogo. Na próxima e partefinal das séries, Nós cuidaremos do movimento da cobra, detecção de colisões e os  passos finais para antes do lançamento como testes, criar uma tela inicial, adicionar um icone e finalmente,  construir o app. Fique atento para a parte final!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!