こんばんわ!
ngs_projectです。
突然ですが、今日は
塩の作り方を説明したいと思います。
作り方といっても、
蒸留方法とか、レシピ的な話ではありません。
塩エフェクトの作り方の話です。
さて、まるでどこか宇宙のような画像ですが、
この画像が塩エフェクトの全てです。
(※黒い部分は透過処理されます)
この画像をプログラムでぐりぐり動かすことで
(※画像容量制限の関係で見づらくなってます)
このような、塩エフェクトの動きを実現しています。
ええ、わざわざキャプチャーしてきました。地味に大変ですよねこういうの。
※このGIF画像・・・
まさに今、記事を書いてる途中も
常時ループした状態で表示されているので、めっちゃ気が散ります・・・。
さてさて、では上記の画像から
この塩エフェクトを作るにはどうしたらいいか?
それを説明したいと思います。
●ステップ1 ~放物線に投げろ~
ゲームだと放物線の動きはものすごく良く使いますね。
今回の塩の場合の動きだと
・最初に投げる力と角度を与える
・水平方向は等速直線運動で飛ぶ
・垂直方向は重力加速度が加算される
という動きになります。
なんだか、高校物理の授業みたいですね。
これをUnityのプログラムにすると
以下のようになります。
「プログラムとかなんのこっちゃ?」
という方がほとんどだと思いますので
そのような方はステップ2まで、飛ばしちゃってください。
--------------------------------------------------------
下のプログラム、実行確認をしていないので、
多分バグってそうですが、大体あってるはずです。
// 超適当塩エフェクトクラス.
--------------------------------------------------------
●ステップ2 ~超小さい状態から始めろ~
動画だと多分わからないと思いますが、あの塩の画像、
最初はスケールがかかって、ものすごい小さい状態で表示されています。
※実際はこれよりももっと小さい
処理の流れとしては
・見えないくらい超小さい画像で表示
・0.3秒くらいで元の画像の大きさに引き伸ばす
ということをしています。
こうすることで、あたかも噴出しているかのような見た目になります。
またまた、これをUnityのプログラムにすると・・・
--------------------------------------------------------
// 超適当塩エフェクトクラス.
void Update()
{
// 本当は線形補間より、ease系関数つかったほうがキレイだけど面倒なので.
ngs_projectです。
突然ですが、今日は
塩の作り方を説明したいと思います。
作り方といっても、
蒸留方法とか、レシピ的な話ではありません。
塩エフェクトの作り方の話です。
さて、まるでどこか宇宙のような画像ですが、
この画像が塩エフェクトの全てです。
(※黒い部分は透過処理されます)
この画像をプログラムでぐりぐり動かすことで
(※画像容量制限の関係で見づらくなってます)
このような、塩エフェクトの動きを実現しています。
ええ、わざわざキャプチャーしてきました。地味に大変ですよねこういうの。
※このGIF画像・・・
まさに今、記事を書いてる途中も
常時ループした状態で表示されているので、めっちゃ気が散ります・・・。
さてさて、では上記の画像から
この塩エフェクトを作るにはどうしたらいいか?
それを説明したいと思います。
●ステップ1 ~放物線に投げろ~
ゲームだと放物線の動きはものすごく良く使いますね。
今回の塩の場合の動きだと
・最初に投げる力と角度を与える
・水平方向は等速直線運動で飛ぶ
・垂直方向は重力加速度が加算される
という動きになります。
なんだか、高校物理の授業みたいですね。
これをUnityのプログラムにすると
以下のようになります。
「プログラムとかなんのこっちゃ?」
という方がほとんどだと思いますので
そのような方はステップ2まで、飛ばしちゃってください。
--------------------------------------------------------
下のプログラム、実行確認をしていないので、
多分バグってそうですが、大体あってるはずです。
// 超適当塩エフェクトクラス.
public class SaltEffect : MonoBehaviour
{
// 投げる力.
public float ShootPower;
// 投げる角度(Degree).
public float ShootDegree;
// 重力
public float Gravity;
// 速度保存用.
private Vector3 mSpeed;
void Start()
{
// 力を分解.
void Update()
{
// 垂直成分はフレームレート考慮した加速度.
// 位置更新
transform.position += mSpeed * Time.deltaTime; }
}// 投げる力.
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 ~超小さい状態から始めろ~
動画だと多分わからないと思いますが、あの塩の画像、
最初はスケールがかかって、ものすごい小さい状態で表示されています。
※実際はこれよりももっと小さい
処理の流れとしては
・見えないくらい超小さい画像で表示
・0.3秒くらいで元の画像の大きさに引き伸ばす
ということをしています。
こうすることで、あたかも噴出しているかのような見た目になります。
またまた、これをUnityのプログラムにすると・・・
--------------------------------------------------------
// 超適当塩エフェクトクラス.
public class SaltEffect : MonoBehaviour
{
// 最小スケール値.
public float MinScale;
// 最大スケール値.// 最小スケール値.
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でした。
ではでは、また来週もお願いします!
--------------------------------------------------------
あとは適当に時間差をつけて、
これらの処理をしたたくさんの塩画像を飛ばしてあげれば、
あら簡単!?郵便ポストから塩を飛ばすことが可能です。
こうしてイケメン千秋楽の塩は作られていたのでした。
ちなみに、Unityには色々と便利な機能が備わっているので、
今回みたいにプログラムで直接書かなくても、こういった動きは表現できます。
塩以外にも色々と動きをつけたい・・・。
そんな思いを抱きつつも作業をしているngs_projectでした。
ではでは、また来週もお願いします!