表示モード

akashic を試してみる ​

まずは動かしてみよう ​

Akashic Engine はウェブブラウザとテキストエディタがあれば簡単にゲームを開発することができます。 まずは Akashic Engine でどのようなゲームが作成できるのかを見てみましょう。

こちらのページ から最新バージョンの bundle.zip をダウンロードしてください。 zip ファイルを展開し、その中の index.html をウェブブラウザで開くと Akashic Engine のサンプルゲームが実行されます。

samples ディレクトリには Akashic Engine の拡張ライブラリを用いたサンプルゲームがあります。 akashic-timeline を使えばトゥイーンアニメーションを実現できたり、 akashic-box2d を使えば ニコニコタワー のような物理演算をゲームに適用することができます。

作ってみよう ​

ダウンロードしたファイルの中にある akashic-engine-standalone-x.y.z.js (x, y, z は Akashic Engine のバージョンにより異なります) を利用することで、 任意の HTML ファイルから Akashic Engine を実行することができます。

以下は非常に簡単なゲームのサンプルです。

html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Akashic Game Sample</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="450"></canvas>
    <script src="akashic-engine-standalone-x.y.z.js"></script>
    <script>
      AE.initialize({
        canvas: document.getElementById("canvas"),
        configuration: {
          fps: 60,
          assets: {
            aco: {
              type: "image",
              path: "images/aco.png",
              width: 128,
              height: 288
            }
          }
        },
        mainFunc: (g) => {
          // ここにゲームコードを記述します
          const scene = new g.Scene({
            game: g.game,
            assetPaths: ["/images/aco.png"]
          });
          scene.onLoad.addOnce(() => {
            const sprite = new g.FrameSprite({
              scene: scene,
              src: scene.asset.getImage("/images/aco.png"),
              width: 32,
              height: 48,
              frames: [5, 6, 7, 6],
              interval: 500
            });
            sprite.start();
            scene.append(sprite);
          });
          g.game.pushScene(scene);
        }
      });
    </script>
  </body>
</html>

上記の内容の HTML ファイルと、先ほど展開したファイルの中にある akashic-engine-standalone-x.y.z.js と images ディレクトリを同ディレクトリに保存して、ウェブブラウザで見てみましょう。 キャラクタが一定の間隔でアニメーションしている画面が表示されるかと思います。

たとえば interval: 500 の数字を 100 に変更してみるとどうでしょう。アニメーション間隔が短くなりました。 または frames: [20, 21, 22, 23] としてみるとどうでしょうか。キャラクタが眠ってしまいました。

より本格的なゲーム開発のために ​

以上で簡単なゲームを作成することができました。 このサンプルは非常に単純なもので、ゲームと呼ぶには程遠いかもしれません。 しかし、小規模なシングルプレイのゲームであれば上記の HTML にコードを加えていくだけで作成することもできるでしょう。

Akashic Engine では複数人が参加できるマルチプレイゲームを作成したり、作成したゲームをニコニコ生放送上で実行することができます。 このようなより本格的なゲームを開発するためには、次章以降で説明する周辺ツールの導入が必要になります。