第06回 背景を作る

hiroki-o edited this page Oct 15, 2015 · 2 revisions
Clone this wiki locally

前章ではレイヤーを使っての当たり判定の制御やアニメーションイベントについて学びました。 この章では、ゲーム画面の背景を作成していきます。

背景を作成するわけですが、ここで今回のチュートリアルでやりたいことを整理します。

 1:  背景は全部で3枚の画像で出来ている
 2:  背景をスクロールさせる(動く)
 3:  それぞれの画像のスクロールするスピードは異なる(多重スクロールで奥行きを表現)

6.1 3枚の画像を表示させる

今回は背景をスクロールさせるためにQuadにテクスチャを貼り付けます。 まずは、空のGameObjectを作成し、名前をBackgroundsとします。

6.2 Frontを作る

次にGameObject -> 3D Object -> QuadからQuadを作成します。そして、名前をFrontとしてBackgroundsの子要素としましょう。 BackgroundsとFrontのTransformの位置はともにX 0 Y 0 Z 0となるようにしてください。

Frontの大きさを変更します。FrontのScaleを X 8 Y 6 Z 1 とします。

MaterialsフォルダにあるBackground-FrontをQuadにドラッグ&ドロップします。


図6.1のように画面いっぱいに背景が表示されましたか?


図6.1:

背景が画面いっぱいに表示されない場合

メインカメラの設定を忘れている可能性があります。 画像を見ながら、ProjectionSizeの設定を確認して下さい。

6.3 MiddleとBackを作る

Frontを複製してMiddleとBackを作成します。

次に、MiddleとBackそれぞれのマテリアルを変更します。今回は、マテリアルをそれぞれのヒエラルキーの方へドラッグ&ドロップしましょう。

6.4 3枚の位置を調整する

FrontのZ位置を0.1、MiddleのZ位置を0.2、BackのZ位置を0.3にします。

これで正しく表示されるようになりました。

6.5 背景をスクロールさせる

Background.csをScriptsフォルダの中に作成します。

Background.cs

using UnityEngine;

public class Background : MonoBehaviour
{
	// スクロールするスピード
	public float speed = 0.1f;
	
	void Update ()
	{
		// 時間によってYの値が0から1に変化していく。1になったら0に戻り、繰り返す。
		float y = Mathf.Repeat (Time.time * speed, 1);
		
		// Yの値がずれていくオフセットを作成
		Vector2 offset = new Vector2 (0, y);
		
		// マテリアルにオフセットを設定する
		GetComponent<Renderer>().sharedMaterial.SetTextureOffset ("_MainTex", offset);
	}
}

Background.csをFront、Middle、Backそれぞれにアタッチします。

次にテクスチャをスクロールできるようにテクスチャのWrap ModeRepeatになっていることを確認して下さい。

ゲームを再生してみてください。背景がスクロールされるはずです。 3枚のテクスチャそれぞれのスクロールスピードを変更してみましょう。 FrontのSpeedは0.1、MiddleのSpeedは0.08、BackのSpeedは0.02にします。

Front
図6.2: Front

Middle
図6.3: Middle

Back
図6.4: Back

ゲームを再生してみてください。それぞれ異なるスピードでスクロールされるはずです。

スプライトでオフセットの変更はできない

今回、背景でスプライトを使用しなかったのには理由があります。 テクスチャがスプライトとして使用されている時はオフセットの変更ができません。

うまくいかないという警告が出る
図6.5: うまくいかないという警告が出る

第06回終わり

今回はここで終了です。つまずいてしまった方はプロジェクトファイルをダウンロードして新たな気持ちで次の回へ進みましょう。

今回のプロジェクトファイルをダウンロード