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 cung cấp một cách tiếp cận liền mạch để thực hiện cuộn thị sai thông qua công cụ 2D mạnh mẽ của nó, kết hợp hỗ trợ vốn có cho các lớp thị sai, cho phép các nhà phát triển đạt được hiệu ứng hình ảnh quyến rũ với nỗ lực tối thiểu.
Thiết lập Trò chơi Godot
Để bắt đầu quá trình, hãy thiết lập một dự án hai chiều mới trong khuôn khổ của công cụ trò chơi Godot và định cấu hình môi trường chơi trò chơi bằng cách kết hợp tính cách người chơi làm một trong những yếu tố chính của nó.
Mã được sử dụng trong ấn phẩm này có thể được truy cập thông qua kho lưu trữ GitHub, cho phép sử dụng miễn phí theo các điều khoản của giấy phép MIT.
Để chứng minh việc triển khai chuyển động của người chơi trong công cụ Unity bằng C#, các nút bổ sung phải được thêm vào cảnh. Cụ thể, nên bao gồm một đối tượng CharacterBody2D để tạo điều kiện thuận lợi cho các tương tác vật lý giữa người chơi và các đối tượng khác trong môi trường. Ngoài ra, một thành phần CollisionShape2D nên được gắn vào phần thân, thành phần này sẽ xác định hình dạng của khu vực va chạm và cho phép phát hiện va chạm thích hợp với các đối tượng khác. Cuối cùng, một đối tượng Sprite2D có thể được sử dụng làm hình ảnh đại diện cho nhân vật người chơi trên màn hình.
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
velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)
Mã này cho phép nhân vật của người chơi điều hướng trong mặt phẳng nằm ngang bằng cách sử dụng các phím mũi tên để di chuyển theo bất kỳ hướng nào, bao gồm trái, phải, lên và xuống.
Tạo các lớp khác nhau với các nút lớp thị sai
Để tạo hiệu ứng thị sai trong môi trường ba chiều, cần phải kết hợp nhiều phiên bản của lớp ParallaxLayer trong cảnh. Các lớp bổ sung này sẽ cùng nhau tạo thành các yếu tố đa dạng tạo nên phông nền. Để biểu diễn trực quan về độ sâu có vẻ chân thực và thực tế, điều quan trọng là các lớp ở xa người xem phải được di chuyển với tốc độ chậm hơn các lớp ở gần.
Kết hợp các thực thể StaticBody2D trong mỗi ParallaxLayer bằng cách gắn chúng vào đối tượng CollisionShape2D, từ đó tạo ra các phần tử nền tương tác kết nối với trình phát và các thành phần trò chơi bổ sung, nâng cao trải nghiệm chơi trò chơi tổng thể thông qua các tương tác của chúng.
Mã GDScript được cung cấp tạo ra hiệu ứng thị sai bằng cách sử dụng các đối tượng có thể va chạm kết hợp với các phần tử phân lớp, cho phép phát hiện tương tác và va chạm giữa chúng trong khu vực hình chữ nhật được chỉ định.
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)
Bằng cách sử dụng triển khai này, mọi lớp thị sai đều được trang bị một thực thể StaticBody2D có thành phần CollisionShape2D, phục vụ để thể hiện các yếu tố rõ ràng nằm trong phông nền.
Bản chất tương tác của các thực thể có thể thu gọn này sẽ thu hút hình đại diện của người chơi và các thành phần khác nhau trong trò chơi, nâng cao mức độ phức tạp và sắc thái tổng thể của trải nghiệm chơi trò chơi.
Di chuyển các lớp khác nhau với tốc độ khác nhau
Để đạt được hiệu ứng thị sai trong Unity, điều cần thiết là điều chỉnh vị trí của từng lớp so với máy ảnh dựa trên chuyển động của người chơi. Bằng cách đó, các lớp gần máy ảnh hơn sẽ có vẻ di chuyển với tốc độ nhanh hơn so với các lớp ở xa hơn, dẫn đến ảo ảnh về chiều sâu và chuyển động.
Kết hợp mã GDScript sau trong cảnh Trình phát, như sau:
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)
Việc triển khai hiện tại thực hiện đánh giá chuyển động được liên kết với các lớp thị sai, điều này phụ thuộc vào sự dịch chuyển của người dùng và do đó, sửa đổi phần bù cuộn của thành phần ParallaxBackground. Điều quan trọng cần lưu ý là một dấu âm đã được sử dụng để đảm bảo rằng các lớp di chuyển theo hướng ngược với hướng di chuyển của người dùng.
Thêm khả năng không thể đoán trước với cuộn thị sai ngẫu nhiên
Cuộn thị sai là một kỹ thuật bổ sung khía cạnh bất ngờ và không lường trước được vào nền của trò chơi điện tử bằng cách liên tục tạo và định vị lại nhiều lớp trong suốt thời gian chơi. Phương pháp này đã được chứng minh là giúp nâng cao mức độ tương tác của người chơi và góp phần tạo nên một môi trường hấp dẫn hơn và luôn thay đổi trong trò chơi.
Để kết hợp cuộn thị sai tùy ý trong bố cục trực quan, cần phải giới thiệu các lớp thị sai bổ sung có các mức độ dịch chuyển khác nhau và định hướng không gian không thể đoán trước.
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)
Mã hiện tại thiết lập các tham số không đổi để điều chỉnh tính không thể đoán trước của các lớp thị sai, sử dụng hàm lerp để nội suy các giá trị trong phạm vi tỷ lệ tối thiểu và tối đa. Cái sau được đặc trưng bởi chỉ định cụ thể của nó như sau:
Variant lerp ( Variant from, Variant to, float weight )
Sử dụng đầu ra của hàm randf() làm trọng số cho phép tạo các lớp có giá trị được chia tỷ lệ ngẫu nhiên.
Hàm randf\_range là một phương pháp thay thế để tạo các số ngẫu nhiên trong một phạm vi cụ thể. Trong trường hợp này, hàm create\_random\_layer sử dụng nó để tạo tọa độ tùy ý cho các lớp mới được thêm vào, giới hạn trong phạm vi được xác định trước:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
Thật vậy, trò chơi trình diễn có vẻ hấp dẫn về mặt hình ảnh và được tổ chức tốt, có bố cục đẹp mắt với các yếu tố tương tác tạo điều kiện thuận lợi cho người dùng tham gia. Thiết kế kết hợp nhiều nội dung đồ họa khác nhau, chẳng hạn như hình ảnh và biểu tượng, góp phần tạo nên vẻ ngoài bóng bẩy tổng thể. Hơn nữa, việc sử dụng khoảng trắng tạo ra một bố cục cân bằng một cách hiệu quả, nâng cao khả năng đọc và thúc đẩy trải nghiệm hình ảnh rõ ràng cho người dùng. Nhìn chung, trò chơi trình diễn thể hiện các nguyên tắc thiết kế mạnh mẽ và thể hiện sự tích hợp liền mạch giữa tính tương tác, đồ họa và kiểu chữ.
Bao gồm các tính năng bổ sung
Cuộn thị sai đóng vai trò là điểm khởi đầu tuyệt vời để nâng cao sức hấp dẫn trực quan của trò chơi platformer, nhưng vẫn tồn tại cơ hội để tinh chỉnh thêm thông qua tích hợp các yếu tố bổ sung. Các đề xuất sau đây có thể được thực hiện dưới sự tư vấn.
Đối tượng nền
Cân nhắc kết hợp các thành phần động bổ sung trong cảnh thị sai của bạn, bao gồm phong cảnh lơ lửng, chướng ngại vật di động hoặc nhân vật phông nền động. Việc tích hợp các tính năng này có thể nâng cao tính đa chiều và mức độ tương tác của người dùng đối với trải nghiệm nền tảng của bạn.
Chiếu sáng động
Cân nhắc kết hợp các hiệu ứng ánh sáng động vào các lớp thị sai để tăng thêm lớp hiện thực và chiều sâu trong thế giới trò chơi của bạn. Việc sử dụng các nguồn sáng và bóng tối thông qua hệ thống chiếu sáng tiên tiến của Godot có thể nâng cao đáng kể chất lượng hình ảnh tổng thể của trò chơi 2D của bạn.
Hiệu ứng hạt
Việc kết hợp các hệ thống hạt trong các lớp thị sai có thể tạo ra các hiện tượng thị giác tinh tế như tán lá rơi, đám mây trôi nổi hoặc các thiên thể lấp lánh, do đó nâng cao môi trường khí quyển của môi trường trò chơi điện tử và mang lại cảm giác tràn đầy sức sống cho nó. Ngoài ra, bạn có thể kết hợp các hiệu ứng âm thanh được miễn giấy phép vào trò chơi của mình, làm tăng thêm sức hấp dẫn tổng thể của trò chơi.
Chu kỳ ngày đêm
Kết hợp chu kỳ ngày đêm trong các lớp thị sai để thay đổi màu sắc và độ sáng của chúng theo thời gian của trò chơi, tạo ra một môi trường luôn thay đổi để người chơi điều hướng trong suốt hành trình chơi trò chơi của họ.
Các phương pháp hay nhất để triển khai cuộn thị sai
Để sử dụng hiệu quả tính năng cuộn thị sai trong trò chơi điện tử đồng thời duy trì trải nghiệm người dùng liền mạch và thú vị, điều quan trọng là phải tuân thủ một số phương pháp hay nhất nhằm thúc đẩy hiệu suất tối ưu và sự hài lòng chung.
Tối ưu hóa hiệu suất
Hãy chú ý đến sự phổ biến của các lớp thị sai cũng như độ phức tạp của chúng. Quá nhiều lớp hoặc đồ họa có độ phân giải cao có thể dẫn đến thiếu chức năng, đặc biệt là trên thiết bị yếu. Bạn nên hợp lý hóa hình ảnh của mình và sử dụng hình học giảm va chạm bất cứ khi nào khả thi để duy trì hiệu suất tối ưu.
Sắp xếp lớp
Khi sắp xếp các lớp thị sai của một người, điều quan trọng là phải lưu ý đến hệ thống phân cấp trực quan của chúng và hiệu ứng chiều sâu mong muốn mà chúng tạo ra. Có thể hiệu quả khi các lớp gần máy ảnh nhất di chuyển với tốc độ nhanh hơn các lớp ở xa hơn để tạo cảm giác về chiều sâu và chuyển động trong thiết kế.
Ranh giới máy ảnh
Để đảm bảo trải nghiệm chơi trò chơi mượt mà và không bị gián đoạn, điều cần thiết là thiết lập các giới hạn đối với chuyển động của máy ảnh trong môi trường ảo. Bằng cách đó, chúng tôi có thể tránh được bất kỳ khoảng trống không cần thiết hoặc sự cố kỹ thuật nào có thể xảy ra khi người chơi tiếp cận vành đai của thế giới trò chơi.
Thử nghiệm và tinh chỉnh
Để đảm bảo hiệu suất tối ưu và sự xuất hiện của cuộn thị sai trên nhiều loại thiết bị và độ phân giải màn hình khác nhau, điều cần thiết là thử nghiệm thiết kế trên nhiều nền tảng. Bằng cách điều chỉnh tỷ lệ chuyển động, vị trí của các lớp và các biến có liên quan khác, người ta có thể tinh chỉnh hiệu ứng thị sai để đạt được kết quả mong muốn nhất.
Làm cho trò chơi Godot hấp dẫn hơn với cuộn thị sai
Việc kết hợp các hiệu ứng cuộn thị sai không thể đoán trước có thể tăng cường đáng kể sự tham gia của người dùng vào trò chơi Godot. Kỹ thuật này, được gọi là cuộn thị sai ngẫu nhiên, tạo và định vị nhiều lớp một cách nhanh chóng để tạo ra trải nghiệm chơi trò chơi sống động.
Việc kết hợp các môi trường năng động thông qua các kỹ thuật tạo theo thủ tục có thể gợi lên cảm giác chuyển động và sức sống trong bối cảnh của trò chơi, do đó truyền cho nó một bầu không khí tự phát và không thể đoán trước. Bối cảnh trực quan luôn thay đổi này giúp tăng cường sự đắm chìm của người chơi bằng cách cung cấp cho họ một khía cạnh ly kỳ bổ sung cho hành trình chơi trò chơi của họ.