Cách triển khai Parallax Scrolling trong Godot
Cuộn thị sai là một kỹ thuật mà nhiều trò chơi 2D sử dụng để tạo ảo giác về chiều sâu và thêm sự thú vị về mặt hình ảnh cho nền của trò chơi. Nó đạt được hiệu ứng bằng cách di chuyển các lớp nền khác nhau ở các tốc độ khác nhau so với chuyển động của máy ảnh.
Godot 4 giúp thực hiện cuộn thị sai dễ dàng hơn bao giờ hết. Công cụ 2D mạnh mẽ của nó cung cấp hỗ trợ tích hợp cho các lớp thị sai, cho phép bạn tạo hiệu ứng hình ảnh tuyệt đẹp với nỗ lực tối thiểu.
Mục lục
Thiết lập trò chơi Godot
Để bắt đầu, hãy tạo một dự án 2D mới trong công cụ trò chơi Godot và thiết lập bối cảnh trò chơi với một nhân vật người chơi.
Mã được sử dụng trong bài viết này có sẵn trong này kho lưu trữ GitHub và miễn phí cho bạn sử dụng theo giấy phép MIT.
Đối với ví dụ này, hãy thêm nút CharacterBody2D để người chơi di chuyển. Đồng thời thêm CollisionShape2D có hình chữ nhật và Sprite2D để thể hiện nhân vật người chơi.
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 -= 1velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)
Với mã này, nhân vật của người chơi có thể di chuyển sang trái, phải, lên và xuống bằng các phím mũi tên hoặc các đầu vào tương tự.
Tạo các lớp khác nhau với các nút ParallaxLayer
Tiếp theo, tạo hiệu ứng thị sai bằng cách thêm nhiều nút Lớp thị sai vào cảnh. Mỗi ParallaxLayer sẽ đại diện cho một lớp nền khác nhau. Để đạt được hiệu ứng thị sai thuyết phục, các lớp ở xa máy ảnh phải di chuyển chậm hơn các lớp ở gần.
Thêm các nút StaticBody2D với CollisionShape2D trong mỗi ParallaxLayer để tạo một số đối tượng có thể va chạm trong nền. Các đối tượng có thể va chạm này sẽ tương tác với người chơi và các yếu tố trò chơi khác, tạo thêm chiều sâu cho lối chơi.
Đây là mã GDScript để tạo các lớp thị sai với các đối tượng có thể va chạm:
extends ParallaxBackgroundfunc _ready():
var layer1 = ParallaxLayer.new()
layer1.motion_scale = Vector2(0.2, 0.2)
add_child(layer1)
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)
var layer2 = ParallaxLayer.new()
layer2.motion_scale = Vector2(0.5, 0.5)
add_child(layer2)
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)
var layer3 = ParallaxLayer.new()
layer3.motion_scale = Vector2(1.0, 1.0)
add_child(layer3)
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)
Với mã này, mỗi lớp thị sai hiện chứa một nút StaticBody2D với CollisionShape2D đại diện cho các đối tượng có thể va chạm trong nền.
Những vật thể có thể va chạm này sẽ tương tác với nhân vật của người chơi và các yếu tố trò chơi khác, tạo thêm chiều sâu và độ phức tạp cho lối chơi.
Di chuyển các lớp khác nhau với tốc độ khác nhau
Bây giờ bạn đã thiết lập các lớp thị sai, bạn cần cập nhật vị trí của chúng dựa trên chuyển động của người chơi. Điều này sẽ tạo ra hiệu ứng thị sai, trong đó các lớp gần máy ảnh di chuyển nhanh hơn các lớp ở xa hơn.
Thêm mã GDScript sau vào cảnh Trình phát:
extends CharacterBody2Dfunc _physics_process(delta):
...
move_and_collide(velocity * delta)
var parallax_background = get_parent()
var motion = -velocity * delta
parallax_background.set_scroll_offset(parallax_background.scroll_offset + motion)
Mã này tính toán chuyển động của các lớp thị sai dựa trên chuyển động của người chơi và cập nhật phần bù cuộn của nút ParallaxBackground tương ứng. Lưu ý việc sử dụng dấu âm để đảm bảo các lớp di chuyển theo hướng ngược lại với chuyển động của người chơi.
Cuộn thị sai ngẫu nhiên giới thiệu một yếu tố bất ngờ và không thể đoán trước cho nền trò chơi của bạn. Bằng cách tự động tạo và định vị các lớp thị sai trong khi chơi trò chơi, bạn có thể tạo trải nghiệm hấp dẫn và năng động hơn cho người chơi.
Để triển khai cuộn thị sai ngẫu nhiên, hãy thêm các lớp thị sai mới với tỷ lệ và vị trí chuyển động ngẫu nhiên.
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():
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)
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():
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)
Mã này định nghĩa các hằng số để kiểm soát tính ngẫu nhiên của các lớp thị sai. Sử dụng hàm lerp để nội suy các giá trị giữa MIN_SCALE và MAX_SCALE, tạo thang chuyển động ngẫu nhiên cho mỗi lớp mới. Chức năng này có chữ ký sau:
Variant lerp ( Variant from, Variant to, float weight )
Truyền kết quả từ randf() dưới dạng trọng số cho phép bạn tạo các lớp có tỷ lệ ngẫu nhiên.
Hàm randf_range cung cấp một cách khác để tạo các giá trị ngẫu nhiên trong một phạm vi. Ở đây, hàm create_random_layer sử dụng nó để tạo các vị trí ngẫu nhiên cho các lớp mới trong một phạm vi được chỉ định:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
Trò chơi demo của bạn bây giờ trông giống như thế này:
Bao gồm các tính năng bổ sung
Cuộn thị sai cung cấp một nền tảng vững chắc để nâng cao sức hấp dẫn trực quan của trò chơi platformer của bạn, nhưng bạn có thể tiến xa hơn nữa bằng cách kết hợp các tính năng bổ sung. Dưới đây là một số ý tưởng để xem xét.
Đối tượng nền
Tạo nhiều yếu tố tương tác hơn trong các lớp thị sai của bạn, chẳng hạn như nền tảng nổi, chướng ngại vật di chuyển hoặc nhân vật nền hoạt hình. Những đối tượng này có thể thêm chiều sâu và tính tương tác cho trò chơi platformer của bạn.
Chiếu sáng động
Giới thiệu các hiệu ứng ánh sáng động cho các lớp thị sai của bạn. Bằng cách thêm nguồn sáng và bóng tối, bạn có thể tạo cảm giác chân thực và chiều sâu trong thế giới trò chơi. Hệ thống chiếu sáng của Godot hoạt động tốt với các trò chơi 2D và có thể cải thiện đáng kể chất lượng hình ảnh.
hiệu ứng hạt
Tích hợp các hệ thống hạt vào các lớp thị sai của bạn để thêm các hiệu ứng hình ảnh tinh tế. Những chiếc lá rơi, những đám mây trôi hoặc những ngôi sao lấp lánh có thể nâng cao bầu không khí và làm cho thế giới trò chơi trở nên sống động hơn. Bạn cũng có thể thêm các hiệu ứng âm thanh không có bản quyền vào trò chơi của mình.
Chu Kỳ Ngày Đêm
Thực hiện chu kỳ ngày đêm làm thay đổi màu sắc và cường độ của các lớp thị sai dựa trên thời gian trong ngày trong trò chơi. Tính năng năng động này có thể cung cấp cho người chơi trải nghiệm không ngừng phát triển khi họ tiến bộ trong trò chơi.
Mặc dù cuộn thị sai có thể nâng cao hình ảnh trong trò chơi của bạn, nhưng bạn cần tuân theo một số phương pháp hay nhất để đảm bảo trải nghiệm mượt mà và thú vị.
Tối ưu hóa hiệu suất
Hãy chú ý đến số lượng lớp thị sai và độ phức tạp của chúng. Quá nhiều lớp hoặc nội dung có độ phân giải cao có thể dẫn đến các vấn đề về hiệu suất, đặc biệt là trên các thiết bị yếu hơn. Tối ưu hóa tác phẩm nghệ thuật của bạn và sử dụng các hình va chạm đơn giản nếu có thể.
Sắp xếp lớp
Sắp xếp các lớp thị sai của bạn một cách chu đáo. Xem xét hệ thống phân cấp thị giác và hiệu ứng chiều sâu mong muốn. Các lớp gần máy ảnh nhất sẽ di chuyển nhanh hơn, trong khi các lớp ở xa hơn sẽ di chuyển chậm hơn.
Ranh giới máy ảnh
Đặt ranh giới cho chuyển động của máy ảnh để ngăn không gian trống không mong muốn hoặc trục trặc hình ảnh khi người chơi đến các cạnh của thế giới trò chơi. Điều này đảm bảo trải nghiệm liền mạch cho người chơi.
Thử nghiệm và tinh chỉnh
Kiểm tra thao tác cuộn thị sai của bạn trên nhiều thiết bị và kích thước màn hình khác nhau để đảm bảo nó trông giống và hoạt động tốt trên các nền tảng khác nhau. Tinh chỉnh tỷ lệ chuyển động, vị trí lớp và các tham số khác có thể tinh chỉnh hiệu ứng thị sai để có kết quả tốt nhất.
Thêm cuộn thị sai ngẫu nhiên có thể nâng cao đáng kể mức độ tương tác của trò chơi Godot của bạn. Cuộn thị sai ngẫu nhiên liên quan đến việc tự động tạo và định vị các lớp thị sai trong khi chơi trò chơi.
Bằng cách này, bạn tạo ra cảm giác chuyển động và năng động trong nền, làm cho thế giới trò chơi trở nên sống động và không thể đoán trước. Người chơi sẽ trải nghiệm một môi trường hình ảnh thay đổi liên tục, tạo thêm một lớp phấn khích cho trải nghiệm chơi trò chơi của họ.
