画像をゆらゆらさせるシェーダー [Unity]

シェーダーをいじる練習で、下のGIFアニメみたいな動きをするやつを作ってみました。

最初、Unityの「Sprite/Default」シェーダーを複製していじるにはどうするんだろうと思ってたら、下記の記事でUnityで標準で使えるシェーダーの取得方法が説明されていました。(良記事!)

 ・uGUIのシェーダーを改造してシェーダーを練習…のススメ

Unity 2017.2.2 用のビルトインシェーダーをダウンロードして、「DefaultResourcesExtra/Sprites-Default.shader」をUnityのプロジェクトにインポートして開いたところ、編集したい箇所にインクルード先も含まれていたので、インクルード先「CGIncludes/UnitySprites.cginc」のコードもひとまとめにしました。

そして編集し終わったのが以下のコードになります。

Shader "Sprites/Sin"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
        [HideInInspector] _RendererColor ("RendererColor", Color) = (1,1,1,1)
        [HideInInspector] _Flip ("Flip", Vector) = (1,1,1,1)
        [PerRendererData] _AlphaTex ("External Alpha", 2D) = "white" {}
        [PerRendererData] _EnableExternalAlpha ("Enable External Alpha", Float) = 0

        _SinWave("SinWave", Range(0, 1)) = 0.2
        _SinWidth("SinWidth", Range(0, 1)) = 0.5
        _SinSpeed("SinSpeed", Range(0, 1)) = 0.2
        _SinColorDistant("SinColorDistant", Range(0, 1)) = 0.2
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Cull Off
        Lighting Off
        ZWrite Off
        Blend One OneMinusSrcAlpha

        Pass
        {
        CGPROGRAM
            #pragma vertex SpriteVert
            #pragma fragment SpriteFrag
            #pragma target 2.0
            #pragma multi_compile_instancing
            #pragma multi_compile _ PIXELSNAP_ON
            #pragma multi_compile _ ETC1_EXTERNAL_ALPHA

			#include "UnityCG.cginc"

			#ifdef UNITY_INSTANCING_ENABLED

				UNITY_INSTANCING_CBUFFER_START(PerDrawSprite)
					// SpriteRenderer.Color while Non-Batched/Instanced.
					fixed4 unity_SpriteRendererColorArray[UNITY_INSTANCED_ARRAY_SIZE];
					// this could be smaller but that's how bit each entry is regardless of type
					float4 unity_SpriteFlipArray[UNITY_INSTANCED_ARRAY_SIZE];
				UNITY_INSTANCING_CBUFFER_END

				#define _RendererColor unity_SpriteRendererColorArray[unity_InstanceID]
				#define _Flip unity_SpriteFlipArray[unity_InstanceID]

			#endif // instancing

			CBUFFER_START(UnityPerDrawSprite)
			#ifndef UNITY_INSTANCING_ENABLED
				fixed4 _RendererColor;
				float4 _Flip;
			#endif
				float _EnableExternalAlpha;
			CBUFFER_END

			// Material Color.
			fixed4 _Color;

			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_OUTPUT_STEREO
			};

			v2f SpriteVert(appdata_t IN)
			{
				v2f OUT;

				UNITY_SETUP_INSTANCE_ID (IN);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

			#ifdef UNITY_INSTANCING_ENABLED
				IN.vertex.xy *= _Flip.xy;
			#endif

				OUT.vertex = UnityObjectToClipPos(IN.vertex);
				OUT.texcoord = IN.texcoord;
				OUT.color = IN.color * _Color * _RendererColor;

				#ifdef PIXELSNAP_ON
				OUT.vertex = UnityPixelSnap (OUT.vertex);
				#endif

				return OUT;
			}

			sampler2D _MainTex;
			sampler2D _AlphaTex;
			float _SinWave;
			float _SinWidth;
			float _SinSpeed;
			float _SinColorDistant;

			float _wave;
			float _speed;
			float _width;
			float _clrDis;

			float2 posColor(float2 inUV, float n)
			{
				return inUV + float2(sin(inUV.y *_wave + _speed + _clrDis * n) * _width, 0);
			}

			fixed4 SampleSpriteTexture (float2 uv)
			{
				fixed4 color = tex2D (_MainTex, uv);

			#if ETC1_EXTERNAL_ALPHA
				fixed4 alpha = tex2D (_AlphaTex, uv);
				color.a = lerp (color.a, alpha.r, _EnableExternalAlpha);
			#endif

				return color;
			}

			fixed4 SpriteFrag(v2f IN) : SV_Target
			{

				fixed4 color = fixed4(0, 0, 0, 0);

				float2 inUV = IN.texcoord;

				_wave = _SinWave * 100;
				_speed = _Time.y * _SinSpeed * 20.0;
				_width = _SinWidth * 0.2;
				_clrDis = _SinColorDistant * _SinWidth * 5;

				if(_SinColorDistant==0){//カラーチャンネルを分けない

					float mysin = sin(inUV.y *_wave + _speed) * _width;
					color = tex2D(_MainTex, inUV + float2(mysin, 0));

				}else{//カラーチャンネルを個別に設定

					color.r = tex2D(_MainTex, posColor(inUV, 2)).r;
					color.g = tex2D(_MainTex, posColor(inUV, 1)).g;
					color.b = tex2D(_MainTex, posColor(inUV, 0)).b;
					color.a = (
						tex2D(_MainTex, posColor(inUV, 2)).a+
						tex2D(_MainTex, posColor(inUV, 1)).a+
						tex2D(_MainTex, posColor(inUV, 0)).a
					)/3;

				}

				color *= IN.color;
				color.rgb *= color.a;

				return color;
			}

        ENDCG
        }
    }
}

シェーダーのインスペクタに表示される4つのスライダーの意味
 ・SinWave : ウェーブの縦の間隔
 ・SinWidth : 揺れ幅
 ・SinSpeed : 揺れる速度
 ・SinColorDistant : 各カラーチャンネルの間隔

透過部分を含む画像の注意点
 ・GIFアニメ上部の黒フチの円画像はサイドの端が切れないように余白を多めに取っています。
 ・さらに完全な透過部分(おおまかなブロック)はシェーダーが処理を省略しているような感じなので、その部分は画像がないものとみなされてしまいました。(アニメーション時にフチが切れてしまいました。)その対策として、透過PNGの背景を1/255くらいの透過度にしています。

画像やフォントの参照先 [Unity]

uGUIのImageコンポーネント等の画像参照は何を参照しているのかを調べてみました。

下記画像のようにプロジェクトを2つ作ります。

それぞれにimgフォルダを作成し、それぞれのフォルダにishi.pngを入れます。

プロジェクト1の方のmain1シーンで上記画像のようにuGUIのImageコンポーネントで画像を表示させます。

プロジェクト1の方のmain1シーンをプロジェクト2に複製します。

プロジェクト2の方のmain1シーンを開くと画像は表示されず、Souce Imageが “Missing” となってしまいます。

画像のディレクトリパスは同じなのになんでだろうと思い、
いろいろ試していたら、画像と同じディレクトリに作成されるmetaファイルのguidを参照して画像を探しているということが分かりました。

つまり、画像とセットになっているmetaファイルさえ同じなら、ディレクトリパスが変わっても参照が切れないということみたいです。
上記テストの場合は、metaファイルが違うので、”Missing” となってしまいました。

もし、別のプロジェクトで共通の画像やフォントや音声ファイル等を使っていて、後々はプロジェクトをガッチャンコしたいという場合は、あらかじめ共通の画像やフォントや音声ファイル等のmetaファイルを共有しておくと、ガッチャンコ作業がスムーズになりそうです。

むしろ、metaファイルさえ共有されていれば、それぞれのプロジェクトでは同じ画像ファイル名でダミーの画像を使っていてもいいということですね。

影をベタ塗りするシェーダー [Unity]

Unityのシェーダーのしくみを理解しようと思いまして、練習として影をグラデーションではなく1色のベタ塗りで表現するシェーダーを作ってみました。

上記はキャラや地面に今回作ったシェーダーを当てています。

コードは以下の感じです。

ライティングの部分はこちらの記事を参考にさせていただきました。ありがとうございます!
 ・シェーダー入門したくないけど書いてみたい その6 ライティング編 - 波打際のブログさん

Shader "Custom/SolidColor" {

	Properties{
		_Color("Color", Color) = (1,1,1,1)
		_MainTex("Albedo (RGB)", 2D) = "white" {}
		_Parting("Shade Parting", Range(0,1)) = 0.5
	}

	SubShader{
		Pass{
			Tags{ "RenderType" = "Opaque" "LightMode" = "ForwardBase" }

			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fwdbase

			#include "UnityCG.cginc"
			#include "AutoLight.cginc"

			fixed4 _Color;
			sampler2D _MainTex;
			half _Parting;
			uniform fixed4 _LightColor0;

			struct v2f {
				float4 pos      : SV_POSITION;
				float3 lightDir : TEXCOORD0;
				float3 normal   : TEXCOORD1;
				float2 uv:TEXCOORD2;
				LIGHTING_COORDS(3, 4)
			};

			v2f vert(appdata_base v, float2 uv : TEXCOORD2) {
				v2f o;

				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
				o.lightDir = normalize(ObjSpaceLightDir(v.vertex));
				o.normal = normalize(v.normal).xyz;
				o.uv = uv;

				TRANSFER_VERTEX_TO_FRAGMENT(o);
				TRANSFER_SHADOW(o);

				return o;
			}

			fixed4 frag(v2f i) : SV_Target{

				fixed atten = LIGHT_ATTENUATION(i);
				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT;
				fixed4 lightColor = _LightColor0 * saturate(dot(i.lightDir, i.normal));

				fixed4 c = tex2D (_MainTex, i.uv) * _Color;

				fixed3 shade = (0.5 * lightColor * atten) + ambient;
				fixed f = (shade.r < _Parting) ? -0.08 : 0;

				c.rgb = c+ fixed3(f, f, f);

				return c;
			}
			ENDCG
		}
	}
	Fallback "Diffuse"
}

球体を使った方が分かりやすいので、団子のモデルで解説しようと思います。

上記はUnity5のデフォルトで用意されている「Standard」シェーダーです。

今回作ったシェーダーに変更すると上記のようになります。

どんな処理を行っているかといいますと

まずは裏で、モデルにグレーの色を塗って影がどんな感じにでるのかを調べます。(ここは実際には描画しません。)

一定の明るさに達しない箇所がベタ塗りの影になります。

次に、上記のような影がまったく付いてない状態のものに、先ほど計算したベタ塗りの影を足してあげるということを今回のシェーダーで行っています。

後、影の割合を個別調整できるように、上記の「Shade Parting」をインスペクタでいじれるようにしています。

今回シェーダーのことを調べてみて、裏でこんな処理をやってたのかと(なんとなく)分かってスッキリしました。

スマホ用ゲームアプリ「サッカーピープル」をリリースしました

真上からの視点で直観的にプレイできるサッカーゲームアプリです。

マルチタップ対応で、選手を2人同時に動かしたりもできます。

選手はいつでも自由に動かせるので、工夫次第でいろんな戦術で戦えます。

数十種類いる敵チームはすべて特徴が違います。
トーメントやリーグ戦を用意していますので、是非スマホやタブレットでアプリをダウンロードしてお楽しみください!(iPadにも対応しています。)

サッカーピープル on App Store  サッカーピープル on Google Play



【攻略ガイド】
本ゲームをより楽しんでいただく為に攻略ガイド記事を作成しました。

「サッカーピープル」攻略ガイド(iPhone PLUS) (2017/3/24)


【レビュー記事】
当アプリを以下のサイトでご紹介いただきました。
ありがとうございます!
(カッコ内はこのページに追記した日です)

Game Cast (2017/1/11)
Appon! (2017/1/12)
暗黒社 (2017/1/14)
AppliviOS / Android(2017/1/18)
RPGアプリの部屋 (2017/2/6)

AdMob と Nifty Cloud のプッシュ通知を共存させる [Unity]

下記の条件でNifty Cloudのプッシュ通知を使おうとしてドハマりしてしまったので、対策した方法をメモに残しておきます。

環境:
・Unity 5.4.3f1
・Google Mobile Ads Unity Plugin 3.0.5

上記環境で mobile backend のUnity用SDK「NCMB.2.2.0」をインストールして、Android用にビルドしたところ、

Uncaught translation error: java.lang.IllegalArgumentException: already added: ~~

という内容のエラーが出てビルドで出来ませんでした。
調べてみると、クラスファイルが重複しているらしく、いろいろ調べつつ試してみました。

結果としては、下記の方法でビルドが成功し、AdMobとPush通知も動作確認できました。
※いろいろ試している内に偶然できたその場しのぎな方法なので、もしこの問題でお困りの方は参考までにということで。。

まず「NCMB.2.2.0」でインポートした下記ファイルを削除します。
 ・Assets/Plugins/Android/android-support-v4.jar
 ・Assets/Plugins/Android/google-play-services.jar
 ・Assets/Plugins/Android/res/values/version.xml

次に
・Assets/PlayServicesResolver/Editor/AdMobDependencies.cs
のAdMobDependencies関数内に下記のコードを追加します。

svcSupport.DependOn("com.google.android.gms", "play-services-gcm", "LATEST");

次に、Unityのメニューから下記を実行します。
Assets > Google Play Services > Resolve Client Jars

すると下記画像のように「play-services-gcm-10.0.1.aar」が出来ます。

この状態でUnityからAndroid用にビルドすると成功して、AdMobもPush通知も動作しました。

【補足】
もし、「play-services-gcm-10.0.1.aar」はやっぱりいらないということになると、aarファイルを削除してもすぐに同ファイルが復活してしまいますので、復活させないようにするには下記の手順が必要です。

 ・「play-services-gcm-10.0.1.aar」を削除する。
 ・「Assets/PlayServicesResolver/Editor/AdMobDependencies.cs」で先ほど追加したコードを削除
 ・「ProjectSettings/GoogleDependencyAdMobUnity.xml」のそれらしい箇所を削除

1 2 3 4 5 6 ... 20

ABOUT

MY APPLI

サッカーピープル
サッカーピープル

操作のしやすさ最優先の
自由自在なサッカーゲームです
iOS版 / Android版

コロッコトロッコ
コロッコトロッコ

石ころのコロッコを転がしながら
サラリーマンを会社へ運ぶゲームです
iPhone版 / Android版

CATEGORIES

ARCHIVES

TAGS

3Dプリント AIR ANE Arduino Away3D client work DIY Flash Funnel JavaScript Kinect LED openFrameworks PhotoShop Progression Qubicle Unity Xcode アプリ インターバル撮影 カメラ キャラ ゲーム制作 コロッコトロッコ スクリーンセーバー デバッグ フットサル ミニマル ランニング レーザーカッター 事務所 低山部 作品 動物 塗装 展示会 文字 料理 福岡てら子 美食家 街ぶらり 道具 鉄道 電子工作

FEEDS

SNS

--

Arduinoをはじめよう
Arduinoをはじめよう

電子工作が未経験の人にも
分かりやすい入門書

Arduinoをはじめようキット
Arduinoをはじめようキット

上の書籍の内容が
一通り試せるツールセット

Prototyping Lab ―「作りながら考える」ためのArduino実践レシピ
Prototyping Lab

「Arduinoをはじめよう」より
深く掘り下げた内容の実践書

Make: Electronics
Make: Electronics

電子工作の基礎から実践まで