Tutorials

7

分で読める

How to Use Tilt Sensors in ProtoPie

Game prototyping can be made easy with ProtoPie. Learn how to add cool tilt motion control to your mobile games.

Bern Espino、 Customer Learning Manager

エキサイティングなひねりを加えて、プロトタイプを強化しましょう—チルトモーションコントロールです! ゲーム愛好家で、ゲームUXデザインの限界を押し広げたいなら、ここがぴったりの場所です。

このチュートリアルでは、デバイスベースの傾きをShoot 'em Upのゲームプロトタイプにシームレスに統合する方法をご案内します。結果は? 従来の制約を打ち破る、ハイパーカジュアルゲームジャンルで没入感のあるゲーム体験です。

ProtoPieが際立っているのは、優れたネイティブセンサーサポート機能です。これにより、さまざまな創造的な可能性が開けます。さあ、実践手順にすぐ飛び込み、この動的な追加機能があなたのゲームプロジェクトを真に革新する様子を見ていきましょう。

動画

概要

  • 学べること

  • 始める前に

  • チルトインタラクションの作成方法

  • チルトトリガーを追加する

  • チルトセンサーを理解する

  • Move応答を実装する

  • 縦方向のチルトコントロールを追加する

  • 組み合わせたコントロールをテストする

  • それだけです! パイのように簡単

  • ゲームプロトタイピングマスタークラスに参加する

  • 高度なプロトタイピングでデザインを高める

学べること

このチュートリアルが終わるころには、次のことができるようになります:

  • ProtoPieを使って、モバイルゲームのプロトタイプにチルトコントロールを追加する。

  • デバイスのチルトセンサーがどのように動作するかを理解する。

  • ダイナミックな体験のために、傾きをゲーム内アクションに連携させる。

完了時間: 5分以下

始める前に

始める前に、スマートフォンにProtoPie Playerアプリがインストールされていることを確認してください。このアプリは、これから実装するチルトモーションコントロールのテストと検証に欠かせません。

下の開始用Pieファイルをダウンロードし、ProtoPie StudioでShoot 'em upのゲームプロトタイプを開きましょう。

開始用Pieファイル完成版Pieファイル

チルトインタラクションの作成方法

1. チルトトリガーを追加する

まずはTiltトリガーを導入しましょう。これは、デバイスの傾きとゲーム内のアクションをつなぐ橋渡し役です。本質的には、扱いたい特定の方向—X、Y、またはZ軸。—を選べるようにします。ProtoPieは、その微妙な傾きの動きを入力コマンドとして解釈します。

最新のプロトタイピングニュースに登録する。

2. チルトセンサーを理解する

次に進む前に、デバイスのチルトセンサーが技術的にどのように機能するかを理解することが重要です。これらのセンサーは、Microelectromechanical Systems (MEMS) と Inertial Measurement Units (IMUs) を利用して、X、Y、Z軸に沿ったデバイスの向きを測定します。

Xは、手前から遠ざける、または手前に傾ける方向です。

Yは、手首を回すときに左右に傾ける方向です。

そしてZは、ハンドルを回すように左右に回転させる方向です。つまり、スマホの平面は自分に対して平行のままですが、ハンドルを回すように左右に動かします。

  • Y軸方向を選択する: 選択の時間です! このチュートリアルでは、主に横方向の傾きを可能にするY軸に焦点を当てます。Tiltトリガーに戻って、方向としてY軸を選択してください。これにより、直感的な左右の傾きをゲームに取り入れられます。


Set tilt direction to Y-Axis in studio


チルト方向をY軸に設定

3. Move応答を実装する

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アプリで再びプロトタイプを実行し、スマホをあらゆる方向—左、右、前、後ろに傾けてみましょう。そして、それらがどのように連動するかを確認してください。

それぞれのトリガーが宇宙船の1方向にのみ作用するため、XとYを同時に動かすことができます。ProtoPieの強力なネイティブセンサーサポートにより、宇宙船はデバイスの傾きを滑らかに魅力的なゲームプレイの動きへと変換できます。


gif of prototype in tilting motion


プロトタイプを実行して、すべての傾きの動きをテストしましょう

それだけです! パイのように簡単

やりました! Shoot 'em Upのゲームプロトタイプにチルトモーションコントロールを見事に組み込みました。ProtoPieのネイティブセンサーサポート機能により、動的で反応のよいインタラクションを備えた、他とは一線を画すゲームへと強化されました。

ゲームプロトタイピングマスタークラスに参加する

ここで終わるのはもったいない! ProtoPie Schoolの無料 ** モバイルゲームプロトタイピングのマスタークラス に参加して、ProtoPieでもっと多くの可能性を探りましょう。わずか2時間弱で、ゲーム開発をずっと複雑で面倒なものではなくするために必要なことをすべて学べます。

高度なプロトタイピングでデザインを高める

これで締めくくりです! チルトモーションコントロールの力を取り入れた今、あとはあなたが胸躍る没入感のあるゲーム体験を作り出す番です。次のゲームのセンセーションを生み出す旅路で、さらにエキサイティングなチュートリアルにご期待ください。

[ProtoPieをダウンロード] {ニュースとプロトタイピングのヒントを受け取る}