こんにちは、うら干物です。
今回は、以前お話ししたUnityのStandardAssetのCrossPlatformInputを実際にゲームに組み込んでみます。
ちょっとゲームに合わせてカスタマイズしていきますよ。
この記事にはUnity5.4.0f3を使用しています。
組み込む題材
CrossPlatformInputを組み込むゲームは以前ゲームジャムで作った作品です。
WebGL用に作ったため、操作にキーボードとマウスをふんだんに使用しています。
- 移動操作はキーボードの方向キー
- ジャンプはマウスの左クリック
- 攻撃は画面上のマウスポインタのある場所にマウスの右クリック
この操作方法を何とかしてモバイル用にしていきましょう。
MobileSingleStickControlを使う
もともとこのゲームはファミコンのコントローラーの操作をイメージしていますので、MobileSingleStickControlが一番イメージに合いそうです。
早速組み込んでみましょう。
移動用スティックとジャンプボタンはありますが、攻撃用のボタンが足りません。
攻撃用のボタンの追加と、ちょっと移動用のスティックが小さいので大きくしましょう。
ボタンの追加は元々あるボタンを参考に、RectTransformのAnchorsの調整とButtonHandlerのNameを攻撃用のボタン用の名前にすればOKです。
スティックはWidthとHeightの数値を大きくしただけです。
実際に実機で確認してみましょう。
エディタ上ではいい感じの大きさでしたが、実機だと少し小さいですね。
これは大きさを数値で指定したため、エディタ上の解像度と実機での解像度の違いから、画面の割合的な大きさが違ってきているからです。
ボタンと同様にAnchorsによるサイズ調整に変更しましょう。
とはいえ、正直ボタンが押し辛いです。
ボタンのサイズが小さいため、ボタンを正確にタッチできないことがあります。
確認している実機がiPhoneSEなので、アクションゲームをするには少々小さいのという点もあるのですが。
ボタンを大きくするのもありですが、少しボタンを押された扱いにする条件をゆるくしてみましょう。
ボタンのEventTriggerにPointerEnterとPointerExitを追加してみましょう。
そうすることで、タッチ箇所がボタン外からボタン内に入った時もボタンを押した扱いになります。
CarTiltControlsを組み合わせる
移動スティックも改良を加えたいです。
スティックも十字アイコンをタッチしてからドラッグすることで移動値を取得できるのですが、十字アイコンをタッチし損ねることが多いです。
確認している実機がiPhoneSEなので、アクションゲームをするには少々小さいのという点もあるのですが。
これならばスティックよりもタッチパッドの方が操作性は良さそうです。
CarTiltControlsにあるタッチパッドの機能だけをもってきて組み込んでみましょう。
タッチパッドの中心から左にあれば左移動、右にあれば右移動するようにすれば操作性が向上できるかもしれません。
操作はタッチパッドにしたいのですが、十字アイコンは残しておきたいです。
そのため、TouchPadコンポーネントを改良する必要がありそうです。
TouchPad.csをそのまま改良してもいいのですが、なんとなくStandardAsset内のコードを変更するのは気が引けるため、TouchPadCustom.csとして別コンポーネントとしてみましょう。
改良後こうなりました。
最初に十字アイコンをタッチしなくても、タッチパッド内にタッチすれば移動制御が行えます。
ただタッチパッドアイコン外にまで十字アイコンが移動してしまうので、移動位置を制御する必要がありそうです。
タッチパッドのRectTransformのRectからサイズを取得し、その範囲内のみ十字アイコンが移動するようにしてみましょう。
完成形がこちらです。
【Unity】CrossPlatformInputを実際に組み込んでみる
いい感じではないでしょうか。
このゲームがモバイル向けかどうかはまた別のお話しですけどね。
