表示モード

akashic 導入 ​

前章では Akashic Engine を利用した簡単なゲームを作成しました。 より本格的なゲームの開発や、作成したゲームを生放送でプレイする際には周辺ツールの導入が必要となります。

開発に必要なもの ​

Akashic Engine のゲーム開発には基本的なプログラミングの知識が必要です。 Akashic Engine は JavaScript や TypeScript を利用してゲームのコードを書きます。このチュートリアルでは JavaScript を利用します。チュートリアルでは JavaScript の細かな機能や文法については解説していません。 JavaScript に初めて触れる方や、知識に不安のある方は、適宜インターネット上の解説記事や入門書を参照してください。

チュートリアルで説明している内容を試すには、コンピュータ (Windows, Mac, Linux など) とインターネット接続環境が必要です。 Akashic Engine を利用したゲーム開発にはプログラミング作業が必要になり、その過程で次のような操作を行う必要があります。

  • テキストエディタを利用してソースファイルを作成する。
  • CUI ウインドウを利用してコマンドを実行する。
  • 開発に必要なプログラムをインターネットからダウンロードしてインストールする。

これらの操作は利用しているコンピュータの種類やバージョンによって異なる場合があります。インターネットで検索してもやり方が分からない場合は、詳しい人に相談してください。

開発環境の構築 ​

Node.js のインストール ​

Akashic Engine のゲーム開発には Node.js が必要です。 Node.js は JavaScript のプログラムの実行と開発に必要なツールをまとめたソフトウェアです。 Node.js には node コマンドと npm コマンドが付属します。 node コマンドは JavaScript のプログラムを動かすコマンドです。 Akashic Engine のツールは JavaScript で開発されており、実行に node コマンドを利用します。 npm コマンドは JavaScript に関連するツールやライブラリを簡単に導入するコマンドです。 Akashic Engine 本体も npm コマンドでダウンロードとインストールを行います。

Node.js をインストールする方法はいくつかありますが、 公式サイトに用意されているインストーラを利用するのが簡単です。 Node.js には最新の機能を利用できる最新版と、長期間利用可能な LTS 版(推奨版)があります。 Akashic Engine はどちらのバージョンでも動作しますが、このチュートリアルは LTS 版を前提に説明を進めます。

Node.js はコマンドプロンプト (Windows) やターミナル (Mac) などの端末エミュレータにコマンドを入力して操作します。コマンドを入力するウインドウのことを、このチュートリアルでは CUI ウインドウとよびます。インストールが正常に行われたかどうかを確認するために、 CUI ウインドウに次のコマンドを入力してください。

sh
node -v

このコマンドは Node.js のバージョンを画面に出力します。正常にインストールされていれば次のようにバージョン番号が表示されます。

sh
v12.16.2

v12.16.2 は執筆時点での LTS 版のバージョンです。新しいバージョンがリリースされるとこの数字は大きくなります。

Akashic Engine のインストール ​

Akashic Engine のインストールには npm コマンドを利用します。 npm コマンドを利用すると npm install -g <パッケージ名> でツールやライブラリをインストールできます。 Akashic Engine のゲーム開発には次のパッケージが必要です。

  • @akashic/akashic-cli

登録ができたら次のコマンドで必要なツールをインストールします。

sh
npm install -g @akashic/akashic-cli

インストールが完了すると、akashic コマンドを利用できるようになります。以下のコマンドでそれぞれのコマンドのバージョンを表示することができます。エラーが表示されるバージョンが表示できれば、インストールが正常に行われています。

sh
akashic -V

執筆時点では akashic のバージョンとして 1.14.67 が表示されます。

TIP

Windows 10 の PowerShell 上で akashic -V などを実行すると、権限エラーが発生して実行に失敗することがあります。 これは、PowerShell の実行ポリシーがデフォルトで Restricted(スクリプトの実行が許可されていない状態)になっているためです。 これを許可するには、以下の手順を実行してください。

  1. Powershell のアイコンを右クリックして「管理者として実行する」を選択することで、Powershell を管理者権限で起動します。
  2. Powershell 上で Set-ExecutionPolicy RemoteSigned を実行して、実行ポリシーを RemoteSigned(手元の PC でスクリプトを実行できる状態)に変更します。実行後選択肢が出力されるので、ここで Y と Enter キーを入力します。
  3. Powershell 上で Get-ExecutionPolicy を実行して、実行ポリシーが RemoteSigned に変わっていることを確認します。 これで、実行ポリシーの変更を明示的に行わない限りは永続的に PowerShell で akashic-cli 等のスクリプトの実行が可能になります。

また、永続的ではなくその時起動した PowerShell 上限定で実行ポリシーを変更したい場合は、その PowerShell 上で Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine を実行します。 実行ポリシーについての詳細は Microsoft の公式ページ を参照してください。

空のゲームの作成 ​

Akashic Engine のゲームには設定ファイル (game.json) と、ゲームを起動するプログラムが必要です。 game.json はゲームの設定とゲームが利用するアセットを記述する JSON 形式のファイルです。アセットはプログラムのソースコードや画像、音声ファイルなどゲームの実行に必要なファイルのことです。

以下は game.json の例です。 (この内容の完全な詳細は 設定ファイル » game.json の仕様 を参照してください。)

json
{
  "width": 320,
  "height": 320,
  "fps": 30,
  "main": "./main.js",
  "assets": {
    "main": {
      "type": "script",
      "path": "main.js",
      "global": true
    }
  },
  "environment": {
    "sandbox-runtime": "3"
  }
}

ここで指定している main.js がゲームが最初に読み込むプログラムです。 assets.main プロパティで、main.js がスクリプトアセットであること、 main プロパティで最初に読み込むスクリプトであることを表しています。

main.js は最初のシーンを作成します。シーンはゲームの場面を表すオブジェクトです。例えば、タイトル場面、プレイ場面、スコア場面など必要に応じて作成できます。 Akashic Engine のゲームには最低 1 つのシーンが必要です。次のプログラムは空のシーンを作成して、そのシーンを表示します。

javascript
function main() {
  const scene = new g.Scene({ game: g.game });
  g.game.pushScene(scene);
}

module.exports = main;

上のコードを main.js という名前で保存します。作成したゲームを動かすには、game.json と main.js を同じディレクトリに配置し、そのディレクトリで次のコマンドを実行します。

sh
akashic sandbox

実行すると画面に次のように表示されます。

sh
please access to http://localhost:3000/game/ by web-browser

ウェブブラウザを起動して http://localhost:3000/game/ を開くとゲームが実行されます。今のところシーンに何も配置していないので何も表示されません。

以下は、main.js に赤い矩形を表示するコードを追加したものです。

javascript
function main() {
  const scene = new g.Scene({ game: g.game });
  scene.onLoad.add(() => {
    const rect = new g.FilledRect({
      scene: scene,
      cssColor: "#ff0000",
      width: 32,
      height: 32
    });
    scene.append(rect);
  });
  g.game.pushScene(scene);
}

module.exports = main;

main.js をこの内容に書き換えて http://localhost:3000/game/ を再読み込みすると赤い矩形が表示されます。

akashic sandbox を終了するには CUI ウインドウに Ctrl-C を入力します。

TIP

Ctrl-C はキーボードの Ctrl キーを押しながら C キーを押すという意味です。

akashic init の利用 ​

akashic init を利用すると、ゲームに必要なファイルを作ることができます。空のディレクトリを作成してその中で次のコマンドを実行します。

sh
akashic init -t javascript

コマンドを入力すると、ゲームの仕様をいくつか質問されます。最初は、

sh
width (320)

と表示されます。ここで数字を入力して Enter キーを押すとゲームの幅 (width) を指定できます。何も入力せずに Enter を押すと幅はカッコ内に表示された大きさになります。ここではそのまま Enter を押します。

続けてゲームの高さ (height) と FPS を指定できます。ここではどちらも初期値を使います。値の指定が終わると、

sh
INFO: Done!

と表示され、いくつかのファイルやフォルダが作られます。

TIP

akashic のバージョンが古い場合、Akashic Engine v2 系 (旧版) 向けのゲームが生成されてしまうので注意してください。 生成された game.json を開いて、 "environment" の "sandbox-runtime" が "3" になっていれば、v3 系のコンテンツが生成されています。

古い場合は npm install -g @akashic/akashic-cli を実行して更新できます。

akashic init は予め用意されたテンプレートをもとにファイルを作成します。 利用するテンプレートの種類は -t オプションで切り替えることができます。 標準で対応しているテンプレートは以下の通りです。 下記テンプレートについての説明についてはこちらを参照してください。

  • javascript
  • javascript-minimal
  • javascript-shin-ichiba-ranking
  • typescript
  • typescript-minimal
  • typescript-shin-ichiba-ranking

例えば、TypeScript でゲームを作る場合は、以下のコマンドを入力します。

sh
akashic init -t typescript