徳島ゲーム開発ごっこ 技術ブログ

ゲームを作るために役に立ったり立たなかったりする技術を学んでいきます!

【Unity】CrossPlatformInputを実際に組み込んでみる

 こんにちは、うら干物です。

 今回は、以前お話ししたUnityのStandardAssetのCrossPlatformInputを実際にゲームに組み込んでみます。
 ちょっとゲームに合わせてカスタマイズしていきますよ。
f:id:urahimono:20160819075109g:plain


この記事にはUnity5.4.0f3を使用しています。

組み込む題材

CrossPlatformInputを組み込むゲームは以前ゲームジャムで作った作品です。

f:id:urahimono:20160819074621p:plain

WebGL用に作ったため、操作にキーボードとマウスをふんだんに使用しています。

  • 移動操作はキーボードの方向キー
  • ジャンプはマウスの左クリック
  • 攻撃は画面上のマウスポインタのある場所にマウスの右クリック

f:id:urahimono:20160819074636g:plain

 この操作方法を何とかしてモバイル用にしていきましょう。

MobileSingleStickControlを使う

urahimono.hateblo.jp

 もともとこのゲームはファミコンのコントローラーの操作をイメージしていますので、MobileSingleStickControlが一番イメージに合いそうです。
 早速組み込んでみましょう。

f:id:urahimono:20160819074729p:plain

 移動用スティックとジャンプボタンはありますが、攻撃用のボタンが足りません。
 攻撃用のボタンの追加と、ちょっと移動用のスティックが小さいので大きくしましょう。

f:id:urahimono:20160819074742p:plain f:id:urahimono:20160819074749p:plain

 ボタンの追加は元々あるボタンを参考に、RectTransformAnchorsの調整とButtonHandlerNameを攻撃用のボタン用の名前にすればOKです。
 スティックはWidthHeightの数値を大きくしただけです。
 実際に実機で確認してみましょう。

f:id:urahimono:20160819074802p:plain

 エディタ上ではいい感じの大きさでしたが、実機だと少し小さいですね。
 これは大きさを数値で指定したため、エディタ上の解像度と実機での解像度の違いから、画面の割合的な大きさが違ってきているからです。
 ボタンと同様にAnchorsによるサイズ調整に変更しましょう。

 とはいえ、正直ボタンが押し辛いです。
 ボタンのサイズが小さいため、ボタンを正確にタッチできないことがあります。
 確認している実機がiPhoneSEなので、アクションゲームをするには少々小さいのという点もあるのですが。
 ボタンを大きくするのもありですが、少しボタンを押された扱いにする条件をゆるくしてみましょう。

 ボタンのEventTriggerPointerEnterPointerExitを追加してみましょう。
 そうすることで、タッチ箇所がボタン外からボタン内に入った時もボタンを押した扱いになります。

f:id:urahimono:20160819074822p:plain f:id:urahimono:20160819074828g:plain

CarTiltControlsを組み合わせる

urahimono.hateblo.jp

 移動スティックも改良を加えたいです。
 スティックも十字アイコンをタッチしてからドラッグすることで移動値を取得できるのですが、十字アイコンをタッチし損ねることが多いです。
 確認している実機がiPhoneSEなので、アクションゲームをするには少々小さいのという点もあるのですが。
 これならばスティックよりもタッチパッドの方が操作性は良さそうです。
 CarTiltControlsにあるタッチパッドの機能だけをもってきて組み込んでみましょう。

 タッチパッドの中心から左にあれば左移動、右にあれば右移動するようにすれば操作性が向上できるかもしれません。
 操作はタッチパッドにしたいのですが、十字アイコンは残しておきたいです。
 そのため、TouchPadコンポーネントを改良する必要がありそうです。
 TouchPad.csをそのまま改良してもいいのですが、なんとなくStandardAsset内のコードを変更するのは気が引けるため、TouchPadCustom.csとして別コンポーネントとしてみましょう。

 改良後こうなりました。

f:id:urahimono:20160819074911g:plain

 最初に十字アイコンをタッチしなくても、タッチパッド内にタッチすれば移動制御が行えます。
 ただタッチパッドアイコン外にまで十字アイコンが移動してしまうので、移動位置を制御する必要がありそうです。
 タッチパッドのRectTransformRectからサイズを取得し、その範囲内のみ十字アイコンが移動するようにしてみましょう。
 完成形がこちらです。

【Unity】CrossPlatformInputを実際に組み込んでみる

f:id:urahimono:20160819075109g:plain

 いい感じではないでしょうか。
 このゲームがモバイル向けかどうかはまた別のお話しですけどね。

urahimono.hateblo.jp

urahimono.hateblo.jp

urahimono.hateblo.jp

urahimono.hateblo.jp

urahimono.hateblo.jp

urahimono.hateblo.jp