NieRのタイピングアニメーションをJavaScriptで再現した

NieR Automata

キャラクターデザイン、マップデザイン、音楽、ストーリー、コンセプトアート どれをとってもサイコーなゲームだけど、UIデザインもサイコーで凝った作りをしている。

【NieR:Automata】2B 全武器モーション鑑賞動画 All actions

モーションも最高。もはや総合芸術と言える。

プラチナゲームの開発ブログもサイコーな記事がとっても多く、NieRにおけるUI開発が取り上げられた記事も公開されている。フラットデザインを基調にしつつも単調にならないように楽譜をモチーフとした装飾を散りばめる工夫などが述べられており、めっちゃ読み応えがある。読め。丁寧に英語翻訳されているのもある。外国人も感謝して読め。

www.platinumgames.co.jp

余談だけど同じプラチナのサイコーなゲームBayonettaのUIも公開されているので読め。

『ベヨネッタ2』のUIデザイン | Bayonetta2 開発ブログ

ちなみに設定資料集には一切UIについての言及はなかったのでウェブページにしか参考資料がない。 各種アイコンなど眺めたかった..。

文字列のタイピングアニメーション

UIパーツにはそれぞれアニメーションが実装されており、それらを眺めるだけで楽しい。 それで今回気になったのは、メニュー画面展開時におけるタイトル文字表示のアニメーション。

なるほど pic.twitter.com/DmEv8Sg1OZ

— aodnawg (@aodnawg) 2018年3月4日

みたことのないタイピングの仕方をしている。最高。 これ、毎回固定パターンで表示しているのではなく、毎回ランダムに文字を表示していて、例えば「ITEM」という文字列を表示するとき、以下のようなパターンで文字列が変化していく。

パターン１

I T I IE IM IT ITI ITM ITE ITEI ITEM

パターン２

I II IM ITI ITE ITT ITEI ITEM

たぶんメニュー画面を展開する時にランダムにこれらの文字列を作成していると考えられる。

YouTubeで実況動画をquick timeでキャプチャーしてコマ送りにして確認した。 ちなみにquick timeの画面収録は概ね60fpsだけどyoutubeに上がっている動画のfpsがよくわかんなかったのですべてのフレームを拾いきれたかどうか定かではない。 あとコマ送りするときにtouch barが役に立ってよかった。touch barが初めて役に立った。

NieRタイピングの変化を作成するアルゴリズムを考えてみる

完全に再現するにはキツいけど雰囲気だけでも実装してみよう。

1. 文字列（e.g. ITEM）を取得する
2. 配列 result を宣言する
3. ループスタート ( i = 0 で初期化 )
   1. 文字列 i + 1 番目の文字を取得 （i=2の場合、「E」）
   2. 文字列 0 ~ i 番目 までの文字列を取得する （ i=2の場合、「IT」）
   3. 文字列からランダムに１文字取得する
   4. 配列 result に 2.で取り出した文字列と3.でランダムに取得した文字を連結させる（IT + ?）
   5. 1. と3.の文字が等しくないならばこのループの3.に戻る
   6. iをインクリメントする
   7. iが文字列（e.g. ITEM）の長さになるまでループを繰り返す
4. 配列 result を出力する

コードで表現するとこうなる。

call(string) {
  const result = [];
  for (let i = 0; i <= string.length - 1; i += 1) {
    const char = string[i];
    const current_string = this.string.slice(0, i);
    const max_type = 3; // タイピング回数を制限する。たぶんNieRとはこのあたりの実装が全然違う
    let typed_times = 0;
    let is_equal = true;

    while (is_equal) {

      const random_char = get_random(string); // ここには書かないけどランダムに文字をとってくる関数を自力で実装 
      const typed = current_string + random_char;
      result.push(typed);

      typed_times += 1;

      if (random_char === char) { is_equal = false; }
      if (typed_times === max_type) {
        is_equal = false;
        result.push(current_string + char);
      }

    }
  }
  return result;
}

文字列が長くなるにつれてタイピング候補が多くなり、配列が長くなる可能性があるため max_type でタイピング回数を制御して早い段階で while ループから抜け出せるようにする。

これで入力をITEMにするとこんな感じに出力される。

ここで出力された配列を順番に表示してNieR UI風のタイピングを表現することができる。 setTimeout関数などを使うとよい。

結果がこちら。

pic.twitter.com/c7QiUxbIYR

— aodnawg (@aodnawg) 2018年3月5日

See the Pen NieR Typing Animation by mortuary (@mortuary) on CodePen.

おしまい

ゲームUIをJavaScript、CSS等ウェブ技術で表現するのはめっちゃ面白くて、めっちゃ面白い。

github.com