UnityにおけるSprite画像の利用①

#はじめに
この記事ではプログラム初心者でも理解しやすいように、
ソースコードの殆どにコメントを書くようにしています。

※Unityのバージョンは5.6.1f1です。

#概要
この記事はUnityにおけるSprite画像の利用例や活用法をまとめた記事です。
　●Sprite画像の基礎
　●フェードイン、フェードアウトなどの演出

#参考資料
[Unity-フェードインとフェードアウト]
(https://qiita.com/pilkul/items/eb9b4bbbb519772c3397)

#流れ
まず、2D ObjectをCreate(作成)してください。
2D Objectは、GameObject＞2D Object＞Spriteから作成できます。
作成した場合、次の画像のようになります。

![Spriteの生成.PNG](https://qiita-image-store.s3.amazonaws.com/0/209504/329455eb-a468-828a-67b7-c55f2f071914.png)

次にSprite画像を用意します。
下のような黒色の画像があれば大丈夫です。

![Fade.png](https://qiita-image-store.s3.amazonaws.com/0/209504/02332b9d-94fe-37c0-93cd-34c6ee1df15d.png)

画像はProjectタブのAssetsにドラッグ&ドロップすると、
Unityのプロジェクトファイルに追加されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/c44bd157-05e7-8942-5af8-d72a55fc7ee4.png)

追加した画像、この場合は”Fade”を選択して、Inspectorを確認すると、
画像のSetting(設定)を見ることができます。
初期状態だと、Texture TypeがDefaultになっていますので、
Sprite(2D and UI)に変えます。その際に右下のApplyを押してください。
Applyを押し忘れると、適用されませんので、要注意です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/ce5c501a-2ff8-e8da-f4a5-410fffc53473.png)


HierarchyタブからNew Spriteを選択して、Inspectorを確認すると、
SpriteRendererのステータスを見ることができます。
SpriteRendererのSpriteがNone(Sprite)になっていますので、
先程のSprite画像、”Fade”をクリックして追加すると、
Sprite画像がScene上に表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/c689763d-5b66-d3c0-f367-7b1edaa2681c.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/96168e64-c0f8-487e-aaa0-8b9f1ba4fd70.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/fb53fc5a-cc07-c519-4505-30db0b6f32dd.png)

#Sprite画像によるフェードイン演出
```C#:SpriteFadeinInvoker.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

///------------------------------------------------------
///------------------------------------------------------
/// <summary>
/// ■Sprite画像を利用して,フェードインを行うクラス.
/// </summary>
public class SpriteFadeinInvoker : MonoBehaviour {
	//色のための変数-------------------------------------------
	public float alpha;             //アルファ値
	public float alphaControlTime;  //アルファ値の変化時間
	//--------------------------------------------------------

	//GameObjectの取得----------------------------------------
	public GameObject spriteObject; //2Dオブジェクト(Sprite画像)の読み込み
	//-------------------------------------------------------


	///------------------------------------------------------
	/// <summary>
	/// ●初期化する関数.
	/// </summary>
	void Start () {
		alpha = 1f;	//アルファ値の初期値(Sprite画像が透明でない状態)
	}


	///------------------------------------------------------
	/// <summary>
	/// ●フェードイン演出を行う関数.
	/// </summary>
	public void FadeIn ()
	{
		alpha -= Time.deltaTime * alphaControlTime; //アルファ値の変化

		/*Scene内にフェード(2Dオブジェクト)が存在するとき,*/
		if (GameObject.Find ("Fade") != null)
		{
			/*フェード(2Dオブジェクト)を発見し,取得する.*/
			spriteObject = GameObject.Find ("Fade");
		}

		//フェード(2Dオブジェクト)の色の読み込み--------------------
		spriteObject.GetComponent<SpriteRenderer> ().color = new Color (0, 0, 0, alpha);
		//-------------------------------------------------------

		/*アルファ値が0以下のとき,*/
		if (alpha <= 0f)
		{
			/*アルファ値は0になる.*/
			alpha = 0f;
		}
	}


	///------------------------------------------------------
	/// <summary>
	/// ●1秒間に呼ばれる回数が一定で実行する関数.
	/// </summary>
	void FixedUpdate ()
	{
		FadeIn ();	//フェードイン演出を行う関数の呼びだし
	}
}

```

上記のソースコードはフェードイン演出を行うクラスです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/da49df2f-e0a0-9c05-c952-f1afcb0dae6d.png)

2D Objectである、スプライト画像に”SpriteFadeinInvoker.cs”を
Add Componentして、”Sprite Object”でSprite画像を選択する。
もしくは、Scene内にCreate(作成)した、”New Sprite”の名前を”Fade”に変更すると、
自動的に2D Objectの取得を行います。
次に”Alpha Control Time”の値を0よりも大きい値にすると、フェードインを行います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/6ccb81d9-10b5-cd30-f71f-9b982aa97159.png)


#Sprite画像によるフェードアウト演出
```C#:SpriteFadeoutInvoker.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

///------------------------------------------------------
///------------------------------------------------------
/// <summary>
/// ■Sprite画像を利用して,フェードアウトを行うクラス.
/// </summary>
public class SpriteFadeoutInvoker : MonoBehaviour {
	//色のための変数-------------------------------------------
	public float alpha;             //アルファ値
	public float alphaControlTime;  //アルファ値の変化時間
	//--------------------------------------------------------

	//GameObjectの取得----------------------------------------
	public GameObject spriteObject; //2Dオブジェクト(Sprite画像)の読み込み
	//-------------------------------------------------------


	///------------------------------------------------------
	/// <summary>
	/// ●初期化する関数.
	/// </summary>
	void Start () {
		alpha = 0f;	//アルファ値の初期値(Sprite画像が透明な状態)
	}


	///------------------------------------------------------
	/// <summary>
	/// ●フェードアウト演出を行う関数.
	/// </summary>
	public void FadeOut ()
	{
		alpha += Time.deltaTime * alphaControlTime; //アルファ値の変化

		/*Scene内にフェード(2Dオブジェクト)が存在するとき,*/
		if (GameObject.Find ("Fade") != null)
		{
			/*フェード(2Dオブジェクト)を発見し,取得する.*/
			spriteObject = GameObject.Find ("Fade");
		}

		//フェード(2Dオブジェクト)の色の読み込み--------------------
		spriteObject.GetComponent<SpriteRenderer> ().color = new Color (0, 0, 0, alpha);
		//-------------------------------------------------------

		/*アルファ値が1以上のとき,*/
		if (alpha >= 1f)
		{
			/*アルファ値は1になる.*/
			alpha = 1f;
		}
	}


	///------------------------------------------------------
	/// <summary>
	/// ●1秒間に呼ばれる回数が一定で実行する関数.
	/// </summary>
	void FixedUpdate ()
	{
		FadeOut ();	//フェードアウト演出を行う関数の呼びだし
	}
}

```
上記のソースコードはフェードアウト演出を行うクラスです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/0a58e6f2-7982-3f0f-8031-b7cd8fa31730.png)


流れ自体はフェードインと全く同じです。
2D Objectである、スプライト画像に”SpriteFadeoutInvoker.cs”を
Add Componentして、”Sprite Object”でSprite画像を選択する。
もしくは、Scene内にCreate(作成)した、”New Sprite”の名前を”Fade”に変更すると、
自動的に2D Objectの取得を行います。
次に”Alpha Control Time”の値を0よりも大きい値にすると、フェードアウトを行います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/effe5fdc-5dfe-419a-1573-2d19da182f4a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/f1433f55-06f4-04ea-a64d-a12c90690a49.png)


#列挙型でのSprite画像による演出の切り替え
```C#:SpriteStagingInvoker.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

///------------------------------------------------------
///------------------------------------------------------
/// <summary>
/// ■Sprite画像を利用して,色々な演出を行うクラス.
/// </summary>
public class SpriteStagingInvoker : MonoBehaviour
{
	//色のための変数-------------------------------------------
	public float alpha;             //アルファ値
	public float alphaControlTime;  //アルファ値の変化時間
	//--------------------------------------------------------

	//GameObjectの取得----------------------------------------
	public GameObject spriteObject; //2Dオブジェクト(Sprite画像)の読み込み
	//-------------------------------------------------------

	//列挙型の取得--------------------------------------------
	public StagingType stagingType; //演出の種類
	//-------------------------------------------------------

	/// <summary>
	/// ●演出の種類
	/// </summary>
	public enum StagingType
	{
		/// 演出なし
		non,
		/// フェードイン演出
		fadein,
		/// フェードアウト演出
		fadeout
	};


	///------------------------------------------------------
	/// <summary>
	/// ●初期化する関数.
	/// </summary>
	void Start ()
	{
		StandingTypeChange ();  //演出の種類を切り替える関数の呼び出し
	}


	///------------------------------------------------------
	/// <summary>
	/// ●初期化時に演出の種類によって対応を切り替える関数.
	/// </summary>
	public void StandingTypeChange ()
	{
		/*演出の種類が,*/
		switch (stagingType) {
		case StagingType.non:   /*演出なしの場合,*/
			/*何もしない.*/
			break;
		case StagingType.fadein:   /*フェードイン演出の場合,*/
			/*アルファ値を1(色を黒)にする.*/
			alpha = 1f;
			break;
		case StagingType.fadeout:  /*フェードアウト演出の場合,*/
			/*アルファ値を0(透明)にする.*/
			alpha = 0f;
			break;
		}
	}


	///------------------------------------------------------
	/// <summary>
	/// ●演出の種類を切り替える関数.
	/// </summary>
	public void StandingTypeInvoke ()
	{
		/*演出の種類が,*/
		switch (stagingType)
		{
		case StagingType.non:   /*演出なしの場合,*/
			/*何もしない.*/
			break;
		case StagingType.fadein:   /*フェードイン演出の場合,*/
			/*フェードイン演出を行う.*/
			FadeIn ();
			break;
		case StagingType.fadeout:  /*フェードアウト演出の場合,*/
			/*フェードアウト演出を行う.*/
			FadeOut ();
			break;
		}
	}


	///------------------------------------------------------
	/// <summary>
	/// ●フェードイン演出を行う関数.
	/// </summary>
	public void FadeIn ()
	{
		alpha -= Time.deltaTime * alphaControlTime; //アルファ値の変化

		/*Scene内にフェード(2Dオブジェクト)が存在するとき,*/
		if (GameObject.Find ("Fade") != null)
		{
			/*フェード(2Dオブジェクト)を発見し,取得する.*/
			spriteObject = GameObject.Find ("Fade");
		}

		//フェード(2Dオブジェクト)の色の読み込み--------------------
		spriteObject.GetComponent<SpriteRenderer> ().color = new Color (0, 0, 0, alpha);
		//-------------------------------------------------------

		/*アルファ値が0以下のとき,*/
		if (alpha <= 0f)
		{
			/*アルファ値は0になる.*/
			alpha = 0f;
		}
	}


	///------------------------------------------------------
	/// <summary>
	/// ●フェードアウト演出を行う関数.
	/// </summary>
	public void FadeOut ()
	{
		alpha += Time.deltaTime * alphaControlTime; //アルファ値の変化

		/*Scene内にフェード(2Dオブジェクト)が存在するとき,*/
		if (GameObject.Find ("Fade") != null)
		{
			/*フェード(2Dオブジェクト)を発見し,取得する.*/
			spriteObject = GameObject.Find ("Fade");
		}

		//フェード(2Dオブジェクト)の色の読み込み--------------------
		spriteObject.GetComponent<SpriteRenderer> ().color = new Color (0, 0, 0, alpha);
		//-------------------------------------------------------

		/*アルファ値が1以上のとき,*/
		if (alpha >= 1f)
		{
			/*アルファ値は1になる.*/
			alpha = 1f;
		}
	}


	///------------------------------------------------------
	/// <summary>
	/// ●1秒間に呼ばれる回数が一定で実行する関数.
	/// </summary>
	void FixedUpdate ()
	{
		StandingTypeInvoke ();  //演出の種類を切り替える関数の呼び出し
	}
}


```

上記のソースコードはSprite画像による、色々な演出を行うクラスです。
流れ自体はフェードイン・フェードアウト演出と全く同じです。
2D Objectである、スプライト画像に”SpriteFadeoutInvoker.cs”を
Add Componentして、”Sprite Object”でSprite画像を選択する。
もしくは、Scene内にCreate(作成)した、”New Sprite”の名前を”Fade”に変更すると、
2D Objectの取得を行います。
次に”Alpha Control Time”の値を0よりも大きい値にすると、フェードアウトを行います。

最後にStaging TypeをNonからFadeinにすると、フェードイン演出になり、
NonからFadeoutにすると、フェードアウト演出となる。
Nonのままだと、特に演出は何も起きません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/209504/749d62ef-e8fe-58b8-5e19-5b21690fa1e6.png)



#解説
今回、記載した3つのソースコードは、全て同じ動きをしています。
Sprite画像のalpha値、つまり色の透明度を制御することにより、
フェードイン・フェードアウト演出を可能としています。

変数”alpha”は、コメントにも書いてある通り、色の透明度を表すalpha値です。
”alpha”が1に近づくと、色の透明度は濃くなる(透明から黒色へ)。
”alpha”が0に近づくと、色の透明度は薄くなる(黒色から透明へ)。

変数”alphaControlTime”はalpha値を制御するための変数です。
”alphaControlTime”の値が大きければ大きい程、演出の速度が上がります。
”alphaControlTime”の値が0のときは何も起きないので、要注意です。

2D Objectの取得は、”GameObject.Find”で”Fade”という名前のオブジェクトを探し、
発見したら、自動的に2D Objectとして取得する。
発見できなかった場合は、取得したいオブジェクトを、
スクリプトにアタッチすると取得できるようになります。

(※”GameObject.Find”による取得は、アタッチ作業による取得よりも、
　  処理が重いと考えられるので、極力使わない方が良いかもしれません…。)

今回、列挙型を用いたのは、Inspectorで演出の切り替えが
できることに、有用性があると感じたからです。
それは、チーム開発などでプログラマー以外の担当者でも
演出の切り替えが可能である点です。


#あとがき
次回の記事では、今回の記事で記載したソースコードを、
クラスの継承を用いることで、
フェードイン・フェードアウト演出をしながら、
Scene遷移するスクリプトを書く予定です。

ソースコードのレビューは大歓迎です。
「この記事の命名法や記法とは合わない！」という方の意見でも大丈夫ですが、
お手柔らかにお願いします。
他にも、何か要望等があれば、連絡をくださると幸いです

最後まで読んでいただきありがとうございました。