2015年03月26日

画面エフェクト | 残像を作ってみよう

リリースできました!!
iOS デバイスの人は、上のアイコンからダウンロードしてみてね!!
基本無料。ゲーム内課金有り(無料で十分遊べます)


ちょっと落ち着いたんで久しぶりな感じです!

さて、また別のゲームを作ろうとしてます。
で、ここで、画面をタッチしている間出現する棒が必要なんですよね。

棒の向きは、タッチしている場所の移動方向。棒の長さはタッチの移動速度に応じて伸びる感じです。
ま、見てもらった方が速いですね ♪

こんな感じです。

結構、作る前はコレだけでそれなりにちゃんと見えるんじゃね?なんて甘い事を考えてたんですが、全然駄目でしたね...
スムーズに動いてる時は、それなりに見えない事もないんですが、基本的にアウト!ゆっくり動いてる時とか見ていられません。

なんで、必要にかられて、残像を作ってみる事にします!


実現方法は?
さて、じゃあ具体的な実現方法ですが、Unity の Mesh クラスは、結構簡単に頂点の動的な操作が出来そうなんですよね。
なんで、Mesh クラスの頂点データをいじろうと思ってます。

ただ、最初に座標を求める為の計算で、いろいろ試行錯誤しそうなんで、まずは同じ Mesh を複数出して、補間する為の座標の計算が正しく出来る所まで行ってみたいな?なんて思ってます。


座標の計算はどうしよう?
座標の計算なんですが、棒の向きがあるんで、単純に2点の線形補間じゃ多分駄目なんですよねぇ〜。
なんで、新旧2つの棒の向きが同じ時は、線形補間。
でも、ほとんどの場合そうであろう、新旧の棒の向きが違う場合は、棒の交わる点を中心とする、円周上に、補間する座標を取って行こうと思いますね。
今、頭の中にあるイメージをしょぼい図にすると、
Screen Shot 2015-03-25 at 3.28.30 PM.png

新旧の棒2つ
これを、
Screen Shot 2015-03-25 at 3.29.09 PM.png
こんな感じに。
う〜ん。ここまでやんなくても、それなりに見えるのか〜?
まぁいいや。


2直線の交点の座標って?
さ、あんまし得意じゃない座標計算なんですが、ググってみると結構出て来ました。
で、最初にヒットして実装も簡単そうな ここ を参考にさせてもらいました。
今回扱ってるのは、完全な2次元のxy平面なんで、これで大丈夫なはずなんですが....

うん、大丈夫!!
結構簡単に交点の座標は求める事が出来ました!!

さっきのリンク先の式に加えて、2直線が平行な場合とか、ゼロサムのチェックとか入れて、スクリプトはこんな感じになりました。
Screen Shot 2015-03-26 at 2.40.44 AM.png


座標を補間してメッシュを仮り置きしてみる
では、最初に書いたみたいに、まずは同じメッシュを仮り置きして、座標が上手く取れてる事を確認してみますね。
線形補間は問題ないとおもうんで、円周上の座標で補間するスクリプトだけ。
Screen Shot 2015-03-26 at 2.40.58 AM.png
色とか、アルファとかも変えてたりもしますが、単純に2点の角度と向きを Mathf.Lerp と Mathf.LerpAngle で補間して、Transform にぶっ込んでるだけですね。

これで実行した時の動画はこんな感じになりました。
最初に比べると、大分滑らかに見えますね!
残像 Mesh の数を増やしたり、今のあり方でまだ出来る事はありますが、やっぱり頂点を動的に作った方が良くなりそうな気がするんで、この辺でそっちに切り替えて行きたいと思いますね!

では、また次回に つ・づ・く ♪

初めてみました。よかったらクリックお願いしますね ♪
        にほんブログ村 ゲームブログ×PlayNCBlogへ 

posted by やまけん at 12:27| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: