UNITY/Script

[UNITY C#] 원근감있는 배경 : 패럴랙스 스크롤링(Parallax Scrolling) 구현

HYEOKJUN 2022. 7. 10. 18:00
반응형

패럴랙스 스크롤링 (Parallax Scrolling)

패럴랙스 스크롤링(Parallax Scrolling)스크롤의 진행도(카메라의 위치)에 따라서 관측 위치에 따른 물체(배경)의 위치나 방향, 상대 속도에 차이를 두어 원근감을 갖도록 하는 기법입니다.
Unity 2D에서 3D와 비슷한 효과를 내기 위해서 이 기법을 사용합니다.


구현하기

Scene 창에서 본 모습
Game 창에서 본 모습

다음과 같이 카메라가 이동할 수 있는 범위인 ① Object(Ground)패럴랙스 스크롤링을 적용할 배경인 ②~ Object(Background) 1개 이상을 생성하고 Sprite Renderer의 Sorting Layer와 Order Layer를 조정하여 원하는 모습으로 설정합니다.

위에서 생성한 모든 Object의 양쪽 끝에 Point Object를 생성합니다.

(Point Object의 x 값으로 길이와 위치를 계산합니다.)

Canvas를 생성하여 양쪽 끝에 Point Object를 생성합니다.

(위와 같이 각 Anchors를 수정합니다.)

ParallaxScrollingBackground.cs

using UnityEngine;

public sealed class ParallaxScrollingBackground : MonoBehaviour
{
	[SerializeField] GameObject camera_object = null;

	[SerializeField] Transform background_leftPoint = null, background_rightPoint = null;
	[SerializeField] Transform ground_leftPoint = null, ground_rightPoint = null;
	[SerializeField] Transform camera_leftPoint = null, camera_rightPoint = null;

	float ground_sideSpace = 0f, background_sideSpace = 0f;

	void Start() {
		float camera_width = camera_leftPoint.position.x - camera_rightPoint.position.x;
		ground_sideSpace = ground_rightPoint.position.x - ground_leftPoint.position.x;
		background_sideSpace = background_leftPoint.position.x - background_rightPoint.position.x - camera_width * 0.5f;
	}

	void Update() {
		SetPosition();
	}

	void SetPosition() {
		float background_xPos = camera_object.transform.position.x + ((camera_object.transform.position.x - ground_leftPoint.position.x) / ground_sideSpace - 0.5f) * background_sideSpace;

		transform.position = new Vector2(background_xPos, transform.position.y);
	}
}

① Object를 제외하고 패럴랙스 스크롤링을 적용할 모든 배경 Object위 스크립트를 추가합니다.

모든 필드 데이터를 할당합니다.

플레이하면 다음과 같이 패럴랙스 스크롤링을 구현할 수 있습니다.

(성능에 따라서 버벅임이 있을 수 있습니다.)

반응형