0. Yarn Spinner란?
게임 개발을 위해 만들어진 일종의 문법과 툴이다. 시나리오 라이터들에게도 쉽고 프로그래머에게도 강력한 기능을 제공한다.
게임 전체 시나리오를 대화식으로 간단히 표현하면 인게임에 바로 적용되도록 만들 수 있으며, 선택지, 변수 조작, 조건문, 다국어 번역, 마크업 문법, 음성 추가 기능까지 지원한다고 한다.
해당 시스템이 사용된 대표작은 Night in the Woods, A Short Hike 등이 있으며, MIT 라이센스 조항에 따른 오픈 소스이므로 무료 및 상업용 게임 모두에 사용될 수 있다.
이 글은 Yarn Spinner 2.0.1에 따라 개인 기록용으로 작성되었으며, 더 정확한 정보는 공식 문서를 참고하자.
1. 설치
Unity에 Yarn Spinner를 설치하는 데엔 2가지 방법이 있는데, 여기선 공식 권장 방법인 Unity Package Manager를 사용하는 방법만 소개한다.
Yarn Spinner를 넣길 원하는 프로젝트를 연 뒤, 화면 좌측 상단 Edit > Project Settings > Package Manager를 선택한다.
그리고 레지스트리 빈 칸에 아래 정보를 넣고 Save한다.
Name : OpenUPM
URL : https://package.openupm.com
Scope(s) : dev.yarnspinner
저장하면 잠깐 무슨 창이 떴다가 사라지는데, 그러면 정상적으로 작동되는 것이다.
이 다음, 최상단 메뉴에서 Window > Package Manager를 켠다.
Packages를 My Registries로 선택하고
Yarn Spinner를 선택하고 우측 하단 Install한다.
Project > Packages 폴더 하단에 Yarn Spinner가 뜨면 성공이다.
2. 작성법
이제 텍스트를 작성해볼 차례다.
위 과정을 모두 마쳤다면 이제 오른쪽 마우스 > Create > Yarn Spinner라는 새로운 항목이 생겼을 것이다. 새 스크립트를 만들어보자.
만든 .yarn 파일을 아무 텍스트 에디터로 열면 아래와 같은 빈 내용이 있을 것이다.
여기서 잠깐 yarn 파일의 기본 구조를 짚고 가자.
모든 yarn 파일의 노드는 최소한의 헤더와 본문이 있다.
title: 뒤에 오는 건 해당 노드의 이름이며, 이 이름을 이용해 Yarn Spinner 시스템에게 실행을 시작할 노드를 알려준다. 즉, 노드의 title은 겹칠 수 없다. 이 title은 파일명과는 별개이며, 플레이어에게 표시되지 않는다.
해당 파일의 시작 노드 이름은 Start를 추천한다. (기본값)
title 값은 반드시 문자로 시작해야하며, 띄어쓰기를 포함할 수 없다.
(가능: FirstNode, First_Node, Node1 // 불가능: First Node, 1stNode)
--- 줄과 === 줄 안에는 바디(메인 코드)가 들어가며, 게임 내에서 보여줄 텍스트가 이 곳에 위치한다.
노드가 실행되면 한 번에 한 줄씩을 게임에 보여준다. 아무 것도 작성하지 않은 공백 줄은 자동으로 뛰어 넘는다.
한 줄의 텍스트는 어떤 캐릭터가 말하는 것이며, 보통 말하는 캐릭터의 이름으로 시작한다.
만약 콜론 (:) 이전에 스페이스 바로 한 번 이상 띄어쓴다면 캐릭터의 이름으로 인식되지 않으니 주의할 것. ( Player : 같은 식으로 작성하면 문제가 되는 모양이다.)
플레이어에게 선택지를 주고 싶다면 -> 기호로 선택지를 표시할 수 있다.
title: Start
---
Monster: 어흥!
-> Player: 제발 목숨만은 살려주세요!
-> Player: 떡 하나 줄테니까 봐주세요!
여기서 들여쓰기를 쓰면 선택지에 따른 반응도 넣을 수 있다.
title: Start
---
Monster: 어흥!
-> Player: 제발 목숨만은 살려주세요!
Monster: 싫어!
-> Player: 떡 하나 줄테니까 봐주세요!
Monster: 그깟거로 봐줄 거 같냐!
Player: 난 이렇게 죽는구나! 세상아 안녕!
들여쓰기의 들여쓰기로 선택지의 선택지의 선택지도 만들 수 있다.
title: Start
---
Monster: 어흥!
-> Player: 제발 목숨만은 살려주세요!
Monster: 뇌물이라면 생각해보지
-> Player: 떡이라도 드릴게요!
Monster: 그건 줘도 안 먹어!
-> Player: 다른 사람을 드릴게요!
Monster: 난 당장 배가 고프단 말이다!
-> Player: 떡 하나 줄테니까 봐주세요!
Monster: 그깟거로 봐줄 거 같냐!
Player: 난 이렇게 죽는구나! 세상아 안녕!
한 파일을 여러 노드로 나누어, <<jump>>를 사용하면 복잡한 선택지와 이벤트를 더 간편하게 작성할 수 있다.
title: Start
---
Monster: 어흥!
-> Player: 제발 목숨만은 살려주세요!
Monster: 뇌물이라면 생각해보지
-> Player: 떡이라도 드릴게요!
<<jump Dduk>>
-> Player: 다른 사람을 드릴게요!
Monster: 난 당장 배가 고프단 말이다!
-> Player: 떡 하나 줄테니까 봐주세요!
<<jump Dduk>>
Player: 난 이렇게 죽는구나! 세상아 안녕!
===
title: Dduk
---
Monster: 흠... 떡이라고?
Monster: 몇 개나 줄 수 있는데?
Player: 집에 많아요! 집에만 다녀오게 해주세요!
===
일단 기본 작성법은 여기까지만 소개하고, 이 이상의 테크닉은 공식 문서의 해당 항목을 참고하자.
3. UI 생성
3-1. 설정 지정
이제 텍스트를 출력해볼 차례다.
Unity에서 나의 yarn 파일이 있는 곳에 Create > Yarn Spinner > Yarn Project 를 클릭해 프로젝트를 생성한다.
그 다음 해당 Yarn 프로젝트(사진에선 TestYarnProject란 이름)를 눌러 인스펙터 창을 표시하고, Source Scripts에 우리가 처음 생성했던 yarn 파일을 추가해준다. (파란색 하이라이트)
Apply를 눌러 저장한다.
3-2. 텍스트창 추가
현재 씬에 빈 오브젝트를 추가한 후, 오브젝트 명을 DialogueRunner로 한다.
그 다음 해당 오브젝트에 Dialogue Runner 스크립트를 추가한다.
추가한 스크립트의 Yarn Project 부분에 방금 생성한 프로젝트를 추가한다.
UI/Canvas를 새로 만든 후, 그 밑에 DialogueBubble이라는 빈 오브젝트를 생성한다.
그리고 그 자식으로 캐릭터의 이름이 들어갈 TextMeshPro, 본문 텍스트가 들어갈 TextMeshPro, 텍스트 출력이 끝나면 보여줄 커서 Image를 각각 추가하고 적당히 배치한다.
DialogueBubble 오브젝트에 CanvasGroup와 LineView를 추가한다.
LineView에 방금 만들었던 오브젝트들을 차례로 추가한다.
Canvas Group - 현재 오브젝트의 Canvas Group
Line Text - 본문 텍스트가 들어갈 TMP(TextMeshPro)
Character Name Text - 캐릭터 이름 TMP
Continue Action Type - 플레이어가 뭘 하면 넘어갈 수 있는지를 설정한다. KeyCode로 지정할 수 있다.
Continue Button - 텍스트 출력이 끝나면 보여줄 게임 오브젝트(커서 이미지)
3-3. 선택지 창 추가
위에서 만들었던 Canvas의 자식으로 빈 오브젝트를 하나 더 추가한다. 이름은 DialogueOption으로 한다.
DialogueOption의 자식으로 OptionChild라는 이름의 Image 오브젝트를 만들어준다.
해당 오브젝트의 자식으로 선택지 텍스트가 들어갈 TMP를 생성해주고 모양을 조정한다.
OptionChild 오브젝트에 OptionView 스크립트를 붙이고, 해당 스크립트의 Text 부분에 선택지 텍스트가 들어갈 TMP를 넣어준다.
여기까지 조정하면 이런 느낌이 된다. 이제 OptionChild 오브젝트는 보이지 않게 해준다. (사본을 만들기 위한 원본으로, 직접 사용되지 않는다.)
이제 DialogueOption로 돌아와서, 해당 오브젝트에 CanvasGroup, VerticalLayoutGroup, OptionsListView를 추가한다.
VerticalLayoutGroup의 설정값은 취향대로 설정하고, 중요한 것은 OptionListView. 아래 내용을 참고해 설정한다.
CanvasGroup - 이 오브젝트의 캔버스 그룹으로 설정
Option View Prefab - OptionChild를 끌어와서 설정 (Prefab이라 되어있지만 꼭 그럴 필요는 없다.)
Last Line Text - 선택지 이전에 보여줬던 라인을 불러와서 보여주는 부분이다. 없어도 무방.
최종적으로 이런 느낌이 된다.
3-4. 최종 설정
DialogueRunner 오브젝트로 돌아가, Dialogue Views에 DialogueBubble과 DialogueOption을 추가한다.
이제 Start Automatically가 체크되어있는지, Start Node의 이름이 자신의 파일에 있는지 확인하고 실행해본다.
다 끝났다. 테스트 플레이로 정상 작동을 확인해본다.
4. 맺으며
시작할 때 언급했듯 이 툴은 아주 많은 기능을 지원한다. 커맨드, 변수, 로컬라이징, 마크업, 기타 등등...
근데 그것들을 다 소개하면 글이 길어질 것 같기도 하고, 당장은 2.0 업데이트 사항을 반영한 튜토리얼도 없길래(업데이트가 작성일 기준 열흘 즘 전에 진행됐다;) 간단히 작성해본다.
참고
공식 가이드 https://docs.yarnspinner.dev
Start Here - Yarn Spinner
When a conversation is running, Yarn Spinner sends your game lines of dialogue to show, options to let the player choose from, and commands to make things happen in your scene.
docs.yarnspinner.dev
Dialogue Bubble in Unity - Yarn Spinner - Part 1 - Ep. 12 https://www.youtube.com/watch?v=4n3AvsB6JRo