אתה יכול להשיג את האפקט החזותי המרשים הזה פשוט על ידי הזזת עצמים במהירויות שונות.

גלילת Parallax היא טכניקה בה משתמשים רבים ממשחקי 2D כדי ליצור אשליה של עומק ולהוסיף עניין ויזואלי לרקע של המשחק. הוא משיג את האפקט על ידי הזזת שכבות שונות של הרקע במהירויות שונות ביחס לתנועת המצלמה.

Godot 4 מקל מאי פעם ליישם גלילת פרלקסה. מנוע הדו-ממד החזק שלו מספק תמיכה מובנית לשכבות פרלקסה, ומאפשר לך ליצור אפקטים ויזואליים מדהימים במינימום מאמץ.

הגדרת משחק Godot

כדי להתחיל, צור פרויקט דו-ממדי חדש ב מנוע המשחק Godot ולהגדיר את סצנת המשחק עם דמות שחקן.

הקוד המשמש במאמר זה זמין כאן מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

עבור דוגמה זו, הוסף א CharacterBody2D צומת לתנועת שחקן. הוסף גם א CollisionShape2D עם צורת מלבן וא ספרייט2D לייצג את דמות השחקן.

extends CharacterBody2D

var speed = 200

func _physics_process(delta):
var velocity = Vector2()

if Input.is_action_pressed('ui_right'):
velocity.x += 1

if Input.is_action_pressed('ui_left'):
velocity.x -= 1

if Input.is_action_pressed('ui_down'):
velocity.y += 1

if Input.is_action_pressed('ui_up'):
velocity.y -= 1

instagram viewer

velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)

עם קוד זה, דמות השחקן יכולה לנוע שמאלה, ימינה, למעלה ולמטה באמצעות מקשי החצים או כניסות דומות.

יצירת שכבות שונות עם צמתי ParallaxLayer

לאחר מכן, צור את אפקט הפרלקס על ידי הוספת מרובים שכבת Parallax צמתים למקום. כל אחד שכבת Parallax ייצג שכבה אחרת של הרקע. כדי להשיג אפקט פרלקסי משכנע, השכבות הרחוקות יותר מהמצלמה צריכות לנוע לאט יותר מהשכבות הקרובות יותר.

לְהוֹסִיף StaticBody2D צמתים עם CollisionShape2D בכל אחד שכבת Parallax כדי ליצור כמה אובייקטים הניתנים להתנגשות ברקע. האובייקטים הניתנים להתנגשות אלה יתקשרו עם השחקן ועם מרכיבי משחק אחרים, ויוסיפו יותר עומק למשחק.

להלן קוד ה-GDScript ליצירת שכבות הפרלקסה עם אובייקטים הניתנים להתנגשות:

extends ParallaxBackground

func _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)

עם קוד זה, כל שכבת פרלקסה מכילה כעת a StaticBody2D צומת עם א CollisionShape2D מייצג אובייקטים הניתנים להתנגשות ברקע.

אובייקטים הניתנים להתנגשות אלה יתקשרו עם דמותו של השחקן ועם מרכיבי משחק אחרים, ויוסיפו יותר עומק ומורכבות למשחק.

הזזת שכבות שונות במהירות שונה

כעת, לאחר שהגדרתם את שכבות הפרלקסה, עליכם לעדכן את המיקומים שלהן בהתאם לתנועת השחקן. זה ייצור את אפקט הפרלקס, שבו השכבות הקרובות יותר למצלמה נעות מהר יותר מאלו הרחוקות יותר.

הוסף את קוד ה-GDScript הבא לסצנת הנגן:

extends CharacterBody2D

func _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 ParallaxBackground

const 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 = 300

func _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_position

add_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 מספקת בסיס איתן לשיפור משחק הפלטפורמה שלך משיכה חזותית, אבל אתה יכול לקחת את זה אפילו רחוק יותר על ידי שילוב תכונות נוספות. הנה כמה רעיונות שכדאי לקחת בחשבון.

אובייקטי רקע

צור אלמנטים אינטראקטיביים יותר בשכבות הפרלקס שלך, כגון פלטפורמות צפות, מכשולים נעים או דמויות רקע מונפשות. אובייקטים אלה יכולים להוסיף עומק ואינטראקטיביות למשחק הפלטפורמה שלך.

תאורה דינאמית

הכנס אפקטי תאורה דינמיים לשכבות הפרלקסה שלך. על ידי הוספת מקורות אור וצללים, אתה יכול ליצור תחושה של ריאליזם ועומק בעולם המשחק. מערכת התאורה של Godot עובדת היטב עם משחקי 2D ויכולה לשפר משמעותית את האיכות החזותית.

השפעות חלקיקים

שלב מערכות חלקיקים בשכבות הפרלקס שלך כדי להוסיף אפקטים חזותיים עדינים. עלים נושרים, עננים נסחפים או כוכבים נוצצים יכולים לשפר את האווירה ולגרום לעולם המשחק להרגיש חי יותר. אתה יכול גם הוסף אפקטים קוליים ללא זכויות יוצרים למשחק שלך.

מחזור יום-לילה

הטמעו מחזור יום-לילה שמשנה את הצבע והעוצמה של שכבות הפרלקס על סמך השעה ביום במשחק. תכונה דינמית זו יכולה לספק לשחקנים חוויה מתפתחת כל הזמן כשהם מתקדמים במשחק.

בעוד שגלילת פרלקסה יכולה להעלות את החזות החזותית של המשחק שלך, חיוני לעקוב אחר כמה שיטות עבודה מומלצות כדי להבטיח חוויה חלקה ומהנה.

מיטוב ביצועים

שימו לב למספר שכבות הפרלקס ולמורכבותן. יותר מדי שכבות או נכסים ברזולוציה גבוהה עלולים להוביל לבעיות ביצועים, במיוחד במכשירים פחות חזקים. בצע אופטימיזציה של הגרפיקה שלך והשתמש בצורות התנגשות פשוטות במידת האפשר.

סידור שכבות

מסדרים את שכבות הפרלקס שלך מתוך מחשבה. שקול את ההיררכיה החזותית ואת אפקט העומק הרצוי. השכבות הקרובות ביותר למצלמה צריכות לנוע מהר יותר, בעוד שהשכבות הרחוקות יותר צריכות לנוע לאט יותר.

גבולות המצלמה

הגדר גבולות לתנועת המצלמה כדי למנוע חלל ריק לא רצוי או תקלות חזותיות כאשר השחקן מגיע לקצוות עולם המשחק. זה מבטיח חוויה חלקה לשחקנים.

בדיקה ותיקון

בדוק את גלילת הפרלקסה שלך במכשירים ובגדלים שונים של מסך כדי להבטיח שהיא נראית ומתפקדת היטב על פני פלטפורמות שונות. התאמה של סולמות התנועה, מיקומי השכבות ופרמטרים אחרים יכולים לכוונן עדין את אפקט הפרלקסה לקבלת התוצאות הטובות ביותר.

הוספת גלילה אקראית של פרלקסה יכולה לשפר משמעותית את רמת המעורבות של משחק Godot שלך. גלילה אקראית של פרלקסה כוללת יצירה ומיקום דינמי של שכבות פרלקסה במהלך המשחק.

על ידי כך, אתה יוצר תחושה של תנועה ודינמיות ברקע, מה שגורם לעולם המשחק להרגיש חי ובלתי צפוי. שחקנים יחוו סביבה חזותית משתנה כל הזמן, ויוסיפו שכבה נוספת של ריגוש לחוויית המשחק שלהם.