Ako na vrstvu, presunúť a priniesť grafiku do frontu

Použitie súpravy Corona SDK na manipuláciu s grafikou

Kľúčovou súčasťou tvorby, manipulácie a správy grafiky v súprave Corona SDK je objekt zobrazenia. Nielen, že tento objekt sa môže použiť na zobrazenie obrázka zo súboru, možno rovnako dôležitý, umožňuje vám zoskupiť obrazy dohromady. To vám umožní presunúť celú sadu grafiky okolo obrazovky naraz a vrstvu grafiky nad sebou.

Tento návod vás naučí základy používania skupín zobrazovania na usporiadanie grafických objektov vo vašom projekte. Toto sa preukáže vytvorením dvoch rôznych vrstiev, z ktorých jedna predstavuje normálnu obrazovku a druhá predstavuje modálnu vrstvu umiestnenú na jej vrchole. Okrem vrstvenia grafiky použijeme prechodový objekt tak, aby sme presunuli celú modálnu skupinu.

Ako predávať aplikáciu

Poznámka: Aby ste mohli sledovať tento tutoriál, budete potrebovať dva obrázky: image1.png a image2.png. Môže ísť o ľubovoľné obrázky, ktoré si vyberiete, ale výukový program bude fungovať najlepšie, ak máte obrázky okolo 100 pixelov až 100 pixelov. To vám umožní ľahko zistiť, čo sa deje s obrázkami.

Ak chcete začať, otvoríme nový súbor s názvom main.lua a začneme vytvárať náš kód:

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

Táto časť kódu nastavuje našu knižnicu ui a deklaruje prostredníctvom zobrazených skupín: displayMain, displayFirst a displaySecond. Budeme ich používať na prvú vrstvu našej grafiky a potom ich presunúť. Premenná global_move_x je nastavená na 20% šírky displeja, takže môžeme vidieť pohyb.

funkcia setupScreen () displayMain: vložiť (displayFirst); displayMain: vložka (displaySecond); displayFirst: toFront (); displaySecond: toFront (); lokálne pozadie = display.newImage ("image1.png", 0,0); displayFirst: vložka (pozadia); miestne pozadie = display.newImage ("image2.png", 0,0); displaySecond: vložka (pozadia); koniec

Funkcia setupScreen ukazuje, ako pridať skupiny zobrazení do hlavnej skupiny. Používame tiež funkciu toFront () na nastavenie rôznych vrstiev grafiky s vrstvou, ktorú chceme na vrchole všetkých deklarovaných posledných.

V tomto príklade nie je naozaj potrebné presunúť displayFirst dopredu, pretože predvolene bude pod skupinou zobrazenie druhej, ale je dobré, aby ste sa dostali do zvyku explicitne navrhnúť každú zobrazovaciu skupinu. Väčšina projektov skončí s viac ako dvoma vrstvami.

Do každej skupiny sme tiež pridali obrázok. Keď spustíme aplikáciu, druhý obrázok by mal byť nad prvým obrázkom.

funkcia screenLayer () displayFirst: toFront (); koniec

Už sme vrstvili našu grafiku s druhou skupinou displeja nad prvou skupinou. Táto funkcia sa presunie do prednej časti displeja.

funkcia moveOne () displaySecond.x = displaySecond.x + global_move_x; koniec

Funkcia moveOne presunie druhý obrázok doprava o 20% šírky obrazovky. Keď zavoláme túto funkciu, skupina druhého displeja bude za skupinou prvýkrát zobrazená.

funkcia moveTwo () displayMain.x = displayMain.x + global_move_x; koniec

Funkcia moveTwo presunie oba obrázky doprava o 20% šírky obrazovky. Avšak namiesto toho, aby sme jednotlivé skupiny presunuli jednotlivo, budeme používať skupinu displayMain, aby sme ich súčasne presunuli. Je to skvelý príklad toho, ako môže byť zobrazovacia skupina obsahujúca viacero zobrazovacích skupín použitá na manipuláciu s mnohými grafikami naraz.

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

Tento posledný bit kódu ukazuje, čo sa stane, keď spustíme tieto funkcie. Funkciu timer.performWithDelay použijeme na vypnutie funkcií každú sekundu po spustení aplikácie. Ak nie ste oboznámení s touto funkciou, prvá premenná je čas na oneskorenie vyjadrený v milisekundách a druhá je funkcia, ktorú chceme spustiť po tomto oneskorení.

Keď spustíte aplikáciu, mali by ste mať image2.png na obrázku image1.png. Funkcia screenLayer bude vypálená a obraz image1.png bude dopredu. Funkcia moveOne bude presunúť image2.png z obrázka image1.png a funkcia moveTwo bude strieľať naposledy, čím sa oba obrázky zmení súčasne.

Ako opraviť pomalý iPad

Je dôležité si uvedomiť, že každá z týchto skupín môže obsahovať desiatky obrázkov. A rovnako ako sa funkcia moveTwo pohybovala oboma obrázkami s jedným riadkom kódu, všetky obrázky v skupine prijmú príkazy dané skupine.

Z technického hľadiska môže skupina displayMain obsahovať obidve zobrazovacie skupiny a obrázky v nej obsiahnuté. Je však dobré, aby niektoré skupiny ako displayMain pôsobili ako kontajnery pre iné skupiny bez obrázkov, aby vytvorili lepšiu organizáciu.

Tento tutoriál využíva objekt zobrazenia. Získajte viac informácií o objekte zobrazenia.

Ako začať Vývoj aplikácií pre iPad