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

Akashic Engineの基本用途はゲーム開発だと思いますが、ゲーム以外のことにも使えます。今回はそのひとつとしてAkashic Engine（正確には前記事に登場したノベルゲームエンジン）を使ってあるキャラクターの自己紹介コンテンツを作ってた話をします。

利用例

https://kogatari-a.co/ に設置されている「Self Introduction」をクリックすると自己紹介コンテンツが起動します。このコンテンツはノベルゲームエンジンでシナリオファイルから実装スクリプトを生成し、akashic-cliのHTML export機能を使ってHTML出力した、Akashic Engineエコシステムを利用したコンテンツです。

ちなみに当該サイトのキャラクターは小語アコちゃんです。よろしく。

キャラクターの表情切り替え

文章のレンダリングについては前記事に書いたので、今回は表情変化について軽くふれておきます…といっても種を明かすと単純な話で、基本はakashic-timelineのフェードイン、フェードアウトを利用するだけです。
Spriteを2枚用意し、同じタイミングで変更前をフェードアウト、変更語をフェードインさせるといい感じになります。

あとは表情変化後に文字描画を自動で開始させていますが、これもakashic-timelineのTimelineに存在するcallメソッドを使用しています。Triggerを用意し、Triggerに登録するハンドラで文字列描画関数を呼び出すようにしておき、timeline.fadeIn(...).call(() => {...})とcallに渡す関数内でTrigger.fireを呼び出してあげれば、あとはよしなにやってくれます。便利ですね。

Webサイト上でのAKashic Engine製ゲームの表示

RPGアツマールに投稿する場合は特に考えなくても良いですが、独自のWebサイトに掲載する場合には自力でコンテンツ表示を考える必要があります。特にモバイル全盛期となった昨今ではモバイル環境でも閲覧できたほうが良いでしょう。

まずは単純なコンテンツの表示自体の話ですが、これはiframeを使うのが手っ取り早いかと思います。記憶が確かならAkashic Engine公式ページでもiframeを使って組み込んでいたはずです。モバイル対応しない（画面サイズによってコンテンツを出し分けない）つもりならこれで十分でしょう。

そして画面サイズによってコンテンツを切り替えたい場合ですが…これはモバイル用にもうひとつリサイズ版ゲームを用意することで解決（？）しました。akashic-cliのHTML export機能を使いたいのでHTML自体には手を入れられないことを考慮すると、ゲーム内から画面サイズを無理やり取得してサイズを変える労力よりはもうひとつ作ってしまったほうがコストが安かったというのが、この手法に至った理由です。
ちなみに全部が全部再実装になるわけではなく、実際の描画実装部分は使いまわせるのでサイズ変更に伴う微調整をひたすらやればいいだけだったりします。具体的には背景、キャラクタの位置、一文に表示できる文字数を実際に動かして調整していく形ですね。

BGM

BGMはとある方に作っていただたmp3形式のファイルを、公式が提供するcomplete-audioで変換しました。手間を書けずに生成できて大変便利です。

まとめ

というわけで、わりと簡単な自己紹介動画であれば簡単に作成できると思います。公式ツールが揃っているのでなんとかなる…はず。ちなみに汎用性を気にせず、Spriteとakashic-timelineとakashic-labelを駆使すればAkashic Engine公式ライブラリのみで（件のノベルゲームエンジンを使わずとも）似たようなコンテンツを作れますよ！
みなさんもゲーム開発気分でゲームでないコンテンツを作ってみてはいかがでしょうか…！？