表示モード

Akashic System の導入 ​

Akashic System のオールインワン環境を利用してマルチプレイゲームをホスティングするまでの導入方法についてまとめます。

オールインワン環境の構築 ​

1. Akashic System のダウンロード ​

Akashic System のプロジェクトを clone して cd します。

sh
git clone https://github.com/akashic-games/akashic-system
cd akashic-system

INFO

akashic-system 内のソースコードを修正した場合は以下のようにプラットフォームを指定してビルドする必要があります。

sh
bash build.sh amd

なお、Akashic System の推奨プラットフォームは amd です。

tonistiigi/binfmt 等のエミュレータを使って、arm プラットフォームで利用する場合は、 予期せぬ性能劣化や正常に動作しない可能性があることをご了承ください。

2. Akashic System の起動 ​

Akashic System のオールインワン環境を起動します。

sh
docker compose --file docker-compose-all-in-one.yml up -d

3. コンテンツとエンジンを配置する ​

a. content.json ​

実行する Akashic コンテンツの設定ファイルである content.json を、 akashic-system プロジェクト内に以下のような形式で配置します。

sh
volumes/akashic-resources/contents/<gameCode>/<revision>/content.json

OSS版 NiconicoSnake

以下で例示する niconico_snake については、OSS版の NiconicoSnake が以下にて公開されていますのでご参照ください。

https://github.com/akashic-contents/niconicoSnake

例えば、<gameCode> が niconico_snake で、 <revision> が 0.1.0 であれば、 content.json は次のように配置します。

sh
volumes/akashic-resources/contents/niconico_snake/0.1.0/content.json

また、content.json の例は以下の通りです。

json
{
  "engine_configuration_version": "3.12.6-1-canvas",
  "engine_urls": [
    "http://localhost:2100/engines/akashic-runtime/3.12.6-1-canvas/engineFilesV3_12_6_Canvas.js",
    "http://localhost:2100/engines/akashic-runtime/3.12.6-1-canvas/playlogClientV7_3_0.js"
  ],
  "content_url": "http://localhost:2100/games/niconico_snake/0.1.0/game.json",
  "external": [],
  "untrusted": false,
  "content_id": "niconico_snake"
}

INFO

content.json 内における URL のホスト名とポート番号は、 起動した Akashic System のホスト名と resource-server のポート番号に置き換えてください。

クライアントの akashic-game-view と game-runner がリソースをダウンロードするために使われます。

b. game ​

Akashic コンテンツ本体を、 akashic-system プロジェクト内に以下のような形式で配置します。

sh
volumes/akashic-resources/games/<gameCode>/<revision>

上記の OSS版 NiconicoSnake を利用する場合の配置例は以下のとおりです。

sh
# 1. ゲームをビルドする
git clone git@github.com:akashic-contents/niconicoSnake.git
cd niconicoSnake
npm install
npm run build

# 2. game.zip をつくる
npm install -g @akashic/akashic-cli
akashic export zip --output game.zip --nicolive

# 3. game.zip の中身を volumes/akashic-resources/games に入れる
unzip game.zip -d volumes/akashic-resources/games/niconico_snake/0.1.0

c. engines ​

Akashic Engine を、 akashic-system プロジェクト内に以下のような形式で配置します。

sh
volumes/akashic-resources/engines/<engineCode>/<revision>

Akashic Engine のリソースの配置例としては以下の通りです。

sh
akashic-system/
└── volumes/
    └── akashic-resources/
        └── engines/
            └── akashic-runtime/
                └── 3.12.6-1-canvas/
                    ├── akashic-engine.js
                    ├── bootstrap.js
                    ├── bundle_info.txt
                    ├── engineFilesV3_12_6_Canvas.js
                    ├── entry.js
                    ├── game-driver.js
                    ├── pdi-common-impl.js
                    ├── playlogClientV7_3_0.js
                    └── rest-client-core.js

4. 動作確認 ​

以下のコマンドで Akashic コンテンツがブラウザで起動できるかを確認します。

sh
bash ./tools/demo.sh

放送者用のページと参加者用のページがデフォルトのブラウザで開く。

放送者用ページ ​

参加者用ページ ​

放送者用ページで 参加者受付を開始する ボタンを押した後、 参加者用ページで 参加する ボタンを押して募集が完了すると、 放送者と参加者のそれぞれのページでマルチプレイゲームが開始する。

放送者用ページ ​

参加者用ページ ​

この Akashic System の導入ページで参照した技術的情報は、以下にまとまっています。

  • System API documents
    • Akashic System の System API のリファレンスです。
  • agvw
    • Akashic ゲームをブラウザ上で動作させるコンポーネント。オールインワン環境のデモページでも使われています。