Reality Composer Pro 3로 코드 없는 게임을 디자인하기

안녕하세요, 저는 Saschka Unseld입니다 Apple의 크리에이티브 디렉터예요 아이디어를 구상할 때마다 저에게 정말 중요한 것은 빠르게 목업을 만들고 반복할 수 있다는 거예요 계속해서 반복해서요 Reality Composer Pro 3으로 그게 가능합니다 코드 한 줄 없이도요 이 세션에서는 RealityKit 게임을 처음부터 만드는 방법을 소개합니다 Reality Composer Pro 3의 Script Graph로요 기초부터 익히고 싶다면 Reality Composer Pro 3 전용 세션도 준비되어 있습니다 하지만 창의적인 분이라면 빠르게 구현해 보고 싶은 아이디어가 있다면 이 세션이 딱 맞을 거예요

Script Graph가 무엇인지 설명할게요 게임을 만드는 방법도 보여드리고요 내용을 더 발전시키면서 더 고급 기법들도 깊이 살펴볼게요

Script Graph란 무엇일까요? Reality Composer Pro의 노드 기반 비주얼 스크립팅입니다

Script Graph로 이벤트 기반 로직으로 게임을 만들 수 있어요 이게 무슨 의미일까요?

이런 게임을 만들 수 있다는 뜻이에요 Pinch 이벤트를 감지해서 잎사귀를 열고 닫을 수 있어요 Drag Gesture 이벤트로 플레이어가 도토리를 드래그할 수 있고요 커스텀 이벤트도 만들어서 레벨을 스크롤하도록 게임에 알리고 캐릭터가 특정 웨이포인트에 도달했을 때요 Script Graph에서 제가 가장 좋아하는 건 바로 테스트하고 반복 작업을 할 수 있다는 점이에요 Reality Composer Pro에서요 그리고 Vision Pro에서도요

새로운 것을 만들 때마다 항상 어떤 것이 존재했으면 하는 바람에서 시작하고 그게 실현될 때까지 작업해요 이 게임의 바람은 아주 작은 것에서 시작했어요 바로... 작은 다람쥐였어요 도토리를 찾아서 행복하게 잠들어 있는 다람쥐요 그런데 다람쥐는 밤이 곧 찾아온다는 걸 깜박했어요 그래서 플레이어가 도울 수 있으면 좋겠다고 도토리를 훔쳐서 집으로 안내하도록요 더 좋은 플랫폼이 있을까요 다람쥐의 도토리를 훔치기에 Vision Pro만 한 게 없죠 플레이어가 손을 직접 뻗어서 다람쥐에게서 도토리를 훔치고 자유롭게 드래그해서 작은 친구를 집으로 안내할 수 있어요 게임을 만들어 볼게요 플레이어가 할 수 있도록 하고 싶어요 다람쥐의 도토리를 집어 들고 이리저리 움직이는 걸요 다람쥐와 Nut Entity가 있는 씬을 이미 만들었어요 컷아웃 스타일로 결정했는데 다람쥐와 Nut이 텍스처가 입혀진 단순한 평면이에요 도토리를 드래그 가능하게 만들려면 몇 가지 컴포넌트를 추가해요 시선 타겟으로 만들려면 Input Target Component를 추가합니다 시선 타겟의 크기를 정의하려면 Collision Component를 추가하고요 플레이어가 시선을 줄 때 강조 효과도 원하니까 Hover Effect Component도 추가해요 이제 첫 번째 Script Graph를 만들 준비가 됐어요 Project Browser에서 우클릭하고 New를 선택한 뒤 Script Graph를 선택해요 이 Script Graph에서 모든 로직을 만들 거예요

dragNut으로 이름 붙일게요

Script Graph 로직이 Nut Entity에서 실행되도록 Scripting Component를 추가하고

Inspector에서 dragNut Script Graph를 할당해요

훌륭해요 Script Graph를 열고 로직을 만들어 봅시다 Script Graph가 실행하는 로직은 로직을 트리거하는 이벤트부터 시작해요

다양한 이벤트를 감지할 수 있는 노드가 많이 있어요 저는 플레이어가 도토리를 핀치하고 드래그하는 이벤트를 감지할 거예요 이를 위해 "On Drag" 이벤트 노드를 활용해요 이제 해야 할 일은 On Drag 노드에서 얻는 정보를 사용해서 Nut Entity의 트랜스폼에 적용하는 것뿐이에요

이를 위해 Set 노드를 사용해요 Set 노드는 컴포넌트에 데이터를 쓸 수 있는 노드예요 그 외 여러 가지도 가능하죠 저는 Nut의 트랜스폼 컴포넌트에서 위치를 조정하고 싶어서 Set Transform 노드를 사용해요 이제 이 두 개를 연결하면 돼요 먼저 On Drag 이벤트를 연결해서 Set Transform 노드를 트리거해요 이렇게 하면 Set Transform이 트리거되는 건 On Drag 이벤트가 트리거될 때마다예요 다음으로 On Drag 노드에서 얻은 Scene Location을 연결해서 Set Transform의 translation 입력에 연결해요 이렇게 하면 도토리의 위치가 드래그 제스처에서 얻은 드래그 트랜스폼을 기반으로 설정돼요 이게 전부예요 빠른 테스트와 반복 작업은 모든 창의적 워크플로의 핵심이에요 Reality Composer Pro 3에서 바로 할 수 있어요 워크스페이스 상단의 Play 버튼을 누르면 뷰포트에서 바로 로직을 테스트할 수 있어요 Script Graph에 정의한 대로 도토리를 클릭해서 드래그할 수 있어요 한 발짝 더 나아가 볼게요 Live Preview로요 올해 말에 제공될 기능이에요 인터랙션이 어떤 느낌인지 제대로 알려면 Vision Pro에서 직접 테스트해 볼게요

Simulation Mode를 "Preview on Device"로 전환하고 Vision Pro를 선택한 뒤 Play를 눌러요

짜잔! 다람쥐와 도토리가 바로 옆에 나타나요 앱을 이리저리 움직여서 잘 배치할 수 있고 Play를 누를 수 있어요 이제 도토리를 바라보고 탭해서 드래그할 수 있어요 흠... 도토리를 드래그하려면 손을 너무 많이 움직여야 할 것 같아요 이런 조정을 할 때는 Mac Virtual Display를 띄우는 게 좋아요 조정 사항을 직접 볼 수 있거든요

Script Graph에 수학과 로직을 적용할 수 있는 노드가 많이 있어요 시작 시 튀는 현상을 수정하고 도토리가 드래그에 더 반응하도록 On Drag의 Scene Translation과 "Multiply by Number" 노드를 사용할게요 곱셈 인수를 여러 번 조정하고 싶을 거예요 이를 위해 Input 변수를 만들게요 Script Graph의 Inspector에서 추가해요 dragSpeed라고 이름 붙이고

number 타입으로 설정한 뒤 public으로 설정하고 기본값을 1.3으로 줄게요

그런 다음 Input 노드를 추가하고 dragSpeed 변수를 multiply 노드에 연결해요

dragSpeed를 public 변수로 설정했으니 Nut의 Scripting Component에 표시돼요 즉 Vision Pro에서 테스트하는 동안 dragSpeed를 조정해서 딱 맞는 값을 찾을 수 있어요

1.5?

흠... 너무 많네요 1.1은 어떨까요...

거의 다 왔어요...

1.15...

네, 이거네요

한 가지 더... dragSpeed 값을 변경하면 이름이 굵게 표시돼요 이는 dragSpeed 값이 스크립트 자체에 적용되지 않고 Override로 적용된다는 의미예요 Override는 변수의 고유한 변형이에요 각 Scripting Component마다 고유하게 적용되죠 씬에 여러 개의 Nut을 가질 수 있고 같은 Script Graph 로직을 공유하면서도 다른 dragSpeed 설정을 사용할 수 있어요

인터랙션이 어떤 느낌인지 이렇게 반복해서 조정하는 걸 좋아해요 그런데 솔직히 말하면 그 움직임이 좀 밋밋했어요 도토리가 더 역동적으로 느껴지길 원하고 무엇보다 도토리를 이리저리 던질 수 있길 바라요

이를 위해 물리를 추가해 볼게요 먼저 Nut이 물리 시뮬레이션의 일부가 되도록 해야 해요 Physics Body Component를 추가해요 이제 Script Graph를 변경해서 드래그 제스처가 Nut의 물리를 구동하도록 해야 해요 Add Force 노드로 할 수 있어요 이 노드는 Nut의 물리 시뮬레이션에 힘을 추가해서 Nut이 힘의 방향으로 이동하게 해요 하지만 이건 누적 힘이라서 시간에 따라 드래그가 얼마나 변하는지 알아야 해요 이건 드래그 제스처에서 기본으로 얻는 데이터가 아니에요 직접 추가해 볼게요 드래그의 translation을 바로 적용하는 대신 저장할 거예요 이를 위해 targetPosition이라는 변수를 만들고 Set Variable 노드를 사용해서 드래그의 translation을 저장해요 다음으로 드래그가 얼마나 변했는지 계산하고 싶어요 이전에 얻은 위치에서 현재 위치를 빼면 돼요 이 변화를 계산하는 로직을 연결했고 dragDelta라는 변수에 저장해요

이제 Add Force 노드를 트리거하고 dragDelta를 연결해서 작은 곱셈으로 무게감을 더해 Add Force 노드에 연결하면 돼요 동작을 확인해 볼게요

더 물리적인 느낌이 나서 좋은데요 도토리를 던지면 떨어지는 것도요 그런데 들어 올리기가 좀 어렵네요 중력이 삶에서 끊임없이 잡아당기기 때문이에요 아래로 끌어당기죠 Nut을 잡을 때는 꺼 볼게요 이를 위해 다른 Set 노드를 사용할게요 Set PhysicsBodyComponent 노드예요 이 노드는 설정을 변경할 수 있게 해줘요 PhysicsBodyComponent의 설정을 동적으로요 Nut이 드래그 중에 중력의 영향을 받지 않도록 하고 싶어요 드래그할 때 덜 다루기 힘들도록 선형 감쇠 값을 높일게요 마찰력이 커져서 더 빨리 속도가 줄어들 거예요

Script Graph에 이 변화를 트리거하는 로직을 추가했어요 PhysicsBodyComponent의 Nut을 집거나 내려놓을 때요 테스트해 볼게요

오, 완벽해요, 훨씬 좋은 느낌이에요 Script Graph의 기본이 이거예요 이벤트 노드를 감지하고 얻은 데이터로 로직을 실행한 뒤 Set 노드로 컴포넌트를 수정해요 하지만 이 기본 개념으로 정말 많은 걸 할 수 있어요 더 고급 기법들을 살펴볼게요 삶의 많은 것들처럼 시간이 지나면 복잡해지는 경향이 있죠 그리고 창의적인 작업만큼 좋아하는 게 하나 있어요 바로 정리하는 거예요

Prototyped Subgraph가 도움이 돼요 로직을 정리할 수 있을 뿐 아니라 재사용 가능한 로직도 만들 수 있어요

제가 이전에 만든 Script Graph 조각을 살펴볼게요 이게 하는 일은 Drag 이벤트의 isEnd bool이 방금 변경됐는지 확인하고 변경됐으면 로직을 트리거하는 거예요 근데 이걸 보면... 이게 뭘 하는 거였죠? Subgraph로 정리해 볼게요 이 로직 부분을 이루는 모든 노드를 선택하고 우클릭한 뒤 Compose Subgraph를 선택해요

Check for Change라고 이름 붙일게요 아... 벌써 훨씬 간단해 보이네요 잠깐요 bool 변수가 변경될 때 트리거하는 건 항상 필요한 기능이에요

그래서 Prototyped Subgraph가 유용해요 모든 Script에서 Subgraph를 재사용할 수 있게 해줘요

만드는 것도 식은 죽 먹기예요 우클릭해서 Convert to Prototyped Subgraph를 선택하면 돼요 에셋 브라우저에 나타날 거예요

이제 노드 추가 메뉴에서 다른 노드들과 함께 Subgraph가 보여요 이런 재사용 가능한 로직을 만들면 워크플로를 빠르게 할 수 있고 로직을 간결하게 유지할 수 있어요 자, 다람쥐로 돌아가 볼게요 지금 다람쥐의 Nut을 훔치면 다람쥐가 전혀 반응하지 않아요 이건 좀 이상하죠, 고쳐 볼게요 제가 Nut을 드래그할 때 다람쥐가 쳐다보길 원해요 이를 위해 다람쥐에게 자체 Script Graph를 줄게요 그런데 Nut이 드래그되고 있다는 걸 어떻게 알까요? 커스텀 이벤트를 직접 만들 수 있어요 그러려면 Custom Node Library가 필요해요

Project Browser에서 바로 만들 수 있어요 그리고 커스텀 이벤트를 추가해요 "nutIsDragged"라고 이름 붙일게요 다람쥐가 Nut의 위치를 알 수 있도록 이벤트와 함께 Nut의 위치를 전송할 거예요 이를 위해 커스텀 이벤트에 프로퍼티를 추가해요 nutPosition이라고 이름 붙이고요 이제 Sync Nodes를 클릭해서 커스텀 노드가 사용 가능하도록 해야 해요 이제 제가 원하는 건 Nut의 Script Graph가 이 이벤트를 보내도록 하고 다람쥐의 Script Graph에 전달하는 거예요 Node Library에 추가했으니 Send "nutIsDragged" 노드가 다른 노드들과 함께 사용 가능해졌어요 Nut이 드래그될 때 트리거되도록 연결하고 Nut의 월드 위치를 함께 전달해요 그리고 다람쥐의 Script Graph에서 On "nutIsDragged" 이벤트를 만들어서 감지할 수 있게 해요 이벤트의 nutPosition으로 다람쥐의 회전을 구동해요 Vision Pro에서 어떤 느낌인지 확인해 볼게요

훌륭해요 추가한 로직 덕분에 Nut을 볼 때 다람쥐가 빠르게 뒤집혀요 게임의 컷아웃 디자인을 강조하면서 더 재밌게 만들어줘요 아, 그리고 작은 것 하나를 살짝 추가했어요 Nut을 훔치면 다람쥐가 적절히 화난 표정을 지어요

쉽게 추가할 수 있었어요 Script Graph에서 다람쥐의 Material을 변경하는 방식으로요

다람쥐 Material의 Shader Graph에서 isNutDragged라고 이름 붙인 public 입력 변수를 사용해요 이걸 사용해서 두 개의 다람쥐 텍스처 중 어느 것을 사용할지 결정해요

다람쥐의 Script Graph에서 Set Material Parameter 노드를 추가하고 파라미터를 Bool 타입으로 설정한 뒤 isNutDragged라고 이름 붙였어요

그런 다음 Entity를 찾을 위치를 알려주고 다람쥐의 Model Component가 있는 곳이요 트리거되도록 확인한 뒤 Nut이 드래그되었는지 여부를 전달했어요 그게 전부예요 다람쥐가 불만을 제대로 표현하려면 제대로 불평할 수 있는 목소리가 필요해요 컷아웃 스타일을 유지하면서 말풍선으로 목소리를 표현하고 싶어요 이런 인터페이스에는 SwiftUI를 사용하는 걸 좋아해요 손쉽게 만들 수 있고 아름답거든요 하지만 SwiftUI를 사용하려면 Xcode로 게임을 실행해야 해요 간단해요. 미리보기 모드를 "Run with Xcode"로 바꾸면 돼요 그런데, Xcode 프로젝트가 없을땐? 문제없어요 Reality Composer Pro 3이 만들어 줄 수 있어요 Xcode에서 이 작은 SwiftUI 말풍선을 만들었어요 그런데 어떻게 띄울까요 다람쥐의 Nut을 훔칠 때요

역시... Script Graph 이벤트가 도움이 돼요 Swift에서도 감지하고 전송할 수 있거든요

Script Graph에서 해야 할 일은 Send Scene Event 노드를 사용하고 squirrelTalk이라고 이름 붙이고 다람쥐가 할 말을 전달하고 싶으니 변수를 추가해요

sayThis라고 이름 붙이고 String 타입으로 설정한 뒤 다람쥐가 할 말로 설정해요 예를 들어 "이봐, 그건 내 도토리야!"

그런 다음 Xcode에서 코드를 작성해야 했어요 디자이너로서 Coding Intelligence에 요청해서 이 코드를 대신 작성할 수 있게 된 게 정말 좋아요

Scene 이벤트를 감지하려면 코딩 어시스턴트에게 squirrelTalk이라는 Scene 이벤트를 구독하도록 하고 sayThis 변수를 저장하도록 요청하면 됐어요

그리고 squirrelTalk이 호출될 때 SwiftUI 말풍선을 표시하고 Squirrel Entity 위에 Attachment로 표시해요 물론 sayThis 변수를 텍스트로 사용하면서요

이제 다람쥐가 제대로 알려줄 수 있어요 도토리를 훔칠 때 저에 대해 어떻게 생각하는지요 Script Graph로 게임에 추가할 수 있는 건 훨씬 더 많아요 다람쥐가 걷고 점프해서 Nut을 되찾으러 가게 하거나 다람쥐가 이동할 수 있는 드래그 가능한 잎사귀를 만들어서 레벨 전체를 통과하게 하는 것도요 또는 visionOS 장식도 만들 수 있는데 막히면 레벨의 어디로든 이동할 수 있어요 걱정 마세요, 작은 다람쥐야 꼭 집에 데려다 줄게요

이렇게 Script Graph를 사용하는 걸 정말 좋아해요 아이디어를 스케치하고 도토리를 훔치는 최선의 방법을 고민하며 무엇보다 바람을 현실로 만들어 줘요 계속 진행하고 싶다면 Reality Composer Pro 3을 다운로드하세요 고급 워크플로를 깊이 살펴보거나 전체 Squirrel 샘플 프로젝트를 확인하세요 Apple Developer 웹사이트에서요