Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Corona SDK

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

by
Read Time:5 minsLanguages:

Portuguese (Português) translation by Alex Carlos (you can also view the original English article)

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

Build a Snake GameBuild a Snake GameBuild a Snake Game

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.


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.


Esconda a barra de status

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.


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.


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.


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.


Maçã

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


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.


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.


Variáveis

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


Declare as funções

Declare all functions as local at the start.


Construtor

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


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.


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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.