Chapter 08無料公開

🔰SetDelay - トゥイーンの開始タイミングの遅延

発生しやすいトゥイーンのタイミング調整

ゲーム開発をしていく過程でトゥイーンのタイミング調整はよく発生します。
微調整するときは0.1秒未満の単位でを調整することもあります。

そんなトゥイーンの調整作業ですが要素は大きく3つです。

  1. トゥイーンの時間(Duration)
  2. イージングの種類
  3. トゥイーンの開始タイミング

本チャプターでは 「3.トゥイーン開始タイミング」 の調整方法について学びます。

2秒待機してトゥイーンを開始するサンプル

👇コチラのサンプルは2秒待機してからトゥイーンを開始します。

transform.DOLocalMove(new Vector3(10, 0, 0), 1f)
    .SetDelay(2f);

👆DOTweenではSetDelayメソッドで待機時間(秒数)を設定します。

トゥイーンを実装する時に重要なのは 「テンポ」 です。
「テンポ」 の悪いゲームはどうしても好きにはなれません。

テンポが悪いとは?

「ユーザーがイメージしているトゥイーンではないこと」 です。

  1. 反応が悪く感じる
  2. 動きに不自然さを感じる
  3. 一度に多くの要素が動き過ぎてどこを見てよいのか分からない

テンポとはシビアで、0.1秒遅くてもダメ。それより早くてもダメなんです😰。
人は感覚的に気持ち悪さに気づいてしまいます。

😱【失敗例】一度に多くの要素が動き過ぎ

本チャプターの場合は 「3.一度に多くの要素が動き過ぎてどこを見てよいのか分からない」
を解決するためにSetDelayを使います。

一度に多くの要素を動き情報量が多くなり過ぎている例です。
ここまで情報量が多いと、人間は正しく理解できません。

😀【改善例】少しタイミングをずらす

先の例を改善してみました。

  1. ヘッダー(上部)、フッター(下部)
  2. 両サイド
  3. PLAYボタン

このように表示する順をSetDelayでずらしました。
この画面では「PLAYボタン」を押してもらいたいため、
目に残るように最後に少しだけ拡大縮小のトゥイーンを使っています。

さきほどよりスッキリと画面が見えてきませんか?

少しずらすだけでも印象はガラッと大きく変わります。
もし多くの要素を動かす場合は、同時に動かすのではなく、
少しタイミングをずらしてみることをオススメします。

📘動かし過ぎに注意

多くの要素をついつい動かし過ぎてしまいます。
バランスも大事で、あえて個別に動かさないという選択も必要です。

  • 動かすことで逆にテンポが悪くなっていないか?
  • 動かすことで情報は適切に伝わっているか?

といった客観的な視点が大事です。

タイミングは多くて3つまで。

4つ以上のタイミングはテンポを悪くする事が多いです。
色んなパターンを試してより良いトゥイーンを作っていきましょう。


次のチャプターでは繰り返しトゥイーンを学びます。

  • 点滅
  • 行ったり来たり

このようなトゥイーンを作れるようになります。