Como colocar, mover e traer gráficos á fronte

Usando o Corona SDK para manipular gráficos

O compoñente clave para crear, manipular e xestionar gráficos no Corona SDK é o obxecto de visualización. Non só se pode usar este obxecto para mostrar unha imaxe dun ficheiro, quizais o máis importante, permítelle agrupar as túas imaxes. Isto permítelle mover toda unha serie de gráficos ao redor da pantalla ao mesmo tempo e graficar uns gráficos uns cos outros.

Este tutorial ensinaralle os conceptos básicos de usar grupos de visualización para organizar os obxectos gráficos no seu proxecto. Isto verase demostrado creando dúas capas diferentes, unha que representa a pantalla normal e outra que representa unha capa modal colocada encima. Ademais de achegar os gráficos, tamén usaremos o obxecto de transición para mover todo o grupo modal.

Como comercializar a túa aplicación

Nota: Para seguir xunto con este tutorial, necesitarás dúas imaxes: image1.png e image2.png. Estas poden ser as imaxes que elixe, pero o tutorial funcionará mellor se ten imaxes de aproximadamente 100 píxeles por 100 píxeles. Isto permitirá ver facilmente o que está pasando coas imaxes.

Para comezar, abriremos un novo arquivo chamado main.lua e comezará a construír o noso código:

displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;

Esta sección de código configura a nosa biblioteca ui e declárase a través de grupos de visualización: displayMain, displayFirst e displaySecond. Usaremos estes na primeira capa dos nosos gráficos e logo os moveremos. A variable global_move_x está establecida nun 20% do ancho da pantalla para que poidamos ver o movemento.

función setup pantalla () displayMain: insert (displayFirst); displayMain: insert (displaySecond); amosar Primeiro: a Fronte (); amosar segundo: a fronte (); background local = display.newImage ("image1.png", 0,0); amosar Primeiro: inserir (fondo); background local = display.newImage ("image2.png", 0,0); displaySegundo: inserir (fondo); final

A función setupScreen mostra como engadir grupos de visualización ao grupo de visualización principal. Tamén usamos a función ToFront () para configurar as diferentes capas gráficas, coa capa que queremos enriba todo o tempo que se declarou por última vez.

Neste exemplo, realmente non é necesario mover a pantalla Primeira fronte, xa que estará por debaixo debaixo do grupo Segmento de visualización, pero é bo ter o costume de estratificar explícitamente cada grupo de visualización. A maioría dos proxectos acabarán con máis de dúas capas.

Tamén engadimos unha imaxe a cada grupo. Cando comezamos a aplicación, a segunda imaxe debería estar na parte superior da primeira imaxe.

función screenLayer () displayFirst: toFront (); final

Xa compartimos os nosos gráficos co grupo displaySecond enriba do grupo de visualización Primeiro. Esta función moverá a primeira pantalla á fronte.

moveOne función () displaySecond.x = displaySecond.x + global_move_x; final

A función moveOne moverá a segunda imaxe á dereita nun 20% do ancho da pantalla. Cando chamamos a esta función, o grupo displaySecond estará detrás da pantalla. Primeiro grupo.

moveTwo () displayMain.x = displayMain.x + global_move_x; final

A función moveTwo moverá as dúas imaxes á dereita nun 20% do ancho da pantalla. Non obstante, no canto de mover cada grupo individualmente, usaremos o grupo displayMain para mover ambos ao mesmo tempo. Este é un gran exemplo de como se pode usar un grupo de visualización que contén varios grupos de visualización para manipular moitos gráficos ao mesmo tempo.

setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);

Este último bit de código mostra o que ocorre cando executamos estas funcións. Utilizaremos a función timer.performWithDelay para disparar as funcións cada segundo despois de que se inicie a aplicación. Se non estás familiarizado con esta función, a primeira variable é o tempo de demora expresado en milisegundos eo segundo é a función que queremos executar despois dese retraso.

Cando inicia a aplicación, debes ter image2.png encima de image1.png. A función ScreenLayer disparará e traerá image1.png á fronte. A función moveOne moverá image2.png fóra de under image1.png, ea función moveTwo disparará por última vez, movendo as dúas imaxes ao mesmo tempo.

Como corrixir un iPad lento

É importante lembrar que cada un destes grupos podería ter decenas de imaxes nelas. E así como a función moveTwo moveu ambas as imaxes cunha liña de código, todas as imaxes dentro dun grupo tomarán os comandos que se outorguen ao grupo.

Tecnicamente, o grupo displayMain podería ter tanto grupos de visualización como imaxes contidas nel. Non obstante, é unha boa práctica permitir que algúns grupos como displayMain actúen como contedores para outros grupos sen ningunha imaxe para crear unha mellor organización.

Este tutorial fai uso do obxecto de visualización. Máis información sobre o obxecto de visualización.

Como comezar a desenvolver aplicacións para iPad