기본 그래프

플레이어 이동을 비주얼 스크립팅으로 구현해보도록 합시다. 먼저 플레이어 오브젝트에 Add Component > Visual Scripting > Script Machine으로 컴포넌트를 추가합니다.

스크립트 머신 초기 모습. 변수를 관리하는 Variables 컴포넌트도 자동 추가됩니다.

C# 스크립트에서 그래왔듯이 비주얼 스크립팅도 그래프를 담는 에셋이 있습니다. New 버튼을 눌러서 그래프 에셋을 생성합니다. 그래프만을 담아두는 폴더를 미리 만들어서 정리하면 더욱 좋습니다.

해당 에셋을 더블클릭하면 유니티의 기본 스크립트를 모두 그래프 노드로 바꾸기 위한 Generate 작업이 시작되고 Script Graph 창이 열리면서 노트들이 보이게 됩니다.

스크립트 그래프 창의 모습

그래프 창은 특이하게 두 개의 서브 윈도우를 가지고 있습니다.

Blackboard

변수를 관리하는 곳. Graph, Object, Scene, App 단계별로 변수를 생성할 수 있으며 임을 종료해도 데이터가 남는 Saved 단계도 있습니다.

Graph Inspector

현재 선택된 그래프의 정보나 선택한 노드의 정보를 보여주는 곳입니다. 서브 그래프를 만들 때 필요한 Input, Output도 여기서 설정합니다.

노드를 추가하기 위해서 빈 공간에 우클릭을 해봅시다. 여기서 나타나는 창은 Fuzzy Finder로 원하는 노드를 검색해서 보여주는 역할을 합니다. 버튼 입력을 받기 위해 Events > Input > On Button Input을 선택합니다.

습Fuzzy Finder에서는 노드를 쉽게 찾을 수 있도록 카테고리 별로 구분되어 있습니다.

이벤트 노드는 그래프 흐름의 시작점입니다. 따라서 로직를 만들기 위해서는 꼭 이벤트 노드가 필요합니다. 방금 생성한 On Button Input도 여기에 해당되며 버튼 입력을 받기 위해서 버튼 이름 문자열과 액션 타입을 받습니다.

비주얼 스크립팅 노드의 구조

이제 점프입력을 받아 위쪽 방향으로 힘을 가할 것입니다. Fuzze Finder을 열어서 Add for만 타이핑하여 Rigidbody:AddForce(X,Y,Z,Mode) 노드를 추가하고 연결합니다. 그리고 각 데이터는 아래 그림과 같이 설정해봅시다.

비주얼 스크립팅에서 로직 구현은 노드 추가 > 데이터 설정 > 노드 연결 순으로 진행됩니다.

완성했다면 잠시 File > Save + Save Project로 중간 저장합니다. 이후 플레이 버튼을 눌러 실행하고 스페이스바를 눌러 캐릭터가 튀어오르는 모습을 직접 눈으로 확인해봅시다. 이 때 그래프에서도 로직의 흐름을 시각적으로 보여주고 있음을 확인할 수 있습니다.

여기서 추가로 애니메이션까지 곁들여보겠습니다. 이번에도 Fuzzy Finder로 ani set bo 만 타이핑하여 Animator:Set Bool(name, value) 노드를 추가합니다.

이 노드에는 애니메이터의 Parameter 이름을 넣어야 하는데 준비단계에서 미리 설정해둔 Jump를 입력하고 아래 Bool값을 체크(true)한 뒤, Add Force 노드와 연결합니다. 이후 바로 스페이스 바를 눌러서 새로운 모습을 확인해봅시다.

비주얼 스크립팅은 로직의 흐름을 실시간으로 보여줍니다.

점프 애니메이션까지 나오지만 다시 원래대로 돌아오지 않습니다. 우리는 물리 충돌 이벤트를 통해 다시 애니메이션을 돌려놓을 것입니다.

Events > Physics > On Collision Enter 노드를 추가하고 점프 애니메이션 상태를 탈출하도록 Animator:Set Bool(name, value)를 하나 더 사용해서 Jump를 비활성화할 것입니다.

물리 이벤트 노드를 추가하기 위한 경로

정상적인 점프와 착지를 확인했다면 이제 플레이를 종료합니다. 비주얼 스크립팅은 플레이 중에 변경한 내용도 그대로 유지하고 있기 때문에 이렇듯 실시간 로직 편집이 가능합니다.

점프와 착지 로직이 완성된 모습