튜토리얼

7

분 소요

ProtoPie에서 틸트 센서를 사용하는 방법

ProtoPie로 게임 프로토타입 제작을 하며, 모바일 게임에 기울기 모션 컨트롤을 추가하는 방법을 알아보세요.

Bern Espino, Customer Learning Manager

틸트 모션 제어라는 흥미로운 전환으로 프로토타입을 한층 더 강화할 준비를 하세요! 게임 UX 디자인의 경계를 넓히고 싶어 하는 게이밍 애호가라면, 바로 여기가 제격입니다. 게임 UX 디자인

이 튜토리얼에서는 기기 기반 기울기 입력을 Shoot 'em Up 게임 프로토타입에 매끄럽게 통합하는 방법을 안내합니다. 그 결과는? 하이퍼 캐주얼 게임 장르의 기존 한계를 깨는 몰입감 있는 게임플레이 경험입니다.

ProtoPie의 진정한 차별점은 뛰어난 기본 센서 지원 기능으로, 다양한 창의적 가능성의 문을 열어 줍니다. 이제 실용적인 단계로 바로 들어가 이 역동적인 추가 기능이 여러분의 게임 프로젝트를 어떻게 진정으로 혁신할 수 있는지 알아보겠습니다.

비디오

개요

  • 배울 내용

  • 시작하기 전에

  • 틸트 인터랙션 만드는 방법

  • 틸트 트리거 추가하기

  • 틸트 센서 이해하기

  • 이동 반응 구현하기

  • 세로 틸트 제어 추가하기

  • 결합된 컨트롤 테스트하기

  • 이제 끝! 식은 죽 먹기예요

  • 게임 프로토타이핑 마스터클래스에 참여하세요

  • 고급 프로토타이핑으로 디자인을 한 단계 끌어올리세요

배울 내용

이 튜토리얼을 마치면 다음을 할 수 있게 됩니다:

  • ProtoPie로 모바일 게임 프로토타입에 틸트 제어를 추가할 수 있습니다.

  • 기기 틸트 센서가 어떻게 작동하는지 이해할 수 있습니다.

  • 틸트를 게임 내 동작과 연결해 역동적인 경험을 구현할 수 있습니다.

소요 시간: ≤5분

시작하기 전에

시작하기 전에 스마트폰에 ProtoPie Player 앱이 설치되어 있는지 확인하세요. 이 앱은 구현할 틸트 모션 컨트롤을 테스트하고 검증하는 데 매우 중요합니다.

아래의 시작 Pie 파일을 다운로드한 다음 ProtoPie Studio에서 Shoot 'em up 게임 프로토타입을 열어 보세요.

시작 Pie 파일완료된 Pie 파일

틸트 인터랙션 만드는 방법

1. 틸트 트리거 추가하기

틸트 트리거를 도입하며 시작해 봅시다. 이 트리거는 기기의 기울기와 게임 내 동작을 연결하는 다리 역할을 합니다. 즉, 우리가 작업할 특정 방향 — X, Y, 또는 Z축. — 을 선택할 수 있게 해 줍니다. 그러면 ProtoPie가 이러한 미세한 기울기 움직임을 입력 명령으로 해석합니다.

최신 프로토타이핑 소식을 받아보세요.

2. 틸트 센서 이해하기

진행하기 전에, 기기 안의 틸트 센서가 기술적으로 어떻게 작동하는지 이해하는 것이 중요합니다. 이 센서는 MEMS(미세전자기계 시스템)와 IMU(관성 측정 장치)를 활용해 X, Y, Z축을 따라 기기의 방향을 측정합니다.

X는 기기를 자신에게서 멀어지게 하거나 자신 쪽으로 기울이는 방향입니다.

Y는 손목을 돌릴 때 기기를 좌우로 기울이는 방향입니다.

그리고 Z는 마치 핸들을 돌리듯 왼쪽과 오른쪽으로 회전시키는 방향입니다. 따라서 휴대폰의 평면은 사용자와 평행하게 유지되지만, 마치 핸들을 돌리듯 좌우로 움직이게 됩니다.

  • Y축 방향 선택하기: 이제 선택의 시간입니다! 이 튜토리얼에서는 주로 좌우 기울임 동작을 가능하게 하는 Y축에 집중하겠습니다. 다시 Tilt 트리거로 돌아가 방향을 Y축으로 선택하세요. 그러면 게임에 직관적인 좌우 기울임을 구현할 수 있습니다.


Set tilt direction to Y-Axis in studio


틸트 방향을 Y축으로 설정

3. 이동 반응 구현하기

이제 Move 반응을 추가해 우주선이 움직이도록 합시다. 이를 통해 기기의 기울기 동작과 우주선의 반응 사이에 매끄러운 연결이 만들어집니다.

다음으로 Tilt의 Range 매개변수를 정의해 봅시다. 왼쪽으로 움직이기 위한 -10도 기울기는 우주선을 X 좌표 63픽셀로 이동시키고, 오른쪽으로 가는 10도 기울기는 우주선을 X 좌표 312픽셀로 이동시킵니다.


Implement move responses in ProtoPie Studio


Move 반응 구현하기

💡 프로 팁! ProtoPie가 중간 값을 자동으로 채워 주므로 부드럽고 연속적인 움직임이 가능하다는 점을 기억하세요.

따라서 0도의 중립 기울기에서는 우주선이 63픽셀과 312픽셀의 중간 지점에 위치하게 됩니다.


rocket tilt in studio


ProtoPie가 중간 값을 자동으로 채웁니다

  • **ProtoPie Player로 테스트하기: 테스트 시간입니다! 프로토타입을 실행하면 스마트폰의 방향에 따라 우주선이 어떻게 반응하는지 확인할 수 있습니다. 스마트폰을 들고 ProtoPie Player 앱으로 프로토타입을 직접 체험해 보세요. 중요: **여기서 기억해야 할 점은 기기의 초기 기울기 위치가 기준점 역할을 한다는 것입니다. 따라서 ‘Run’ 버튼을 누르는 순간 휴대폰이 어디에 있든 그것이 중립점으로 간주됩니다.


phone prototype in initial tilt position


기기의 초기 기울기 위치가 '기준점'이 됩니다

4. 세로 틸트 제어 추가하기

이번에는 더 많은 차원을 더해 봅시다! 이번에는 앞뒤 방향의 모션 제어를 추가해 보겠습니다.

이를 위해 또 하나의 Tilt 트리거를 추가하고, 이번에는 방향을 X축으로 선택합니다. 다시 한 번 우주선에 Move 반응을 추가해 봅시다. 앞으로 기울이는 방향, 즉 자신에게서 멀어지는 방향을 -5도로 설정합니다. 그러면 우주선의 Y 위치는 550픽셀이 되어야 합니다.

그리고 기기를 다시 자신 쪽으로 기울이면, 우주선의 하단 위치를 중립 위치로 사용할 수 있습니다. 즉, 0도입니다. 그러면 우주선은 650픽셀 위치에 있게 됩니다.


mobile prototype with vertical tilt control


세로 틸트 제어 추가하기

5. 결합된 컨트롤 테스트하기

진짜 결과를 볼 준비가 되셨나요? ProtoPie Player 앱에서 프로토타입을 다시 실행한 다음, 휴대폰을 왼쪽, 오른쪽, 앞으로, 뒤로 어느 방향으로든 기울여 보세요. 그리고 이 기능들이 어떻게 함께 작동하는지 확인해 보세요.

각 트리거는 우주선의 한 방향에서만 작동하므로 X와 Y를 동시에 적용할 수 있습니다. ProtoPie의 강력한 기본 센서 지원 기능은 우주선이 기기의 기울기를 매끄럽게 변환해 매력적인 게임플레이 움직임으로 구현하도록 해 줍니다.


gif of prototype in tilting motion


프로토타입을 실행하고 모든 틸트 모션을 테스트하세요

이제 끝! 식은 죽 먹기예요

해냈습니다! Shoot 'em Up 게임 프로토타입에 틸트 모션 제어를 성공적으로 적용했습니다. ProtoPie의 기본 센서 지원 기능으로, 역동적이고 반응성이 뛰어난 인터랙션을 더해 다른 것들과 차별화되는 게임을 완성했습니다.

게임 프로토타이핑 마스터클래스에 참여하세요

왜 여기서 멈추나요? ProtoPie School의 무료 ** 모바일 게임 프로토타이핑 마스터클래스에 참여해 게임 제작의 더 많은 가능성을 탐색해 보세요. 2시간도 채 걸리지 않아 게임 개발을 훨씬 덜 복잡하고 어렵게 만드는 데 필요한 모든 것을 배울 수 있습니다.

고급 프로토타이핑으로 디자인을 한 단계 끌어올리세요

이제 마무리할 시간입니다! 틸트 모션 제어의 힘을 받아들였으니, 이제 흥미진진하고 몰입감 있는 게임 경험을 만들어 낼 차례입니다. 다음 게임 센세이션을 만들어 가는 여정에서 더 흥미로운 튜토리얼도 기대해 주세요.

[ProtoPie 다운로드] {뉴스 및 프로토타이핑 팁 받기}