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

 手順3では、ゲームのベース部分の作成を行います。
先ほどの手順でUnityにインポートしたアセットを利用してゲーム画面の背景を設定し、その背景をスクリプトを利用してスクロールさせる処理を実装します。

手順3 −背景の作成−
 4.背景画像を設置する
 5.スクリプトを使って背景画像をスクロールさせる



4.背景画像を設置する


 それでは手順1で作成した Main シーンに、背景用のゲームオブジェクトを設置してゲーム画面の背景を作成します。

 Project 内の Asstes/Sunnyland/arkwork/Environment/ を選択して、フォルダ内にある back ファイルを選択してください。


Asstes/Sunnyland/arkwork/Environment/back



 このファイルをヒエラルキー、あるいは Scene ビューのいずれかにドラッグアンドドロップします。
自動的に back ゲームオブジェクトが1つ作成されます。この画像をゲームの背景画像として利用します。


ヒエラルキー画像

 

SceneビューとGameビューの画像



 作成された back ゲームオブジェクトですが、Gameビューで見ると、画面に見える大きさよりも小さい状態です。
これは Transform コンポーネントの Scale が (1, 1, 1) の大きさでゲームオブジェクトして作成されたためです。

 back ゲームオブジェクトを選択して、インスペクターを確認し、Transform コンポーネントの内容を下記の画像のように設定してください。
Gameビューで見た際に、画面一杯に back の画像が表示されるようにすることが目的です。


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



 大きさを調整後は、SpriteRenderer コンポーネントを確認し、Order in Layer の値を 0 => -1 に変更してください。
 
 2Dゲームでは画像同士が重なって表示された場合、3Dとは異なり、画像の持つ優先順位によって、画面の前面に表示されるか、隠れてしまうかが決定されます。
この Order in Layer の値が優先順位であり、値が低い画像ほど優先順位が低く、後面になります。背景の画像ですので、最も後面に表示をさせたいため、この値を低く設定しています。


 
 これでゲームの背景画像が設置できました。一度、セーブを行いましょう。ctrl + S キーでセーブが行えます。
特に記載がなくても、こまめにセーブを行うことを心がけてください。

 この背景画像を右側から左側に向けてスクロールさせる処理をこの後、行います。
ですが、この back ゲームオブジェクトが左に向かって動いていってしまうと、下記の動画のように、ゲーム画面から背景がなくなってしまいます。


<検証動画>
https://gyazo.com/a1fbbf86fb69e6981e97e0497f642d99

 
 そこでもう1つ、同じ背景の画像を用意します。
 
 ヒエラルキーの back ゲームオブジェクトを選択して右クリックをするとメニューを表示されますので、Duplicate(複製)を実行してください。
back ゲームオブジェクトの複製である back(1)ゲームオブジェクトが新しくヒエラルキーに追加されます。


ヒエラルキー画像



 複製されたゲームオブジェクトは、複製元のゲームオブジェクトと同じ位置にありますので、画面の右側に移動させて2枚の画像が上手く重なる位置に設置をします。
 下記のインスペクター画像の Transform コンポーネントの値を参考にしてください。


Sceneビューの画像(Sceneビューの画面向かって左側が back、右側が back(1)です)



back(1) ゲームオブジェクト インスペクター画像



 これで背景画像の設定は完了です。
ゲームオブジェクトの名前はこのままでもよいですし、BackGround_left、BackGround_Right のように変更しても構いません。
手順書では back ゲームオブジェクトと、back(1)ゲームオブジェクトのままにしていますので、名前を変更した場合には適宜に読み替えてください。


5.スクリプトを使って背景画像をスクロールさせる

設計 −強制スクロールの考え方−


 今回のゲームは画面左横方向へ強制的にスクロールを行うゲームのシステムになっています。
ではこの強制スクロールの処理について、どのような設計を行っていくのかを考えます。

 方法としては、ゲームカメラをゆっくりと移動させる方法もありますが、今回は、先ほど作成した背景画像自体をスクロールさせて
あたかも画面が強制的にスクロールしているように見せる方法を設計して実装します。下記の動画を確認してください。


<実装動画 2つのゲームオブジェクトが同じ速度でスクロールする。Gameビューには違和感なし>
https://gyazo.com/ecbe07d9cbfd043b2f6a405c8d0bc737
 

 このように2枚の背景画像を同じ速度でスクロールさせることにより、実際に移動をしているのは背景画像なのですが
プレイヤーには画面自体が動いているように「見せる」ことが可能です。

 ポイントは画像と画像の切れ目が分からないようにする(違和感のないようにする)ことと、
2つの画像を交互にタイミングよく移動させることで永続的なスクロール(無限スクロール)を実現することです。

 この制御は、新しくスクリプトを1つ作成し、先ほど作成したゲームオブジェクトにアタッチすることで実装します。


BackgroundScroller スクリプトを作成する


 今後もスクリプトを作成していくため、まずは専用のフォルダを1つ作成し、その中にスクリプト・ファイルをまとめて置くようにしましょう。

 Procject 内で右クリックをしてメニューを開き、Create => Folder を選択し、名前を Scripts に変更します。
この Scripts フォルダ内で再度右クリックをしてメニューを開き、Create => C# Script を選択します。名前を BackgroundScroller に変更してください。


 BackgroundScrollerスクリプトでは、3つの変数を宣言フィールドで宣言します。
いずれも public 修飾子であるため、スクリプトを作成後にインスペクターから設定を行う必要があります。

 scrollSpeed 変数はゲームオブジェクトを右側から左側へスクロールさせる際の速度を設定する値です。この値が早ければ画像も早く動きますので
強制スクロールの速度が速く見えるようになります。

 stopPosition 変数と restartPosition 変数はセットで利用する設定値です。
 stopPosition 変数は、ゲームオブジェクトが画面の左側へとスクロールしていった際に、どの地点をスクロールの停止位置とするかを設定する値です。
stopPosition 変数で設定した地点までスクロールしたゲームオブジェクトは、restartPosition 変数の位置へと移動し、そこから再度スクロールを継続します。

 このやりとりによって2つの画像が途切れることなくループを繰り返すように設計しています。


BackgroundScroller.cs

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



back ゲームオブジェクトと back(1) ゲームオブジェクトに BackgroundScroller スクリプトをアタッチして設定を行う


 作成した BackgroundScroller スクリプトを、back ゲームオブジェクトと back(1) ゲームオブジェクトそれぞれにドラッグアンドドロップしてアタッチしてください。

 最初にヒエラルキーで back ゲームオブジェクトを選択し、インスペクターを確認します。
BackgroundScroller スクリプト内に public 修飾子で宣言している変数の情報が表示されます。

 3つの情報の設定が必要になりますので、下記の画像のように設定をしてください。変数の内容については、前述のスクリプトの説明を再度確認しておいてください。


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



 続いて、back(1) ゲームオブジェクトの方も設定を行います。こちらの BackgroundScroller スクリプトも上記の画像と同じように設定をしてください。


最終的な back ゲームオブジェクトのインスペクター画像



最終的な back(1) ゲームオブジェクトのインスペクター画像



ゲームを実行して動作を確認する


 設定が終了しましたので、一度セーブを行いましょう。ctrl + S キーでセーブができます。

 ゲームを実行すると2つの画像のゲームオブジェクトが同じ速度で画面の右側から左側にスクロールしていきます。
Sceneビューと合わせて、Gameビューでも確認をしてください。違和感なくスクロールしているはずです。


<検証動画 2つのゲームオブジェクトが同じ速度でスクロールする。Gameビューには違和感なし>
https://gyazo.com/ecbe07d9cbfd043b2f6a405c8d0bc737


 back ゲームオブジェクトが左側へ移動していく中で、スクロールを停止する地点(stopPosition)までスクロールを完了すると、
back ゲームオブジェクトは再スタートの位置(restartPosition)に移動し、back(1)ゲームオブジェクトの後ろにピッタリとくっつく形になり、スクロールを行います。
そのため、ゲームオブジェクトの位置は逆になりますが、画像が途切れることなく、上手くループして1つの背景画像としてスクロールを継続する形になります。


<検証動画 back ゲームオブジェクトが左端から右側(再スタート)の位置に移動する。Gameビューには違和感なし>
https://gyazo.com/5ec3fa27bc755d0babae9cfa6f42d7e6


 そして、back(1)ゲームオブジェクトもスクロールを停止する地点までスクロールを完了すると、再スタートの位置に移動し、
ゲームをスタートした際と同じように back ゲームオブジェクトの後ろにピッタリとくっついてスクロールを行います。


<検証動画 ゲームオブジェクトの位置が元の位置に戻り、無限ループを繰り返す。Gameビューには違和感なし>
https://gyazo.com/4fb207f1184d7fa843284b1fdb81d750


 この制御によって、画面を強制的にスクロールさせているように見せるとともに、画像の無限スクロールを作り出すことにも成功しています。

 もしもゲームオブジェクトが移動する際に違和感がある場合には、BackgroundScroller スクリプトの stopPosition 変数と restartPosition 変数の値を調整してください。


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

 次は 手順4 −キャラの作成− です。