このブログでは、個人が趣味で制作しているオリジナル乙女ゲームについて 制作日誌を綴っています!週1で更新中です。
公式サイト pixivはこちら! 自作乙女ゲーsearch様   Wing search様

unity

舞い散る桜とタイトル画面のステキな関係

こんばんわ!
ngs_projectです。

 

早いものでもうすぐ梅雨ですね。

今年は特に春らしい日が少なかった印象で、
春と秋が大好き人間としては悲しい限りです。 



ゲームの世界だけでも少しは春を・・・
ということで、まずはこちらをご覧ください。






ええ・・・、桜が散ってますね。
アニメとかでよく見る演出だと思います。

今回は、どうやって動画のように
「桜を散らせるか?」を説明していこうと思います。








用意するものはたったの二つです!



①Unity
※イケセンはUnityで作られています。





②桜のテクスチャー

sakura
※こんなんです。



たったのこれだけでさっきの画面を作ることができます。



Unityにはこういったテクスチャーから、
それっぽいエフェクトを作るための機能が最初から備わっています。

細かい説明は省きますが、
その機能を使うことで、動画のような花びらを表現できます。


「詳しく知りたい!」って人は下の画像を参考にしてみてください。

particle
※Component → Effects → Particle Systemで追加できます




7割ほどは上記の設定をするだけで完成です。
楽チン極まりないですね。

ただ、花びらがひらひらと舞うためには、
もう一手間を加えてあげる必要があります。


風です


ひらひら感をだすためには
「風であおられている感」を出す必要があります。



でも、そこはさすがのUnity!

なんと風を発生させることも
デフォルトでできてしまうのです。
本当にUnityはすごいですね。


以下の動画をご覧ください。




動画上で交互にON/OFFされている
扇風機のような矢印が風を表しています。


これでタイトル画面に桜が舞い散りました!
めでたしめでたし、ですね。





こんな感じで本編以外の細かいところも
随時(おもいつき次第)改良していってます!

では本日はこんなところで。
来週もよろしくお願いします。


 

キミは塩の作り方を知っているか?

こんばんわ!
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でした。

ではでは、また来週もお願いします!
 
サークル最新情報まとめ

●イケメン千秋楽公式サイト
http://ngsprojectsite.weebly.com

●C85お品書き
「イケメン千秋楽番外編~雅先輩の恋愛事情~」
お求めの際はこちらからどうぞ!


※BOOTH内のページへジャンプします。
※pixivへのログインが必要です。



●感想お待ちしてます!
ご意見・ご感想はこちら!

●不具合がある場合は・・・
不具合報告はこちら!
Pixiv