Hoe om te laai, skuif en bring grafika na die voorkant

Gebruik die Corona SDK om grafieke te manipuleer

Die belangrikste komponent van die skep, manipulering en bestuur van grafika in die Corona SDK is die vertoningsvoorwerp. Nie net kan hierdie voorwerp gebruik word om 'n prent uit 'n lêer te vertoon nie, dalk net so belangrik, kan jy jou beelde saam groepeer. Hierdeur kan jy 'n hele reeks grafiese skerms gelyktydig op die skerm beweeg en laaggrafika bo-op mekaar.

Hierdie handleiding sal jou die basiese beginsels leer om vertoningsgroepe te gebruik om die grafiese voorwerpe in jou projek te organiseer. Dit sal gedemonstreer word deur twee verskillende lae te skep, een wat die normale skerm verteenwoordig en 'n ander wat 'n modale laag voorstel wat bo-op dit geplaas word. Benewens die laai van die grafika, gebruik ons ​​ook die oorgangsobjek om die hele modale groep te skuif.

Hoe om jou program te bemark

Nota: Om saam met hierdie tutoriaal te volg, benodig jy twee beelde: image1.png en image2.png. Dit kan enige beelde wees wat u kies, maar die handleiding sal die beste werk as u beelde ongeveer 100 pixels per 100 pixels het. Dit sal jou toelaat om maklik te sien wat met die beelde gebeur.

Om te begin, sal ons 'n nuwe lêer genaamd main.lua oopmaak en ons kode begin bou:

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

Hierdie afdeling kode stel ons ui-biblioteek op en verklaar deur vertoningsgroepe: displayMain, displayFirst en displaySecond. Ons sal hierdie grafieke na die eerste laag gebruik en dan beweeg. Die globale_move_x-veranderlike is 20% van die breedte van die vertoning sodat ons die beweging kan sien.

funksie setupScreen () displayMain: insert (displayFirst); displayMain: voeg (displaySecond); displayFirst: toFront (); displaySecond: toFront (); plaaslike agtergrond = display.newImage ("image1.png", 0,0); displayFirst: voeg (agtergrond); plaaslike agtergrond = display.newImage ("image2.png", 0,0); displaySecond: voeg (agtergrond); einde

Die setupScreen-funksie demonstreer hoe om vertoningsgroepe by die hoof vertoningsgroep te voeg. Ons gebruik ook die toFront () funksie om die verskillende grafiese lae op te stel, met die laag wat ons al die laaste keer wil hê.

In hierdie voorbeeld is dit nie regtig nodig om die vertoning eerste na die voorkant te skuif nie, aangesien dit standaard sal wees onder die vertoningSecond-groep, maar dit is goed om in die gewoonte te kom om elke vertoningsgroep uit te druk. Die meeste projekte eindig met meer as twee lae.

Ons het ook 'n prent by elke groep gevoeg. Wanneer ons die program begin, moet die tweede prent bo-op die eerste prentjie wees.

funksie skerm Laer () vertoning Eerste: toFront (); einde

Ons het ons grafika alreeds gelaag met die vertoningSekonde groep bo-aan die vertoningFirst groep. Hierdie funksie sal vertoon eerste van die voorkant.

funksie moveOne () displaySecond.x = displaySecond.x + global_move_x; einde

Die moveOne-funksie sal die tweede beeld regs beweeg met 20% van die skermwydte. Wanneer ons hierdie funksie noem, sal die displaySecond-groep agter die vertoning wees. Eerste groep.

funksie beweegTwo () displayMain.x = displayMain.x + global_move_x; einde

Die skuif Twee funksie beweeg beide beelde regs met 20% van die skerm breedte. In plaas daarvan om elke groep individueel te verskuif, gebruik ons ​​die vertoning Meeste groep om hulle albei gelyktydig te skuif. Dit is 'n goeie voorbeeld van hoe 'n vertoningsgroep wat verskeie vertoningsgroepe bevat, gebruik kan word om baie grafiese gelyktydig te manipuleer.

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

Hierdie laaste bietjie kode toon aan wat gebeur wanneer ons hierdie funksies uitvoer. Ons sal die timer.performWithDelay-funksie gebruik om elke keer die funksies uit te skakel nadat die program geloods is. As u nie met hierdie funksie onbekend is nie, is die eerste veranderlike die tyd om uit te stel in millisekondes en die tweede is die funksie wat ons na daardie vertraging wil laat loop.

Wanneer jy die program bekendstel, moet jy image2.png bo-op image1.png hê. Die skermlaag funksie sal brand en bring image1.png aan die voorkant. Die skuifOne-funksie sal image2.png uit onder image1.png skuif, en die skuifTwo-funksie sal laaste brand, beide beelde op dieselfde tyd beweeg.

Hoe om 'n stadige iPad te herstel

Dit is belangrik om te onthou dat elkeen van hierdie groepe tientalle beelde in hulle kan hê. En net soos die skuif Twee funksies albei beelde met een reël kode verskuif, sal alle beelde binne 'n groep die opdragte wat aan die groep gegee word, neem.

Tegnies kan die displayMain-groep beide vertoningsgroepe en beelde bevat. Dit is egter 'n goeie oefening om sommige groepe soos displayMain as houers vir ander groepe te laat optree sonder enige beelde om beter organisasie te skep.

Hierdie handleiding gebruik die vertoningsvoorwerp. Kom meer te wete oor die vertoningsvoorwerp.

Hoe om te begin met die ontwikkeling van iPad-programme