はじめに
この記事は Akashic Engine Advent Calendar 2019 の12日目の記事です。
技術的な話ではないのですが、Akashic Engineを使ってニコニコ生放送対応のゲームを作った話をします。
Akashicでニコ生のゲームを作った
作ったもの
「アドリブ紙芝居」というゲームです。紙芝居が流れるので放送主がアドリブで実況するというゲームです。
続編もあります。
リポジトリ
リポジトリは公開されています。main.js が本体です。
画像を差し替えたら簡単にオリジナルの紙芝居が作れるので、作れる人は作ってみても良いかもしれません。このコードをベースにして紙芝居を作った場合は、コンテンツツリーで「アドリブ紙芝居 桃太郎編」を親コンテンツにしてください。
遊び方
まずは適当な生放送に通常の「アドリブ紙芝居」を貼り付けます。放送者がプレイしてくれるのを待ちます。プレイしてくれなかった諦めるしか無いです。コメントとかで煽ってみましょう。
通常版の「アドリブ紙芝居」をプレイしてくれたら、今度は続編の方を貼ってプレイしてくれるのを待ちます。ただ、同じ人は30分開けないと貼れないので、誰か他の人が貼る必要があるのですが。
「アドリブ紙芝居」の実装について
生放送ゲームの作り方
- Akashicでゲームを作る
- RPCアツマールに投稿する
- 生放送対応ゲームの審査を出す
アドリブ紙芝居の実装の方針
初めてのAkashicだったので、とにかくシンプルに作って、とにかくリリースを目指すことを意識しました。
実装は1ファイルのJavaScriptで、400行程度のコードです。
実装にあたっての注意点
僕がハマった注意点を書いておきます。
ゲームの解像度
最初にゲームの解像度を決める必要があります。解像度を途中で変えようとするとプログラムが破綻してしまうこともあるので、最初にきっちり決めることが重要です。
下記記事でも書きましたが、RPGアツマールの推奨解像度を採用するのが無難でしょう。
推奨解像度はRPGアツマールのゲーム投稿画面に書いてあります。
ES6以降の文法は使えない
Akashic は ES6（ES2015）以降の文法は推奨されていません。開発中は動くかもしれませんが、それが他の人の端末でも動くとは限らないからです。
その他、乱数を使う時や、時間を測定する時などに注意しなければいけないことが多数ありますので、下記ページは読んでから実装することをおすすめします。
ビルド
ドキュメントに書いてあるとおりにやるだけなので特に苦労はないです。
akashic export html --output ./dist.zip --atsumaru
コマンドを叩いて、できた dist.zip をアツマールにアップロードするだけです。
苦労した点
制限時間でのシーンチェンジ
AakshicのシーンオブジェクトのsetTimeoutをつかってシーンチェンジしているのですが、ネストがだんだん深くなっていきます。アドリブ紙芝居の場合せいぜい数シーンなのですが、ゲームが複雑になってシーンが増えると大変かも。いい感じの解決が必要そうです。
titleScene.setTimeout(function () {
// ゲーム説明シーン生成
var descriptionScene = createDescriptionScene(DESCRIPTION_FRAME_ASSET_ID)
// ゲーム説明シーンへ移動
titleScene.gotoScene(descriptionScene)
// ここで BGM を止める
titleSceneBgm.stop()
descriptionScene.setTimeout(function() {
g.game.pushScene(paperScene)
}, DESCRIPTION_SECOND * 1000) // ゲーム説明の表示されている時間
}, TITLE_SECOND * 1000) // タイトルの表示されている秒数
}
フォント
フォントを用意するのがめっちゃ大変です。デフォルトのなんちゃらゴシックやらがありますが、ダサいし、縁取りされていないのでゲーム内で使うと見えません。
独自フォントを使おうとすると、これまた非常に大変ですので、アドリブ紙芝居では、実装コストを下げるために、なるべく画像で済ませるようにしています。
数字部分だけフォントを使っていますが、かなり頑張っています。 1234567890 と並んだ画像を用意して、以下のように画像の座標と数字を対応付けています。
var map = {}
for (var i = 0; i < 11; i++) {
// 0 .. 9 の順に並んでいると簡単だが 1 .. 9 0 の順で並んでいるので
// 0 (characterCode = 48) だけ特別扱いする必要がある
var characterCode = 49 + i
if (characterCode === 58) {
characterCode = 48
}
if (characterCode === 59) {
characterCode = 47
}
var key = String(characterCode)
map[key] = {
width: width,
height: height,
x: i * width,
y: 0,
}
}
ゲーム投稿時に必要な情報
ゲーム投稿時にはいろいろな情報が必要です。
- ゲームのアイコン
- ゲームのスクリーンショット
- ゲームのジャンル
- 想定プレイ時間
- ゲームの紹介文
- ゲームの紹介動画（あれば）
意外といろいろ考えておく必要があるので注意しましょう。
リリース後に知ったこと
生放送には「自作ゲーム」と「自作ツール」があり、どちらに割り当てられるのかはよくわかりません。審査次第なのかな？僕はずっと「自作ゲーム」を確認していて、「リリースされないなー」と思っていたら「自作ツール」の方に入っていました。
まとめ
みんなも「アドリブ紙芝居」を色々な放送に貼り付けてみてください。「自作ツール」のところから「【放送者用】アドリブ紙芝居 桃太郎編」を選んで貼り付けるだけです。
