unityでスプライトをぐねぐねさせたい

Question

前提・実現したいこと

初めまして！
unityでrpgのプログラミングに挑戦している初心者です。

unityでポケモン金銀のへんしんのように、
四角形平面オブジェクトをスクリプトから"ぐねぐね"させることは可能でしょうか？
どんな方法が考えられますか？
調べながら頑張ります。

私が思い付くのはシェーダーを使うことぐらいで。。

リンク内容
↑0:53頃へんしんがうつってます。

左辺で間隔を開けて3点、
右辺でもずらして3点。
左右に広げて戻す表示というと、
やはりシェーダー以外ではできないでしょうか？

Answer 1

おそらくおっしゃる通りシェーダーを工夫するのが楽なんじゃないかと思います。
例えばスプライト用のマテリアルとして下記のようなものを作り...

Shader "Sprites/Wobbled"
{
	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
		[PerRendererData] _TextureCenter ("Texture Center", Float) = 0.5
		[PerRendererData] _TextureScale ("Texture Scale", Float) = 1
		[PerRendererData] _Amplitude ("Amplitude", Float) = 0
		[PerRendererData] _Wavenumber ("Wavenumber", Float) = 1
		[PerRendererData] _Offset ("Offset", Float) = 0
	}

	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 vert
			#pragma fragment frag
			#pragma target 2.0
			#pragma multi_compile_instancing
			#pragma multi_compile_local _ PIXELSNAP_ON
			#pragma multi_compile _ ETC1_EXTERNAL_ALPHA
			#include "UnitySprites.cginc"

			struct v2fCustom
			{
				float4 vertex : SV_POSITION;
				fixed4 color : COLOR;
				float2 texcoord : TEXCOORD0;
				float positionY : TEXCOORD1;
				UNITY_VERTEX_OUTPUT_STEREO
			};

			float _TextureCenter;
			float _TextureScale;
			float _Amplitude;
			float _Wavenumber;
			float _Offset;

			v2fCustom vert(appdata_t IN)
			{
				v2fCustom OUT;

				UNITY_SETUP_INSTANCE_ID (IN);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

				// スプライト向けの座標変換を行うが、このときに併せて振幅に応じて
				// メッシュを水平方向に引き伸ばし、波打たせるための余地を確保する
				float scale = _Amplitude + 1.0;
				OUT.vertex = UnityFlipSprite(IN.vertex * float4(scale, 1.0, 1.0, 1.0), _Flip);
				OUT.vertex = UnityObjectToClipPos(OUT.vertex);
				OUT.texcoord = float2(_TextureCenter + (IN.texcoord.x - _TextureCenter) * scale, IN.texcoord.y);
				OUT.color = IN.color * _Color * _RendererColor;

				// メッシュ頂点のY座標を送る
				OUT.positionY = IN.vertex.y;

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

				return OUT;
			}

			fixed4 frag(v2fCustom IN) : SV_Target
			{
				// Y座標に応じてテクスチャをサンプリングする水平位置をずらす
				IN.texcoord.x += _TextureScale * _Amplitude * sin(2.0 * UNITY_PI * _Wavenumber * (IN.positionY + _Offset));

				fixed4 c = SampleSpriteTexture(IN.texcoord) * IN.color;
				c.rgb *= c.a;
				return c;
			}
			ENDCG
		}
	}
}

シーン上のスプライトオブジェクトには、シェーダーへパラメーターを送り込むための下記のような補助スクリプトをアタッチしたところ...

using UnityEngine;

[RequireComponent(typeof(SpriteRenderer))]
public class Wobbler : MonoBehaviour
{
	private static readonly int TextureCenter = Shader.PropertyToID("_TextureCenter");
	private static readonly int TextureScale = Shader.PropertyToID("_TextureScale");
	private static readonly int Amplitude = Shader.PropertyToID("_Amplitude");
	private static readonly int Wavenumber = Shader.PropertyToID("_Wavenumber");
	private static readonly int Offset = Shader.PropertyToID("_Offset");

	[Min(0.0f)] public float amplitude;
	[Min(0.0f)] public float wavenumber = 1.0f;
	public float offset;
	
	private MaterialPropertyBlock properties;
	private SpriteRenderer spriteRenderer;

	private void Update()
	{
		var sprite = this.spriteRenderer.sprite;
		if (sprite == null)
		{
			return;
		}

		this.spriteRenderer.GetPropertyBlock(this.properties);
		this.properties.SetFloat(TextureCenter, sprite.pivot.x * sprite.texture.texelSize.x);
		this.properties.SetFloat(TextureScale, (sprite.texture.texelSize.x * sprite.textureRect.width) / ((this.amplitude + 1.0f) * sprite.bounds.size.x));
		this.properties.SetFloat(Amplitude, this.amplitude);
		this.properties.SetFloat(Wavenumber, this.wavenumber);
		this.properties.SetFloat(Offset, this.offset);
		this.spriteRenderer.SetPropertyBlock(this.properties);
	}

	private void OnEnable()
	{
		this.spriteRenderer = this.GetComponent<SpriteRenderer>();
		this.properties = new MaterialPropertyBlock();
	}
}

下図のようになりました。

ただし、スプライトには設定項目がいろいろありますが、設定によってはうまくいかないケースがあるかもしれません。特にMesh TypeはTightよりもFull Rectの方が無難かと思います。今回の例では波打ちの余地を作るために単純にスプライトのメッシュを水平方向に引き伸ばしてみたのですが、Tightだとメッシュの形がスプライトの不透明部分に合わせた不定形になりますので、波打ちに部分的な欠けが生じてしまう可能性があるでしょうね。

Comments

[shioduke-kurage]

回答ありがとうございます！
ふむやはりシェーダー。。！

実はシェーダーを書いたことはなくて、
まだわからないところがありますが。。
今から頑張って読み解いてみます！