こんにちは！
子供向けプログラミング教室kobakoスタッフです。
Unityである程度作品が出来上がってきたものの、いまいちクオリティがあがらない・・・。
そういうお悩みを抱えている人も多いのではないでしょうか？
今日は、手軽に作品のクオリティをアップするDotweenのご紹介です！
ところで・・・
この記事を書いている人はだれ？
子供向けプログラミング教室です！
JavaScriptを使ったゲームプログラミング、ゲーム企画が得意な教室です。
プログラミング教室で実際に使用している、学習成果のある教材をYouTube無料配信しています。
Dotweenの使い所
Dotween（ドッツイーン）とは、簡単に言えば、アニメーションライブラリです。
GameObjectをある場所までゆっくり移動させたり、
GameObjectを徐々に拡大したり、縮小したり、
Spriteをフェードイン、フェードアウトさせたり。
ゲームルールにはあまり関係ないけど、
演出やクオリティアップにアニメーションは欠かせない存在です。
UIでのアニメーションがおすすめ
Dotweenは特にUIでのアニメーションがおすすめです。
例えば、
Textを徐々に浮かび上がらせたり、
メニューアイコンをぐるっと回転させたり、
スコアなどの数値テキストがカウントアップしたときに一時的に拡大したり、
いわゆるUIでのにぎやかしですね。
イージングやループ、Callback機能
どのようにアニメーションするかを示したイージングカーブを調整したり、
特定のアニメーションを何回ループ（無限ループ）させるかの設定、
アニメーションが終わったら実行するCallback（コールバック）などの機能も一通り備わっています。
特にイージングについては、基本的なイージングアルゴリズムが適用されています。
どういうイージングがあるかは、チートシートを参照すると便利です。
Dotweenのインストール方法
Dotweenのインストールは無料でとても簡単です。
UnityAssetStoreから「Dotween」と検索しましょう。
Dotween Proという有料版もあるのですが、無料版で十分です。
https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676?locale=ja-JP
AssetStoreからダウンロードし、インポートすればすぐりDotweenが利用可能です。
Dotweenの基本的な使い方
Dotweenで覚えることは多くはありません。
ここでは基本的な使い方を掲載していきます。
準備
まずはDotweenを使う準備です。
Dotweenを使うScript内の最初に、usingを使って、Dotweenを使う宣言をします。
using DG.Tweening;座標の移動
例えば、Textの座標の移動をさせたい場合、こうなります。
下記のコードは、1秒間かけて、(0, 100)の位置に移動するというプログラムです。
label.transform.DOMove(new Vector2(0, 100), 1f);フェードイン、フェードアウト
文字を浮かび上がらせるという演出をしてみましょう。
下記のコードは0.5秒かけて、ラベルを浮かび上がらせます。
label.GetComponent<Text>().DOFade(1f, 0.5f);さらにCallbackを使って、
浮かび上がったらフェードアウトさせると言うのをやってみます。
label.GetComponent<Text>().DOFade(1f, 0.5f).OnComplete( () => {
label.GetComponent<Text>().DOFade(0f, 0.5f)
});ちょっと難しくなりましたね。
Callbackの部分はラムダと呼ばれる書き方をしているため、最初はとっつきにくく感じると思います。
Callbackは、例えば、アニメーションが終わったらシーンを変えるなど、
アニメーションが終わるまで処理を待ちたいときに使えたりします。
Dotweenで気を付けるべき点
使い方に関してはさらっとお伝えしました。
Dotweenの紹介ブログさんの方が細かく入門方法が書いてあると思いますので、
ここではDotweenでハマりやすい罠、
使い込んでいる人が陥る罠を紹介して注意喚起しておきます。
初期値に戻すことを忘れない
よく陥りがちなのが、初期値の設定ミスです。
初期値に戻しておかないと、変な場所からアニメーションしたりしてしまいます。
Dotweenを仕掛ける前に、最初にあって欲しい状態、初期状態に設定しておくと良いでしょう。
// 初期値に戻しておく
transform.position = new Vector(0, 0);
transform.DOMove(new Vector2(0, 100), 1f);DOKill()しておく
思わぬところで、Dotweenが生きていて、思わぬ動きをすることがあります。
Dotweenを仕掛ける前に、実行中のTweenTaskを切っておくと良いでしょう。
// TweenTaskを止めてから新しいツイーンを開始する
transform.DOKill();
transform.position = new Vector(0, 0);
transform.DOMove(new Vector2(0, 100), 1f);kobakoでUnityを学びませんか？
今回はちょっと上級者向けの内容でした。
Unityを学び始めたばかりの初心者にはまだまだ早い内容ですので、
何をいっているかさっぱりわからん！状態かもしれません。
Unityは覚えることが本当にたくさんありますので、焦らず少しずつ学習していきましょう。
プログラミング教室kobakoでは、小中学生向けにUnityも教えています。
全くのプログラミング初心者にはUnityはちょっと厳しすぎてご遠慮いただく場合が多いのですが、
モチベーション次第では初心者からも少しずつUnityを習得していく環境があります。
ぜひkobakoの無料体験へお越しください。
無料体験へのお申し込みはこちらから！
kobakoのゲームプログラミング教材もYouTubeで無料配信中です！
初回の授業料（体験）は無料です。
※現在はオンライン授業でのみ対応しています。通学型ではありません。
