Cuộn thị sai là một kỹ thuật được sử dụng trong nhiều trò chơi 2D để tạo ảo giác về chiều sâu và tăng thêm sự hấp dẫn trực quan 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 tương ứng với chuyển động của máy ảnh.
Godot 4 giúp việc 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 các hiệu ứng hình ảnh tuyệt đẹp mà không tốn nhiều công sức.
Chuẩn bị trò chơi Godot
Để bắt đầu, hãy tạo một dự án 2D mới trong game engine Godot và thiết lập cảnh trò chơi với nhân vật của người chơi.
Mã được sử dụng trong bài viết này có sẵn trên kho GitHub này và được sử dụng miễn phí theo Giấy phép MIT.
Trong ví dụ này, thêm nút CharacterBody2D vào chuyển động của người chơi. Đồng thời thêm CollisionShape2D 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ánh gian lận 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ách sử dụng các phím mũi tên hoặc thao tác nhập tương tự.
Tạo các lớp khác nhau với các nút ParallaxLayer
Sau đó, tạo hiệu ứng thị sai bằng cách thêm nhiều 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. Để có hiệu ứng thị sai thuyết phục, các lớp ở xa máy ảnh hơn phải di chuyển chậm hơn các lớp ở gần hơn.
Thêm các nút StaticBody2D với CollisionShape2D trong mỗi ParallaxLayer để tạo một số đối tượng va chạm trong nền. Những vật thể va chạm này sẽ tương tác với người chơi và các yếu tố khác của trò chơi, tăng 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 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 phần tử CollisionShape2D đại diện cho các đối tượng va chạm trong nền.
Những vật 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ố khác của trò chơi, tăng thêm chiều sâu và độ phức tạp cho lối chơi.
Chuyển các lớp khác nhau ở tốc độ khác nhau
Bây giờ bạn đã thiết lập xong 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 hơn sẽ 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 độ lệch cuộn của nút ParallaxBackground tương ứng. Lưu ý 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 ngẫu nhiên thị sai mang đến yếu tố bất ngờ và khó đoán 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 quá trình chơi trò chơi, bạn có thể mang đến cho người chơi trải nghiệm sống động và sống động hơn.
Để thực hiện cuộn thị sai ngẫu nhiên, hãy thêm các lớp thị sai mới với các 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 xác định 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 đo chuyển động ngẫu nhiên cho mỗi lớp mới. Hàm này có chữ ký sau:
Variant lerp ( Variant from, Variant to, float weight )
Việc chuyển kết quả của Randf() dưới dạng trọng số cho phép bạn tạo các lớp với 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 mục ngẫu nhiên cho các lớp mới trong một phạm vi nhất định:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
Trò chơi demo của bạn bây giờ sẽ 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 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 nền tảng, nhưng bạn có thể tiến xa hơn nữa bằng cách giới thiệu 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 với các lớp thị sai, chẳng hạn như nền tảng nổi, chướng ngại vật chuyển động hoặc nhân vật hoạt hình ở chế độ nền. Những đối tượng này có thể tăng thêm chiều sâu và tính tương tác cho trò chơi nền tảng của bạn.
Ánh sáng động
Mang lại 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 ra 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 game 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 hệ thống hạt với các lớp thị sai để thêm hiệu ứng hình ảnh tinh tế. Lá rơi, mây trôi hay những ngôi sao lấp lánh có thể nâng cao bầu không khí và khiến thế giới trò chơi trở nên sống động hơn. Bạn cũng có thể thêm 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 và đêm
Thực hiện chu kỳ ngày và đêm làm thay đổi màu sắc và cường độ của các lớp thị sai tùy thuộc vào 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 ngày càng phát triển khi họ tiến bộ trong trò chơi.
Mặc dù thao tác cuộn thị sai có thể nâng cao chất lượng hình ảnh của trò chơi nhưng điều cần thiết là phải 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 ghi nhớ số lượng các 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ị cấp thấp. Tối ưu hóa đồ họa của bạn và sử dụng các hình dạng va chạm đơn giản hóa nếu có thể.
Bố trí các lớp
Sắp xếp các lớp thị sai một cách chu đáo. Xem xét 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, các lớp ở xa hơn sẽ di chuyển chậm hơn.
Giới hạn của máy ảnh
Đặt giới hạn chuyển động của camera để tránh khoảng trống không mong muốn hoặc trục trặc hình ảnh khi người chơi đến rìa thế giới trò chơi. Điều này đảm bảo trải nghiệm chơi game liền mạch cho người chơi.
Kiểm tra và tinh chỉnh
Kiểm tra tính năng cuộn thị sai trên các thiết bị và kích thước màn hình khác nhau để đảm bảo nó trông và hoạt động tốt trên các nền tảng khác nhau. Tinh chỉnh quy mô chuyển động, vị trí lớp và các thông số khác có thể tinh chỉnh hiệu ứng thị sai để có kết quả tốt nhất.
Việc thêm tính năng cuộn thị sai ngẫu nhiên có thể làm tăng đáng kể mức độ tương tác trong trò chơi Godot. Cuộn thị sai ngẫu nhiên liên quan đến việc tạo động và định vị các lớp thị sai khi bạn chơi.
Bằng cách này, bạn tạo ra cảm giác chuyển động và năng động ở hậu cảnh, khiến thế giới trò chơi trở nên sống động và khó đoán. Người chơi sẽ trải nghiệm một môi trường hình ảnh luôn thay đổi, tăng thêm sự phấn khích cho trải nghiệm chơi game của họ.
