툴/유니티

유니티 비주얼 스크립팅 Unity Visual Scripting / 코딩 없이 게임 개발

스튜디오 오버그래픽스 2023. 7. 8. 20:59

유니티 비주얼 스크립팅은 코드 방식이 아닌 노드를 연결해서 로직을 만드는 방식.

기존에 C# 문법과 코딩을 선행 학습 해야지 할수 있었던 유니티 게임 개발을 코딩 없이 가능하게 해줌.

 

좌측 비주얼 스크립팅과 우측 코딩은 같은 기능
유니티 비주얼 스크립팅 공식 홈페이지 설명 사진

코딩 없이 위와 같이 노드들을 연결해서 작업을 함.

 

Bolt라는 이름으로 에셋 스토어에서 다운 받아서 사용하던 비주얼 스크립팅 에셋이었고 유니티2021 버전 부터 정식 기능으로 채택되어서 package manager에서 버전 관리를 하고 사용할수 있게 됌.

(2022LTS 기준 Visual Scripting 1.8.0버전)


장점)

개발의 진입 장벽이 낮아짐.

프로토타입을 만들어보기에는 생산성이 좋음.

라이브 에디팅이 가능하기 때문에 플레이중에 수정하고 바로 반영해서 확인할수도 있음.

직관적으로 보이는 로직이기 때문에 이해가 쉬워지고 개발자와 디자이너 사이에서 협업이 수월해질 수 있음.

 

단점)

로직이 복잡하고 많아지면 스파게티코드(복잡하게 얽힌 꼬인 구조)가 되고 가독성과 관리가 힘들 수 있음.

같은 기능이라도 코드로 짜는거보다 분량이 많아질 수 있음.

최적화를 위해서는 결국 코딩이 필요하게 됌.

유니티 내부 기능만 할수 있고 그 외에 유니티 외부 기능은 비주얼 스크립팅으로 할수 없음.

 


Visual Scripting 사용하기(2022.3LTS)

 

프로젝트를 만들고 패키지 매니저를 보면 Visual Scripting이 기본으로 내장되어 있음.

 

Project Settings에서 Visual Scripting으로 가면 아직 Initialize가 안된 상태

Initialize Visual Scripting 버튼을 누르면 작업이 진행됌.

진행이 끝나면 위와 같이 설정이 바뀌고 Visual Scripting을 사용할수 있는 상태가 됌.

(굳이 Project Settings 가서 이렇게 할필요는 없고 처음 Visual Scripting을 사용할때 자동으로 셋팅을 진행함)

 

 

Project창에서 우클릭 Create로 Script Graph와 State Graph 2종류를 만들수 있음.

 

Script Graph

로직을 그래프 형태로 만들수 있는 에셋

 

State Graph

상태에 따른 로직을 그래프 형태로 만들수 있는 에셋

 

 

C# 스크립트가 씬에서 작동하려면 하이어라키의 오브젝트의 컴포넌트에 있어야 됐던 것처럼

비주얼 스크립트도 작동 하려면 하이어라키의 오브젝트의 컴포넌트에 있어야 함.

위와 같이 컴포넌트의 Script Machine과 State Machine이 있어야 작동됌(variables는 같이 추가됌)

위와 같이 Source가 Graph로 되어 있으면 만들어둔 Graph에셋을 임포트 할수 있음.

 

 

Machine에서 Source를 Embed로 바꾸면 별도 Graph가 존재 하지 않는 내장 Graph로 이 컴포넌트에만 해당되는 Graph가 됌. Embed로 만든 Graph는 재활용 할수 없지만 작업 이후 재활용을 위해 에셋으로 만들고 싶으면 Convert를 눌러서 에셋으로 저장할 수도 있음.

 

Variables에서 변수 이름을 먼저 정해주고 +버튼을 눌러주면 변수가 생성되고 Type을 지정할 수 있음.

이 변수는 오브젝트 단계에서 접근 할수있는 변수로 생성됌.

 

작업을 하다보면 자동으로 하이어라키에 Visual Scripting SceneVariables가 생기는데 이는 씬에서 사용되는 변수의 접근 및 사용이 있을때 자동 생성되는 오브젝트.(신경 안쓰고 내비둬도 상관 없음)

 


Script Graph

스크립트 그래프를 열어보면 아래와 같은 창이 됌.

기본적으로 C# 스크립트와 마찬가지로 'On Start'와 'On' Update'가 존재함.

그래프의 각 직사각형 노드를 '유닛 or 이벤트 or 노드' 라고 함.

 

*비주얼 스크립팅도 마찬가지로 플레이 중에 변경한 사항은 저장 되지 않음.


Graph Inspector

상단바에 i아이콘 토글 창으로 세부 정보를 보는 기능.(우측 상단의 작은 화살표 버튼을 누르면 창을 옮길수 있음)

 

아무것도 선택 안되어 있을때는 이 Script Graph에 대한 정보를 보여주고 'Trigger'와 'Data'의 인풋 아웃풋이 보여지는데 이는 서브 그래프로 만들때 해당 그래프의 입력과 출력에 대한 설정을 할때 사용함.

 

On Start 노드를 클릭 했을때

On Start 노드를 선택했을때(함수를 일시정지할수 있는 Coroutine 기능 on/off 가능)

Transform Rotate 노드를 선택 했을때

Rotate 노드를 선택했을때(Chainable은 해당 노드의 데이터값을 Output으로 보내는 기능 On/Off 체크 박스)

 

각 노드를 클릭하면 그 노드에 대한 설명과 정보를 볼수도 있음


Black Board

상단바의 <X> 아이콘으로 나오는 창으로 변수를 관리하는 창.

우측 상단의 작은 화살표 버튼으로 창의 위치 변경 가능.

 

Graph, Object, Scene, App, Saved 5단계로 변수를 관리함.

 

Graph: 현재 그래프에서 사용하고 공유하는 변수

Object: 현재 오브젝트에서 사용하는 공유하는 변수

Scene: 현재 씬에서 사용하고 공유하는 변수

App: 현재 어플리케이션이 종료되기 전까지 씬이 달라져도 사용할수 있고 공유 되는 변수

Saved: Player Prefs같이 변수를 어플리케이션 외부에 저장해두어서 사용하는 변수

 

(위 사진의 경우 게임 오브젝트의 Variables 컴포넌트에서 Speed라는 변수를 만들어뒀기 때문에 BlackBoard의 Object에서 변수가 공유되어 나타남)


Toolbar(상단바)

 

좌측부터

 

Lock : 화면 상태 고정

 

Inspector : Graph Inspector 창 토글

 

Black board : Black board 변수 관리 창 토글

 

그래프 경로 : 그래프 하단 or 상단 현태 경로 위치 표기 및 클릭해서 이동하는 기능

 

줌 : 슬라이더 조절해서 그래프 편집기 확대 및 축소 기능

 

Relations : 각 노드의 내부 연결 흐름을 선으로 표시 해줌.(노드 내부에 선이 생김)

 

Values : 연산 되는 값을 연결된 선에 별도로 작게 표기 해줌(에디터 플레이 시에 나타남)

 

Dim : 연결이 되지 않아서 작동 되지 않는 노드는 반투명으로 표기 해줌

 

Carry : Carry가 켜져 있으면 상위 노드로 이동할때 연결된 모든 하위 모드가 이동함. Carry를 꺼두면 선택된 하위 노드만 이동함.(딱히 쓸일은 없는듯?)

 

Align : 노드들을 정렬하는 기능으로 2개 이상의 노드를 선택 했을때 정렬 기능 활성화됌.

 

Distribute : 노드들을 분배하는 기능으로 2개 이상의 노드를 선택 했을때 분배 기능 활성화됌.

 

Overview : 현재 편집기의 노드들이 보이는 위치로 자동 화면 맞춤.

 

 Full Screen : 편집기 창에 에디터에 도킹되어 있을때 클릭하면 전체 화면이 됌.

 


Graph Editor(Node)

 

주요 조작법

  • 창 이동 : 마우스 휠 드래그
  • 줌 : Ctrl + 마우스 휠
  • 빈칸 우클릭 : 노드 파인더 생성
  • 연결선 우클릭 : 연결 끊기
  • 그룹화 : Ctrl + 좌클릭 드래그

노드 파인더에서 원하는 노드를 검색 및 카테고리에서 찾아 볼수 있음.

 

노드들을 묶어서 그룹화 할수도 있음.


Sub Graph

 

자주 쓰는 기능 혹은 특정한 역할을 하는 기능들의 노드들을 따로 묶어서 에셋으로 관리하고 재활용 할수 있음.

 

ex) 곱하기 2를 해주는 로직을 가진 서브 그래프 만들기

Script Graph를 하나 만들고(이름은 원하는 대로 지어도 됌)

 

 

'Trigger Inputs & Outputs' 와 'Data Inputs & Outputs'에 각각 값을 위와 같이 만들어줌.

그리고 그래프 편집기에서 Nesting 카테고리에 있는 Input과 Output 노드를 만들면 방금 만들었던 값들이 적용되어 있음.

곱하기 2의 기능을 위 노드와 같이 만듬.

 

다른 Script Graph의 편집기로 가서 만들었던 그래프를 드래그앤드롭해서 불러 오거나 노드 편집기에서 검색해서 가져올수 있음.

그러면 SubGraph가 되고 숫자 3을 넣어보면

 

곱하기 2가 되어서 6의 결과가 나오는 것을 확인 할수 있음.

 

 

서브 그래프는 더블클릭하면 내부 로직을 볼수 있고 툴바에 경로 위치가 표기 됌.

 

 

별도로 Script Graph 에셋을 만들지 않고 Embed 상태의 Graph에서도 Nesting 카테고리에서 SubGraph를 바로 만들수 있음.

이렇게 서브 그래프 안에도 여러개의 서브 그래프가 들어 갈수도 있음.


State Graph

State Graph는 생성하면 기본으로 Start라는 노드가 있고 하단에 'On Enter State', 'On Exit State', 'On Update'가 있음.

 

 

Start를 더블클릭해보면 하단구조로 넘어가서 안의 로직을 볼수 있음. 상단에서 보이던 3개의 노드가 존재함.

 

On Enter State : 현재 상태로 들어왔을때 한번 실행됌.

On Update : 현재 상태일때 매 프레임마다 실행됌.

On Exit State : 현재 상태가 끝날때 한번 실행됌.

 

그리고 툴바의 경로를 보면 상단과 하단의 아이콘이 다름. Script Graph의 로직을 따르고 있음을 확일 할 수 있음.

(State Graph와 Script Graph는 편집기의 기능이 다름)

 

Script Graph안에 State Graph/ Script Graph/ State Graph~~~~가 번갈아 가면서 반복 될수도있고

State Graph안에 Script Graph/ State Graph/ Script Graph~~~~가 번갈아 가면서 반복 될수도 있음.

 

*Script Graph와 State Graph를 생성할때의 차이는 가장 상단을 뭘로 쓰느냐의 차이.

 


State Graph 편집기

 

편집기 내에서 우클릭을 하면 4가지 기능이 있음.(Sticky Note는 메모용도)

 

 

 

Script State

Script State는 기본으로 있는 Start State처럼 내부에 Script Graph 로직을 짤수 있는 State임.

 

 

 

 

Super State

Super State는 내부를 열어보면 내부도 State Graph의 아이콘이 나오고 로직또한 State 상태의 로직을 짤수 있음.

State안에 또 다른 State를 만들 수 있음.

 

 

 

 

Any State

Any State는 더블클릭해서 내부를 열수 없고 기능이 없는 null 상태의 State이다.

 

 

 

 

Transition

State Graph에서의 노드를 우클릭 하면 Transition을 만들 수 있음.

 

State가 바뀔수 있는 흐름을 연결해서 만듬(Self Transition은 자기 자신으로 연결됌)

노란색 Transition 아이콘을 더블클릭해보면 하단구조로 넘어가고 내부에 Trigger Transition노드가 있으며 툴바의 경로를 보면 처음 보는 아이콘이 있음.(State Grpah, Script Graph와는 다르다는 의미)

 

예를 들어 트리거안에 들어 왔을때를 연결해주는 등 Trigger Transition이 작동되게 해주면 해당 Transition이 작동 됌.

 

 

 

 

 

Start Toggle

State노드의 상단이 녹색이면 시작시에 해당 State가 작동됌을 의미함

우클릭으로 Start 상태를 토글할수 있음.

2개 이상의 상태를 시작하자마자 작동되게 할수도 있음.

 

 

 

 

플레이 중 State 변경 테스트

 

에디터에서 플레이 중일때 노드에 우클릭을 누르면 노드를 강제 실행 혹은 종료 시킬수 있으며 실시간으로 테스트 해볼수 있음.