エンジニア

uGUIでTweenしたい!!

投稿日:2015年3月31日 更新日:

今回エンジニアブログを担当します乾です。
よろしくお願いします。

最近、uGUIを触っていてなにか足りないと思ったらTween機能がありませんでした。
何かないのかなと探していた所ありました。

こちらの方のが一番気に入ったので紹介させて頂きます。
ugui-Tween-Toolです。
スクリーンショット 2015-03-31 2.04.19

このアセットの利点としてはNGUIのTweenのような使い方が出来るため、あちらを使った事がある人はすぐに組み込む事が出来る所です。
また、触った経験のない人でも上記のスクショのようなデモがついてくるので、インスペクター上で使いたい動きをしているオブジェクトを見て実装する事が出来ます。

では実際にugui-Tween-Toolを使って行きます。
前回作ったスクロールビューをTweenPositionで動かして画面に表示したいと思います。


「1:移動させたいオブジェクトの準備」

uTweenPositionを付け、こんな感じで値を設定します。
スクリーンショット 2015-03-31 2.35.36 スクリーンショット 2015-03-31 2.43.00
個人的にEaseTypeはSpringがオススメです、これだけで大分いい感じになります。
あと今回はボタンを使って好きなタイミングで移動させるので、設定し終わったらuTweenPositionのチェックを外して非有効化しておいてください。
終わったら適当に画面外に出しておいてください。私は今回下から出現させたいのでyを-700に設定してあります。

「2:表示ボタンの作成」

スクロールビューとは別にボタンを用意します。
スクリーンショット 2015-03-31 2.53.14 スクリーンショット 2015-03-31 2.53.38 
ボタンを作成したらuPlayTweenとuButtonScaleを追加します。
スクリーンショット 2015-03-31 3.11.56
uPlayTweenのTweenTargetには実行したいtweenが付いているオブジェクトを指定してください。
uButtonScaleのTargetは指定しなくても実行時に自身が自動で選択されるのでそのままで大丈夫です。
これで押した時にボタンが大きくなって、スクロールビューが画面下から出てくるようになります。

「3:非表示ボタンの作成」

ビューの左上に先ほど作ったボタンをコピーして大きさ色を調整したものを用意します。
スクリーンショット 2015-03-31 3.54.40
これで非表示ボタンを押すと下にビューが引っ込むようになります。


完成

スクリーンショット 2015-03-31 2.53.38 スクリーンショット 2015-03-31 4.00.38
使ってみて個人的にEaseTypeがあるのが嬉しかったです。
操作もNGUIで触っていたのですんなりいけました。

次回はまだ何を書くか決めていませんがまた自分が興味をもったものを書くと思います。
ありがとうございました。

採用情報

ワンダープラネットでは、一緒に働く仲間を幅広い職種で募集しております。

-エンジニア
-

© WonderPlanet Inc.