[Visual Scripting] 런게임 화면 스크롤링,패럴랙스 구현 방법, 무한배경

 

## 골드메탈님의 강의를 들으며 Visual Script 기본기를 정리합니다.

골드메탈님의  유니티 볼트 입문 강좌 V03

스크롤링

배경을 움직여서 달리는 느낌을 주는 기술

 

오브젝트가 반복되는 스크립트를 구현 후,

화면을 일정 속도로 움직이는 스크립트를 구현

---

1. Script Graph를 사용하여 오브젝트 Reposition 구현하기

 

원하는 것

1. 오브젝트의 X 값이 -12 가 되었다면,

2. X값을 12로 변경해준다

 

구현1. 오브젝트의 X 값이 -12 가 되었다면,

스크롤링을 원하는 오브젝트에 Script Graph를 추가한다.

다른 오브젝트에도 똑같이 쓸 스크립트로 Embed 가 아닌 Graph로 추가한다.

 

[Get position] - [Get X] - [Logic - Less]를 사용  A< B(-12)

[Coltrol - If] 사용해서 구현하면,

아래와 같이 구성하면 if 문으로 감싼 것과 같은 구성이 된다

 

구현2. X값을 12로 변경해준다

Get Local Position 에 x값을 24를 더해준다

[Get Local Position] - [Vector3 literal] - [Math - Vector3 - Add]

 

Set Local Position 으로 수정된 값을 넣어준다

 

작성한 Reposition 매크로를 다른 오브젝트에도 추가해준다.

오브젝트들을 복사해서 화면에 배치해준다

게임을 실행해서 마우스로 x값을 이동시켜보면 잘 작동하는 것을 확인할 수 있다.

---

2. 그룹 오브젝트 이동시키기

각 오브젝트들이 로컬 x값이 -12가 되었을때 이동되도록 매크로를 짜두었으니,

이제 오브젝트들이 소속된 parent 그룹의 x값을 계속 뒤로 이동시켜서 스크롤링을 구현해보자

 

원하는 것

일정한 시간마다 x값을 일정한 방향으로 이동시키고 싶다.

void Update()
    { transform.Translate(-5 * Time.deltaTime, 0, 0); }

이를 Visual Scripting 으로 구현해보면 아래와 같다.

[Get Delta Time] - [Math-Scaler-Multiply] - [Transform Translate]

 

---

 

패럴랙스

구름과, 땅, 산 등 배경의 스크롤 속도를 달리하여 원근감을 부여해보자

 

---

1. Visual Script 에서 속도 변수 선언하기

Bolt 강의에서는 Window > Variables 라는 변수창을 따로 열수있게 되어있는데,

Visual Scripting 에서는 그래프 편집 창 우측 하단에 BlackBoard 라는 이름의 창에서 Variables 를 관리할 수 있다.

 

(+) 버튼을 눌러 Scene Variables 에 Float 타입으로 Speed 변수를 선언해준다.(Value 는 -1)

 

이제 그래프 창에서 변수를 가져올 수 있다.

[Variables] - [Scene] - [Get Speed] 로 가져온 후 B에 연결해주면 오브젝트는 -1의 속도로 움직이게 될 것.

 

그리고 Scene Variables는 VisualScripting SceneVariables 라는 오브젝트에서 확인/수정이 가능하다.

 

2. 오브젝트 그룹 별로 이동 속도를 다르게 하기

현재 모든 오브젝트 그룹은 Scrolling 이라는 동일한 Graph를 쓰고 있으므로 속도가 동일하다.

각 그룹별로 속도를 다르게 하기 위해서 Script Machine을 Embed로 변경해준다. 변경후에는 각각 편집이 가능해진다.

Convert만 눌러주면 Embed로 변경된다.

 

드롭다운 목록에서 Embed를 선택하면 새로 스크립트를 짜는 것으로 Graph 상태에서 Convert만 눌러주면 된다.

 

Speed 변수와 Multiply 사이에 속도를 조절할 숫자를 한번 더 곱해준다.

[Math-Scaler-Multiply] 

구름은 느리니까 0.02를 곱해주면 Speed 의 0.02배의 속도로 구름이 흘러갈 것이다.

 

사실 Embed로 스크립트를 분할하는 것보다 동일한 스크립트에서 에디터로 수치만 변경하도록 하는게 관리측면에서 좋을 것 같은데, 일단 패럴랙스 구현을 간단하게 보여주시기 위해서 이렇게 진행하신 것 같다.

 

요렇게 패럴랙스가 구현되었다.