【Unity 6】DOTweenでUIをボヨンと弾ませる！コイン獲得アニメーションの作り方

2026年10月29日

1. はじめに
2. 1. DOTweenとは？
3. 2. DOTweenを導入する
4. 3. コイン表示用のUIを作る
5. 4. コインを加算するスクリプトを作る
- 5.1. Inspectorで参照を設定する
6. 5. 実行して動きを確認する
7. 6. DOPunchScaleの仕組み
- 7.1. 連続再生の処理
- 7.2. SetUpdate(true)とは？
8. 7. 動きの違いを試す
9. 8. 実際のゲームに組み込む
10. 9. さらに演出を発展させる
11. まとめ
12. 参考資料

はじめに

ゲームでコインやアイテムを獲得したとき、画面端の所持数が一瞬大きくなり、「ボヨン！」と弾むような演出を見かけることがあります。

このようなアニメーションは、プレイヤーに報酬を獲得したことを直感的に伝える効果があります。

今回はUnityのアニメーション機能を使わず、DOTweenというTweenライブラリで実装します。

完成すると、ボタンを押すたびに次の処理が実行されます。

コインの所持数が10増える
UIが一瞬大きくなる
少し縮んで跳ね返る
自然に元のサイズへ戻る

1. DOTweenとは？

DOTweenは、Unityのオブジェクトの位置・回転・大きさ・色などを、指定した時間をかけて変化させるライブラリです。

例えば、通常のC#では毎フレーム計算が必要になる拡大縮小も、DOTweenなら簡単に記述できます。

transform.DOScale(1.3f, 0.3f);

これは対象オブジェクトの localScale を0.3秒かけて1.3に変化させます。

今回使用するのは、さらに弾力のある動きを作れる DOPunchScale() です。

DOTweenの無料版で利用できます。

2. DOTweenを導入する

Unity Asset Storeから無料版のDOTweenを入手します。

公式ページ：https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

導入手順は次のとおりです。

Unity Asset StoreでDOTweenをMy Assetsに追加します。
Unity Editorで Window > Package Manager を開きます。
My Assets からDOTweenを探します。
Download後、Importします。
Tools > Demigiant > DOTween Utility Panel を開きます。
Setup DOTween… をクリックしてセットアップします。

セットアップが終わると、C#からDOTweenを利用できるようになります。

using DG.Tweening;

この記述を追加したときにエラーが出なければ、基本的な準備は完了です。

※既存の古いDOTweenを更新する場合は、公式のアップグレード手順も確認してください。

3. コイン表示用のUIを作る

まず、ゲーム画面左上にコインの所持数を表示します。

HierarchyでCanvasを作成し、次の構成にしてください。

Canvas
├── CoinUI
│   ├── CoinIcon
│   └── CoinText
└── AddCoinButton

各オブジェクトの役割は以下のとおりです。

オブジェクト	役割
Canvas	UI全体を管理する
CoinUI	コイン表示全体をまとめる
CoinIcon	コインの画像を表示する
CoinText	所持数を表示する
AddCoinButton	動作確認用のボタン

CoinUIを作成する

Canvasの子に UI > Empty で空のUIオブジェクトを作り、CoinUI と名前を付けます。

RectTransformのAnchor Presetsを左上に設定し、適当な余白を設けて配置してください。

幅と高さは、例えば220×60程度にします。

CoinUI のPivotは (0.5, 0.5) にしておきます。

このPivotが、拡大縮小するときの中心になります。

CoinIconとCoinTextを作成する

CoinUI の子に Image を作成し、コインの画像を表示します。コイン画像がなければ、最初は円形の画像などでも構いません。

さらに Text – TextMeshPro を追加します。

名前：CoinText
初期表示：100
Alignment：中央揃え、または左揃え
Font Size：見やすい大きさに設定

アイコンと数字が横並びになるよう配置してください。

動作確認用のボタンを作る

Canvasに Button – TextMeshPro を追加します。

名前を AddCoinButton として、ボタンのテキストを「コイン +10」に変更します。

4. コインを加算するスクリプトを作る

CoinCounter.cs というC#スクリプトを作成します。

using DG.Tweening;
using TMPro;
using UnityEngine;

public class CoinCounter : MonoBehaviour
{
    [Header("UI")]
    [SerializeField] private TMP_Text coinText;
    [SerializeField] private RectTransform coinUI;

    [Header("アニメーション")]
    [SerializeField] private float duration = 0.35f;
    [SerializeField] private float strength = 0.3f;
    [SerializeField] private int vibrato = 8;
    [SerializeField, Range(0f, 1f)]
    private float elasticity = 0.5f;

    [Header("コイン")]
    [SerializeField] private int coins = 100;

    private Vector3 originalScale;
    private Tween popTween;

    private void Awake()
    {
        originalScale = coinUI.localScale;
        UpdateCoinText();
    }

    public void AddTenCoins()
    {
        AddCoins(10);
    }

    public void AddCoins(int amount)
    {
        coins += amount;
        UpdateCoinText();
        PlayPopAnimation();
    }

    private void UpdateCoinText()
    {
        coinText.text = coins.ToString();
    }

    private void PlayPopAnimation()
    {
        // 再生中のアニメーションを停止する
        popTween?.Kill();

        // 拡大率を初期値へ戻す
        coinUI.localScale = originalScale;

        // ボヨンと弾ませる
        popTween = coinUI.DOPunchScale(
            originalScale * strength,
            duration,
            vibrato,
            elasticity
        )
        .SetUpdate(true)
        .OnComplete(() =>
        {
            coinUI.localScale = originalScale;
        });
    }

    private void OnDestroy()
    {
        popTween?.Kill();
    }
}

Inspectorで参照を設定する

CoinCounter を CoinUI にアタッチします。

Inspectorで以下を設定してください。

フィールド	設定するもの
Coin Text	CoinText
Coin UI	CoinUI
Duration	0.35
Strength	0.3
Vibrato	8
Elasticity	0.5
Coins	100

次に AddCoinButton を選択します。

Buttonコンポーネントの On Click() に CoinUI を登録し、CoinCounter > AddTenCoins() を選びます。

これで設定は完了です。

5. 実行して動きを確認する

UnityのPlayボタンを押してください。

最初にコインの数が100と表示されます。

「コイン +10」ボタンを押すと、コイン数が110になり、表示全体が弾むように拡大縮小します。

連続してボタンを押しても、コイン数は加算され、アニメーションはその都度最初から再生されます。

6. DOPunchScaleの仕組み

今回の中心になるコードを確認しましょう。

coinUI.DOPunchScale(
    originalScale * strength,
    duration,
    vibrato,
    elasticity
);

DOPunchScale() は、現在のScaleを基準に、一度拡大したあと弾力を伴って元に戻るアニメーションを作ります。

各引数の意味は以下のとおりです。

引数	意味
punch	元のScaleからどの程度変化させるか
duration	アニメーション全体の時間
vibrato	揺れの細かさ
elasticity	反対方向への跳ね返りの強さ

ここで大切なのは、punch には最終的なScaleではなく、元のScaleからの変化量を指定することです。

通常のScaleが (1, 1, 1) の場合、

Vector3.one * 0.3f

を渡すと、約30％大きく弾ませる動きを作れます。

連続再生の処理

popTween?.Kill();
coinUI.localScale = originalScale;

この処理は、ボタンが短時間に何度も押された場合の対策です。

最初に実行中のTweenを停止し、Scaleを初期値へ戻します。

その後、新しいアニメーションを再生します。

これにより、アニメーションを重ねて実行することで大きさが不安定になる問題を防ぎます。

SetUpdate(true)とは？

.SetUpdate(true)

これを指定すると、通常のゲーム時間ではなく独立した時間更新を使用します。

そのため、Time.timeScale = 0 の状態でもアニメーションを進められます。

ただし、SetUpdate(true) は必須ではありません。ポーズ中の動作が不要なら省略できます。

7. 動きの違いを試す

アニメーションの印象は、パラメータによって大きく変わります。

演出	Duration	Strength	Vibrato	Elasticity
軽い反応	0.2	0.15	4	0.3
標準のボヨン	0.35	0.3	8	0.5
大きな報酬	0.5	0.5	6	0.7

まずは標準の値で動かし、その後Inspectorでパラメータを変更して違いを確認してください。

特に Strength を大きくすると、拡大の勢いが強くなります。

ただし、大きくしすぎると隣接するUIに重なったり、表示が不自然になる場合があります。

8. 実際のゲームに組み込む

今回のボタンは動作確認用です。

実際のゲームでは、プレイヤーがコインを取得したときに AddCoins() を呼び出します。

例えば、コイン取得処理側に CoinCounter の参照を用意しておけば、次のように加算できます。

coinCounter.AddCoins(1);

これだけで、

所持数を1加算
UIのテキストを更新
UIをボヨンと弾ませる

という処理が連続して実行されます。

なお、今回のサンプルではコイン数を CoinCounter が保持しています。大きなゲームでは、コインの所持数をゲームデータ側で管理し、UIは表示と演出だけを担当する設計も考えられます。

9. さらに演出を発展させる

DOTweenは、拡大縮小以外のアニメーションにも使用できます。

例えば次のような演出です。

ダメージを受けたときにHPバーを揺らす
ボタンを押したときに一瞬小さくする
ステージクリア時に文字を大きく表示する
アイテム取得時にアイコンを跳ねさせる
スコア加算時に数字を目立たせる

また、DOTweenの Sequence を利用すると、複数の動きを順番に再生することもできます。

まとめ

今回はDOTweenの DOPunchScale() を使って、コイン取得時のUIアニメーションを作成しました。

重要なポイントは次の3つです。

DOPunchScale で弾力のある拡大縮小を実現できる。
Kill で再生中のTweenを停止し、連続実行時の動作を安定させる。
コインの加算処理とUI演出を連動させることで、実際のゲームに応用できる。

ゲームの操作感や気持ちよさは、小さな演出によっても大きく変わります。

まずはコイン表示を弾ませるところから試してみましょう。

参考資料

DOTween公式サイト：https://dotween.demigiant.com/
DOTween公式ドキュメント：https://dotween.demigiant.com/documentation.php
DOTween導入ガイド：https://dotween.demigiant.com/getstarted.php
Unity Asset Store：https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

訪問数 1 回, 今日の訪問数 1回

TWeen,UI,Unity,Unity6

Posted by hidepon

Home

Unity 6とVisual Studio 2026の連携設定｜IntelliSenseが効かないときの対処法と.slnxの基礎知識

コメント一覧

まだ、コメントがありません

コメントをどうぞコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。