スマブラP5演出byUnity

https://youtu.be/zKhnQ7ZYgQI

◆ 目次

◆ OP

◆ 出現その1

◆ 出現その2

◆ タイトル表示

◆ OP

▼ 動き

冒頭

線が縦、横の順に一瞬で細くなる（本当は線が伸びてるんだけどそこは省略）

下の画像の太さへ

https://gyazo.com/cb3ddb39b1254eef9b7e3b08adc86927

白い部分が広がってホワイトアウト

▼ 実装

参考ページ

やり方

カメラのポストエフェクトを使う

白い部分の大きさは数値をスクリプトから指定する

シェーダー

code:SSBP5OP.shader.cs

Shader "Unlit/SSBP5OP"

{

SubShader

{

Pass

{

CGPROGRAM

float _HLWidth;

float _VLWidth;

fixed4 frag (v2f_img i) : COLOR

{

float vd = 0.28;

float hd = 0.35;

float minV = vd - _VLWidth;

float maxV = vd + _VLWidth;

float minH = hd - _HLWidth*0.8;

float maxH = hd + _HLWidth*0.8;

if((i.uv.x > minV && i.uv.x < maxV) || (i.uv.y > minH && i.uv.y < maxH))

{

return fixed4(1,1,1,1);

} else

{

return fixed4(0,0,0,1);

}

}

ENDCG

}

}

}

C#スクリプト

DOTweenを使用

code:OpPostEffect.cs

using System.Collections;

using UnityEngine;

using DG.Tweening;

public class OpPostEffect : MonoBehaviour

{

private Material opMaterial = null;

private void Awake() {

StartCoroutine(OP());

}

private void OnRenderImage(RenderTexture src, RenderTexture dest)

{

Graphics.Blit (src, dest, opMaterial);

}

private IEnumerator SetMaterialFloat(float startValue, float endValue, float duration, Ease ease, float delay=0, bool initMode=false)

{

string[] properties = new string[] { "_VLWidth", "_HLWidth" };

foreach(string property in properties)

{

if(initMode) opMaterial.SetFloat(property, startValue);

yield return AppUtil.Wait(delay);

DOTween.To(

()=> startValue,

x =>

{

startValue = x;

opMaterial.SetFloat(property, startValue);

},

endValue,

duration

).SetEase(ease);

}

}

private IEnumerator OP() {

yield return AppUtil.Wait(1f);

yield return SetMaterialFloat(0.008f, 0.001f, 0.0005f, Ease.InExpo, 0.1f, true);

yield return AppUtil.Wait(0.8f);

yield return SetMaterialFloat(0.001f, 0.07f, 0.15f, Ease.InExpo);

yield return AppUtil.Wait(1.15f);

yield return SetMaterialFloat(0.07f, 0.8f, 0.8f, Ease.InQuart);

}

}

▼ 完成物

どうしてもGIFで撮ると元よりも動きがカクカクしちゃうなあ

https://gyazo.com/61f19b14aae6083d8146f79cef09ae03

◆ 出現その1

保留

▼ 動き

白い背景に赤の裂け目を入れる（余裕があったら...）

キャラが回転しながらアップに

ある程度まできたら画面下に消える

https://gyazo.com/5a3f6bc68553e103fae7854069bac4b9

https://gyazo.com/d7d71e9cfacb4212a959a8bf7d981849

◆ 出現その2

上からキャラが出現

地面に飛び降りて、着地点から波紋

https://gyazo.com/c921266cd24429e9b59eb22b9624478b

▼ 実装

手順

ポストエフェクト解除

着地エフェクト作成

着地動作作成

着地エフェクト

楕円を広げる→楕円の線が細くなって消える

https://gyazo.com/f04d400d136ecc086fefa0986df4db04

以下のシェーダーをアタッチしたMaterialを、画面幅と等幅のUI ImageのMaterialに指定

code:Background.shader.cs

Shader "Unlit/Background"

{

Properties

{

_Color ("Color", Color) = (1,1,1,1)

_STY("Center Y", Float) = 0.5

}

SubShader

{

Tags { "RenderType"="Opaque" }

LOD 100

Pass

{

CGPROGRAM

float4 _Color;

float _EllipseX;

float _EllipseY;

float _Width;

float _STY;

fixed4 frag (v2f_img i) : SV_Target

{

float2 st = float2(0.5, _STY);

float r1 = pow(((i.uv.x-st.x)/_EllipseX), 2) + pow(((i.uv.y-st.y)/_EllipseY), 2);

float r2 = pow(((i.uv.x-st.x)/(_EllipseX-_Width)), 2) + pow(((i.uv.y-st.y)/(_EllipseY-_Width)), 2);

if(r1 < 1 && r2 > 1)

{

return 0;

}

return _Color;

}

ENDCG

}

}

}

スクリプトからシェーダーのプロパティの値を変動させる

シェーダーで描画する楕円の中心のy座標にはキャラの着地点のViewport座標にオフセットを追加したのものを渡す（対象マテリアルが画面幅と等幅のUI Imageにアタッチされてるからできるやつ）

code:MainChara.cs

private void SetMaterialFloat(string property, float startValue, float endValue, float duration, Ease ease)

{

DOTween.To(

()=> startValue,

x =>

{

startValue = x;

bgMat.SetFloat(property, startValue);

},

endValue,

duration

).SetEase(ease);

}

private IEnumerator LandEff()

{

yield return AppUtil.Wait(landDuration-0.2f);

landPos.y -= 2f;

float landY = Camera.main.WorldToViewportPoint(landPos).y;

bgMat.SetFloat("_STY", landY);

float startValue = 0;

float endX = 0.43f;

float endY = 0.13f;

float endWidth = 0.03f;

SetMaterialFloat("_EllipseX", startValue, endX, landEffDuration, landEffEase);

SetMaterialFloat("_EllipseY", startValue, endY, landEffDuration, landEffEase);

SetMaterialFloat("_Width", startValue, endWidth, landEffDuration, landEffEase);

yield return AppUtil.Wait(landEffDuration+0.05f);

SetMaterialFloat("_Width", endWidth, 0, 0.2f, Ease.OutQuart);

}

キャラの着地動作

シェーダー

シェーダーで縦横のスケールを変動させられるように記述（Transformでもよかったのだけど、シェーダでやってみたかったのだよ...）

code:Silhouette.shader.cs

Properties

{

_MainTex ("Texture", 2D) = "white" {}

}

SubShader

{

Tags { "RenderType"="Transparent" }

LOD 100

Blend SrcAlpha OneMinusSrcAlpha

Pass

{

CGPROGRAM

struct appdata

{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f

{

float2 uv : TEXCOORD0;

float4 vertex : SV_POSITION;

};

sampler2D _MainTex;

float4 _MainTex_ST;

float _ScaleX;

float _ScaleY;

v2f vert (appdata v)

{

float4x4 sizeMat = float4x4

(

float4(_ScaleX, 0, 0, 0),

float4(0, _ScaleY, 0, 0),

float4(0, 0, 1, 0),

float4(0, 0, 0, 1)

);

v.vertex = mul(sizeMat, v.vertex);

v2f o;

o.vertex = UnityObjectToClipPos(v.vertex);

o.uv = TRANSFORM_TEX(v.uv, _MainTex);

return o;

}

fixed4 frag (v2f_img i) : SV_Target

{

fixed4 col = tex2D(_MainTex, i.uv);

col.rgb = float3(0,0,0);

return col;

}

ENDCG

}

}

スクリプト

着地タイミングでスクリプトからシェーダーの値を変化させる

code:MainChara.cs

public void Landing()

{

this.transform.position = initPos;

this.transform.DOMoveY(landPos.y, landDuration).SetEase(Ease.InExpo)

.OnComplete(()=> {

SetMaterialFloat(charaMat, "_ScaleX", 0.5f, 1, landEffDuration*0.3f, Ease.OutBack);

SetMaterialFloat(charaMat, "_ScaleY", 1.4f, 1, landEffDuration*0.3f, Ease.OutBack);

});

StartCoroutine(LandEff());

}

▼ できあがり

https://gyazo.com/3258e937995e7192731715bf9469266f

◆ タイトル表示

▼ 動き

キャラが横にスライド移動→画面外へ

キャラの後に黒い線で軌跡が1本残る→だんだん細くなる

Porisona 5 とタイトル表示

https://gyazo.com/0fee2c51f9f7efda435d2e3ace5ab7d3

https://gyazo.com/014fc75ef29dd2dcb385dd13c52978ad

文字表示参考

▼ 実装

RectMask 2Dを使用

▼ できあがり

https://gyazo.com/6f8cc6ad01d3129d989c3fd317ebf68b

◆ 必殺技予備動作

保留

▼ 動き

2:06~

溜め

https://gyazo.com/db79e3386fa276ce25718e9c7175521c