Akashic Engineで実際にローディングシーンをカスタマイズしてみた

この記事は、Akashic Engine Advent Calendar 2019の24日目の記事です（大遅刻すいませんです…）

20日目の記事でローディングシーンのカスタマイズの話が出ていましたが、これの実際の利用例（？）について書いてみます。

実例

先日の記事でも登場した小語アコちゃんの自己紹介のローディングシーンはこのカスタマイズ機能を使っています。凝ったことをするのもアレなのでシンプルに白黒でぴょんぴょんさせているだけです。

実際のコード

特に凝っていないのでAkashic Engineの機能のみで実装しています。

const addLoadingScene = (game: g.Game) => {
  const loading = new g.LoadingScene({
    // ロード画面を確認したい場合はコメントアウトを解除
    //explicitEnd: true,
    game
  });
  const gravity = 0.8;
  const initialVelocity = 10;
  const buttom = g.game.height / 2 - 60;
  let timeCount = 0;
  loading.loaded.add(() => {
    const black = new g.Sprite({
      scene: loading,
      src: game.assets["black"] as g.ImageAsset,
      x: 0,
      y: 0
    });
    loading.append(black);

    const aco = new g.Sprite({
      scene: loading,
      src: game.assets["loading_aco"] as g.ImageAsset,
      x: game.width / 2 - 50,
      y: buttom
    });
    loading.append(aco);

    const nowLoading = new g.Sprite({
      scene: loading,
      src: game.assets["now_loading"] as g.ImageAsset,
      x: game.width / 2 - 48,
      y: game.height / 2 + 65
    });
    loading.append(nowLoading);

    loading.update.add(() => {
      aco.y = buttom - (initialVelocity * timeCount - 0.5 * gravity * timeCount ** 2);
      if (aco.y > buttom) {
        aco.y = buttom;
        timeCount = 1;
      } else {
        timeCount++;
      }
      aco.modified();
    });

    loading.modified();
  });
  game.loadingScene = loading;
};

x, y座標の指定がピンポイントなのは画像サイズの影響ですね…画面サイズが変わらないことをいいことにさぼってます。

ここではy軸方向にのみジャンプするもの（等加速度直線運動）を考えていたので、高校物理の方程式をそのまま実装しています。ただし、重力加速度などは現実の値を使うと違和感があるため見た目丁度良い値にいじっています。ゲームは現実ではないので、厳密な値を使わなくて良い（使うべきでもない）というわけですね。

まとめ

ローディングシーンはちょっとしたコードを書くだけでそれっぽい（手抜きでないような）見た目になるので、少しの手間を惜しまず用意しておくのが良いと思います！