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

エフェクト

半裸+温泉+湯気 = 全裸

こんばんは!
お久しぶりです、ngs_projectです。


最近、更新が滞っていて久々の更新になってしまいました。

便りが無いのは良い知らせと昔から言いますが
真面目にイケセンを作っていた事もあって、
ちょっとブログまで手が回っていなかったのが正直なところです。
楽しみにしてくれていた方々、お待たせしてしまい申し訳ありませんでした。


今日は久々なので色々とてんこ盛りの内容です。


yuge0


いきなりですが、まずはこの画像を見てください。
本編のとあるタイミングでお風呂場のシーンがあるんですよね。

一般的なゲームなら半裸なキャラクターが見れて
ちょっとキャッキャウフフできるポイントですが、
幸い(?)イケメン千秋楽では日常的に半裸なので、
何の違和感も無く、お風呂場のシーンが作成可能です。


ただ、いくら日常的に半裸とはいっても
流石にそのままの格好でお風呂に入るのはまずいです!
色んな所から怒りの連絡が飛んでくること間違いなしなので、
何とか誤魔化せないかなーと試行錯誤してみました。


yuge8

まず試してみたのは、単純にキャラの位置を下げるという方法です。

う・・・うーん、なんだろう・・・、これは・・・。
お風呂に入ってるというよりも「お風呂に入っていることにしておいてね」
という感覚がすごいですね。
とっても制作者都合を感じる手法なので、この方法は却下しました。





yuge1

色々と考えた結果、やっぱりこの画像の赤い線で囲った場所辺りに、
白いモヤがあるのが一番しっくりきそうです。

あれです、あれ。深夜アニメでブルーレイになった途端に消える白いモヤです。


というわけで試しに作ってもらったのが
下の画像です。


yuge2

モヤ多すぎぃっ!

イケメン千秋楽ではUnityというエンジンでゲームを作っていますが、
グラフィッカーが日常的に使っているフォトショップ等のソフトとでは
色々と差異があるため、一発目ではちょっとモヤが強すぎました。

これではもはやドライアイス温泉です。

というわけで、調整してもらったのが下の画像です。


yuge3


完全に全裸

いつもの立ち絵と全く一緒ですが
非常に怪しげな白いモヤを足すことで、どうみても全裸に見えます。
すごい・・・すごいよ、白いモヤの力・・・。
深夜アニメでこの演出が多様されるのも納得です。
※モヤの有無で右端の結城君の表情が違った意味で受け取れそうなのが怖いところです。


yuge4

UIが付くとさらに自然に。
どうみてもコレはお風呂に入る全裸の若者達ですね。





画像だと分かりづらいので、動画にしてみました。
何気に湯気が立ち昇っているのがお分かりいただけるでしょうか?



湯気の立ち上りはUnityで以下の
プログラムを作って操作しています。


以下からいきなりめちゃくちゃ真面目な内容になるので
記事内での温度差が半端無いことになってますが
プログラムって何なの?って人がほとんどだと思うので
そういう人はササっとすっ飛ばしちゃってください。
using UnityEngine;
using System.Collections;

// 単方向のUVアニメーションをサポートする. // ChangeSpdSecMin~ChangeSpdSecMax秒につき、.
// UVアニメーションの速度をSpeedMin~SpeedMaxの範囲で変える. public class EffectSteam : MonoBehaviour { // 湯気の方向. public enum Direction { Up, Down, Left, Right, } // 方向 public Direction SteamDir = Direction.Up; // 最低UV速度. public float SpeedMin = 0.0001f; // 最高UV速度. public float SpeedMax = 0.0005f; // 速度切り替える最低秒数. public float ChangeSpdSecMin = 1.0f; // 速度切り替える最高秒数. public float ChangeSpdSecMax = 3.0f; // UV速度. private float mUVSpeed; // 速度切り替える用の秒数. private float mChangeSec; // タイマー. private float mTimer; // 操作対象のマテリアル. private Material mTargetMat; // ------------------------------------------------------- // Use this for initialization // ------------------------------------------------------- void Start () { mTargetMat = renderer.material; changeRandomSpeed(); } // ------------------------------------------------------- // Update is called once per frame // ------------------------------------------------------- void Update () { if( mTargetMat == null ) { return; } // 方向分ずらす. Vector2 ofs = mTargetMat.mainTextureOffset; switch( SteamDir ) { case Direction.Up: ofs.y -= mUVSpeed * Time.deltaTime; break; case Direction.Down: ofs.y += mUVSpeed * Time.deltaTime; break; case Direction.Left: ofs.x -= mUVSpeed * Time.deltaTime; break; case Direction.Right: ofs.x += mUVSpeed * Time.deltaTime; break; } // 念のため0.0f~1.0fの間に収める. if( ofs.x > 1.0f ) { ofs.x -= 1.0f; } else if( ofs.x < 0.0f ) { ofs.x += 1.0f; } if( ofs.y > 1.0f ) { ofs.y -= 1.0f; } else if( ofs.y < 0.0f ) { ofs.y += 1.0f; } mTargetMat.mainTextureOffset = ofs; // タイマー更新. mTimer += Time.deltaTime; if( mTimer > mChangeSec){ mTimer -= mChangeSec; changeRandomSpeed(); } }
private void changeRandomSpeed() { mUVSpeed = Random.Range( SpeedMin, SpeedMax ); mChangeSec = Random.Range( ChangeSpdSecMin, ChangeSpdSecMax ); } }


こんなプログラムを書くことで、立ち昇る湯気を表現することができました。
めでたしめでたし。



【おまけ】

yuge5
うっかりタイトル画面に湯気を出してしまいました。
いかがわしいゲームに早変わりです。



yuge6

どんな場面でも呼び出せるので、いつものあの場所がすぐに温泉地に。



yuge7

間違えて色のパラメータを触ると一瞬でホラーゲームに・・・。





というわけで、今日もイケメン千秋楽は冬コミに向けて絶賛制作中です。
それでは来週もよろしくお願いします!

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

こんばんわ!
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