Unityで背景スクロールする３つの方法

スクリプトでテクスチャ座標を動かす

f:id:nn_hokuson:20160902215814g:plain

MaterialがもつSetTextureOffsetを使ってテクスチャをスクロールする方法です。
この方法では、スクロールするテクスチャのWarp Modeを「Repeat」に設定します。
また、Texture Typeが「Sprite」だと正しく動作しないので注意です。

f:id:nn_hokuson:20160902215131p:plain

テクスチャの設定ができたら、Planeなどの3Dモデルにテクスチャとして貼り付けましょう。ここでもSpriteになっていないことに注意してください。

f:id:nn_hokuson:20160902215438p:plain

最後にスクロールさせるためのスクリプトを作成します。次のようなスクリプトを作って、Planeなどのモデルにアタッチしてください。

using UnityEngine;
using System.Collections;

public class BackgroundController : MonoBehaviour
 {
	void Update()
	{
		float scroll = Mathf.Repeat (Time.time * 0.2f, 1);
		Vector2 offset = new Vector2 (scroll, 0);
		GetComponent<Renderer>().sharedMaterial.SetTextureOffset ("_MainTex", offset);
	}
}

シェーダでuvを動かす

f:id:nn_hokuson:20160902223214g:plain

こちらは自作のシェーダを使ってテクスチャのuv座標を操作する方法です。シェーダの書き方次第では上記の方法よりも自由なことができます。

シェーダの場合も上の方法と同様に、スクロールするテクスチャのWarp Modeを「Repeat」に設定します。

f:id:nn_hokuson:20160902222315p:plain

テクスチャの設定ができたら、Planeなどの3Dモデルにテクスチャとして貼り付けます。次にテクスチャのuv座標を動かすシェーダスクリプトを作成します。プロジェクトビューで右クリックし「Create」→「Shader」→「Standerd surface shader」を選択してください。

シェーダを次のように変更します。

Shader "Custom/scroll" {
	Properties {
		_Color ("Color", Color) = (1,1,1,1)
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_Glossiness ("Smoothness", Range(0,1)) = 0.5
		_Metallic ("Metallic", Range(0,1)) = 0.0
	}
	SubShader {
		Tags { "RenderType" = "Transparent"}
		LOD 200

		CGPROGRAM
		// Physically based Standard lighting model, and enable shadows on all light types
		#pragma surface surf Standard alpha:fade

		// Use shader model 3.0 target, to get nicer looking lighting
		#pragma target 3.0

		sampler2D _MainTex;

		struct Input {
			float2 uv_MainTex;
		};

		half _Glossiness;
		half _Metallic;
		fixed4 _Color;

		void surf (Input IN, inout SurfaceOutputStandard o) {
			// Albedo comes from a texture tinted by color
			fixed2 scrolledUV = IN.uv_MainTex;
			scrolledUV.x += _Time * 3; 
			fixed4 c = tex2D (_MainTex, scrolledUV) * _Color;
			o.Albedo = c.rgb;

			// Metallic and smoothness come from slider variables
			o.Metallic = _Metallic;
			o.Smoothness = _Glossiness;
			o.Alpha = c.a;
		}
		ENDCG
	}
	FallBack "Diffuse"
}

ここではテクスチャのuv座標のうち、x方向の座標を_Time（時間）によって移動させています。これ以外はデフォルトのStanderdシェーダです。

透明のテクスチャを使いたい場合には、

RenderTypeにTransparentを指定すること
#pragma の項目にalpha:fadeを追加すること
SurfaceOutputStandardのAlphaに透明度をいれること

に注意しましょう。

最後に、テクスチャを貼り付けたオブジェクトのShaderを作成したものに変更します。

f:id:nn_hokuson:20160902223042p:plain

2枚の絵を並べて動かす

f:id:nn_hokuson:20160902224013g:plain

最後に2枚のスプライトを並べて交互に表示する方法を紹介します。この方法が一番直感的で分かりやすくて、しかもテクスチャだけでなくスプライトも使える優れものです。

まずは2枚のスプライトを並べて配置します。画面サイズよりも一回り大きくしておくと、スプライト間のつなぎ目が目立たなくなります。

f:id:nn_hokuson:20160902224335p:plain

次に、背景画像をスクロールさせるスクリプトを作ります。スプライトが画面左端から消えると同時に、画面右端にワープさせています。お札が増えるトリックと同じ手法（？）です。笑

using UnityEngine;
using System.Collections;

public class BackgroundController : MonoBehaviour
 {
	void Update () {
		transform.Translate (-0.1f, 0, 0);
		if (transform.position.x < -13.8f ) {
			transform.position = new Vector3 (13.8f, 0, 0);
		}
	}
}