なんの記事？
複数パーツのSpriteで構成されたキャラクターを透過した時の問題と解消法についての記事です！
複数のSpriteでキャラクターを表現する場合、Rendererが重なることになるので、
透過をかけたときに重なったところが変に表示されてしまいます。
今回は、この問題を解消しつつ、更に各パーツをアニメーションさせる方法についての記事です。
Shaderを用意する
この問題は、異なるRendererが重なって、かつ別々に画像を描画しているために発生します。
そこで今回は、複数枚の画像を一括で処理してまとめたレンダリング結果を返すShaderを作ります！
基本的にはフラグメントシェーダーしかいじっていませんが、全体を載せておきます。
LayeredShaderコード
Shader "Custom/LayeredShader"
{
Properties
{
//Layerの重ね順を表現するために、1から5の数字を付けています。5が一番上になります。
//初期値blackは透明な黒の指定になります。
_Layer5("Layer5", 2D) = "black" {}
_Layer4("Layer4", 2D) = "black" {}
_Layer3("Layer3", 2D) = "black" {}
_Layer2("Layer2", 2D) = "black" {}
_Layer1("Layer1", 2D) = "black" {}
_Color("Color", Color) = (1,1,1,1)
}
SubShader
{
Tags
{
"Queue" = "Transparent"
"RenderType" = "Transparent"
"RenderPipeline" = "UniversalPipeline"
"IgnoreProjector" = "True"
"PreviewType" = "Plane"
}
Cull off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _Layer5;
sampler2D _Layer4;
sampler2D _Layer3;
sampler2D _Layer2;
sampler2D _Layer1;
float4 _Layer5_ST;
float4 _Layer4_ST;
float4 _Layer3_ST;
float4 _Layer2_ST;
float4 _Layer1_ST;
half4 _Color;
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _Layer1);
return o;
}
float4 frag(v2f i) : COLOR
{
//各レイヤーの描画情報を配列に格納します
fixed4 layers[5] = {
tex2D(_Layer1, i.uv),
tex2D(_Layer2, i.uv),
tex2D(_Layer3, i.uv),
tex2D(_Layer4, i.uv),
tex2D(_Layer5, i.uv)
};
fixed4 c = float4(0, 0, 0, 0);
//不透明度の累乗を記録するための変数
float alphaAccum = 1;
//上のレイヤーから処理し始めます
for (int j = 4; j >= 0; --j) {
fixed4 layer = layers[j];
//記録された不透明度の累乗を使って、このピクセルの描画を決めます。
//例えば上のレイヤーが全て透明であった場合には、このレイヤーを、アルファ値を考慮して加算します。
//不透明度の累乗が0になった場合には、このピクセルは描画されません。
c.rgb += layer.rgb * layer.a * alphaAccum;
//このピクセルにたいする、ここまでの 不透明度の累乗を記録します。
alphaAccum *= 1 - layer.a;
}
//値が1を超えないように制限します
c.rgb = min(c.rgb,1);
c.a = min(1 - alphaAccum,1);
//Colorプロパティで指定された色をかけます
return c * _Color;
}
ENDCG
}
}
}
Materialを用意する
作ったShaderを適用したMaterialを作りましょう
InspcterからShaderを指定して、各Layerに画像を貼り付けてください。
Layer2~5の画像の描画位置は、Layer1のサイズを基準に取っています。
画像は、全て同じピクセル数で描き出して、不要部分は透過してください。
Rendererを用意して、半透明にしてみる
さっき作ったマテリアルをattachしてみましょう。
今回はMeshRendererを使用しています。
3DObject>Planeなどを作成して、回転させて使ってください。
(私はRotation x:90 y:180で使っています。スケールはxとzで調節します。)
Sprite Rendererでも同じ設定で動作します。
万一位置ずれなどが起きる場合は画像のImport Setting > Mesh TypeをFull Rectにしてみてください。
Sceneビューに5つのレイヤーの重なった像が表示されているかと思います。
Materialの表示欄からカラーの透明度を変更すると、全体が半透明になっていきます！
一旦ここまでで成功です！ 続いてアニメーション周りの設定をしていきます。
Animatiorと連携するためのスクリプトを用意する
ExecuteAlwaysアトリビュートと、
MonobehaviourのOnDidApplyAnimationPropertiesメソッドを使用して、
EditorでもRuntimeでも、Animatiorに変化があったらMaterialを上書きするスクリプトを書きます。
RendererTexLayeredAnimationコード
using UnityEngine;
//アニメーションのタイミングで、マテリアルのテクスチャを変更する Editor上でも起動させたいためExecuteAlwaysを使用する
[ExecuteAlways]
[RequireComponent(typeof(Renderer))]
public class RendererTexLayeredAnimation : MonoBehaviour
{
//重ね順を表現するため、Layer5からLayer1の順に設定する
public Sprite layer5;
public Sprite layer4;
public Sprite layer3;
public Sprite layer2;
public Sprite layer1;
//スプライトが設定されているかどうかを判定する
private bool IsSpriteSet => layer1 is not null || layer2 is not null || layer3 is not null ||
layer4 is not null || layer5 is not null;
//マテリアルへのアクセスが多いので、IDをキャッシュしておく
private int _layer5ID = -1;
private int Layer5ID => _layer5ID is -1 ? _layer5ID = Shader.PropertyToID("_Layer5") : _layer5ID;
private int _layer4ID = -1;
private int Layer4ID => _layer4ID is -1 ? _layer4ID = Shader.PropertyToID("_Layer4") : _layer4ID;
private int _layer3ID = -1;
private int Layer3ID => _layer3ID is -1 ? _layer3ID = Shader.PropertyToID("_Layer3") : _layer3ID;
private int _layer2ID = -1;
private int Layer2ID => _layer2ID is -1 ? _layer2ID = Shader.PropertyToID("_Layer2") : _layer2ID;
private int _layer1ID = -1;
private int Layer1ID => _layer1ID is -1 ? _layer1ID = Shader.PropertyToID("_Layer1") : _layer1ID;
private Renderer _meshRenderer;
private Renderer ThisMeshRenderer => _meshRenderer? _meshRenderer : _meshRenderer = GetComponent<Renderer>();
private Material _material;
//Editor上でも起動するため、.sharedMaterial;を使用する。
private Material ThisMaterial => _material? _material : _material = ThisMeshRenderer.sharedMaterial;
//OnDidApplyAnimationPropertiesを使うと、Animationに変化があったタイミングで呼ばれる
void OnDidApplyAnimationProperties()
{
if ( ThisMaterial is null) return;
if ( IsSpriteSet is false ) return;
if(layer1 is not null) ThisMaterial.SetTexture( Layer1ID , layer1.texture );
if(layer2 is not null) ThisMaterial.SetTexture( Layer2ID , layer2.texture );
if(layer3 is not null) ThisMaterial.SetTexture( Layer3ID , layer3.texture );
if(layer4 is not null) ThisMaterial.SetTexture( Layer4ID , layer4.texture );
if(layer5 is not null) ThisMaterial.SetTexture( Layer5ID , layer5.texture );
}
}
これを、MeshRendererと同じGameObjectにアタッチしておいてください。
Animatorも必要になるので、アタッチして、AnimationControllerを作っておきましょう。
Animationを作ってみる
AnimationタブのAddPropertyから、RendererTexLayeredAnimationの5つのLayerを追加してください。
それぞれのLayerに画像を指定してあげます。
1フレーム目には、元の状態の画像を登録してください。
全て登録すると、個別パーツをアニメーションさせながら、半透明が表現できる仕組みになりました！！
おわりに
今回は、2Dゲームを作る上で地味に苦戦した部分を記事にしてみました！！
実測はしていませんが、Rendererをまとめて、GPU内で処理を完結させるため、
おそらく重ね描画よりも軽くなると思います！
謝辞
偽典オーさまより素材をお借りました。ありがとうございます！
http://albireo.watson.jp/ukgk/freeshell.html
また、問題の解決にあたって、Unityゲーム開発者ギルドの皆様にたくさんのアドバイスを頂きました！
ありがとうございました！！