【小ネタ】LitMotionを使ってTextMeshの文字をアニメーションさせる

ゲーム作りとは

ゲームを作る時って作りたいゲームシステム(仕様)が先にあってシナリオは後からついてくるものだと思っていた頭の固い皆さんこんにちは。シナリオを目に見える形にしたいのなら小説でいいじゃないかとか思いますが、ゲームシステムは他の人にお任せでシナリオだけ作りたいとかそんな形のゲーム開発があったことにビックリです。とりあえず完成責任果たす能力ないのに安易にクラファン立ち上げたらダメですね。さて何の話でしょう？

フォロワーじゃなくてそのままなゲーム

Steamのストアページの動画を見るとリズム天国フォロワー的なゲームに感じますが、実際購入して遊んでみるとフォロワーじゃなくてほぼそのままなゲームでした。

どのステージもミニゲームっぽい造りで最初に基本リズムを練習するチュートリアルがあってから本編が開始、本編はノーツなどは表示されずチュートリアルで学んだ2～3パターンのフレーズを1,2ボタンで操作する方式でリズム天国の仕様に沿った形となっています。
また、いくつくかのステージをクリアするとそれまでのステージの楽曲と操作リズムを合わせたミックスステージが開放されるというもリズム天国と同じです。

元ネタがハッキリしたゲームなので新鮮味は感じませんが、その分、遊び方やルールに戸惑う事なくゲームを楽しめます。何よりフォロワーゲームだという事を除けばリズムゲームとしてのクオリティは素晴らしいと思います。

それぞれのステージの楽曲、ビジュアルはバラエティーに富んでいるし、入力レスポンスは良好で成否によるアニメーションの違いも面白いです、難易度もあまり高くないので誰でも最後まで飽きずにゲームを楽しむことができると思います。(全部ジャスト判定でクリアを狙い出すと苦行になるけど)

元ネタのリズム天国は新作の発売日が未だ発表になっていないので、それまでのつなぎとして、もしくは練習用としてリズム天国ファンの方は購入を検討しても良いのではないでしょうか？

文字の色を変える

作成中のゲーム内で先頭から文字の色が変わる演出を取り入れてみました。

こう言ったTween系の処理はもっぱらLitMotionを使って実装していますが、実は比較的に簡単に作る事が出来ます。

using LitMotion;
using LitMotion.Extensions;

public TMP_Text TextMeshProText;
public Color TextStartColor;
public Color TextEndColor;

private void ChangeTextColor(float argTime)
{
  for (int iCnt = 0; iCnt < TextMeshProText.textInfo.characterCount; iCnt++)
  {
    LMotion.Create(TextStartColor, TextEndColor, argTime)
      .WithDelay(iCnt*0.1f)
      .WithEase(Ease.Linear)
      .BindToTMPCharColor(TextMeshProText, iCnt);
  }
}

LitMotionはColorもTweenさせることが出来ますが、BindToTMPCharColorを使用するとそれを文字単位で行うことが出来ます。BindToTMPCharColorの第二引数は文字のインデックスなのでそれを入れ替えると、文字の逆から、もしくは指定順に変化させることが出来ます。
上のスクリプトを実行するとこんな感じ。

文字を動かす

先程のスクリプトを少し変えると文字を一文字ずつ動かすこともできます。その際にはBindToTMPCharPositionを使用します。

private void ChangeTextPosition(float argTime)
{
  for (int iCnt = 0; iCnt < TextMeshProText.textInfo.characterCount; iCnt++)
  {
    LMotion.Create(Vector3.zero, Vector3.left * 3.0f, argTime)
      .WithDelay(iCnt * 0.1f)
      .WithEase(Ease.Linear)
      .BindToTMPCharPosition(TextMeshProText, iCnt);
  }
}

実行結果はこんな感じ。

文字をジャンプさせる

LMotionには値を指定の値へ徐々に変化させる以外に、反復動作(Punch)や振動動作(Shake)させて変化させることもできます。

private void TextJumpPosition(float argTime)
{
  for (int iCnt = 0; iCnt < TextMeshProText.textInfo.characterCount; iCnt++)
  {
    LMotion.Punch.Create(Vector3.zero, Vector3.up * 1.5f, argTime)
      .WithDelay(iCnt * 0.1f)
      .WithFrequency(1)
      .BindToTMPCharPosition(TextMeshProText, iCnt);
  }
}