Μπορείτε να επιτύχετε αυτό το εντυπωσιακό οπτικό αποτέλεσμα απλά μετακινώντας αντικείμενα με διαφορετικές ταχύτητες.
Η κύλιση Parallax είναι μια τεχνική που χρησιμοποιούν πολλά παιχνίδια 2D για να δημιουργήσουν μια ψευδαίσθηση βάθους και να προσθέσουν οπτικό ενδιαφέρον στο φόντο του παιχνιδιού. Επιτυγχάνει το αποτέλεσμα μετακινώντας διαφορετικά στρώματα του φόντου με διαφορετικές ταχύτητες σε σχέση με την κίνηση της κάμερας.
Το Godot 4 διευκολύνει από ποτέ την εφαρμογή της κύλισης parallax. Ο ισχυρός κινητήρας 2D του παρέχει ενσωματωμένη υποστήριξη για επίπεδα παράλλαξης, επιτρέποντάς σας να δημιουργείτε εντυπωσιακά οπτικά εφέ με ελάχιστη προσπάθεια.
Ρύθμιση του παιχνιδιού Γκοντό
Για να ξεκινήσετε, δημιουργήστε ένα νέο έργο 2D στο η μηχανή παιχνιδιών Γκοντό και έστησε τη σκηνή του παιχνιδιού με έναν χαρακτήρα παίκτη.
Ο κώδικας που χρησιμοποιείται σε αυτό το άρθρο είναι διαθέσιμος σε αυτό Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.
Για αυτό το παράδειγμα, προσθέστε ένα
CharacterBody2D κόμβος για την κίνηση του παίκτη. Προσθέστε επίσης α CollisionShape2D με ορθογώνιο σχήμα και α Sprite2D να αντιπροσωπεύει τον χαρακτήρα του παίκτη.extends CharacterBody2Dvar speed = 200
func _physics_process(delta):
var velocity = Vector2()if Input.is_action_pressed('ui_right'):
velocity.x += 1if Input.is_action_pressed('ui_left'):
velocity.x -= 1if Input.is_action_pressed('ui_down'):
velocity.y += 1if Input.is_action_pressed('ui_up'):
velocity.y -= 1
velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)
Με αυτόν τον κωδικό, ο χαρακτήρας του προγράμματος αναπαραγωγής μπορεί να μετακινηθεί αριστερά, δεξιά, πάνω και κάτω χρησιμοποιώντας τα πλήκτρα βέλους ή παρόμοιες εισόδους.
Δημιουργία διαφορετικών επιπέδων με κόμβους ParallaxLayer
Στη συνέχεια, δημιουργήστε το εφέ παράλλαξης προσθέτοντας πολλαπλάσια ParallaxLayer κόμβους στη σκηνή. Καθε ParallaxLayer θα αντιπροσωπεύει ένα διαφορετικό στρώμα του φόντου. Για να επιτευχθεί ένα πειστικό αποτέλεσμα παράλλαξης, τα στρώματα που βρίσκονται πιο μακριά από την κάμερα θα πρέπει να κινούνται πιο αργά από τα πιο κοντινά.
Προσθήκη StaticBody2D κόμβοι με CollisionShape2D σε κάθε ParallaxLayer για να δημιουργήσετε κάποια συγκρουόμενα αντικείμενα στο παρασκήνιο. Αυτά τα συγκρουόμενα αντικείμενα θα αλληλεπιδράσουν με τον παίκτη και άλλα στοιχεία του παιχνιδιού, προσθέτοντας περισσότερο βάθος στο παιχνίδι.
Ακολουθεί ο κώδικας GDScript για τη δημιουργία των επιπέδων παράλλαξης με συγκρουόμενα αντικείμενα:
extends ParallaxBackgroundfunc _ready():
# Create the first parallax layer
var layer1 = ParallaxLayer.new()
layer1.motion_scale = Vector2(0.2, 0.2)
add_child(layer1)# Add a StaticBody2D with CollisionShape2D to the first layer
var static_body1 = StaticBody2D.new()
layer1.add_child(static_body1)var collision_shape1 = CollisionShape2D.new()
var shape1 = RectangleShape2D.new()
shape1.extents = Vector2(32, 32)
collision_shape1.shape = shape1
static_body1.add_child(collision_shape1)# Create the second parallax layer
var layer2 = ParallaxLayer.new()
layer2.motion_scale = Vector2(0.5, 0.5)
add_child(layer2)# Add a StaticBody2D with CollisionShape2D to the second layer
var static_body2 = StaticBody2D.new()
layer2.add_child(static_body2)var collision_shape2 = CollisionShape2D.new()
var shape2 = RectangleShape2D.new()
shape2.extents = Vector2(64, 64)
collision_shape2.shape = shape2
static_body2.add_child(collision_shape2)# Create the third parallax layer
var layer3 = ParallaxLayer.new()
layer3.motion_scale = Vector2(1.0, 1.0)
add_child(layer3)# Add a StaticBody2D with CollisionShape2D to the third layer
var static_body3 = StaticBody2D.new()
layer3.add_child(static_body3)
var collision_shape3 = CollisionShape2D.new()
var shape3 = RectangleShape2D.new()
shape3.extents = Vector2(128, 128)
collision_shape3.shape = shape3
static_body3.add_child(collision_shape3)
Με αυτόν τον κώδικα, κάθε στρώμα παράλλαξης περιέχει τώρα ένα StaticBody2D κόμβος με α CollisionShape2D που αντιπροσωπεύει συγκρουόμενα αντικείμενα στο παρασκήνιο.
Αυτά τα συγκρουόμενα αντικείμενα θα αλληλεπιδράσουν με τον χαρακτήρα του παίκτη και άλλα στοιχεία του παιχνιδιού, προσθέτοντας περισσότερο βάθος και πολυπλοκότητα στο παιχνίδι.
Μετακίνηση διαφορετικών στρωμάτων με διαφορετική ταχύτητα
Τώρα που έχετε ρυθμίσει τα επίπεδα parallax, πρέπει να ενημερώσετε τις θέσεις τους με βάση την κίνηση του παίκτη. Αυτό θα δημιουργήσει το εφέ παράλλαξης, όπου τα επίπεδα που βρίσκονται πιο κοντά στην κάμερα κινούνται πιο γρήγορα από αυτά που βρίσκονται πιο μακριά.
Προσθέστε τον ακόλουθο κώδικα GDScript στη σκηνή του προγράμματος αναπαραγωγής:
extends CharacterBody2Dfunc _physics_process(delta):
...
move_and_collide(velocity * delta)
# Update parallax layers based on player movement
var parallax_background = get_parent()
var motion = -velocity * delta
parallax_background.set_scroll_offset(parallax_background.scroll_offset + motion)
Αυτός ο κώδικας υπολογίζει την κίνηση των επιπέδων παράλλαξης με βάση την κίνηση του παίκτη και ενημερώνει τη μετατόπιση κύλισης του κόμβου ParallaxBackground ανάλογα. Σημειώστε τη χρήση του αρνητικού πρόσημου για να διασφαλίσετε ότι τα στρώματα κινούνται προς την αντίθετη κατεύθυνση από την κίνηση του παίκτη.
Η τυχαία κύλιση παράλλαξης εισάγει ένα στοιχείο έκπληξης και απρόβλεπτου στο φόντο του παιχνιδιού σας. Δημιουργώντας και τοποθετώντας δυναμικά επίπεδα παράλλαξης κατά τη διάρκεια του παιχνιδιού, μπορείτε να δημιουργήσετε μια πιο ελκυστική και δυναμική εμπειρία για τους παίκτες.
Για να εφαρμόσετε τυχαία κύλιση παράλλαξης, προσθέστε νέα επίπεδα παράλλαξης με κλίμακες και θέσεις τυχαίας κίνησης.
extends ParallaxBackgroundconst MAX_LAYERS = 5
const MIN_SCALE = 0.2
const MAX_SCALE = 1.5
const MIN_SPEED = 0.01
const MAX_SPEED = 0.03
const MIN_X_POSITION = -500
const MAX_X_POSITION = 500
const MIN_Y_POSITION = -300
const MAX_Y_POSITION = 300func _ready():
for i in range(MAX_LAYERS):
create_random_layer()func create_random_layer():
# Add a new parallax layer with a random motion scale
var layer = ParallaxLayer.new()
var scale = lerp(MIN_SCALE, MAX_SCALE, randf())
layer.motion_scale = Vector2(scale, scale)var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
var y_position = randf_range(MIN_Y_POSITION, MAX_Y_POSITION)
layer.global_transform.origin.x = x_position
layer.global_transform.origin.y = y_positionadd_child(layer)
# Add a StaticBody2D with CollisionShape2D to the new layer
var static_body = StaticBody2D.new()
layer.add_child(static_body)var collision_shape = CollisionShape2D.new()
var shape = RectangleShape2D.new()
shape.extents = Vector2(32, 32)
collision_shape.shape = shape
static_body.add_child(collision_shape)
func remove_random_layer():
# Remove a random parallax layer
if get_child_count() > 0:
var random_index = randi() % get_child_count()
var layer_to_remove = get_child(random_index)
remove_child(layer_to_remove)
Αυτός ο κώδικας ορίζει σταθερές για τον έλεγχο της τυχαιότητας των επιπέδων παράλλαξης. Χρησιμοποιήστε το lerp συνάρτηση για παρεμβολή τιμών μεταξύ MIN_SCALE και MAX_SCALE, δημιουργώντας μια κλίμακα τυχαίας κίνησης για κάθε νέο στρώμα. Αυτή η λειτουργία έχει την ακόλουθη υπογραφή:
Variant lerp ( Variant from, Variant to, float weight )Περνώντας το αποτέλεσμα από randf() καθώς το βάρος σάς επιτρέπει να δημιουργείτε στρώματα με τυχαία κλίμακα.
ο randf_range Η συνάρτηση προσφέρει έναν άλλο τρόπο δημιουργίας τυχαίων τιμών εντός μιας περιοχής. Εδώ, η συνάρτηση create_random_layer τη χρησιμοποιεί για να δημιουργήσει τυχαίες θέσεις για τα νέα επίπεδα εντός ενός καθορισμένου εύρους:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Το παιχνίδι επίδειξης θα πρέπει τώρα να μοιάζει με αυτό:
Συμπεριλαμβανομένων πρόσθετων χαρακτηριστικών
Η κύλιση Parallax παρέχει μια σταθερή βάση για βελτίωση του παιχνιδιού πλατφόρμας σας οπτική ελκυστικότητα, αλλά μπορείτε να το προχωρήσετε ακόμη περισσότερο ενσωματώνοντας πρόσθετες λειτουργίες. Εδώ είναι μερικές ιδέες που πρέπει να εξετάσετε.
Αντικείμενα φόντου
Δημιουργήστε περισσότερα διαδραστικά στοιχεία στα επίπεδα parallax σας, όπως πλατφόρμες, κινούμενα εμπόδια ή κινούμενους χαρακτήρες φόντου. Αυτά τα αντικείμενα μπορούν να προσθέσουν βάθος και διαδραστικότητα στο παιχνίδι εξόδου σας.
Δυναμικός φωτισμός
Εισαγάγετε δυναμικά εφέ φωτισμού στα επίπεδα parallax σας. Προσθέτοντας πηγές φωτός και σκιές, μπορείτε να δημιουργήσετε μια αίσθηση ρεαλισμού και βάθους στον κόσμο του παιχνιδιού. Το σύστημα φωτισμού του Godot λειτουργεί καλά με παιχνίδια 2D και μπορεί να βελτιώσει σημαντικά την οπτική ποιότητα.
Επιδράσεις Σωματιδίων
Ενσωματώστε συστήματα σωματιδίων στα επίπεδα parallax σας για να προσθέσετε διακριτικά οπτικά εφέ. Τα φύλλα που πέφτουν, τα σύννεφα που παρασύρονται ή τα αστραφτερά αστέρια μπορούν να βελτιώσουν την ατμόσφαιρα και να κάνουν τον κόσμο του παιχνιδιού να νιώσει πιο ζωντανός. Μπορείτε επίσης να προσθέστε ηχητικά εφέ χωρίς πνευματικά δικαιώματα στο παιχνίδι σου.
Κύκλος ημέρας-νύχτας
Εφαρμόστε έναν κύκλο ημέρας-νύχτας που αλλάζει το χρώμα και την ένταση των στρωμάτων παράλλαξης με βάση την ώρα της ημέρας στο παιχνίδι. Αυτό το δυναμικό χαρακτηριστικό μπορεί να προσφέρει στους παίκτες μια συνεχώς εξελισσόμενη εμπειρία καθώς προχωρούν στο παιχνίδι.
Ενώ η κύλιση parallax μπορεί να ανεβάσει τα γραφικά του παιχνιδιού σας, είναι απαραίτητο να ακολουθήσετε ορισμένες βέλτιστες πρακτικές για να εξασφαλίσετε μια ομαλή και ευχάριστη εμπειρία.
Βελτιστοποίηση απόδοσης
Λάβετε υπόψη τον αριθμό των επιπέδων παράλλαξης και την πολυπλοκότητά τους. Τα πάρα πολλά επίπεδα ή τα στοιχεία υψηλής ανάλυσης μπορούν να οδηγήσουν σε προβλήματα απόδοσης, ειδικά σε λιγότερο ισχυρές συσκευές. Βελτιστοποιήστε το έργο τέχνης σας και χρησιμοποιήστε απλοποιημένα σχήματα σύγκρουσης όπου είναι δυνατόν.
Διάταξη στρώσεων
Τακτοποιήστε προσεκτικά τα παράλλαξά σας. Εξετάστε την οπτική ιεραρχία και το επιθυμητό αποτέλεσμα βάθους. Τα επίπεδα που βρίσκονται πιο κοντά στην κάμερα θα πρέπει να κινούνται πιο γρήγορα, ενώ αυτά που βρίσκονται πιο μακριά θα πρέπει να κινούνται πιο αργά.
Όρια κάμερας
Ορίστε όρια για την κίνηση της κάμερας για να αποτρέψετε ανεπιθύμητο κενό χώρο ή οπτικές δυσλειτουργίες όταν ο παίκτης φτάσει στις άκρες του κόσμου του παιχνιδιού. Αυτό εξασφαλίζει μια απρόσκοπτη εμπειρία για τους παίκτες.
Δοκιμές και προσαρμογές
Δοκιμάστε την κύλιση parallax σε διάφορες συσκευές και μεγέθη οθόνης για να βεβαιωθείτε ότι έχει καλή εμφάνιση και απόδοση σε διαφορετικές πλατφόρμες. Η προσαρμογή των κλιμάκων κίνησης, των θέσεων των στρωμάτων και άλλων παραμέτρων μπορεί να ρυθμίσει με ακρίβεια το εφέ παράλλαξης για τα καλύτερα αποτελέσματα.
Η προσθήκη τυχαίας κύλισης παράλλαξης μπορεί να βελτιώσει σημαντικά το επίπεδο αφοσίωσης του παιχνιδιού Godot. Η τυχαία κύλιση παράλλαξης περιλαμβάνει τη δυναμική δημιουργία και τοποθέτηση επιπέδων παράλλαξης κατά τη διάρκεια του παιχνιδιού.
Κάνοντας αυτό, δημιουργείτε μια αίσθηση κίνησης και δυναμισμού στο παρασκήνιο, κάνοντας τον κόσμο του παιχνιδιού να νιώθει ζωντανός και απρόβλεπτος. Οι παίκτες θα βιώσουν ένα συνεχώς μεταβαλλόμενο οπτικό περιβάλλον, προσθέτοντας ένα επιπλέον επίπεδο ενθουσιασμού στην εμπειρία παιχνιδιού τους.
