Nyckeln till att skapa, manipulera och hantera grafik i Corona SDK är visningsobjektet. Inte bara kan det här objektet användas för att visa en bild från en fil, kanske lika viktigt, det låter dig gruppera dina bilder tillsammans. Detta låter dig flytta en hel serie grafik runt skärmen samtidigt och laggrafik ovanpå varandra.
Denna handledning kommer att lära dig grunderna i att använda visningsgrupper för att organisera de grafiska objekten i ditt projekt. Detta kommer att demonstreras genom att skapa två olika lager, en som representerar den normala skärmen och en annan representerar ett modalskikt som placeras ovanpå det. Förutom att lägga till grafiken använder vi också övergångsobjektet för att flytta hela modalgruppen.
Hur marknadsför din app
Notera: För att följa med den här handledningen behöver du två bilder: image1.png och image2.png. Dessa kan vara några bilder du väljer, men handledningen fungerar bäst om du har bilder runt 100 pixlar med 100 pixlar. Det här låter dig enkelt se vad som händer med bilderna.
För att komma igång öppnar vi en ny fil som heter main.lua och börjar bygga vår kod:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;
Detta avsnitt av kod sätter upp vårt ui-bibliotek och deklarerar genom visningsgrupper: displayMain, displayFirst och displaySecond. Vi använder dessa till första lager vår grafik och flyttar dem sedan. Global_move_x-variabeln är inställd på 20% av bildens bredd så att vi kan se rörelsen.
funktion setupScreen () displayMain: insert (displayFirst); displayMain: infoga (displaySecond); displayFirst: toFront (); displaySecond: toFront (); lokal bakgrund = display.newImage ("image1.png", 0,0); displayFirst: infoga (bakgrund); lokal bakgrund = display.newImage ("image2.png", 0,0); displaySecond: infoga (bakgrund); slutet
SetupScreen-funktionen visar hur man lägger till visningsgrupper i huvuddisplaygruppen. Vi använder också funktionen toFront () för att konfigurera de olika grafiska lagren, med det lager vi vill ha överst hela tiden som deklarerats förra.
I det här exemplet behöver man inte flytta visningenFörst till framsidan eftersom det kommer att vara som standard under displaySecond-gruppen, men det är bra att bli van vid att uttryckligen lägga varje bildgrupp. De flesta projekt kommer att sluta med mer än två lager.
Vi har också lagt till en bild för varje grupp. När vi startar appen ska den andra bilden vara ovanpå den första bilden.
funktion screenLayer () displayFirst: toFront (); slutet
Vi har redan lagrat vår grafik med gruppen DisplaySecond ovanpå displayenFörsta gruppen. Den här funktionen flyttar displayen först till framsidan.
funktion moveOne () displaySecond.x = displaySecond.x + global_move_x; slutet
MoveOne-funktionen flyttar den andra bilden till höger med 20% av skärmens bredd. När vi kallar den här funktionen kommer displayen andra gruppen att ligga bakom displayenFörsta gruppen.
funktion moveTwo () displayMain.x = displayMain.x + global_move_x; slutet
MoveTwo-funktionen flyttar båda bilderna till höger med 20% av skärmens bredd. I stället för att flytta varje grupp individuellt använder vi menyn DisplayMain för att flytta dem båda samtidigt. Det här är ett bra exempel på hur en bildskärmsgrupp som innehåller flera bildskärmsgrupper kan användas för att manipulera många bilder samtidigt.
skärmen Inställning (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);
Den här sista koden visar vad som händer när vi kör dessa funktioner. Vi använder funktionen timer.performWithDelay för att avaktivera funktionerna varje sekund efter att appen har startat. Om du inte är bekant med den här funktionen är den första varianten tiden att fördröja uttryckt i millisekunder och den andra är den funktion som vi vill springa efter den förseningen.
När du startar appen bör du ha image2.png ovanpå image1.png. Funktionen ScreenLayer kommer att elda och ta med image1.png framåt. MoveOne-funktionen flyttar image2.png utifrån under image1.png, och flyttaTwo-funktionen kommer att eldas senast, samtidigt som båda bilderna flyttas.
Så här fixar du en långsam iPad
Det är viktigt att komma ihåg att var och en av dessa grupper kan ha dussintals bilder i dem. Och precis som flyttenTwo-funktionen flyttat båda bilderna med en rad kod, kommer alla bilder i en grupp att ta de kommandon som ges till gruppen.
Tekniskt sett kan DisplayMain-gruppen ha både bildskärmsgrupper och bilder som finns i den. Det är dock en bra praxis att låta vissa grupper som displayMain fungera som behållare för andra grupper utan några bilder för att skapa bättre organisation.
Denna handledning använder sig av visningsobjektet. Läs mer om visningsobjektet.
Så här börjar du Utveckla iPad Apps
