i-school - 強制横スクロールゲーム 手順9
 以下の内容で順番に実装を進めていきます。

 手順9〜10では、ゲームの特徴の1つであるバルーンの作成と制御について実装を行います。
この手順では、バルーン用のゲームオブジェクトの作成と、バルーンの数によってジャンプの可否を制御する処理を追加します。


手順9 −バルーンの作成と制御−
12.キャラにバルーンを設置する
13.スクリプトを使って、キャラのジャンプ可否をバルーンの数によって制御する



新しく学習する内容


・Sprite Editor機能


12.キャラにバルーンを設置する

設計


 キャラの背中にバルーンの画像を持つゲームオブジェクトを設置して、バルーンを利用して空中を浮遊しているように演出を行います。

 バルーンの設置が終了したら、キャラの行動とバルーンとを連動させます。

 現在はバルーンのある・なしにかかわらず、キャラはジャンプをして空中を浮遊できてしまいますので
PlayerController スクリプトを修正して、バルーンがないときにはジャンプが行えないように、実際の画面の状況とキャラの動作とを連動させていきます。


Unityにバルーンの画像をインポートする


 インターネット上で無料のイラスト素材を探して、バルーンの画像をUnityへインポートしてください。(アセットストアには風船の画像ファイルはありません。)

 Google であれば「風船 イラスト 無料」のようなキーワードで検索をすると見つかります。
画像のファイルの種類は PNG ファイルにしてください。PNG ファイルは、画像の背景が透過されます
そのため、画像ファイルをダウンロードする際には、ファイルの拡張子にも気を配ってください



 ダウンロードした画像を Unity へインポートする際には、事前に Unity内に Sprites といった名称のフォルダを作成しておいて、その中にインポートするようにしてください。
同じ種類のファイルを1つのフォルダに分けて入れておくことで、画像が増えた際に管理しやすくなります。

 サイトからダウンロードした画像が圧縮されている場合には解凍を行ってください。解凍していないファイルはインポートすることが出来ません
もしも、画像ファイルがUnityへドラッグアンドドロップ出来ない場合には、ファイルが圧縮されたままの可能性が高いです。


バルーンの画像をSceneビューへ設置する


 インポートしたバルーンの画像ですが、1枚の画像内に複数のバルーンの画像がまとまっている場合には、Sprite Editor 機能を利用して、ファイルを分割します。
そうでない場合にはこの手順は不要です。
 

 インポートしたバルーンの画像をSpritesフォルダ内で選択します。
インスペクターに画像の情報が表示されますので、画像のような設定して、右下のApplyボタンを押します。
ここでは Sprite Mode を Multiple にしていることで分割を可能しています。


画像のインスペクター画像


 
 その後、インスペクターにある Sprite Editor ボタンを押してください。
ウインドウでSprite Editorが開きます。このウインドウの大きさは可変可能ですので、見やすい大きさに適宜変更して使用してください。


Sprite Editor画像



 ウインドウ内の左上にあるSliceボタンを押すことで、画像の分割ができます。適宜な大きさやサイズで分割してみてください。
升目がわかっているのであれば、Grid By CellCount を指定することで行の画像数と列の画像数を指定して分割できます(3×3、などの場合)

 Sliceをすると画像に切れ目が入りますので、各画像が適切な大きさになっているかを確認します。その後、修正する場合にはSliceを押せば何回でも修正できます。
問題なくSliceが終了しましたら、SpriteEditorウインドウの右上にある Apply ボタンを押してください。これで画像の分割が確定されます。
確定後でもSliceは可能です。変更した場合には最後に必ず Apply して分割情報を反映してください。

 分割に成功すると、1つのファイルであったバルーンの画像の右横に矢印アイコンが表示されます。


分割されたファイル



 このファイルをクリックすると、分割された各バルーンの画像が表示されます。


 ファイルの通し番号が画像のように順番になっていない場合には、SpriteEditor内で分割している画像を選択することで、ファイル名の変更ができます。
分割画像を選択後、右下にある、下記の画像のような小さいインスペクターの部分で変更できます。


バルーンの画像をSceneビューへ設置する


 Sprites フォルダにあるバルーンの画像を1つ選択して、ヒエラルキー内、あるいはSceneビュー内へドラッグアンドドロップしてください。
ファイル名の同名のゲームオブジェクトが作成されます。


<手順動画>
https://gyazo.com/cf123a2f935fc744c39711d518386071


ヒエラルキー画像



バルーンのゲームオブジェクトをキャラのゲームオブジェクトの子オブジェクトにする


 ヒエラルキーに作成されたバルーンのゲームオブジェクトを選択し、ドラッグをして、キャラのゲームオブジェクトの上でドロップしてください。
これでバルーンとキャラとが親子関係になります。

 親子関係になっているゲームオブジェクトの場合、子のゲームオブジェクトは親のゲームオブジェクトと一緒に追従して動くようになります。
この手順により、キャラを移動させると一緒にバルーンも同じ方向に動くようになります。
 
 
<手順動画>
https://gyazo.com/2afc5d214242bea80d407aa358f79296


ヒエラルキー画像



バルーンのオブジェクトの設定を行う

1.名前を変更する

 ヒエラルキーからバルーンのゲームオブジェクトを選択します。まずは名前を Ballon に変更します。


2.位置と大きさの調整、および描画の優先順位を設定する

 続いて、位置や大きさを調整し、描画の優先を設定します。

 子となったゲームオブジェクトの位置座標は従来の座標情報ではなく、親のゲームオブジェクトを (0, 0)としてみた場合の位置情報に切り替わっています。
このような位置関係のことを相対座標といいます。また、親のゲームオブジェクトのように、ゲーム画面の中央を (0, 0)とした通常の位置情報は絶対座標といいます。

 まずは、Ballon ゲームオブジェクトのインスペクターを表示して、Transform コンポーネントを確認します。
Position の情報をすべて (0, 0, 0) にしてください。Ballon ゲームオブジェクトが Yuko_Player ゲームオブジェクトの位置に移動します。
これは先ほども書いたように、親の位置が Ballon ゲームオブジェクトの座標の基準値になっているためです。

 また、Ballon ゲームオブジェクトと Yuko_Player ゲームオブジェクトとが重なった場合に、Ballon ゲームオブジェクトの方が後面に表示されることを確認してください。


<手順動画 Ballon ゲームオブジェクトの Position を (0, 0, 0) にする。Ballonの方が後面に表示される>
https://gyazo.com/287fd94895e9c2437ab8bcf112cd351f


 Ballon ゲームオブジェクトの位置が、Yuko_Player ゲームオブジェクトの背中の位置になるように、Sceneビューで調整しましょう。
一緒に大きさも調整しましょう。こちらもSceneビュー、あるいは Transform コンポーネントの Scale の値を調整してください。
Ballon は2つ並びますので、そのことを前提として調整してください。下記のインスペクター画像を参考にしてもいいです。




Sceneビュー(Gameビューでも確認しましょう)



Ballon ゲームオブジェクト インスペクター画像



 調整が終了したら、SpriteRenderer コンポーネントの Order In Layer の値を 0 から 3 に変更します。
キャラとバルーンは、他のゲームオブジェクトよりも前面に表示させたいため、値を大きく設定して、他のゲームオブジェクトと重なっても隠れないように設定します。


Ballon ゲームオブジェクト SpriteRenderer コンポーネントのインスペクター画像



 以上で設定は完了です。ゲームを実行して、各アニメーションでどの位置にバルーンが来るかを確認して、違和感のないように調整を行います。


<実行動画 各アニメーションでバルーンの位置や大きさを確認する>
https://gyazo.com/f16ec8ff956c969e008302730746aba0


3.CapsuleCollider2D コンポーネントを追加する

 Ballon ゲームオブジェクトのインスペクターの一番下にある Add Compnent ボタンを押して、CapsuleCollider2D コンポーネントを追加します。


<手順動画 Add Compnent ボタンを押して、CapsuleCollider2D コンポーネントを追加>
https://gyazo.com/5237e3f190fc6dbbb7eeb6f62fb44b1d


 Edit Collider のボタンを押して、Sceneビュー内でコライダーの大きさを調整し、バルーンの大きさになるようにしてください。


<手順動画 Edit Collider ボタンを押して Sceneビュー内でコライダーの大きさを調整>
https://gyazo.com/e76960c56fc3e1f557ebb70370968aa9


Ballon ゲームオブジェクト インスペクター画像



バルーンのゲームオブジェクトを複製する


 Ballon ゲームオブジェクトをヒエラルキーで選択し、右クリックをしてメニューを表示して、Duplicate を選択します。
ヒエラルキーに Ballon(1) ゲームオブジェクトが追加されます。


<手順動画 複製>
https://gyazo.com/1bd497e2f6d605181b558853d5b4025d


 Ballon ゲームオブジェクトと同じ位置にありますので、位置を調整して2つ並べてください。まるきり同じ位置でなければ重なっても問題ありません。
また、回転情報を操作して、少し角度を付けてもよいでしょう。Rotation の Z 軸の情報を変更すると角度が変わります。自由に設計しましょう。


SceneビューとGameビュー画像



インスペクター画像



13.スクリプトを使って、キャラのジャンプ可否をバルーンの数によって制御する

設計


 キャラの背中にバルーンが設置されましたので、これで空中を浮遊していても違和感がなくなりました。

 今後、このバルーンは障害物などに接触した場合に、数が減る可能性があります。
そのとき、バルーンの数が 0 個であるにもかかわらず空中を浮遊してしまってはゲームにならなくなってしまいます。

 先のことを考えて、ここでは、バルーンの数が1個以上残っていないとジャンプができないように制御を行います。
制御はPlayerControllerスクリプトを修正して、バルーンの数を把握するための変数を用意し、その変数の値を判断して、ジャンプが出来るか否かを判断するようにします。

 バルーンの数が 0 個の場合には、ジャンプボタンを押してもジャンプしないようにします。
 バルーンの数が 1 個以上ある場合には、ジャンプボタンを押すことでジャンプと空中浮遊を出来るようにします。


PlayerController スクリプトを修正して、バルーンの数が 0 の場合にはジャンプや空中浮遊できないようにする処理を追加する


 宣言フィールドに GameObject型の配列を1つ作成します。ここには、ヒエラルキーにあるGameObjectや、インスタンスしたGameObjectを登録できます。
今回は public 修飾子で宣言し、インスペクターから、ヒエラルキーにある Ballon ゲームオブジェクトをアサインして登録できるようにします。

 Update メソッドに修正を行い、この Ballon の数がいまいくつであるのかを確認する if 文を追加して、処理の制御を行います。
この if 文の条件は「バルーンの数が1個以上あるか」という内容になっているため、この条件を満たした場合だけ、ジャンプが可能になるように制御しています、

 もしも条件を満たしていない場合には、それが確認できるように else 文を用意して、Console にジャンプが出来ない状態であることを表示します。


PlayerController.cs

 <= クリックすると開きます。



Yuko_Player ゲームオブジェクトの PlayerController を設定する

1.Ballons 変数の Size を 0 のままでゲームを実行してみる

 スクリプトを修正してセーブしたら、Yuko_Player ゲームオブジェクトを選択して、インスペクターの PlayerController を確認します。
Ballons 変数が追加されて、次の画像のような状態になっています。


Yuko_Player ゲームオブジェクト PlayerController インスペクター画像 Ballonsを開く前の状態



 Ballons 変数の名前の左側にある矢印を左クリックしてください。配列の内容を設定するための部分が現れます。
Size が配列の数です。初期値は 0 であり、これはつまり、この配列の要素数の最大値(Length)が 0 であることを示しています。


Yuko_Player ゲームオブジェクト PlayerController インスペクター画像 Size 0 の状態



 まずはこの状態のまま、ゲームを実行してみましょう。

 先ほど、Updateメソッドの中に処理を追加し、Ballons の要素数の値(Length)が 1 以上なければジャンプを出来ないように制御を行いました。
現在の Ballons 変数の Size は 0 ですから、要素数は 0 です。ジャンプボタンを押してみてください。ジャンプが出来なくなっていれば処理は成功です。
その場合、else 文の条件を満たすため、Debug.Log がConsoleに表示されます。


<実行動画 if文による制御により、ジャンプができない = 制御されている>
https://gyazo.com/79652b2d8820a28b0aff239a28eb7751


2.Ballons 変数の Size を 2 に変更して、Ballon ゲームオブジェクトをアサインしてからゲームを実行してみる

 ゲームを停止して、次は Ballons に実際にゲーム内の Ballon ゲームオブジェクトをアサインして登録しましょう。

 Ballons の Size を 2 に変更してください。Size の下に、Element という情報が2つ追加されます。これが、配列の要素(中身)となる値をアサインする場所です。
2つとも None となっていますので、今は配列の宣言をしただけで、中身は空(Null)の状態です。


Yuko_Player ゲームオブジェクト PlayerController インスペクター画像 Size 2 の状態(値はまだないので、このまま実行すると Null エラーになる)



 Ballons 変数は GameObject型の配列ですので、ヒエラルキーにあるゲームオブジェクトであればどれでもアサイン可能ですが、ここに登録するのは Ballon ゲームオブジェクトです。
ヒエラルキーにある2つの Ballon ゲームオブジェクトを順番にドラッグアンドドロップしてアサインしてください。


<手順動画 ballons 配列に GameObject型 の Ballon ゲームオブジェクトをドラッグアンドドロップしてアサインする>
https://gyazo.com/7a0b2879e14239eceaf065880279aa3c


Yuko_Player ゲームオブジェクト PlayerController アサイン後のインスペクター画像


 
 アサインが完了して設定が終了しましたので、もう一度、ゲームを実行してください。
現在の Ballons 変数の Size は 2 ですので、アサインが完了していれば、要素数の最大値(Length)も 2 です。
Updateメソッドの条件を満たすため、今度はジャンプや空中浮遊が行えるようになります。


<実行動画>
https://gyazo.com/5d3abf11c8f8d2c126f451198ca91e28


 無事にバルーンの数による、ジャンプ可否の制御が行えるようになりました。

 このように if 文の条件式には、様々な条件を用意することによって、ゲームの処理をロジック化して制御していくことが可能になります。


 以上でこの手順は終了です。

 次は 手順10 −バルーンの生成− です。