こんばんわ!
ngs_projectです。



突然ですが、今日は
塩の作り方を説明したいと思います。 


作り方といっても、
蒸留方法とか、レシピ的な話ではありません。 


塩エフェクトの作り方の話です。



BlogPaint

さて、まるでどこか宇宙のような画像ですが、
この画像が塩エフェクトの全てです。
(※黒い部分は透過処理されます)



この画像をプログラムでぐりぐり動かすことで

effect
 (※画像容量制限の関係で見づらくなってます)

このような、塩エフェクトの動きを実現しています。
ええ、わざわざキャプチャーしてきました。地味に大変ですよねこういうの。

※このGIF画像・・・
まさに今、記事を書いてる途中も
常時ループした状態で表示されているので、めっちゃ気が散ります・・・。




さてさて、では上記の画像から
この塩エフェクトを作るにはどうしたらいいか?
それを説明したいと思います。


●ステップ1 ~放物線に投げろ

ゲームだと放物線の動きはものすごく良く使いますね。
今回の塩の場合の動きだと

 ・最初に投げる力と角度を与える
 ・水平方向は等速直線運動で飛ぶ
 ・垂直方向は重力加速度が加算される


という動きになります。
なんだか、高校物理の授業みたいですね。


これをUnityのプログラムにすると
以下のようになります。


「プログラムとかなんのこっちゃ?」
という方がほとんどだと思いますので
そのような方はステップ2まで、飛ばしちゃってください。



--------------------------------------------------------


下のプログラム、実行確認をしていないので、
多分バグってそうですが、大体あってるはずです。

// 超適当塩エフェクトクラス.
public class SaltEffect : MonoBehaviour 
{
    // 投げる力.
    public float ShootPower;
    // 投げる角度(Degree).
    public float ShootDegree;
    // 重力
    public float Gravity;

    // 速度保存用.
    private Vector3 mSpeed;

    void Start()
    {
                // 力を分解.
float speedH = ShootPower * Mathf.Cos( ShootDegree );
float speedV = ShootPower * Mathf.Sin( ShootDegree );
mSpeed.x = speedH;           
                mSpeed.y = -speedV;
    } 

    void Update()
    {
                // 垂直成分はフレームレート考慮した加速度.
mSpeed.y += Gravity * Time.deltaTime;

                // 位置更新
                transform.position += mSpeed * Time.deltaTime; 
    } 
}

--------------------------------------------------------


●ステップ2 ~超小さい状態から始めろ~
動画だと多分わからないと思いますが、あの塩の画像、
最初はスケールがかかって、ものすごい小さい状態で表示されています。 

BlogPaint
※実際はこれよりももっと小さい


処理の流れとしては

 ・見えないくらい超小さい画像で表示
 ・0.3秒くらいで元の画像の大きさに引き伸ばす


ということをしています。
こうすることで、あたかも噴出しているかのような見た目になります。 



またまた、これをUnityのプログラムにすると・・・

--------------------------------------------------------

// 超適当塩エフェクトクラス.
public class SaltEffect : MonoBehaviour 
{
    // 最小スケール値.
    public float MinScale;
    // 最大スケール値.
    public float MaxScale;
    // アニメーション時間.
    public float AnimationSec;

    private float mTimer;

    void Update()
    {
        // 本当は線形補間より、ease系関数つかったほうがキレイだけど面倒なので.
        float rate = Mathf.Clamp01( mTimer / AnimationSec );
        float scale = Mathf.Lerp( MinScale, MaxScale, rate );
        transform.localScale = new Vector3( scale, scale, scale );

        mTimer += Time.deltaTime;
    }
}

--------------------------------------------------------
 


あとは適当に時間差をつけて、
これらの処理をしたたくさんの塩画像を飛ばしてあげれば、
あら簡単!?郵便ポストから塩を飛ばすことが可能です。

こうしてイケメン千秋楽の塩は作られていたのでした。

ちなみに、Unityには色々と便利な機能が備わっているので、
今回みたいにプログラムで直接書かなくても、こういった動きは表現できます。

塩以外にも色々と動きをつけたい・・・。
そんな思いを抱きつつも作業をしているngs_projectでした。

ではでは、また来週もお願いします!