Kluczowym elementem tworzenia, manipulowania i zarządzania grafiką w SDK Corona jest obiekt wyświetlany. Tego obiektu można używać nie tylko do wyświetlania obrazu z pliku, ale co równie ważne, pozwala on grupować zdjęcia razem. Umożliwia to jednoczesne przeniesienie całego zestawu grafik na ekran i grafikę warstwową umieszczoną jeden na drugim.
Ten samouczek nauczy Cię podstaw korzystania z grup wyświetlania do organizowania obiektów graficznych w projekcie. Zostanie to zademonstrowane poprzez utworzenie dwóch różnych warstw, z których jedna reprezentuje normalny ekran, a druga reprezentuje warstwę modalną, aby umieścić ją na wierzchu. Oprócz warstwowania grafiki użyjemy również obiektu przejścia do przeniesienia całej grupy modalnej.
Jak sprzedawać swoją aplikację
Uwaga: Aby śledzić ten samouczek, będziesz potrzebować dwóch obrazów: image1.png i image2.png. Mogą to być dowolne wybrane zdjęcia, ale samouczek będzie działał najlepiej, jeśli obrazy mają rozmiar około 100 pikseli na 100 pikseli. Pozwoli ci to łatwo zobaczyć, co dzieje się z obrazami.
Aby rozpocząć, otworzymy nowy plik o nazwie main.lua i zaczniemy budować nasz kod:
displayMain = display.newGroup (); displayFirst = display.newGroup (); displaySecond = display.newGroup (); global_move_x = display.contentWidth / 5;
Ta sekcja kodu konfiguruje naszą bibliotekę Ui i deklaruje poprzez grupy wyświetlania: displayMain, displayFirst i displaySecond. Użyjemy ich, aby najpierw ułożyć naszą grafikę, a następnie przenieść. Zmienna global_move_x jest ustawiona na 20% szerokości wyświetlacza, dzięki czemu możemy zobaczyć ruch.
function setupScreen () displayMain: insert (displayFirst); displayMain: insert (displaySecond); displayFirst: toFront (); displaySecond: toFront (); lokalne tło = display.newImage ("image1.png", 0,0); displayFirst: insert (background); lokalne tło = display.newImage ("image2.png", 0,0); displaySecond: insert (background); koniec
Funkcja setupScreen demonstruje sposób dodawania grup wyświetlania do głównej grupy wyświetlania. Używamy także funkcji toFront () do konfigurowania różnych warstw graficznych, z warstwą, na której chcemy umieszczać całość przez cały czas zadeklarowany jako ostatni.
W tym przykładzie tak naprawdę nie trzeba przesuwać elementu displayFirst na początek, ponieważ domyślnie znajduje się on poniżej grupy DisplaySecond, ale dobrze jest wejść w nawyk jawnego nakładania warstw na każdą grupę wyświetlania. Większość projektów kończy się na więcej niż dwóch warstwach.
Dodaliśmy także obraz do każdej grupy. Gdy uruchamiamy aplikację, drugi obraz powinien znajdować się na górze pierwszego obrazu.
function screenLayer () displayFirst: toFront (); koniec
Układaliśmy już naszą grafikę z grupą displaySecond u góry grupy displayFirst. Ta funkcja przeniesie displayFirst do przodu.
function moveOne () displaySecond.x = displaySecond.x + global_move_x; koniec
Funkcja moveOne przeniesie drugi obraz w prawo o 20% szerokości ekranu. Kiedy wywołujemy tę funkcję, grupa displaySecond znajdzie się za grupą displayFirst.
function moveTwo () displayMain.x = displayMain.x + global_move_x; koniec
Funkcja moveTwo spowoduje przesunięcie obu obrazów w prawo o 20% szerokości ekranu. Jednak zamiast przesuwać każdą grupę osobno, będziemy używać grupy displayMain, aby przenosić je jednocześnie. Jest to świetny przykład tego, w jaki sposób grupa wyświetlania zawierająca wiele grup wyświetlania może być użyta do manipulowania wieloma grafikami naraz.
setupScreen (); timer.performWithDelay (1000, screenLayer); timer.performWithDelay (2000, moveOne); timer.performWithDelay (3000, moveTwo);
Ten ostatni fragment kodu pokazuje, co dzieje się, gdy uruchamiamy te funkcje. Użyjemy funkcji timer.performWithDelay do odpalania funkcji co sekundę po uruchomieniu aplikacji. Jeśli nie znasz tej funkcji, pierwszą zmienną jest czas opóźnienia wyrażony w milisekundach, a drugi to funkcja, którą chcemy uruchomić po tym opóźnieniu.
Po uruchomieniu aplikacji powinieneś mieć image2.png na górze image1.png. Funkcja ScreenLayer zostanie uruchomiona i przeniesie image1.png na wierzch. Funkcja moveOne przeniesie image2.png z under image1.png, a funkcja moveTwo uruchomi się jako ostatnia, przesuwając oba obrazy jednocześnie.
Jak naprawić wolny iPad
Należy pamiętać, że każda z tych grup może zawierać dziesiątki obrazów. I tak jak funkcja moveTwo przesuwała oba obrazy z jedną linią kodu, wszystkie obrazy w grupie przyjmują polecenia nadane grupie.
Technicznie, grupa displayMain może zawierać zarówno grupy wyświetlania, jak i obrazy w niej zawarte. Dobrą praktyką jest jednak pozwolenie niektórym grupom, takim jak displayMain, działać jako kontenery dla innych grup bez żadnych obrazów w celu stworzenia lepszej organizacji.
Ten samouczek używa obiektu wyświetlanego. Dowiedz się więcej o obiekcie wyświetlanym.
Jak zacząć Tworzenie aplikacji na iPada
