UnityでJoystick(ジョイスティック)を追加する方法【初心者向け】

Unityで【Joystick(ジョイスティック)】を追加する方法を初心者向けに解説した記事です。Unityで開発したスマートフォン用ゲームの操作性がアップします。今回はキャラクターを追加してから操作ができるまでの流れを紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

ゲームエンジンのUnityJoystick(ジョイスティック)を追加する方法を初心者向けに解説した記事です。

ジョイスティックを追加すれば、Unityで開発したスマートフォン用ゲームにコントローラーを追加でき、操作性がアップします。

 

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

 

20163020-2

 

今回は、ゲーム画面内にバーチャルジョイスティックを実装してみようか。

 

20160620

 

キャラクターの操作とかに使うやつですよね。

 

20163020-2

 

そうだね。なのでジョイスティックの前にまずは画面内に操作するキャラクターを配置するところから始めてみよう。

 

20160620

 

はい!

 

事前準備

まず事前準備としてJoyStickで動かすキャラクターを用意する必要があります。今回はStandardAssetsから利用しましょう。

新規プロジェクトを作成する時にCharacter Controller.unityPackageにチェックを入れてCreate Projectボタンをクリックします。

UnityScreenSnapz001

 

ここでいったんシーンを保存しておきます。

この段階でシーンを保存するのは、途中で操作を一時中断した時に、後から再開するためにはシーンが必要だからです。

UnityScreenSnapz002

 

さて、早速キャラクターを追加といきたいところですが、このシーンにはオブジェクトがカメラしかありませんので、キャラクターを配置してプレイするとキャラクターが落下してしまいます。

 

そこで地面となるべき平面を先に用意します。

[GameOnjcet]→[Create Other]→[Plane]で平面を作成してください。

UnityScreenSnapz005

 

ここまで準備ができたら、キャラクターを配置します。

Projectビューで[Standard Assets]→[Character Controllers」と進み、3rd Person…となっているオブジェクトをシーンにドラッグ&ドロップして、大きさ・位置を調整してください。

 

InspectorでThird Person Controller(Script)のセクションのIdle Animation〜Jump Pose AnimationがMissingになっています。

UnityScreenSnapz007

 

右横の丸をクリックして、表示されるダイアログから該当するAnimation Clipを設定していきます。

UnityScreenSnapz008

設定が完了したら事前準備は完了です。この状態で実行して、キャラクターがキーボードのカーソルキーで動くことを確認してください。

 

20163020-2

 

平面とキャラクターの配置はできたかな?

 

20160620

 

準備完了です!

 

20163020-2

 

それではジョイスティックの実装に入ろうか。まずはパッケージをインポートする必要があるよ。

 

 

JoyStickの追加

シーンにJoyStickを追加するには、Packageを追加しなくてはなりません。

[Assets]→[Import Package]→[Standard Assets(Mobile)]を選択してください。

ダイアログが表示されますので、Importをクリックします。

UnityScreenSnapz011

 

次にJoyStickを割り当てる空のオブジェクトを作成します。

[GameObject]→[Create Empty]で空のオブジェクトを作成して、HierarchyビューでJoyStickとリネームします。

UnityScreenSnapz012

 

InspectorビューでPosition・Rotation・Scaleを全て0に設定します。

この状態ではまだ空のオブジェクトのままですので、テクスチャを設定します。

 

InspectorでAdd Componentをクリックして表示されるダイアログからGUITextureを選択します。

UnityScreenSnapz014

 

TextureがNoneになていますので、右横の丸をクリックして表示されるダイアログからJoystickThumbnailを選択します。

UnityScreenSnapz016-289x600

 

この状態で実行すると、画面左下にJoyStickが表示されました。

ジョイスティック

 

 

[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中

Scriptの修正

JoyStickが追加されたと言っても、ただオブジェクトとして追加されただけですので、Scriptを修正してJoyStickを動かす必要があります。

 

まずキャラクターのScriptを修正します。

Projectビューで[Standard Assets]→[Character Controller]→[Sources]→[Scripts]と開き、ThirdPersonController.jsをダブルクリックして修正してください。

 

最新のUnityを使っている場合は、91行目に

private var isControllable = true;

という行がありますので、その直下で変数宣言をします。

var inputX;
var inputY;

 

次に、144行目から

var v = Input.GetAxisRaw( “Vertical” );
var h = Input.GetAxisRaw( “Horizontal” );

の2行がありますので、先頭に//を付けてコメントアウトした上で、その下に

var v:float = inputX;
var h:float = inputY

として、先の変数の値を移動量とします。

ここにJoyStickの傾きの値を入れればキャラクターがJoyStickで操作できるようになります。

 

Projectビューに戻り[Standard Assets(mobile)]→[Scripts]と開きjoystick.jsをダブルクリックで開きます。

 

最終行の}の上に以下の行を追加します。

var    controller = GameObject.FindObjectOfType( ThirdPersonController ) as ThirdPersonController;
controller.inputX = position.x;
controller.inputY = position.y;

これでcontrollerにはキャラクターオブジェクトが紐付けられました。

キャラクターのScriptに追加した変数inputXとinputYにJoyStickの位置を設定します。

 

これで実行するとキャラクターがJoyStickで操作できるようになりました。

ぜひ自分でも試してみてください!

 

20163020-2

 

ジョイスティックはただ配置しただけでは操作できないので、上の方法でキャラクターと関連付けよう。

 

20160620

 

スクリプトも変更する必要があるので、慎重にやらないとですね。

 

20163020-2

 

今回使ったStandard Assetsはプロジェクト作成時の設定によってはインポートされていない場合があるけれど、そのときは「Assets」→「Import Package」から利用できるからね。

 

20160620

 

分かりました。ありがとうございます!

 

Unityをさらに使いこなしたい場合は、プロから聞いたUnityの入門におすすめの書籍も合わせてご覧ください。

[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。