平行移動で背景をスクロールする方法
![背景をスクロール](https://game-programming-lab.com/wp-content/uploads/2021/02/scroll_background_in_unity.gif)
この記事では、Unityで平行移動によって背景をスクロールする方法について説明します。
手順
TranslationRepeaterコンポーネントを作る
まず、平行移動を繰り返すコンポーネント( TranslationRepeaterコンポーネント )を作成します。
MonoBehaviourクラスを継承する
MonoBehaviour
クラスを継承したクラスを作ります。
using UnityEngine;
public sealed class TranslationRepeater : MonoBehaviour
{
}
メンバ変数を宣言する
関数の実装に必要となるメンバ変数を宣言します。このとき宣言する変数には、Inspectorウィンドウから値の設定を可能にするため、SerializeField
属性を付与します。
[SerializeField]
private float start_position = 0.0f;
[SerializeField]
private float end_position = 0.0f;
[SerializeField]
private float m_speed = 0.0f;
Update関数を定義する
オブジェクトを繰り返し平行移動させるため、Update
関数を定義します。これでTranslationRepeaterコンポーネントは完成です。
private void Update()
{
transform.Translate( new Vector3( m_speed, 0.0f, 0.0f ) );
var position = transform.localPosition;
if ( position.x > end_position ) return;
position.x = start_position;
transform.localPosition = position;
}
UIの領域を設定する
次に、UIの領域を設定します。
Canvasオブジェクトを作成する
Unityのメニューから「GameObject」 > 「UI」 > 「Canvas」を選択し、Canvasオブジェクトを作成します。
![Canvasオブジェクトを作成](https://game-programming-lab.com/wp-content/uploads/2021/02/create_canvas_in_unity.png)
UIの領域を設定する
Canvas ScalerコンポーネントのUI Scale Modeを「Scale With Screen Size」に変更し、Reference Resolutionに基準とするサイズを設定します( ここでは1280×720を設定 )。
![UI Scale ModeとReference Resolutionを設定](https://game-programming-lab.com/wp-content/uploads/2021/02/set_ui_scale_mode_and_reference_resolution.png)
平行移動する機能を持つ背景を作る
最後に、繰り返し平行移動する機能を持つ背景を作ります。
Imageオブジェクトを2つ作成する
Unityのメニューから「GameObject」 > 「UI」 > 「Image」を選択し、Imageオブジェクトを2つ作成します。
![Imageオブジェクトを作成](https://game-programming-lab.com/wp-content/uploads/2021/02/create_images_in_unity.png)
サイズを画面より若干大きく設定して、横に並べる
Rect Transformコンポーネントでサイズを画面より若干大きく設定し、横に並べます( ここでは幅と高さを1290×730、X座標を0と1280に設定 )。
![Imageオブジェクトを並べる](https://game-programming-lab.com/wp-content/uploads/2021/02/arrange_images_in_unity.png)
スプライトを設定する
ImageコンポーネントのSource Imageに背景のスプライトを設定します( スプライトの作成が事前に必要。また、2つ作成したImageオブジェクトの両方に設定する )。
![Imageコンポーネントにスプライトを設定](https://game-programming-lab.com/wp-content/uploads/2021/02/set_sprite_to_image.png)
マテリアルを設定する
ImageコンポーネントのMaterialに「Sprites-Default」を設定します。
![Imageオブジェクトにマテリアルを設定](https://game-programming-lab.com/wp-content/uploads/2021/02/set_material_to_image.png)
TranslationRepeaterコンポーネントを追加し、値を設定する
Imageオブジェクトに( 先ほど作成した )TranslationRepeaterコンポーネントを追加します。そして、Inspectorウィンドウの各値( 「開始位置( X座標 )」「終了位置」「速度」 )を設定します。
![Translation Repeaterコンポーネントを追加](https://game-programming-lab.com/wp-content/uploads/2021/02/add_translation_repeater_component.png)
以上で背景のスクロールは完成です。
![背景をスクロール](https://game-programming-lab.com/wp-content/uploads/2021/02/scroll_background_in_unity.gif)