수많은 2D 비디오 게임에서 널리 사용되는 방법인 패럴랙스 스크롤은 카메라와의 거리에 따라 다양한 속도로 움직이는 여러 레이어의 배경을 조작하여 깊이를 암시하고 게임 배경의 시각적 매력을 향상시킵니다.
시각적으로 매혹적인 패럴랙스 효과를 제작할 수 있는 기능이 내장된 고급 2D 엔진 덕분에 이제 고닷 4에서 패럴랙스 스크롤을 그 어느 때보다 쉽게 사용할 수 있습니다. 개발자는 단 몇 줄의 코드만으로 이 동적 효과를 프로젝트에 쉽게 통합하여 새로운 차원으로 끌어올릴 수 있습니다.
고닷 게임 설정하기
개발 프로세스를 시작하기 위해 고닷 게임 엔진 내에서 새로운 2차원 프로젝트를 설정하고 플레이어 페르소나가 등장하는 게임 환경을 설정합니다.
이 책에 사용된 코드는 GitHub 저장소를 통해 액세스할 수 있으며, MIT 라이선스 조건에 따라 무료로 사용할 수 있습니다.
이 개념을 설명하기 위해 플레이어의 움직임을 용이하게 하는 “CharacterBody2D” 오브젝트를 통합할 것입니다. 또한 직사각형 구성을 특징으로 하는 “CollisionShape2D” 컴포넌트와 플레이어의 아바타를 표현하는 “Sprite2D”를 포함할 것입니다.
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)
이 게임 엔진 구현을 통해 플레이어 캐릭터는 화살표 키 또는 이와 유사한 입력 명령을 사용하여 다양한 방향으로 이동할 수 있습니다.
ParallaxLayer 노드로 다양한 레이어 만들기
2D 공간에서 깊이감을 연출하려면 씬 내에 여러 개의 ParallaxLayer 오브젝트를 통합하여 패럴랙스 효과를 구현합니다. 이러한 레이어는 시청자의 관점에서 다양한 거리를 상징하며 서로 다른 배율로 배치해야 합니다. 시차를 사실적으로 표현하려면 멀리 있는 요소는 가까이 있는 오브젝트에 비해 느린 속도로 움직이는 것이 중요합니다.
게임의 상호작용성을 향상시키기 위해 각 패럴랙스 레이어 내에 StaticBody2D 엔티티와 CollisionShapes2D를 통합해야 합니다. 배경에 충돌 가능한 오브젝트를 추가하면 시각적 흥미를 제공할 뿐만 아니라 플레이어와 다른 게임 컴포넌트 간의 상호작용을 촉진하여 전반적인 게임 경험을 더욱 풍부하게 만들 수 있습니다.
게임에서 충돌 가능한 오브젝트를 사용하여 시차 효과를 만들려면 다음 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)
이 구현을 활용하면 모든 패럴랙스 레이어는 씬 내에서 감지 가능한 엔티티를 나타내는 CollisionShape2D 인스턴스와 함께 StaticBody2D 컴포넌트로 구성됩니다.
이러한 오브젝트의 인터랙티브한 특성은 플레이어의 아바타와 다양한 게임 내 컴포넌트 모두에 관여하여 게임 경험에 복잡성과 뉘앙스를 더할 수 있습니다.
다른 속도로 다른 레이어 이동
게임에서 시차 효과를 구현하려면 플레이어의 움직임에 따라 각 레이어의 위치를 조정해야 합니다. 이렇게 하면 카메라에 가까운 레이어는 카메라에서 멀리 떨어진 레이어에 비해 더 빠른 속도로 움직이는 것처럼 보입니다.
“`GD스크립트 # 인수를 받지 않고 플레이어 캐릭터의 무기 변수를 반환하는 “get_weapon”이라는 함수를 정의합니다. def get_weapon(): 반환 무기 # 인수를 하나만 받고 플레이어 캐릭터의 새 무기인 “set_weapon”이라는 함수를 하나 더 정의합니다. def set_weapon(new_weapon): weapon = new_weapon # “player”와 “weapon”이라는 두 개의 변수를 생성하고, 둘 다 None으로 초기화합니다. player = None weapon = None # 이전 장면의 “사용” 이벤트에서 전달된 값(플레이어 캐릭터의 현재 활성 무기여야 함)으로 “set_weapon” 함수를 호출합니다. set_weap
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()`의 출력을 가중치로 활용하면 신경망에서 임의로 결정된 스케일을 가진 레이어를 생성할 수 있습니다.
create\_random\_layer 함수를 사용하면 미리 정의된 범위에 따라 추가 레이어에 대한 무작위 배치를 생성할 수 있습니다:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
데모 게임은 ‘미로 탈출’의 주요 기능을 효과적으로 보여주는 시각적으로 매력적이고 인터랙티브한 플랫폼을 보여줄 것으로 예상됩니다. 레이아웃은 플레이어 정보, 미로 비주얼, 점수 표시, 컨트롤 버튼 등 다양한 요소를 명확하게 구분하여 잘 구성되어야 합니다. 또한 사용자 경험을 향상시키기 위해 애니메이션이나 전환을 포함해야 합니다.
추가 기능 포함
시차 스크롤을 통합하는 것은 플랫포머 게임의 시각적 품질을 개선하는 효과적인 수단이며, 그 효과를 높이기 위해 구현할 수 있는 몇 가지 개선 사항이 있습니다. 동적 조명 효과, 절차적으로 생성된 배경 요소, 환경 내 인터랙티브 오브젝트 등이 추가될 가능성이 있습니다. 개발자는 이러한 기능을 통합하여 플레이어의 마음을 사로잡고 참여를 유도하는 더욱 몰입도 높은 게임 환경을 만들 수 있습니다.
배경 오브젝트
패럴랙스 디자인에 매달린 풍경, 움직이는 장애물, 배경에 움직이는 방관자 등 추가적인 동적 컴포넌트를 통합하는 것이 좋습니다. 이러한 기능을 통합하면 플랫폼 환경의 몰입도와 사용자 참여도를 높일 수 있습니다.
동적 조명
광원과 각각의 그림자를 통합하여 패럴랙스 레벨 내에 복잡한 조명 조정을 통합할 수 있습니다. 이를 통해 게임 환경에 현실감과 입체감을 더할 수 있습니다. 고닷이 제공하는 조명 메커니즘은 2D 게임의 전반적인 시각적 매력을 향상시키는 데 매우 효과적이며 외관을 크게 개선합니다.
파티클 효과
시차 레이어 내에 파티클 시스템을 통합하면 떨어지는 단풍, 떠다니는 구름, 반짝이는 천체와 같은 미묘한 요소를 도입하여 세련된 시각적 효과를 제공할 수 있습니다. 이러한 미묘한 요소는 게임 환경의 분위기를 고조시키는 동시에 활기를 불어넣을 수 있습니다. 또한 지적 재산권을 침해하지 않고도 무료 음향 효과를 통합할 수 있습니다.
낮-밤 주기
시차 배경에 일주변환을 통합하여 게임 내 시계에 따라 색조와 광도를 조절합니다. 이 끊임없이 변화하는 시각 효과는 플레이어가 게임을 진행하면서 몰입감 있는 게임 경험을 제공합니다.
패럴랙스 스크롤 구현 모범 사례
패럴랙스 스크롤은 비디오 게임의 시각적 매력을 높이는 데 효과적인 기법이지만, 원활하고 만족스러운 사용자 경험을 제공하려면 특정 모범 사례를 준수하는 것이 중요합니다.
성능 최적화
패럴랙스 지층이 다양하고 복잡하다는 점에 유의하세요. 과도한 수의 레이어 또는 높은 해상도 요소는 특히 약한 장비에서 기능 문제를 일으킬 수 있습니다. 가능하면 일러스트를 간소화하고 충돌 윤곽선을 축소하여 구현하는 것이 좋습니다.
레이어 배열
패럴랙스 레이어를 신중하게 배열하는 것이 가장 중요합니다. 시각적 계층 구조와 달성하고자 하는 깊이 효과를 고려해야 합니다. 카메라에 가까운 레이어는 더 빠른 속도로 움직이도록 프로그래밍하고, 카메라에서 멀리 떨어진 레이어는 그에 따라 움직임이 느려지도록 프로그래밍해야 한다는 점에 유의해야 합니다.
카메라 경계
플레이어가 게임 환경의 주변을 마주할 때 발생할 수 있는 원치 않는 공백이나 시각적 이상을 피하기 위해 카메라 모션에 대한 파라미터를 설정합니다. 이러한 조치는 플레이어에게 중단 없이 일관된 경험을 제공하는 데 기여합니다.
테스트 및 조정
다양한 기기와 화면 해상도에서 패럴랙스 스크롤의 최적의 성능과 모양을 보장하려면 여러 플랫폼에서 디자인을 테스트하는 것이 필수적입니다. 모션 스케일, 레이어 위치 및 기타 관련 변수를 조정하여 원하는 결과를 얻기 위해 패럴랙스 효과를 세분화할 수 있습니다.
패럴랙스 스크롤로 고닷 게임의 몰입도 높이기
고닷 게임에 산발적인 패럴랙스 스크롤을 통합하면 사용자의 흥미를 크게 높일 수 있음이 입증되었습니다. 랜덤 패럴랙스 스크롤링으로 알려진 이 기술은 게임을 플레이하는 동안 여러 레이어를 즉석에서 생성하고 배치합니다.
미묘한 움직임으로 배경을 강화하면 생동감 있고 역동적인 분위기를 조성하여 플레이어에게 끊임없이 변화하는 시각적 풍경을 제공함으로써 전반적인 게임 경험을 풍부하게 하고 플레이에 스릴 넘치는 차원을 더할 수 있습니다.