O principal componente da criação, manipulação e gerenciamento de gráficos no Corona SDK é o objeto de exibição. Esse objeto não só pode ser usado para exibir uma imagem de um arquivo, mas também, o mais importante, permite que você agrupe suas imagens. Isso permite que você mova todo um conjunto de gráficos ao redor da tela de uma vez e crie gráficos de camada um sobre o outro.
Este tutorial ensinará os fundamentos do uso de grupos de exibição para organizar os objetos gráficos em seu projeto. Isso será demonstrado pela criação de duas camadas diferentes, uma representando a tela normal e outra representando uma camada modal para ser colocada em cima dela. Além de colocar em camadas os gráficos, também usaremos o objeto de transição para mover todo o grupo modal.
Como comercializar seu aplicativo
Nota: Para acompanhar este tutorial, você precisará de duas imagens: image1.png e image2.png. Essas podem ser qualquer imagem que você escolher, mas o tutorial funcionará melhor se você tiver imagens em torno de 100 pixels por 100 pixels. Isso permitirá que você veja facilmente o que está acontecendo com as imagens.
Para começar, vamos abrir um novo arquivo chamado main.lua e começar a construir nosso código:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;
Esta seção de código configura nossa biblioteca ui e declara através de grupos de exibição: displayMain, displayFirst e displaySegundo. Vamos usá-los para primeiro colocar em camadas nossos gráficos e movê-los. A variável global_move_x é configurada para 20% da largura da tela para que possamos ver o movimento.
função setupScreen () displayMain: insert (displayFirst); displayMain: insert (displaySecond); displayFirst: toFront (); displaySecond: toFront (); fundo local = display.newImage ("image1.png", 0,0); displayFirst: insert (fundo); background local = display.newImage ("image2.png", 0,0); displaySecond: insert (fundo); fim
A função setupScreen demonstra como adicionar grupos de exibição ao grupo de exibição principal. Nós também usamos a função toFront () para configurar as diferentes camadas gráficas, com a camada que queremos em cima de todo o tempo declarado por último.
Neste exemplo, não é realmente necessário mover o displayFirst para a frente, já que o padrão será ficar abaixo do grupo displaySecond, mas é bom criar o hábito de colocar camadas explicitamente em cada grupo de exibição. A maioria dos projetos terminará com mais de duas camadas.
Nós também adicionamos uma imagem para cada grupo. Quando iniciamos o aplicativo, a segunda imagem deve estar no topo da primeira imagem.
function screenLayer () displayFirst: toFront (); fim
Já colocamos em camadas nossos gráficos com o grupo displaySecond na parte superior do displayPrimeiro grupo. Esta função irá mover o displayFirst para a frente.
function moveOne () displaySecond.x = displaySecond.x + global_move_x; fim
A função moveOne moverá a segunda imagem para a direita em 20% da largura da tela. Quando chamamos essa função, o grupo displaySecond ficará atrás do displayPrimeiro grupo.
function moveTwo () displayMain.x = displayMain.x + global_move_x; fim
A função moveTwo moverá ambas as imagens para a direita em 20% da largura da tela. No entanto, em vez de mover cada grupo individualmente, usaremos o grupo displayMain para mover os dois ao mesmo tempo. Este é um ótimo exemplo de como um grupo de exibição que contém vários grupos de exibição pode ser usado para manipular muitos gráficos de uma só vez.
setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);
Este último pedaço de código demonstra o que acontece quando executamos essas funções. Usaremos a função timer.performWithDelay para disparar as funções a cada segundo após o lançamento do aplicativo. Se você não estiver familiarizado com essa função, a primeira variável é o tempo de atraso expresso em milissegundos e a segunda é a função que queremos executar após esse atraso.
Quando você inicia o aplicativo, você deve ter o image2.png em cima de image1.png. A função screenLayer irá disparar e trazer image1.png para a frente. A função moveOne moverá image2.png para fora de image1.png, e a função moveTwo será ativada por último, movendo as duas imagens ao mesmo tempo.
Como consertar um iPad lento
É importante lembrar que cada um desses grupos pode ter dezenas de imagens. E assim como a função moveTwo moveu ambas as imagens com uma linha de código, todas as imagens dentro de um grupo receberão os comandos dados ao grupo.
Tecnicamente, o grupo displayMain poderia ter grupos de exibição e imagens contidos nele. No entanto, é uma boa prática permitir que alguns grupos, como displayMain, atuem como contêineres para outros grupos sem imagens, a fim de criar uma melhor organização.
Este tutorial faz uso do objeto de exibição. Saiba mais sobre o objeto de exibição.
Como começar a desenvolver aplicativos para iPad
