Πώς να δημιουργήσετε 2D animation στο Godot χρησιμοποιώντας το AnimatedSprite

Στην ανάπτυξη παιχνιδιών, τα κινούμενα σχέδια παίζουν καθοριστικό ρόλο στη δημιουργία μιας συναρπαστικής και καθηλωτικής εμπειρίας για τους παίκτες. Η προσθήκη κινούμενων εικόνων 2D στο παιχνίδι Godot μπορεί να ζωντανέψει τους χαρακτήρες και το περιβάλλον σας, καθιστώντας τα πιο ελκυστικά οπτικά και διαδραστικά.

Ευτυχώς, ο Godot παρέχει ισχυρά εργαλεία και δυνατότητες για τη δημιουργία και τον έλεγχο κινούμενων εικόνων 2D εύκολα.

Ρύθμιση του παιχνιδιού Γκοντό

Για να ξεκινήσετε, δημιουργήστε μια βασική σκηνή παιχνιδιού 2D η μηχανή παιχνιδιών Γκοντό. Δημιουργήστε μια νέα σκηνή και προσθέστε ένα KinematicBody2D κόμβος ως χαρακτήρας παίκτη. μεσα στην KinematicBody2D, πρόσθεσε ένα CollisionShape2D με ένα ορθογώνιο σχήμα που αντιπροσωπεύει τα όρια σύγκρουσης του παίκτη.

Ο κώδικας που χρησιμοποιείται σε αυτό το άρθρο είναι διαθέσιμος σε αυτό Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.

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

Στη συνέχεια, γράψτε τον κωδικό GDScript για να ελέγξετε την κίνηση του παίκτη. Επισυνάψτε το ακόλουθο σενάριο στο KinematicBody2D κόμβος:

 επεκτείνει το KinematicBody2Dconst SPEED = 200func _physics_process (δέλτα): var velocity = Vector2.ZERO if Input.is_action_pressed("move_left"): velocity.x -= SPEED αν Input.is_action_pressed("move_right"): velocity.x += SPEED if Input.is_action_pressed("move_up"): velocity.y -= SPEED if Input.is_action_pressed("move_down"): velocity.y += SPEED velocity = move_and_slide (ταχύτητα)

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

Προσθήκη SpriteSheet στο AnimatedSprite

Τώρα, διαμορφώστε το AnimatedSprite για να χρησιμοποιήσετε ένα sprite φύλλο για κινούμενα σχέδια. Επίλεξε το AnimatedSprite κόμβο και μεταβείτε στο Κορνίζες ενότητα στην καρτέλα ιδιοτήτων του κόμβου. Εδώ, κάντε κλικ στο Νέα SpriteFrames κουμπί.

Εναλλαγή στο SpriteFrames καρτέλα που βρίσκεται στο κάτω μέρος του επεξεργαστή Godot. Στο SpriteFrames καρτέλα, κάντε κλικ στο Νέο κινούμενο σχέδιο κουμπί. Δημιουργήστε κινούμενα σχέδια όπως Περπατήστε και αδρανής προσθέτοντας κατάλληλα καρέ σε κάθε κινούμενη εικόνα.

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

Έλεγχος κινούμενων εικόνων με χρήση GDScript

Τώρα που έχετε ρυθμίσει τις κινούμενες εικόνες σας, μπορείτε να τις ελέγξετε μέσω προγραμματισμού χρησιμοποιώντας το GDScript.

Αναπαραγωγή και διακοπή της κινούμενης εικόνας

Ο έλεγχος της αναπαραγωγής των κινούμενων εικόνων είναι απαραίτητος για την παροχή δυναμικών και διαδραστικών εμπειριών στο παιχνίδι σας. ο AnimatedSprite Το node in Godot προσφέρει μεθόδους αναπαραγωγής και διακοπής κινούμενων εικόνων σύμφωνα με τη λογική του παιχνιδιού σας.

Επεκτείνετε το KinematicBody2D κόμβος και χειρίζεται το στοιχείο ελέγχου κινούμενων εικόνων εντός του _φυσική_διαδικασία λειτουργία. Μπορείτε να χρησιμοποιήσετε το play_animation και stop_animation εισόδους για την ενεργοποίηση των αντίστοιχων ενεργειών κινούμενης εικόνας.

 επεκτείνει το KinematicBody2Dfunc _physics_process (δέλτα): # Αναπαραγωγή της κινούμενης εικόνας εάν το Input.is_action_just_pressed("play_animation"): $AnimatedSprite.play() # Σταματήστε την κινούμενη εικόνα και επαναφέρετε το πρώτο καρέ εάν Input.is_action_just_pressed("stop_animation"): $AnimatedSprite.stop() $AnimatedSprite.frame = 0

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

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

Ομοίως, μπορείτε να ενεργοποιήσετε το stop_animation ενέργειες για την πλήρη διακοπή της κινούμενης εικόνας.

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

Περιστροφή της κινούμενης εικόνας

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

 επεκτείνει το KinematicBody2Dfunc _physics_process (δέλτα): if Input.is_action_just_pressed("rotate_animation"): # Περιστρέψτε το κινούμενο σχέδιο κατά 45 μοίρες δεξιόστροφα $AnimatedSprite.rotate (deg2rad (45))

Όταν πατάτε τα κουμπιά που σχετίζονται με το rotate_animation (μπορείτε να ορίσετε αυτήν την ενέργεια στον χάρτη εισόδου σας), το γυρίζω() μέθοδος καλείται στο AnimatedSprite κόμβος. Περιστρέφει τον κόμβο κατά 45 μοίρες προς τη φορά των δεικτών του ρολογιού χρησιμοποιώντας deg2rad() για να μετατρέψετε τις μοίρες σε ακτίνια.

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

Αναστροφή της κινούμενης εικόνας

Η αναστροφή της κινούμενης εικόνας οριζόντια ή κάθετα μπορεί να είναι χρήσιμη για την αντανάκλαση των αλλαγών στην κατεύθυνση των χαρακτήρων. Στον Γκοντό, το AnimatedSprite Ο κόμβος παρέχει ιδιότητες για τον έλεγχο της αναστροφής.

Για να αναστρέψετε το κινούμενο σχέδιο οριζόντια, ρυθμίστε το flip_h ιδιοκτησία του AnimatedSprite προς την αληθής. Αυτό θα αντικατοπτρίζει την κινούμενη εικόνα κατά μήκος του οριζόντιου άξονα. Ομοίως, ρυθμίζοντας το flip_v ιδιοκτησία σε αληθής θα αντικατοπτρίζει το κινούμενο σχέδιο κατά μήκος του κατακόρυφου άξονα.

 επεκτείνει το KinematicBody2Dfunc _physics_process (δέλτα): εάν Input.is_action_just_pressed("flip_animation"): $AnimatedSprite.flip_h = true # ή $AnimatedSprite.flip_v = αληθές για κάθετη αναστροφή

Εάν η συσκευή αναπαραγωγής πατήσει το flip_animation ενέργεια εισαγωγής και στη συνέχεια ορίστε το flip_h ιδιοκτησία του AnimatedSprite προς την αληθής. Αυτό θα γυρίσει το κινούμενο σχέδιο οριζόντια.

Χρήση σημάτων στο AnimatedSprite

Εκτός από τον προγραμματικό έλεγχο των κινούμενων εικόνων, ο Godot παρέχει ένα ισχυρό σύστημα συμβάντων που ονομάζεται σήματα. Τα σήματα σάς επιτρέπουν να απαντάτε σε συγκεκριμένα γεγονότα ή αλλαγές που συμβαίνουν κατά την εκτέλεση του παιχνιδιού σας.

Σε περίπτωση που AnimatedSprite, υπάρχουν δύο σημαντικά σήματα που μπορείτε να χρησιμοποιήσετε: animation_finished() και frame_changed().

1. animation_finished() Σήμα

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

 επεκτείνει το KinematicBody2Dfunc _ready(): $AnimatedSprite.connect("animation_finished", self, "_on_animation_finished")func _on_animation_finished(): # Εκτέλεση ενεργειών ή ενεργοποίηση συμβάντων εκτύπωσης ("Κινούμενη εικόνα ολοκληρώθηκε!") # Πρόσθετος κωδικός εδώ...

Συνδέστε το animation_finished() σήμα του AnimatedSprite στο _on_animation_finished() μέθοδο στο ίδιο σενάριο χρησιμοποιώντας το συνδέω-συωδεομαι() λειτουργία.

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

2. Σήμα frame_changed().

ο frame_changed() Το σήμα εκπέμπεται κάθε φορά που αλλάζει το τρέχον καρέ της κινούμενης εικόνας. Αυτό μπορεί να συμβεί όταν αναπαράγεται η κινούμενη εικόνα ή όταν τροποποιείτε μέσω προγραμματισμού το πλαίσιο. Μπορείτε να χρησιμοποιήσετε αυτό το σήμα για να εντοπίσετε αλλαγές καρέ και να αντιδράσετε ανάλογα.

 επεκτείνει το KinematicBody2Dfunc _ready(): $AnimatedSprite.connect("frame_changed", self, "_on_frame_changed")func _on_frame_changed(): # Εκτελέστε ενέργειες που βασίζονται στο τρέχον πλαίσιο var currentFrame = $AnimatedSprite.frame print("Τρέχον καρέ: ", currentFrame) # Πρόσθετος κωδικός εδώ...

Συνδέστε το frame_changed() σήμα του AnimatedSprite στο _on_frame_changed() μέθοδο στο ίδιο σενάριο. Όταν αλλάξει το πλαίσιο, μπορείτε να αποκτήσετε πρόσβαση στο τρέχον πλαίσιο χρησιμοποιώντας το _on_frame_changed() μέθοδο και εκτελέστε ενέργειες ή λογική με βάση την τιμή του πλαισίου.

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

Κάντε τα παιχνίδια Godot πιο ελκυστικά χρησιμοποιώντας κινούμενα σχέδια

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

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