はじめに
今回は下の動画のような中間フラッグをUnityの機能だけを用いて制作します。
今回は旗の制作のみです。次回にゲームオーバーになった時に中間フラッグの位置からゲームを再開する方法について解説するつもりです。
環境
Unity 2019.3.15f1
目次
- モデリングをする
- マテリアルとシェーダを作成、適用させてフラッグを作る
- フラッグを回転させる
- キラキラエフェクトを付ける
1.モデリングする
まず、Hierarchy ウィンドウに以下のようなFlagツリーを作成します。
手順
Hierarchy ウィンドウ内で右クリックして Create Empty を作成して名前をFlagに変更する。
Hierarchy ウィンドウ内にある作成したFlagを右クリックしてもう一度Create Empty を作成して名前をFlagModelに変更する。
Hierarchy ウィンドウ内にある作成したFlagModelを右クリックして 3DObject > Plane をクリックしてプレーンを作成し、名前をClothに変更する。
同様にFlagModelを右クリックして 3DObject > Cylinder で円柱を作成し Bar
3DObject > Sphere で 球を作成し Bar_Top
3DObject > Cylinder で 円柱を作成し Bar_Base を作成する。
次に、作成したCloth、Bar、Bar_Top、Bar_Base のInspector内にあるTransformを変更して、フラッグの形状にします。
上の画像のようにTranformを変更しました。
各自好みで変更してください。
以上でモデリングは終了です。
2.マテリアル、シェーダの作成と適用
次はフラッグのマテリアルおよびシェーダを作成して、それを適用させます。
それによりフラッグの布部分をなびかせたり、棒部分をより金属のように見えるようにします。
プロジェクトに以下のフォルダを作成します。
手順
プロジェクト内のどこでもいいのでFlagフォルダを作成します。
プロジェクトビュー内で右クリック Create > Folder でフォルダを作成して名前をFlagに変える。
そのフォルダ内にマテリアル2つ、シェーダ1つ、テクスチャー1つを作成します。
プロジェクトビューのFlagフォルダ内で右クリック Create > Material でマテリアルを作成し、名前をBarに変更
同様に Create > Material でマテリアルを作成し、名前をClothに変更
Create > Shader > Standard Surface Shader シェーダを作成し、名前をClothに変更
フラッグの布部分に使うテクスチャを自前で用意します。
テクスチャはjpgかpngファイルなら何でもいいので好きなものを使用してください。
それを、プロジェクトビューのFlagフォルダ内にドラック&ドロップで追加してください。
次に、シェーダの中身を変更します。
作成したシェーダのCloth をダブルクリックで開き、以下に書いているコードに変更します。
このシェーダを使うことで布部分のなびかる表現ができます。
シェーダの詳しい説明はややこしくなるので省きます。
以下のコードをコピペしてもらえばいいです。
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シェーダ入門】シェーダで旗や水面をなびかせる
詳しい原理などは上記の記事を見てください。
これで使用するアイテムの準備は終了です。
次に作成したこれらのアイテムを適用させていきます。
まず、マテリアルのClothにシェーダのClothをドラック&ドロップしてClothマテリアルにシェーダを適用させます。
すると、マテリアルのClothが以下のように変化するので、Flagのテクスチャ(jpgかpngファイル)を下図のようにドラッグ&ドロップして、ClothマテリアルにFlagテクスチャーを適用させます。
次にマテリアルを最初にシーンに作成したオブジェクトに適用させます。
最初にClothのマテリアルをシーンに配置したClothオブジェクトに適用させます。
やり方は2通りあります。直接シーンに配置しているオブジェクトにドラック&ドロップする方法と、オブジェクトのインスペクターにあるMesh Renderer の Materials Element0 のところにドラック&ドロップする方法です。
やりやすい方法を用いてください。
同様の方法でシーンにある Bar、Bar_Top、Bar_Baseに対して Barマテリアルを適用させます。
そうすると以下のようになります。
フラッグのオブジェクトが完成に近づいてきました。
しかし、現状ではBarに使われているマテリアルを何も触っていなので、デフォルトの状態です。
Barマテリアルの Albedo、Metallic、smoothnessの値を変更します。
下の写真のように変更しましたが、各自の好みで変更してください。
これで以下のような旗が完成します。
ただし、この状態ではひとつ問題があります。
それは、カメラの向きを変えて裏面を表示させると、下の写真のような表示に変わってしまいます。
旗の布部分が消えてしまいます。これは3DObjectのPlaneが裏面を表示できないためにこのようになってしまいます。
これを直す方法は単純です。Plane部分のオブジェクトを複製して、裏面を向けた状態で配置するだけです。
やり方はHierarchy ウィンドウ内にあるClothを選択して、ショートカットコマンドの Ctrl + D を押してClothオブジェクトを複製します。
複製してできた Cloth (1) のTransfromのRotation x を -90 から 90 に変更します。
これで360°どこから見てもフラッグに見えるようになります。
FlagModel自体はこれで完成です。
3.フラッグを回転させる
今度はこの作成したフラッグを回転させます。
フラッグを回転させたくないって人はとばしてくれてOKです。
まず、FlagController スクリプトを作成します。
プロジェクトのFlagフォルダ内で 右クリックして Create > C# Script でスクリプトを作成して名前を FlagController にします。
作成した FlagController を Hierarchy ウィンドウ にある Flag オブジェクトにドラッグ&ドロップしてアタッチします。
このとき、スクリプトの名称とスクリプト内のclass名が一致していないとアタッチできないので注意しましょう。
アタッチできたら、FlagController を開きます。
オブジェクトを回転させる方法はいろいろありますが、今回は transform.eulerAngles を少しずづ変更することで回転させます。
FlagController に2行だけ追加して以下のように書き換えます。
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に戻り、シーンにある Flagオブジェクト のインスペクタ FlagController スクリプト内の RotationSpeed の値を下の画像のように変更します。
回転してるかを確かめるためにPlayボタン(▶ボタン) でシーンを実行すると以下のようになります。
次にフラッグ全体に傾きを付けます。
Hierarchy ウィンドウ の Flagオブジェクトツリー内の FlagModel の Transform の値を変更します。
下の画像のように変更します。
Playボタン(▶ボタン) でシーンを実行して確認すると以下のようになります。
これで、オブジェクトの回転は終了です。
4.キラキラエフェクトを付ける
最後にキラキラエフェクトを付けます。
今回は1からエフェクトを作成するのではなく、無料Assetをダウンロードして、それを変更して使います。
まず、Asset Store から以下の無料Effect をダウンロードします。
インストールできたら、プロジェクト内にJMO Assets というフォルダが追加されると思います。
今回は、JMO Assets内にある CFX2_PickupStar というエフェクトを使用します。
JMO Assets > Cartoon FX > CFX2 Prefabs > Pickup Item 内にある CFX2_PickupStar をFlagオブジェクトにドラッグ&ドロップします。
Flagツリー内に追加された CFX2_PickupStar を右クリックして Unpack Prefab します。
この操作は、このシーンに配置したCFX2_PickupStarを変更しても、元のCFX2_PickupStarのプレハブに影響を与えないために必要になります。
今回使うのは、CFX2_PickupStar ツリー内にある ShinyStars Small だけです。
ですので、ShinyStars Small を Flag にドラッグ&ドロップして ShinyStars Small を Flag 直下にもってきます。
残りの CFX2_PickupStar は不要なので消去して下の画像のような状態にします。
次に ShinyStars Small のインスペクタを変更します。
変更するところはTransform の Position、Scaleをそれぞれ、画像のように0と2に変更し、
Pirticle System のLooping にチェックを入れるだけです。
これだけで、キラキラエフェクトの追加は終了です。
Playボタン(▶ボタン) でシーンを実行すると以下のようになります。
これでフラッグの完成です！
おわりに
今回はUnityのみの機能を使い、マリオなんかで使われているような中間フラッグを作ってみました。
3Dの物をモデリングする場合は Blender などの外部ツールを用いるのが一般的だと思いますが、こういった単純な物の場合はUnityだけで作ったほうが簡単な場合があります。
何か物を作る際には、こういった方法も使ってみてください。
次回はこのフラッグを使い、ゲームオーバーしたら中間地点から開始という機能を作りたいと思います。
この中間フラッグを実際に使ったゲームをアップルストアとグーグルプレイで公開しています。
無料でプレイ可能なので、少しでも興味を感じた人はプレイしてみてください。
Android版も無事リリースできました！！！
— ポン吉 (@ponkitigames) February 1, 2021
にゃんこが大暴れするマ〇オみたいな本格的アクションゲームです！
全ステージ無料なので、ぜひ遊んでやってくだい！
ダウンロードURL
IOShttps://t.co/01RyBPeeq3
Androidhttps://t.co/NDN4iLWXxT#Unity #unity3d #gamedev #ゲーム開発 #ゲーム pic.twitter.com/vrnzMY5sVH