前回 DOTween のインストールと導入方法について解説しました。
今回は、DOTweenを使って、敵を倒したときに出たコインが所持金UIのアイコンへ移動させる動きを実装します。
DOTweenを使った完成形のイメージ
コインの動きの仕様ですが、
1.敵を倒すとコインが広がるように散らばる
2.散らばった後、コインUIの位置へ移動する
とします。
動画を撮ってみましたので、この完成形をイメージしてください。
↓
制作風景の動画をはじめて撮ってみました#クリックゲームを作る #unityhttps://t.co/piBTe7jRlm pic.twitter.com/jhfBvdgiRG
— えなこいん⭐️七色の言語のプログラマー (@enakko_net) June 8, 2021
コインオブジェクトをどう作るか？
こういった動きを作るときは、とりあえずその動きを作ることだけに集中しましょう。
コインを敵から出す方法とか
所持金を増やす方法とか
そういうことは考えない方がいいです。
そこにコインオブジェクトが生まれた瞬間から
1.散らばって
2.UIのアイコンへ向かっていく
3.到着したら破壊される
これだけ考えます。
コインオブジェクトのスクリプトを書く
ということで、Hierarchy に ObjCoin みたいな名前の空の3Dオブジェクトを配置して
それのスクリプト ObjCoin.cs を書いていきましょう。
シーンをプレビュー再生するだけで、
1.散らばって
2.アイコンへ向かっていく
3.消滅
という動きです。
スクリプトは以下の通り。
using DG.Tweening とは
まず、DOTween を使うために
using DG.Tweening;
を書きます。
これにより、Unity のオブジェクトの transform に対して、DoMove などのメソッドが呼べるようになります。
内部的には C# の拡張メソッドですが、transform.DoMove などと DOTweenのメソッドが呼べるようになるという事実だけ覚えればいいです。
変数
以下のように変数を用意します。
このコインの動きは、モードが２つあります。
1つ目は、「散らばる（広がる）」です。これは生成な位置からランダムな方向に一定距離離れる動きです。
何秒かけて広がるかと、その距離（半径）を調整できるように変数にしています。
2つ目は、「コインアイコンへ向かう」です。
何秒かけて向かうかだけを変数にしています。
動きのプログラム
DOTween を使うことで、Update に何も書くことなく動きを実装できます。
Start ですべて挙動を書き込んでしまいます。
まず1つ目の動きが、1.5秒で30ピクセルランダムな方向に移動する。
2つ目の動きが、UIのアイコンの位置まで3秒で移動する。
終わったら Destroy して自身を破棄します。
あとは、SetEase(Ease.OutCubic) で、動きの入りと終わりを滑らかにしています。
Ease の種類は色々ありますが3次関数によるスタンダードな補間です。
Sequence を使うことでこれらの動きを連続して再生させることが出来ます。
終わりに
いかがでしたでしょうか？
今回は動きを作る時の考え方と、
それを DOTweenで実現する方法について解説しました。
次回は、敵を倒した時に今回のコインを生成するのと、
所持金を増やす方法について解説します。続きます。
