実例

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

実際のコード

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

まとめ

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