改造版akashic-cli-initの紹介

この記事は、Akashic Engine Advent Calendar 2019の21日目の記事です。

TL;DR

今回、akashic-cliのinit機能を独自に改造して、新しいテンプレートを比較的容易に追加できるようなものを作成しましたので、それについて紹介していきたいと思います。

akashic-cli-initとは

Akashicゲームの雛形となるディレクトリを生成するコマンドです。生成されたディレクトリには、ゲームを動かすための最小限のスクリプトやアセット等が入っています。
さらに雛形は言語(と言ってもjavascriptとtypescriptの2択のみ)・用途(デフォルトかランキング対応ゲームか等)別に複数種類用意されていて、--typeオプションで指定できます。
詳細は以下のページを参照してください。

• akschi-cliのinit機能：https://akashic-games.github.io/guide/akashic-cli.html#init

改造版akashic-cli-initの内容

改造版akashic-cli-initでできるようになったことは以下の通りです。

• --type オプションで指定できる雛形として以下のものが追加されました
  • javascript-box2d: akashic-box2dのサンプルゲームがjavascript(ES5)コードで生成されます
  • typescript-box2d: --type javascript-box2dと同様のゲームがtypescriptコードで生成されます
  • es2015: --type javascriptと同様のゲームがjavascript(ES2015)コードで生成されます
  • es2015-minimal: --type javascript-minimalと同様のゲームがjavascript(ES2015)コードで生成されます
  • es2015-shin-ichiba-ranking: --type javascript-shin-ichiba-rankingと同様のゲームがjavascript(ES2015)コードで生成されます
  • es2015-box2d: --type javascript-box2dと同様のゲームがjavascript(ES2015)コードで生成されます
• ゲームテンプレートや言語テンプレートを追加することによって、新しい雛形を追加できるようになりました。(追加方法については後述します)
  • また、何かしらのライブラリ(例：akashic-box2d)に依存しているゲームもテンプレートとして追加可能です。

使い方

ここでは改造版akashic-cli-initを使ってAkashicゲームの雛形を作る手順について説明します。
今回作成したものはpublishしていませんので、以下のようにgit cloneしてくる必要があります。

git clone -b fix-template-generator [e-mail]:dera-/akashic-cli.git

cloneしましたら、以下のようにakashic-cli-initのビルドを行います。この時、全雛形の生成を行うためビルドに3～4分ほどかかると思います。

cd akashic-cli/packages/akashic-cli-init
npm install

ビルドが完了しましたら、雛形を生成したい空のディレクトリまで移動して以下のようなコマンドを実行します。

/path/to/akashic-cli/packages/akashic-cli-init/bin/run --type 生成したい雛形の名前

これで、--typeで指定しました雛形が作成されるはずです。

雛形の追加方法

基本的な手順

ここでは、改造版akashic-cli-initに任意の雛形を追加する手順を記載していきます。

1. ゲームコンテンツテンプレートを追加する場合はtemplates-src/game以下、言語テンプレート(例：ES2018テンプレート)を追加する場合はtemplates-src/base以下に、そのテンプレートのディレクトリを配置します。
2. npm run build でビルドを行ってください。
3. ビルドが完了しましたら、追加された雛形は --type で指定できるようになります。

• 例えば、game1というディレクトリ名のゲームコンテンツテンプレートを追加した場合は--type 言語名-game1で、es2018というディレクトリ名の言語テンプレートを追加した場合は--type es2018-ゲームコンテンツ名で指定できます。

基本的にはこれだけですが、テンプレートを追加する際の注意点が若干多いので以下で説明いたします。

ゲームコンテンツテンプレートを追加する際の注意点

• ゲームコンテンツテンプレートディレクトリ下におけるディレクトリ及びファイルは以下の通りです
  • src： スクリプトファイル(※ただし、置けるのはtypescriptファイルのみ)
    • typescriptから他の言語にトランスパイル仕組みになっているため
  • audio: ゲームで使う音声データ
  • image： ゲームで使う画像データ
  • text： ゲームで使うテキストデータ
  • game.json： ゲーム情報が記載されたファイル
  • package.json： ゲームが他ライブラリに依存する場合はここのdependenciesにそのライブラリ名を記載してください。akashic-engine以外で依存するものがない場合このファイルは不要です。
  • README.md： 必須ではないですが、ゲームの情報等記載したい場合はここに記載しておいておくとよいかと思います。

言語テンプレートを追加する際の注意点

このテンプレートには主に以下のようなものを置きます。

• その言語からES5にトランスパイルするために必要なもの(例：package.jsonや.babelrc等)
  • トランスパイルしたES5はscriptディレクトリ下に保存されるようにすること
• typescriptからその言語にトランスパイルするためのtsconfig.json
  • compilerOptions.tagetにはその対象の言語名を書いておくこと
  • compilerOptions.outDirには、scriptやsrc以外の名前を指定すること
    • srcはtyoescriptのトランスパイル時に利用され、scriptはES5コードのディレクトリになるため
• その他テスト等に必要なツール

tsconfig.jsonを利用してtypescriptファイルからのトランスパイルを行うため、tsconfig.jsonのcompilerOptions.taget属性で指定できる言語のテンプレートしかここには置けないようになっています。

まとめ

今回は、僕が作成しました改造版akashic-cli-initの概要と使い方について説明してきました。
この改造版によって、今まで無かったES2015用やakashic-box2dを使用したゲームの雛形等が生成できるようになりました。
しかし、任意の雛形の追加については、ゲームテンプレートや言語テンプレートとして追加できるものに限度や若干の縛りが発生してしまっているので、この点については今後の改善点としたいと思います(本当に改善できるのか微妙な所ですが。。)。。

コード

今回作成しました改造版akashic-cli-initのコードは以下のようになります。

• コード：https://github.com/dera-/akashic-cli/tree/fix-template-generator