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

2015年01月

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

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

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

最高の素材集めクエストを求めて

こんばんわ!
ngs_projectです。


先週に引き続き、今週も土日出張のため
2週連続休みが無くて瀕死だったブログ担当です。
いつものように休日に更新できなくて、ご迷惑をおかけしました。



今日はイケセンの背景素材について語りたいと思います。 


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

イケメン千秋楽の背景は、
実写ベースの素材をある程度加工したものを使っています。 
 
tuugaku
※通学路の背景


ゲームを作ったことがある方ならご存知だと思いますが、
ネット上の画像を加工してゲームとして利用する場合、
表記やライセンスの関係で何でもかんでも使えるわけではありません
 
むしろ、あらゆる制約を考慮すると
手放しで「使っていいですよー 」という画像に
めぐり合うことのほうが難しいです。



本来なら、グラフィッカーにゲーム用の背景を書いてもらうのが一番良いです。 
そのほうが意図に沿ったものにできますし、何よりゲームとして使いやすいです。 



ただイケメン千秋楽は同人ゲームなので
グラフィックの重要度を考慮すると

スチル ≧ キャラクター立ち絵 > UI > 背景

という順序になってしまいます。
背景は書きたくても、それに時間が避けないのが現状なのです。 
キレイな背景を増やすよりも、スチルの枚数を増やしたいですからね。


ということもありまして、イケメン千秋楽の背景は
・基本的に写真を加工、どうしようもないのは手書き
という方針で作っています。


dohyo_c

サイバー土俵みたいな
この世に存在しないのは書くしかないです。
 




こうなってくると、写真素材を集めるのが大変になってきます。
上にも書きましたが、権利の関係で
「この画像すばらしいじゃん!」と思っても、
使用するのが難しいことがほとんどだからです。


というわけで、最近は自分達で背景用の写真をとることが多いです。 



具体的なシーンはいえませんが、イケメン千秋楽の体験版でも 
開発陣の自宅付近の写真が何気にたくさんあります。 
自分達で撮影しているため、権利関係は基本的に自由だからです。

これのせいか、最近は旅行にいっても自分達の写真はそっちのけで
背景用の素材をとることが多いです。



この前、海に行ったときは

「このビーチとパラソルめっちゃ使えそう!!
人が写ると消すの大変だから今撮っちゃおう」
 

と海そっちのけで、素材集めに没頭していました。
ノベルゲーム製作者の悲しい性です。



ただ、イケメン千秋楽は舞台が日本なので
素材が集めやすいのが救いですね。


これが同人製作ではなく、会社とかの場合、
取材旅行とかで素材を集められるんだろうなーと思うと
羨ましくて胸が一杯です。 


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


最近はスマホで写真をとっても
ノベルゲームで十分使える解像度の写真が取れるんで
本当にお手軽に素材を集まられますね。


日々、イケメン千秋楽の背景素材を考えながら
街を練り歩いているngs_projectでした。

それでは来週もよろしくお願いします!

今更このタイミングで紹介!?主人公編

こんばんは!
ngs_projetです!

皆さん3連休も終了間近ですが
如何がお過ごし でしょうか?
ちなみに、ブログ担当は残念ながらほぼ仕事でした。・・・ 
悲しいですがこれが現実なんですね。



さてさて、今回はこのゲームの主人公である
有栖川 恋詠の紹介をしたいと思います。


すごく今更感がありますがご容赦ください・・・。



 arisu
まさかの一番最後に主人公の立ち絵が出来ちゃいました。
本編が出る前に、番外編がでたりと
相変わらず作る順番がおかしい当サークルです。


主人公の性格やら設定の話はいずれ
テキスト担当が詳しく書くと思うので 、そのときまでお待ちを・・・。



主人公である、有栖川恋詠は
イケメン千秋楽の舞台となっている高校「八掛宵高校」
理事長と親戚関係にあたるのですが・・・。


rizi
なんということでしょう。


開発一同全く意識していなかったのに、
胸元に手を持ってくるというポーズが完全に一致してしまいました。

制作の際に、特に示し合わせたわけでもないのに、
こういった共通項ができちゃうのは面白いですね!

本当イケメン千秋楽は不思議なゲームです。



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

新年早々How manyいい顔 → 41個でした

こんばんわ!
ngs_projectです。

相変わらずのノロノロ進捗ですが
2015年もヨロシクお願い致します。


さてさて、明日から仕事や学校の方が多いと思いますが
皆様はステキなお正月を過ごせましたか?

お正月といえば、おせちや凧揚げと
縁起を担ぐものが多いですよね。

その中でも福笑いといえばもちろんを使った遊びのこと!


というわけで今日は
キャラクターの顔の話をしたいと思います。


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


現在、ふりーむ様で公開中のイケメン千秋楽体験版
3530471_orig


実はこの体験版での、
メインキャラクター達の表情数には結構な差があります。


それを表にすると

妻鳥  :46パターン
反之宮 :10パターン
奥浬  :10パターン
結城  :15パターン(裏人格含む)

 
妻鳥は結構な数が用意されていますが、
その他のキャラは10個程度しかありません。


理由はいたって単純!
「妻鳥の表情が完成したのが一番早かったから」 
ただそれだけです。


「他のキャラはこのまま10パターンしかないの?」
という心配もあるかもしれませんが、ご安心ください。

妻鳥以外のキャラクターについても
表情を増やすべく、パターンを鋭意製作中です。
(※体験版では間に合わなかった・・・)

ref
※顔が増えると作ってる側もテンションがあがります。
 


では今回は、毎度恒例になりつつある、「本当に作ってるよアピール」のために
反之宮の表情パターンをお見せしたいと思います。

※毎回、反之宮な気がするのが不思議ですね




ていっ!!



sori_face



なんかスマホのアプリアイコンみたいな
並びになっちゃいましたね。

これで、反之宮が活き活きとするのが楽しみです。


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

今年も週一の更新を続けていきます。
本年もよろしくお願い致します。
サークル最新情報まとめ

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

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


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



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

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