Πώς να Layer, Μετακίνηση και να φέρει γραφικά στο μπροστινό μέρος

Χρησιμοποιώντας το SDK της Corona για να χειριστείτε γραφικά

Το βασικό στοιχείο της δημιουργίας, χειρισμού και διαχείρισης γραφικών στο SDK Corona είναι το αντικείμενο οθόνης. Όχι μόνο αυτό το αντικείμενο μπορεί να χρησιμοποιηθεί για να εμφανίσει μια εικόνα από ένα αρχείο, ίσως εξίσου σημαντικό, σας επιτρέπει να ομαδοποιήσετε τις εικόνες σας μαζί. Αυτό σας επιτρέπει να μετακινήσετε μια ολόκληρη σειρά γραφικών γύρω από την οθόνη ταυτόχρονα και τα γραφικά στρώματα επάνω ο ένας στον άλλο.

Αυτό το σεμινάριο θα σας διδάξει τα βασικά στοιχεία της χρήσης ομάδων προβολής για να οργανώσετε τα γραφικά αντικείμενα στο έργο σας. Αυτό θα αποδειχθεί δημιουργώντας δύο διαφορετικά στρώματα, το ένα εκπροσωπώντας την κανονική οθόνη και ένα άλλο που αντιπροσωπεύει ένα στρώμα τρόπων που θα τοποθετηθεί επάνω του. Εκτός από τη στρωματοποίηση των γραφικών, θα χρησιμοποιήσουμε επίσης το μεταβατικό αντικείμενο για να μετακινήσουμε ολόκληρη την ομάδα μεταφορών.

Πώς να εμπορευτείτε την εφαρμογή σας

Σημείωση: Για να ακολουθήσετε μαζί με αυτό το σεμινάριο, θα χρειαστείτε δύο εικόνες: image1.png και image2.png. Αυτές μπορεί να είναι οποιεσδήποτε εικόνες που επιλέγετε, αλλά το σεμινάριο θα λειτουργήσει καλύτερα αν έχετε εικόνες περίπου 100 εικονοστοιχεία ανά 100 pixel. Αυτό θα σας επιτρέψει να δείτε εύκολα τι συμβαίνει στις εικόνες.

Για να ξεκινήσετε, θα ανοίξουμε ένα νέο αρχείο που ονομάζεται main.lua και θα αρχίσουμε να δημιουργούμε τον κώδικα:

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

Αυτή η ενότητα του κώδικα ρυθμίζει τη βιβλιοθήκη ui και δηλώνει μέσω των ομάδων προβολής: displayMain, displayFirst και displaySecond. Θα τα χρησιμοποιήσουμε πρώτα για να στρώσουμε τα γραφικά μας και στη συνέχεια να τα μετακινήσουμε. Η μεταβλητή global_move_x έχει οριστεί στο 20% του πλάτους της οθόνης ώστε να δούμε την κίνηση.

λειτουργία setupScreen () displayMain: εισαγωγή (displayFirst); displayMain: εισαγάγετε (εμφάνισηΠρόσφατα); displayFirst: toFront (); Εμφάνιση δευτερόλεπτου: toFront (); τοπικό υπόβαθρο = display.newImage ("image1.png", 0,0); displayFirst: εισάγετε (φόντο); τοπικό υπόβαθρο = display.newImage ("image2.png", 0,0); displaySecond: εισαγωγή (φόντο); τέλος

Η λειτουργία setupScreen παρουσιάζει τον τρόπο προσθήκης ομάδων προβολής στην κύρια ομάδα εμφάνισης. Χρησιμοποιούμε επίσης τη συνάρτηση toFront () για να ρυθμίσουμε τα διαφορετικά επίπεδα γραφικών, με το στρώμα που θέλουμε πάνω από το χρόνο που δηλώσαμε τελευταία.

Σε αυτό το παράδειγμα, δεν είναι πραγματικά απαραίτητο να μετακινήσετε το displayFirst προς τα εμπρός, δεδομένου ότι θα είναι προεπιλεγμένο να είναι κάτω από την ομάδα DisplaySecond, αλλά είναι καλό να εισαγάγετε τη συνήθεια να τοποθετείτε ρητά σε κάθε ομάδα προβολής. Τα περισσότερα έργα θα καταλήξουν σε περισσότερα από δύο στρώματα.

Έχουμε προσθέσει επίσης μια εικόνα σε κάθε ομάδα. Όταν ξεκινάμε την εφαρμογή, η δεύτερη εικόνα πρέπει να βρίσκεται πάνω από την πρώτη εικόνα.

λειτουργία screenLayer () εμφάνισηΠρώτη: toFront (); τέλος

Έχουμε ήδη στρώσει τα γραφικά μας με την ομάδα DisplaySecond στην κορυφή της οθόνης FirstFirst. Αυτή η λειτουργία θα μετακινηθεί στην οθόνη firstFirst προς τα εμπρός.

λειτουργία moveOne () displaySecond.x = displaySecond.x + global_move_x; τέλος

Η λειτουργία moveOne θα μετακινήσει τη δεύτερη εικόνα προς τα δεξιά κατά 20% του πλάτους της οθόνης. Όταν ονομάζουμε αυτή τη συνάρτηση, η ομάδα εμφάνισης δεύτερης ομάδας θα βρίσκεται πίσω από την πρώτη ομάδα εμφάνισης.

λειτουργία moveTwo () displayMain.x = displayMain.x + global_move_x; τέλος

Η λειτουργία moveTwo θα μετακινήσει και τις δύο εικόνες προς τα δεξιά κατά 20% του πλάτους της οθόνης. Ωστόσο, αντί να κινούμε κάθε ομάδα ξεχωριστά, θα χρησιμοποιήσουμε την ομάδα displayMain για να τις μετακινήσουμε ταυτόχρονα. Αυτό είναι ένα εξαιρετικό παράδειγμα του τρόπου με τον οποίο μια ομάδα οθόνης που περιέχει πολλές ομάδες εμφάνισης μπορεί να χρησιμοποιηθεί για να χειριστεί πολλά γραφικά ταυτόχρονα.

setupScreen (); timer.performWithDelay (1000, screenLayer). timer.performWithDelay (2000, moveOne). timer.performWithDelay (3000, κίνησηTwo);

Αυτό το τελευταίο κομμάτι του κώδικα καταδεικνύει τι συμβαίνει όταν εκτελούμε αυτές τις λειτουργίες. Θα χρησιμοποιήσουμε τη λειτουργία timer.performWithDelay για να πυροδοτήσουμε τις λειτουργίες κάθε δευτερόλεπτο μετά την εκκίνηση της εφαρμογής. Αν δεν είστε εξοικειωμένοι με αυτή τη λειτουργία, η πρώτη μεταβλητή είναι ο χρόνος καθυστέρησης που εκφράζεται σε χιλιοστά του δευτερολέπτου και ο δεύτερος είναι η λειτουργία που θέλουμε να τρέξουμε μετά από αυτήν την καθυστέρηση.

Όταν εκκινείτε την εφαρμογή, θα πρέπει να έχετε το image2.png στην κορυφή του image1.png. Η λειτουργία screenLayer θα πυροδοτήσει και θα φέρει image1.png μπροστά. Η λειτουργία moveOne θα μετακινήσει το image2.png από κάτω από το image1.png και η λειτουργία moveTwo θα πυροβολήσει τελευταία, μετακινώντας και τις δύο εικόνες ταυτόχρονα.

Πώς να καθορίσει ένα αργό iPad

Είναι σημαντικό να θυμάστε ότι κάθε μία από αυτές τις ομάδες θα μπορούσε να έχει δεκάδες εικόνες σε αυτές. Και ακριβώς καθώς η λειτουργία moveTwo μετακινήθηκε και στις δύο εικόνες με μία γραμμή κώδικα, όλες οι εικόνες μέσα σε μια ομάδα θα λάβουν τις εντολές που δόθηκαν στην ομάδα.

Από τεχνικής απόψεως, η ομάδα displayMain θα μπορούσε να έχει και ομάδες εμφάνισης και εικόνες που περιέχονται σε αυτήν. Ωστόσο, είναι μια καλή πρακτική να αφήσουμε ορισμένες ομάδες όπως το displayMain να λειτουργούν ως δοχεία για άλλες ομάδες χωρίς εικόνες για να δημιουργήσουν καλύτερη οργάνωση.

Αυτό το σεμινάριο κάνει χρήση του αντικειμένου εμφάνισης. Μάθετε περισσότερα σχετικά με το αντικείμενο οθόνης.

Πώς να ξεκινήσετε την ανάπτυξη εφαρμογών iPad