Πώς να οικοδομήσουμε μια πολυ-κρατική κινούμενη εικόνα στο παιχνίδι σας HTML5

Με όλη αυτή την κίνηση που συμβαίνει στο παιχνίδι σας HTML5, είστε σίγουροι ότι θέλετε πολλαπλά εξελιγμένα κινούμενα σχέδια. Μπορείτε να χρησιμοποιήσετε τη συνάρτηση changeImage () ή setImage () (είναι δύο διαφορετικά ονόματα για το ίδιο πράγμα) για να αλλάξετε την εικόνα που σχετίζεται με ένα sprite οποιαδήποτε στιγμή. Μερικές φορές, όμως, θέλετε πολύ πιο εξελιγμένα κινούμενα σχέδια. Ρίξτε μια ματιά στο walkAnim. html.

Υπάρχει μια μεγάλη ανταλλαγή εικόνων που συμβαίνει εδώ. Το περπάτημα κινούμενο σχέδιο είναι στην πραγματικότητα μια σειρά από οκτώ διαφορετικές εικόνες γρήγορα αντικαταστάθηκε για να δώσει την ψευδαίσθηση του περπατήματος. Υπάρχουν 4 διαφορετικά κινούμενα σχέδια (ένα για κάθε μία από τις κατευθυντήριες οδηγίες), έτσι ώστε να είναι συνολικά 32 διαφορετικές εικόνες. Ωστόσο, εάν κοιτάξετε τον κώδικα, θα δείτε ότι ο χαρακτήρας sprite περιέχει μόνο μία εικόνα.

Αυτή η εικόνα είναι μια σύνθετη κινούμενη εικόνα. Κάθε σειρά αντιπροσωπεύει μια κατεύθυνση και κάθε σειρά περιέχει έναν κύκλο ή μια σειρά εικόνων που προορίζονται να επαναληφθούν.

Το rpg_sprite_walk. png εικόνα δημιουργήθηκε από τον Franck Dupont. Δημοσίευσε γενναιόδωρα αυτήν την εικόνα στο OpenGameArt. org site, όπου είναι γνωστός ως "Arikel. "Απελευθέρωσε το έργο του με ειδική άδεια με την επωνυμία" Attribution - Share Alike. "Αυτό σημαίνει ότι οι άνθρωποι μπορούν να χρησιμοποιήσουν ή να ανασυνθέσουν το έργο τους δωρεάν, αρκεί να αποδίδουν τον αρχικό συγγραφέα.

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

Το απλό παιχνίδι. js βιβλιοθήκη περιέχει ένα χαρακτηριστικό γνώρισμα για την παραγωγή κινούμενων εικόνων πολλαπλών εικόνων αρκετά εύκολα. Κοιτάξτε τον κώδικα του walkAnim. html για να δείτε πώς λειτουργεί:

walkAnim. html var παιχνίδι? var φόντο? var χαρακτήρα? λειτουργία init () {παιχνίδι = νέα σκηνή (); φόντο = νέο Sprite (παιχνίδι, "rpgMap. png", 800, 600); Ιστορικό. setSpeed (0, 0); Ιστορικό. setPosition (400, 300). χαρακτήρα = νέο Sprite (παιχνίδι, "rpg_sprite_walk. Png", 192, 128); χαρακτήρα. loadAnimation (192,128,24,32). χαρακτήρα. generateAnimationCycles (); χαρακτήρα. renameCycles (νέος πίνακας ("κάτω", "πάνω", "αριστερά", "δεξιά"))? χαρακτήρα. setAnimationSpeed (500); // Ξεκίνημα χαρακτήρα παύσης. setPosition (440, 380). χαρακτήρας. setSpeed (0); χαρακτήρα. pauseAnimation (); χαρακτήρα. setCurrentCycle ("κάτω"); παιχνίδι.start ();} // end init λειτουργία ενημέρωσης () {παιχνίδι. Σαφή(); checkKeys (); Ιστορικό. εκσυγχρονίζω(); χαρακτήρας. ενημέρωση ();} // τερματική λειτουργία ενημέρωσης checkKeys () {if (keysDown [K_LEFT]) { χαρακτήρας. setSpeed (1); χαρακτήρα. playAnimation () χαρακτήρα. setMoveAngle (270); χαρακτήρα. setCurrentCycle ("αριστερά"); } αν (keysDown [K_RIGHT]) {χαρακτήρα. setSpeed (1); χαρακτήρας. playAnimation () χαρακτήρα. setMoveAngle (90); χαρακτήρας. setCurrentCycle ("δεξιά")?} αν (κλειδιάΚατά το [K_UP]) {χαρακτήρα. setSpeed (1); χαρακτήρας. playAnimation () χαρακτήρα. setMoveAngle (0); χαρακτήρας. setCurrentCycle ("επάνω")?} εάν (κλειδιάΚατά το [K_DOWN]) {χαρακτήρα. setSpeed (1); χαρακτήρας. playAnimation () χαρακτήρα. setMoveAngle (180); χαρακτήρας. setCurrentCycle ("κάτω")?} αν (κλειδιάΚατά το [K_SPACE]) { χαρακτήρα. setSpeed (0); χαρακτήρα. pauseAnimation (); χαρακτήρα. setCurrentCycle ("κάτω"); }}

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

Αποκτήστε μια εικόνα κινούμενων εικόνων.

Μπορείτε είτε να δημιουργήσετε μια εικόνα μόνοι σας είτε να δείτε τους εξαιρετικούς πόρους όπως το OpenGameArt. org για να βρουν δουλειά που έχουν κάνει άλλοι. Φυσικά, έχετε ευθύνη να σέβεστε το έργο του άλλου, αλλά υπάρχει σήμερα ένα μεγάλο έργο διαθέσιμο σε άκρως αποδεκτές άδειες. Βεβαιωθείτε ότι η εικόνα είναι οργανωμένη σε σειρές και στήλες και ότι κάθε υπο-εικόνα έχει ακριβώς το ίδιο μέγεθος.

Μπορεί να χρειαστεί να χάσετε τον επεξεργαστή εικόνων σας για να βεβαιωθείτε ότι η εικόνα είναι στη σωστή μορφή και ότι γνωρίζετε το μέγεθος κάθε υπο-εικόνας.
Συνδέστε την εικόνα κινούμενων εικόνων στον σπάιτ.

Θα συνδέσετε ολόκληρη την εικόνα με το sprite σας, αλλά απλά εμφανίζετε ένα μικρό κομμάτι της σε οποιαδήποτε στιγμή. Αυτό είναι πιο εύκολο από το να δουλεύεις με ένα σωρό εικόνες και είναι επίσης πιο αποτελεσματικό.
Δημιουργήστε ένα αντικείμενο κινούμενης εικόνας με τη μέθοδο loadAnimation ().

Όταν ενεργοποιείτε τη μέθοδο loadAnimation () ενός αντικειμένου, δημιουργείτε ένα εργαλείο κινούμενης εικόνας που βοηθά στη διαχείριση της κινούμενης εικόνας. Οι δύο πρώτες παράμετροι είναι το μέγεθος ολόκληρης της εικόνας (πλάτος και ύψος) και οι δύο παραμέτρους είναι το πλάτος και το ύψος κάθε υπο-εικόνας. Εάν λάβετε αυτές τις τιμές λανθασμένες, η κινούμενη εικόνα θα εμφανιστεί να μετακινηθεί. Συνεχίστε να παίζετε έως ότου λάβετε αυτές τις τιμές σωστά:
```
. loadAnimation (192,128,24,32).
```
Δημιουργήστε τους κύκλους κινούμενων εικόνων.

Κάθε σειρά θα μετατραπεί σε κύκλο animation. Η προεπιλεγμένη έκδοση (χωρίς παραμέτρους) λειτουργεί καλά στις περισσότερες περιπτώσεις. Αναζητήστε την τεκμηρίωση για τις πιο προηγμένες χρήσεις αυτού του εργαλείου:
```
. generateAnimationCycles ();
```
Μετονομάστε τους κύκλους.

Τα κινούμενα σχέδια που δημιουργήθηκαν με την εντολή buildAnimationCycles () έχουν προεπιλεγμένα ονόματα, αλλά είναι σχεδόν πάντα καλύτερα να επισυνάψετε τα δικά σας, πιο σημαντικά ονόματα. Προσθέστε έναν πίνακα με ένα όνομα που υποδεικνύει τι αντιπροσωπεύει κάθε γραμμή:
```
χαρακτήρας. renameCycles (νέος πίνακας ("κάτω", "πάνω", "αριστερά", "δεξιά"))?
```
Ορίστε την ταχύτητα κινούμενης εικόνας.

Η ταχύτητα κινούμενης εικόνας υποδεικνύει πόσο γρήγορα θα τρέξει η κινούμενη εικόνα. Μια τιμή 500 φαίνεται σωστή για τις περισσότερες εφαρμογές, αλλά μπορείτε να προσαρμόσετε αυτήν την τιμή έτσι ώστε ο κύκλος περιπάτου του χαρακτήρα να μοιάζει σαν να προωθεί το χαρακτήρα:
```
.setAnimationSpeed (500);
```
Ορίστε τον κύκλο που θέλετε να εμφανίσετε.

Η μέθοδος setCurrentCycle () σας επιτρέπει να επιλέξετε τον κύκλο με ένα από τα ονόματα που υποδείξατε στο χαρακτήρα renameAnimationCycles (): step
```
. setCurrentCycle ("κάτω");
```
Χρησιμοποιήστε την εντολή pauseAnimation () για να διακόψετε την κινούμενη εικόνα.

Η εντολή pauseAnimation () κάνει την κίνηση του animation προσωρινά να σταματήσει.
Χρησιμοποιήστε το playAnimation () για να ξεκινήσετε την κινούμενη εικόνα.

Αυτή η μέθοδος θα βρει συνεχώς τον τρέχοντα κύκλο κινούμενων εικόνων.

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