実験放送用ゲームの話とそのテンプレをTS + Akashic Engineで作った話

dwangoアドベントカレンダー2018
https://qiita.com/advent-calendar/2018/dwango


# はじめに
現在弊社では、新しい機能をニコ生へ取り入れるための施作として、実験放送という試みを行っています。
https://site.nicovideo.jp/nicocas/pc/

実験放送では様々な機能が使えます。
視聴者がポイントを消費することで、配信中の映像にささやかな演出を加えるギフト機能や、映像ストリームを複数生成してカメラ２台持ちしたりするマルチカメラ機能だとか、まあいろいろあります。

本記事ではその中の機能の一つとして、もっとも簡単でわかりやすい、ゲーム機能に関する記事を書こうと思います。

# 実験放送におけるゲームとユーザー投稿ゲーム
放送者と視聴者がインタラクトするコンテンツの最たる例として、実験放送ではいくつかのゲームを提供しています。
ゲームと言いつつ、**jsで書かれたものならなんでも乗る**ので、サイコロを振るだけの便利ツールとか、キッチンタイマー的なものも提供しています。

このゲームですが最近、[**ユーザーによる投稿が可能になりました。**](http://blog.nicovideo.jp/niconews/90431.html)コンテストもやっています。
一応登録内容のチェック等があるのでなんでも出せるわけではないです。また、投稿には弊社サービスの[RPGアツマール](https://game.nicovideo.jp/atsumaru/)を経由する必要があります。
RPGアツマールという名前ですが、**別にRPGじゃないものもアップロードできる**のでなんでもいいです。
実はぼくも、**完璧に業務外**で一つゲームを作り、**投稿、申請を経て**実験放送で遊べるようになりました。

<img width="544" alt="スクリーンショット 2018-11-28 20.41.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/40020/a61e7965-92c8-751b-b0aa-1309286b4a4a.png">

[**僕と百烈拳**](https://twitter.com/akashic_talk/status/1066969870095474689)というゲームですので、機会があったら実験放送でぜひ遊んでみてください。
もちろん、[**RPGアツマール上でも遊ぶことができる**](https://game.nicovideo.jp/atsumaru/games/gm8704)ので、なんだったら今から遊んでみてください。（ダイマ）

## ユーザー投稿ゲームの開発
いざ自分でも投稿ゲームを作りたくなった場合、**資料の少なさと敷居の高さ**にわりと絶望します。
Akashic Engineの利用が必須ですが、ドキュメント少ない、デバッグ環境が（実験放送上で動かす場合に）ない、などいろいろ難しいです。
現時点では明かされていない、ライブラリの秘めた力も若干理解の邪魔をするかもしれません。
ドキュメントについては現在進行形で整備が進められているので、期待して待ちましょう。

# 投稿ゲーム向けテンプレート
さて、前置きが長くなりました。前述の通り、実験放送ではいろいろ夢あふれる実験をしており、年の瀬にようやく少しずつ形になってきた面もありますが、やや難解、独特、奇妙な印象があると思います。
業務上の都合でこの**ユーザー投稿ゲームが盛り上がってくれないと困る**という事もあり、ゲームを開発するためのテンプレートを作ってみました。
https://github.com/orzngo/ichibaGame

主な特徴を挙げていきたいと思います。

## 主な特徴
### RPGアツマールと実験放送両対応
実験放送とRPGアツマールは全くの別サービスで、各々の仕様の差を吸収しなければ両方で動かす事はできません。
具体的には、**実験放送上では起動時にいくつかのパラメータがハンドラ経由でやってくる**が、アツマール上ではそれがないため、代わりに適当な値を挿入するようにしています。
また、アツマールはwindowにアツマール用APIが生えていて、ランキング機能へのアクセスが提供されているためそれも一応対応してあります。

また、実験放送上では背景を透過することにより、映像を背景に写しながらゲームができますが、アツマール上では背景が黒固定であるため、背景画像として白Spriteを一枚貼ってあります。半透明にする、isAtsumaruのときのみ出すなど、適宜出し分けてもいいでしょう。

ローカルストレージへのアクセス、実験放送上でのマルチプレーなど、対応すべき課題はまだまだありますが、最低限これで実験放送、アツマール両方で簡単なゲームが作れるようになります。

### シーン遷移
現在実験放送で提供しているゲームはだいたい、以下のようなシーン遷移を辿ります

 - タイトル画面
 - 説明画面
 - ゲーム本編
 - 結果表示
 - (ランキングゲームの場合)集計と全体結果発表 

ここから大きく逸脱しないよう、あらかじめ幾つかのシーンを作成し、遷移先も作りました。
利用者は各シーンを編集し必要な演出を加えるだけで、既存のUXから大きく外れないようなゲームが作れます。

### ローディング画面のカスタマイズ
シーン遷移に伴うアセットの読み込みで表示されるローディング画面が気に入らなかったのでカスタマイズできるようにしました。
この機能はソースコードを読むと存在する事がわかりますが、**特にドキュメントがなかったので多分誰もやってない**と思います。
大量に画像や音声を使うようなゲームを作る際に利用してみてください。

### 残り時間の制御
実験放送上では、放送者がただ単に遊ぶゲームとは別に、ランキングゲーム、と呼ばれるものを提供できます。
これは**一定時間内にゲームでスコアを稼ぎ、その結果を参加者全員で競う**という機能です。

この制限時間は実験放送上で**特定条件下で起動された時のみ渡ってくる**ため、アツマール上などでも動くようにある程度吸収しています。
また、制限時間がくると強制的に集計 -> 結果発表へ遷移するため、タイトル画面や結果表示の表示時間を引いた上でゲーム本編に渡す必要があります。
これも一応ケアしてあります。

いちおう、ランキングゲームに対応させない場合、つまり特に制限時間を設けないゲームも作れるようにしてあります。

# おわりに
実験放送上で動くコンテンツの話と、それを作るテンプレの話でした。
ちょうどこれから寒くなり、インドアシーズンが到来しますので、こたつの上にパソコンを置いてゲームを作ってみるなどいかがでしょうか。
作ったゲームはぜひ、アツマール、そして実験放送へ投稿してみてください。勿論、便利ツール系も歓迎です。




テンプレの内容に不備があった際はプルリクも歓迎です。

# リンク集
[対応コンテンツ作成ガイド](https://akashic-games.github.io/guide/ranking.html)
[アツマールからの投稿方法](https://akashic-games.github.io/guide/export-atsumaru.html)
[連載中の記事](https://dwango.github.io/niconico/)
[実験放送コンテンツ関連のTwitter](https://twitter.com/akashic_talk)