[Unity]Unityのみの機能を使い中間フラッグ(旗)を作る!

##はじめに

今回は下の動画のような中間フラッグをUnityの機能だけを用いて制作します。
今回は旗の制作のみです。次回にゲームオーバーになった時に中間フラッグの位置からゲームを再開する方法について解説するつもりです。
![Flag005.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/7f2330a3-44ca-2fc4-3e70-b1dc9af32d97.gif)
###環境
Unity 2019.3.15f1
###目次
1. モデリングをする
2. マテリアルとシェーダを作成、適用させてフラッグを作る
3. フラッグを回転させる
4. キラキラエフェクトを付ける

##1.モデリングする
まず、Hierarchy ウィンドウに以下のようなFlagツリーを作成します。
![FlagTree.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/50d88fe4-6bb8-51d7-7148-5269c3536ee4.png)
**手順**
<font color="Red">Hierarchy ウィンドウ</font>内で右クリックして <font color="Red">Create Empty</font> を作成して名前を<font color="Red">Flag</font>に変更する。

<font color="Red">Hierarchy ウィンドウ</font>内にある作成した<font color="Red">Flag</font>を右クリックしてもう一度<font color="Red">Create Empty</font> を作成して名前を<font color="Red">FlagModel</font>に変更する。

Hierarchy ウィンドウ内にある作成した<font color="Red">FlagModel</font>を右クリックして　<font color="Red">3DObject > Plane</font>　をクリックしてプレーンを作成し、名前を<font color="Red">Cloth</font>に変更する。

同様に<font color="Red">FlagModel</font>を右クリックして　<font color="Red">3DObject > Cylinder</font>　　で円柱を作成し　<font color="Red">Bar</font>
　　　　　　　　　　　　　　　　　<font color="Red">3DObject > Sphere</font> 　　で 球を作成し　<font color="Red">Bar_Top</font>
　　　　　　　　　　　　　　　　　<font color="Red">3DObject > Cylinder</font> 　で 円柱を作成し　<font color="Red">Bar_Base</font>　を作成する。

次に、作成したCloth、Bar、Bar_Top、Bar_Base　のInspector内にあるTransformを変更して、フラッグの形状にします。
![FlagModel1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/accef6e4-e90a-285d-3347-15b9b2b68a74.png)
上の画像のようにTranformを変更しました。
各自好みで変更してください。

以上でモデリングは終了です。
##2.マテリアル、シェーダの作成と適用
次はフラッグのマテリアルおよびシェーダを作成して、それを適用させます。
それによりフラッグの布部分をなびかせたり、棒部分をより金属のように見えるようにします。

プロジェクトに以下のフォルダを作成します。
![Mat1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/fac736ca-b252-72e1-77a6-47743234fe5d.png)
**手順**
プロジェクト内のどこでもいいので<font color="Red">Flagフォルダ</font>を作成します。
プロジェクトビュー内で右クリック <font color="Red">Create > Folder </font>でフォルダを作成して名前を<font color="Red">Flag</font>に変える。

そのフォルダ内にマテリアル2つ、シェーダ1つ、テクスチャー1つを作成します。
プロジェクトビューのFlagフォルダ内で右クリック <font color="Red">Create > Material</font> でマテリアルを作成し、名前を<font color="Red">Bar</font>に変更
同様に <font color="Red">Create > Material</font> でマテリアルを作成し、名前を<font color="Red">Cloth</font>に変更
　　　 <font color="Red">Create > Shader > Standard Surface Shader</font> シェーダを作成し、名前を<font color="Red">Cloth</font>に変更

フラッグの布部分に使うテクスチャを自前で用意します。
テクスチャはjpgかpngファイルなら何でもいいので好きなものを使用してください。

それを、プロジェクトビューのFlagフォルダ内にドラック&ドロップで追加してください。
![Mat3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/8fbff0c9-8034-5982-573e-78f4d3efcbe6.png)
次に、シェーダの中身を変更します。

作成した<font color="Red">シェーダのCloth</font> をダブルクリックで開き、以下に書いているコードに変更します。
このシェーダを使うことで布部分のなびかる表現ができます。
シェーダの詳しい説明はややこしくなるので省きます。
以下のコードをコピペしてもらえばいいです。

```php:Cloth.shader
Shader "Custom/Cloth"
{
	Properties
	{
		_Color("Color", Color) = (1,1,1,1)
		_MainTex("Albedo (RGB)", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType" = "Opaque" }
		LOD 200

		CGPROGRAM
		#pragma surface surf Lambert vertex:vert

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

		sampler2D _MainTex;

		struct Input
		{
			float2 uv_MainTex;
		};

		fixed4 _Color;

		void vert(inout appdata_full v, out Input o)
		{
			UNITY_INITIALIZE_OUTPUT(Input, o);
			float amp = 0.1*sin(_Time * 100 + v.vertex.x * 100);
			v.vertex.xyz = float3(v.vertex.x, v.vertex.y + amp, v.vertex.z);
		}

		void surf(Input IN, inout SurfaceOutput o) 
		{
			fixed4 c = tex2D(_MainTex, IN.uv_MainTex)* _Color;
			o.Albedo = c.rgb;
			o.Alpha = c.a;
		}
		ENDCG
	}
	FallBack "Diffuse"
}
```
**参考記事** [【Unityシェーダ入門】シェーダで旗や水面をなびかせる](https://nn-hokuson.hatenablog.com/entry/2017/04/04/201537)
詳しい原理などは上記の記事を見てください。

これで使用するアイテムの準備は終了です。

次に作成したこれらのアイテムを適用させていきます。



まず、<font color="Red">マテリアルのCloth</font>に<font color="Red">シェーダのCloth</font>をドラック&ドロップしてClothマテリアルにシェーダを適用させます。
![Mat6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/bba3f222-66b8-3d84-d467-98dcf31b32be.png)
すると、<font color="Red">マテリアルのCloth</font>が以下のように変化するので、<font color="Red">Flagのテクスチャ</font>(jpgかpngファイル)を下図のようにドラッグ&ドロップして、ClothマテリアルにFlagテクスチャーを適用させます。
![Mat7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/118bf86e-6783-60e4-3446-e4df1d84489b.png)

次にマテリアルを最初にシーンに作成したオブジェクトに適用させます。
最初に<font color="Red">Clothのマテリアル</font>をシーンに配置した<font color="Red">Clothオブジェクト</font>に適用させます。

やり方は2通りあります。直接シーンに配置しているオブジェクトにドラック&ドロップする方法と、オブジェクトのインスペクターにあるMesh Renderer の Materials Element0 のところにドラック&ドロップする方法です。
やりやすい方法を用いてください。
![Mat8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/f753173b-72ac-7636-1858-f2b5b2ab9fb6.png)
同様の方法でシーンにある <font color="Red">Bar、Bar_Top、Bar_Base</font>に対して <font color="Red">Barマテリアル</font>を適用させます。

そうすると以下のようになります。
![sg43k-7imat.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/614523e2-4fb7-a492-7fac-81b71079bb8b.gif)

フラッグのオブジェクトが完成に近づいてきました。
しかし、現状ではBarに使われているマテリアルを何も触っていなので、デフォルトの状態です。

 <font color="Red">Barマテリアル</font>の <font color="Red">Albedo、Metallic、smoothness</font>の値を変更します。
下の写真のように変更しましたが、各自の好みで変更してください。
![Mat11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/ca4fe140-7c01-9b0e-93e2-ccf518a5feb3.png)
これで以下のような旗が完成します。
![icdrk-ukuvg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/71e55f29-8855-af2c-6bc9-1af775a7d6e6.gif)
ただし、<font color="Red">この状態ではひとつ問題があります。

それは、カメラの向きを変えて裏面を表示させると、下の写真のような表示に変わってしまいます。
![Mat10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/40e53b30-aaf2-8522-365b-133f02c567ac.png)
旗の布部分が消えてしまいます。これは3DObjectのPlaneが裏面を表示できないためにこのようになってしまいます。

これを直す方法は単純です。Plane部分のオブジェクトを複製して、裏面を向けた状態で配置するだけです。
やり方はHierarchy ウィンドウ内にあるClothを選択して、ショートカットコマンドの　<font color="Red">Ctrl + D</font> を押して<font color="Red">Clothオブジェクト</font>を複製します。
![Mat9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/66b0a1da-55e7-d91a-fa9a-3b0298a8d6cc.png)
複製してできた <font color="Red">Cloth (1)</font> のTransfromの<font color="Red">Rotation x</font> を <font color="Red">-90</font> から <font color="Red">90</font> に変更します。
![Mat10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/af333ed3-76e7-ba16-9149-3d11267ae9e6.png)
これで360°どこから見てもフラッグに見えるようになります。
FlagModel自体はこれで完成です。

##3.フラッグを回転させる
今度はこの作成したフラッグを回転させます。
フラッグを回転させたくないって人はとばしてくれてOKです。

まず、<font color="Red">FlagController</font> スクリプトを作成します。
プロジェクトの<font color="Red">Flagフォルダ内</font>で 右クリックして <font color="Red">Create > C# Script</font> でスクリプトを作成して名前を <font color="Red">FlagController</font> にします。

作成した <font color="Red">FlagController</font> を <font color="Red">Hierarchy ウィンドウ</font> にある <font color="Red">Flag オブジェクト</font>にドラッグ&ドロップしてアタッチします。
![Qiita3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/1a5f9dee-0fb8-f39c-c5f2-fb9277a42bb9.png)
このとき、スクリプトの名称とスクリプト内のclass名が一致していないとアタッチできないので注意しましょう。

アタッチできたら、FlagController を開きます。

オブジェクトを回転させる方法はいろいろありますが、今回は transform.eulerAngles を少しずづ変更することで回転させます。

FlagController に2行だけ追加して以下のように書き換えます。

```php:FlagController.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class FlagController : MonoBehaviour
{
    //回転スピード
    [SerializeField] private Vector3 RotationSpeed = new Vector3();　//←追加

    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        //オイラー角を変更する
        transform.eulerAngles += RotationSpeed * Time.deltaTime;　//←追加
    }
}
```

スクリプトの書き換えができたら、Unityに戻り、シーンにある <font color="Red">Flagオブジェクト</font> のインスペクタ FlagController スクリプト内の <font color="Red">RotationSpeed</font> の値を下の画像のように変更します。
![Qiita4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/bb93013e-e4e1-7875-49cf-9aa71fc537db.png)

回転してるかを確かめるためにPlayボタン(▶ボタン) でシーンを実行すると以下のようになります。
![Flag003.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/9ca5a52d-0e24-5ba3-946a-1cc0b6888951.gif)
次にフラッグ全体に傾きを付けます。

<font color="Red">Hierarchy ウィンドウ</font> の Flagオブジェクトツリー内の <font color="Red">FlagModel</font> の <font color="Red">Transform</font> の値を変更します。
下の画像のように変更します。
![Qiita5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/415cd99a-2010-2d66-1131-ffa995982719.png)
Playボタン(▶ボタン) でシーンを実行して確認すると以下のようになります。
![Flag004.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/f52c2aec-e6a9-0810-cf0e-ea88840d6a75.gif)
これで、オブジェクトの回転は終了です。
##4.キラキラエフェクトを付ける
最後にキラキラエフェクトを付けます。
今回は1からエフェクトを作成するのではなく、無料Assetをダウンロードして、それを変更して使います。

まず、Asset Store から以下の無料Effect をダウンロードします。

* [Cartoon FX Free](http://www.jeanmoreno.com/unity/cartoonfxfree/)

インストールできたら、プロジェクト内にJMO Assets というフォルダが追加されると思います。
今回は、JMO Assets内にある CFX2_PickupStar というエフェクトを使用します。

JMO Assets > Cartoon FX > CFX2 Prefabs > Pickup Item 内にある <font color="Red">CFX2_PickupStar</font> をFlagオブジェクトにドラッグ&ドロップします。
![Qiita6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/4eeb9ae5-359f-bb37-da82-0e74c1f4d599.png)

Flagツリー内に追加された <font color="Red">CFX2_PickupStar</font>  を右クリックして <font color="Red">Unpack Prefab</font>  します。
この操作は、このシーンに配置したCFX2_PickupStarを変更しても、元のCFX2_PickupStarのプレハブに影響を与えないために必要になります。
![Flag007.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/4dbc8f20-8458-1843-fa1b-2a922c91cd24.png)
今回使うのは、CFX2_PickupStar ツリー内にある <font color="Red">ShinyStars Small だけです。</font>
ですので、ShinyStars Small を Flag にドラッグ&ドロップして ShinyStars Small を Flag 直下にもってきます。
![Qiita7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/874881fb-e053-51e9-8b16-7fa5c0b4337b.png)
残りの CFX2_PickupStar は不要なので消去して下の画像のような状態にします。
![flag009.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/6cea412c-a5a2-1eb0-32b8-9191f618aa04.png)
次に ShinyStars Small のインスペクタを変更します。

変更するところは<font color="Red">Transform</font> の <font color="Red">Position、Scale</font>をそれぞれ、画像のように<font color="Red">0</font>と<font color="Red">2</font>に変更し、
<font color="Red">Pirticle System</font> の<font color="Red">Looping</font> にチェックを入れるだけです。
![Qiita8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/2bda3da9-4a91-ea1a-cb77-1af9c66e2ec7.png)
これだけで、キラキラエフェクトの追加は終了です。

Playボタン(▶ボタン) でシーンを実行すると以下のようになります。
![Flag005.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1119946/1e38ffd9-4576-8a12-2ad4-b1397cf55e37.gif)

これでフラッグの完成です！

##おわりに
今回はUnityのみの機能を使い、マリオなんかで使われているような中間フラッグを作ってみました。
3Dの物をモデリングする場合は Blender などの外部ツールを用いるのが一般的だと思いますが、こういった単純な物の場合はUnityだけで作ったほうが簡単な場合があります。
何か物を作る際には、こういった方法も使ってみてください。

次回はこのフラッグを使い、ゲームオーバーしたら中間地点から開始という機能を作りたいと思います。

この中間フラッグを実際に使ったゲームをアップルストアとグーグルプレイで公開しています。
無料でプレイ可能なので、少しでも興味を感じた人はプレイしてみてください。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Android版も無事リリースできました！！！<br><br>にゃんこが大暴れするマ〇オみたいな本格的アクションゲームです！<br>全ステージ無料なので、ぜひ遊んでやってくだい！<br><br>ダウンロードURL<br>IOS<a href="https://t.co/01RyBPeeq3">https://t.co/01RyBPeeq3</a><br><br>Android<a href="https://t.co/NDN4iLWXxT">https://t.co/NDN4iLWXxT</a><a href="https://twitter.com/hashtag/Unity?src=hash&amp;ref_src=twsrc%5Etfw">#Unity</a> <a href="https://twitter.com/hashtag/unity3d?src=hash&amp;ref_src=twsrc%5Etfw">#unity3d</a> <a href="https://twitter.com/hashtag/gamedev?src=hash&amp;ref_src=twsrc%5Etfw">#gamedev</a> <a href="https://twitter.com/hashtag/%E3%82%B2%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#ゲーム開発</a> <a href="https://twitter.com/hashtag/%E3%82%B2%E3%83%BC%E3%83%A0?src=hash&amp;ref_src=twsrc%5Etfw">#ゲーム</a> <a href="https://t.co/vrnzMY5sVH">pic.twitter.com/vrnzMY5sVH</a></p>&mdash; ポン吉 (@ponkitigames) <a href="https://twitter.com/ponkitigames/status/1356227926698520576?ref_src=twsrc%5Etfw">February 1, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>