ProtoPie Connect Unity 플러그인을 사용한 게임 UI 튜토리얼

개요

1. ProtoPie 프로토타입 구성하기

2. Unity 프로젝트 설정하기

3. ProtoPie Unity 플러그인 설정하기

4. 씬 관리자 스크립트 준비하기

5. Unity와 ProtoPie 간 통신 설정하기

6. Unity 프로젝트 빌드 및 ProtoPie로 가져오기

7. ProtoPie Connect에서 미리보기 및 테스트

이 단계별 튜토리얼에서는 ProtoPie Connect와 Unity 플러그인을 사용해 게임 UI 데모를 만드는 과정을 안내합니다. 파일 가져오기, 상호작용 설정, 그리고 매끄러운 게임 경험을 위해 Unity와 ProtoPie를 통합하는 방법을 다룹니다.

튜토리얼을 따라가려면 데모를

부터 시청하세요.

영상

튜토리얼을 시작하기 전에, 우리가 달성하려는 목표를 이해할 수 있도록 최종 데모를 미리 살펴보겠습니다.

이 데모는 ProtoPie에서 만든 UI 요소가 포함된 기본 MMO RPG 인터페이스를 보여줍니다. 화면에 있는 여러 UI 요소, 예를 들어 탭, 진입 버튼, 기능 버튼에 주목하세요. 이러한 UI 요소는 ProtoPie에서 제작되며 Unity 게임 환경 위에 레이어로 배치됩니다.

ProtoPie와 Unity로 구현한 몰입형 게임 경험.

1. ProtoPie 프로토타입 구성하기

1.1 Pie 다운로드하기

이 Pie를 다운로드하여 열기 파일을 ProtoPie Studio에서 여세요. 이 파일에는 Unity 게임을 제어하는 데 사용할 UI 요소와 상호작용이 포함되어 있습니다.

1.2 UI 요소 추가하기

다음으로 ProtoPie에서 UI 요소를 만듭니다. 이러한 요소는 다음과 같이 Unity 게임의 제어 인터페이스 역할을 합니다.

• UI 요소: ProtoPie에서 버튼, 탭 및 기타 인터랙티브 구성 요소를 만듭니다.

• 레이어링: 이러한 UI 요소가 Unity 프로젝트 위에 올바르게 겹쳐지도록 합니다. 즉, 게임 화면에 맞게 위치와 크기를 조정해야 합니다.

1.3 ProtoPie에서 Unity로 보내는 메시지 구성하기

다음으로 ProtoPie가 Unity로 보낼 특정 메시지를 구성합니다. 예를 들면 다음과 같습니다:

• Enter 버튼 (Scene 01): ProtoPie의 Enter 버튼이 Unity로 메시지를 보내도록 구성합니다. 이 메시지는 게임플레이 경험으로의 씬 전환을 트리거합니다.

• Home 버튼 (Scene 02): 마찬가지로 Home 버튼이 Unity로 메시지를 보내도록 구성합니다. 이 메시지는 씬을 메인 메뉴로 되돌립니다

• 배경 불투명도 (Scene 02): 배경 불투명도 색상을 0으로 설정합니다.

2. Unity 프로젝트 설정하기

2.1 Unity Game UI 템플릿 다운로드하기

• 이 Unity Game UI 템플릿을 다운로드하여 열기를 Unity에서 여세요.

2.2 Unity 씬 준비하기

• 이 프로젝트에는 Island 씬과 MainMenu 씬, 두 개의 씬이 포함되어 있습니다. 이 씬들은 Assets→Scenes 폴더에 있습니다. 먼저 MainMenu 씬부터 시작한 다음 Island 씬에 대해 같은 과정을 반복합니다.

3. ProtoPie Unity 플러그인 설정하기

• 씬에는 이미 "ProtoPie"라는 게임 오브젝트가 포함되어 있어야 하며, 여기에는 ProtoPie Connect와의 통신 설정에 필요한 코드 스크립트가 들어 있습니다.

• 매핑을 자세히 살펴보면 메시지 방향이 "ProtoPie에서 Unity로"이고 메시지는 "CHANGE_SCENE_2"임을 확인할 수 있습니다.

• 매핑 테이블은 직접 수정할 수 있습니다. 테이블에서 매핑을 추가/삭제/편집하세요.

4. 씬 관리자 스크립트 준비하기

다음으로 Unity의 씬 전환을 관리하는 스크립트를 작성합니다.

• 씬 관리자: Unity에서 씬을 변경하는 스크립트(예: ChangeScene)를 작성합니다. 이 스크립트는 ProtoPie에서 오는 메시지에 의해 트리거됩니다.

• 예제: 아래 스크립트에는 _ChangeScene() 함수가 있으며, 호출되면 sceneName 공개 변수에 포함된 씬 이름으로 씬을 변경합니다.

• Unity 씬에 게임 오브젝트를 만들고 ChangeScene 스크립트를 추가합니다. 이 프로젝트에서는 SceneManager 게임 오브젝트에 이 스크립트가 포함되어 있습니다.

• sceneName 변수는 public이므로 전환하려는 씬 이름과 일치하기만 하면 다른 이름으로 변경할 수 있습니다.

• Unity가 ProtoPie에서 CHANGE_SCENE_2 메시지를 받았을 때 _ChangeScene 함수가 호출되도록, "원하는 작업" 아래에서 드래그 앤 드롭으로 SceneManager 게임 오브젝트를 매핑에 추가합니다.

• 드롭다운 메뉴 목록에서 “_ChangeScene” 함수를 찾습니다.

• Island 씬에 대해서도 이 과정을 반복합니다.

• SceneManager 오브젝트를 만들고 ChangeScene 스크립트를 추가한 다음, 전환하려는 씬 이름으로 씬 이름을 설정합니다. 이 경우에는 "MainMenu"입니다.

• CHANGE_TO_SCENE_1 메시지로 새 매핑을 만들고 방향을 ProtoPie에서 Unity로 설정합니다.

5. Unity와 ProtoPie 간 통신 설정하기

5.1 Unity에서 ProtoPie로 보내는 메시지 설정하기

다음으로 Unity가 ProtoPie로 메시지를 다시 보내도록 구성합니다. 이를 통해 Unity의 게임 동작이 ProtoPie에서 반응을 트리거할 수 있습니다.

• 예제: 게임 캐릭터가 코인을 획득하면 Unity는 ProtoPie에 메시지를 보내 UI의 코인 개수를 업데이트합니다.

• Unity에서 ProtoPie로 메시지를 보내려면 Unity 이벤트를 호출해야 합니다.

• 플레이어가 코인과 충돌할 때 Unity 이벤트 onCoinCollision.Invoke()를 호출하는 스크립트를 작성합니다. 또한 충돌 후 코인을 삭제하는 코드도 포함해야 합니다. 이렇게 하면 플레이어가 코인과 충돌할 때 이벤트가 호출되고 코인이 사라집니다.

• 추가로 코인을 회전시키는 스크립트를 추가할 수 있습니다.

• 두 스크립트를 Coin 게임 오브젝트에 연결합니다.

• 마지막으로 필요한 스크립트는 메시지가 전송될 때 코인 값을 보내는 것입니다. 코인 값이 있는 스크립트를 작성하세요. 변수는 string이어야 합니다.

• 스크립트를 sendCoinValue라는 새 Game 오브젝트에 연결합니다.

• ProtoPie 게임 오브젝트에서 씬의 각 코인에 대한 매핑을 만듭니다. 이 매핑에는 Unity가 ProtoPie로 보내는 메시지이므로 COIN 메시지가 있어야 합니다. 방향을 Unity에서 ProtoPie로 설정합니다.

• Coin 게임 오브젝트를 Event Object 슬롯으로 드래그합니다. 스크립트가 자동으로 invoke 코드를 찾습니다.

• sendCoinValue 게임 오브젝트를 value source object 슬롯으로 드래그합니다. 스크립트가 자동으로 string 변수를 찾습니다.

• 나머지 코인에도 이 과정을 반복합니다. 각 코인을 자체 매핑에 추가합니다.

5.2 ProtoPie 응답 설정하기

ProtoPie가 Unity의 메시지에 응답하도록 구성합니다.

• 메시지 처리: ProtoPie에서 Unity로부터 들어오는 메시지에 대한 응답을 설정합니다. 예를 들어 "coin" 메시지를 받으면 코인 개수가 증가하고, 효과음이 재생되며, 코인 아이콘이 애니메이션됩니다.

6. Unity 프로젝트 빌드 및 ProtoPie로 가져오기

6.1 Unity 프로젝트 빌드하기

상호작용을 구성한 후, Unity 프로젝트를 WebGL 애플리케이션으로 빌드합니다.

• File → Build Settings로 이동합니다. 모든 씬이 포함되어 있고 플랫폼이 WebGL로 설정되어 있는지 확인하세요.

• 프로젝트를 빌드하기 전에 Player 설정에서 몇 가지 변경이 필요합니다. Edit → Project Settings → Player로 이동합니다.

• WebGL 템플릿을 PWA로 설정합니다.

• 압축 형식을 Disabled로 설정합니다.

• 빌드 과정: Unity 프로젝트를 빌드하여 WebGL 애플리케이션으로 내보냅니다. 이를 통해 ProtoPie Connect Stage View에 Unity 레이어로 통합할 수 있습니다.

• 파일 압축: 가져오기를 쉽게 하기 위해 빌드 폴더를 ZIP 파일로 압축합니다.

6.2 Unity 빌드 ProtoPie 파일을 ProtoPie Connect Stage View로 가져오기

• ProtoPie Connect를 열고 Pie 그룹을 만듭니다.

• 클라우드 또는 컴퓨터에서 Pie를 추가합니다.

• Pie를 그룹으로 드래그 앤 드롭합니다.

• 그룹 카드의 헤더 레이어 위에 마우스를 올려 아이콘 버튼을 표시합니다. View 아이콘을 선택합니다.

• 브라우저 창 탭이 Pie와 함께 열립니다. 이를 스테이지 뷰.라고 합니다. 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하면 헤더 메뉴가 나타나며, 오른쪽 상단의 편집 버튼을 클릭합니다.

이제 통합을 완료하기 위해 Unity 빌드를 ProtoPie로 가져옵니다.

7. ProtoPie Connect에서 미리보기 및 테스트

마지막으로 모든 것이 예상대로 작동하는지 확인하기 위해 데모를 미리보기하고 테스트합니다.

• Stage View에 새 Unity 레이어를 삽입합니다. 이 레이어에 Unity 빌드가 포함됩니다.

• 필요에 따라 레이어 순서를 조정합니다. ProtoPie 레이어를 맨 위에, Unity 레이어를 맨 아래에 배치하여 UI가 Unity 레이어 위에 겹치도록 합니다.

• 새로 만든 Unity 레이어에 WebGL 빌드 ZIP 파일을 가져옵니다.

• 헤더 왼쪽 상단의 View 버튼을 선택하여 View 모드로 돌아갑니다. 더 나은 테스트 경험을 위해 헤더 메뉴의 전체 화면 아이콘을 선택하거나 화면의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하여 헤더 메뉴를 숨기고 전체 화면 모드로 전환합니다.

• 상호작용 테스트. ProtoPie의 다양한 버튼을 클릭하고 그 상호작용을 관찰하세요. 각 버튼은 ProtoPie UI를 사용해 씬 사이를 이동하거나 Unity에서 코인을 수집해 ProtoPie 응답을 트리거하는 등 Unity에 대응하는 메시지를 보내야 합니다.

ProtoPie와 Unity로 게임 UI 프로토타이핑의 수준을 높이세요

이 튜토리얼은 ProtoPie와 Unity의 강력한 통합을 보여 주며, 상호작용 가능하고 반응형인 게임 UI를 만들 수 있게 해줍니다. 이 단계를 따라 하면 매끄러운 상호작용을 구현하고 게임 프로젝트의 사용자 경험을 향상시킬 수 있습니다. 아래에서 ProtoPie를 다운로드하고 무료로 게임 UI 프로토타이핑 여정을 시작하세요.