RPGツクール入門（ちょっと変化球） #JavaScript

色々作りたいものがありながらも、デザインが全くできない・・・
対処法の一つとして、使えないかと考えたのが、RPGツクール。
しかも、今のバージョンでは基本となっている言語がJavaScriptになったということで、最近勉強していた成果も生かせるのではないかということで入門してみました。

入門情報

まずは、下記で基礎を学習しました。

RPGツクールMV 初心者講座
恐らくこれが公式だし、最初に読むべきものですよね。駆け足で一通り読みました。

RPGツクールMVゲーム製作講座
動画説明で、分かりやすい。ニコニコ動画は、無料コースだと1.25倍速までにしかならないので、途中ダレルところもありますが、全部見て損はないなと思いました。
個人的には最初に作る犬ゲームが楽しかったので、とりあえずそれをベースに作ってみました。

オンライン化（いきなり！）

なんとなく作り方が分かったところで、オンライン化に挑戦します。
究極的にはゲームを作りたいわけではなく、外部サービスとの連携がしたいなと。
そもそも、それができそうだということでやることに決めたということもあります。
下記2サイトの内容を使わせていただき、プラグインを組み込んでみました。

(1)RPGツクールMVでオンラインゲームを作ろう！

(2)RPGツクールMVでオンラインセーブ〜Firebaseを添えて〜

作ったくそげーを公開してもあまり意味はないので、以下、プラグイン組み込みにあたって苦労したところを書いておきます。（単なる初心者としの苦労です）

プラグインの使い方

まず、(1)のOnlineAvatar.jsを使用します。プラグイン配布はこちらですね。
オンライン通信で他のプレイヤーを表示するプラグイン

組み込めば（ただし、スイッチ0001をON）そのまま使えるということで、組み込んだつもりでしたが、一緒に組み込むべき他のプラグインが入れたつもりで入っていなかったり、そのために、色々マップイベントを書いてみたりで、はまってました。必要なものをちゃんと組み込めば動きますね。

また、プラグインのパラメタを指定するわけですが（このプラグインだと、Firebase接続情報）、それすらやり方が分からず、スクリプトファイルのコメントを直接上書きしていました。そうではなく、この辺をちゃんと読みましょう。
初心者講座　プラグイン編

まだ分かっていないこととしては、
・キャンセル用のキー（Esc、X）をジャンプ用に使ってしまうと、メニューが出せなくなる。
　Escだとメニューで、Xだとジャンプというようにはできないか。
・ShiftキーにInput欄表示を割り当てているが、スマホの場合にも使えるようにできないか。
ということです。

Firebase接続

まず、プロジェクトを作るだけでなく、アプリを作る必要があるということ。まずはここから。
次に、最初は、接続情報もどこに書かれているか分からず、ネット情報を見て、
authDomainはproject-id.firebaseapp.comか、
なんてやったのですが、
「プロジェクトの概要」の右の歯車→「プロジェクトを設定」で初期表示される「全般」タブの、画面下の方に、「マイアプリ」の欄があり、その中のウェブアプリの情報として、スクリプトが書かれているので、それを見れば分かります。

次に、データベースを使うわけですが、「Cloud Firestore」ではなく、「Realtime Database」を使用します。
そして、そちらを開いた画面の、「ルール」タブで、公開設定にするということです。

成功すると、こんな感じでデータ登録されるのが見えます。なるほど。

また、(2)のプラグインは、ストレージを使用するので、使えるように、「Rules」タブで設定を書きます。

なお、順番は前後しますが、動くようになったかと思いきや、画面が開かず、Consoleを見ると、

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/・・・'
 from origin 'http://localhost' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested resource.

が出ていました。
CORSはまたかという感じですが、どう対処するか悩みました。
一番楽なのは、Firebaseで指定してしまう方法かなと思います。
ウェブでファイルをダウンロードする CORS の構成

テスト環境

(2)のプラグインは、サーバにデプロイした環境でないと外部連携はしないようにしているということで、これを試すためにデプロイ環境を作りました。
実際に、某ホスティングサイトにもアップしているのですが、デプロイファイルが意外とサイズが大きく（大部分は音声ファイルですが）、確認のためにいちいちデプロイするのがちょっと面倒、
ということで、ローカルにデプロイ環境を作るべく、ローカルのIISにサイトを作りました。（IIS久しぶりに触った気がする・・・）
ここでもちょっとはまったのが、jsonファイルが読み込めていないというエラー。
「MIMEの種類」から、拡張子「json」に対して、「application/json」を追加する必要がありました。

プラグイン競合？

最後に、二つのプラグインがそれぞれでFirebaseへ接続しに行くことによるエラーがあったため、回避のためにスクリプトをちょっと修正しました。

まず、(2)のプラグインで、Firebaseに接続するところで、既に接続済みというようなエラー。
(1)で先に接続してしまうからですね。これは、(2)の方を、修正しました。

// FirebaseSave._app = firebase.initializeApp(param.firebaseconfig);
FirebaseSave._app = !firebase.apps.length ? firebase.initializeApp(param.firebaseconfig) : firebase.app()

これでここは良くなりましたが、今度はこんなエラー。

Firebase Storage: No default bucket found.
Did you set the 'storageBucket' property when initializing the app?

最初はストレージにバケットを作っていないかと思ったら、良くエラーを見るとそうではなくて、storageBucketの設定をしていないということ。ストレージは、(2)の方でしか使っていないわけで、(2)の方でinitializeAppする際の設定にはstorageBucketが含まれるわけですが、上で(1)で作った方を使うのでそれが生きない。
ということで、(1)の方にもinitializeAppの設定を追加するようにしました。
パラメタを追加して（本当にコメントとして書くことで画面に表示されるようになるんですね）、プラグイン画面で設定記述をして、パラメタの読み込みを追加。

//var defaultProject = firebase.initializeApp({apiKey: ps['apiKey'], authDomain: ps['authDomain'], databaseURL: ps['databaseURL']});
var defaultProject = firebase.initializeApp(
    {apiKey: ps['apiKey'],
     authDomain: ps['authDomain'],
     databaseURL: ps['databaseURL'],
     storageBucket: ps['storageBucket'],
    });

これで無事動作するようになりました。

今後

さて、今後はどうするか。

まず、直近では、現在の動作の改善。
上に画像を貼ったように、データが保存されますが、キャラクタ情報はユーザ毎ですが、スイッチは全ユーザ共通となっています。
そうすると、例えば、メンバーの入れ替えをやってスイッチを変更して、そのスイッチによりメンバーの表示を消す、なんてことをやると、他のユーザの画面でも突然表示されていたメンバーが消えてしまうということになってしまいます。
そういう風にスイッチを共有することで、全体制御ができるのもよいと思うのですが、ユーザ毎に別にしたいスイッチもあるだろう、ということで、そこの制御ができるとよいなと思いました。

もう一つは、より汎用的なAPI呼出し。
例えば、クイズイベントを作ってみたのですが、問題を大量に用意して、その出題をランダムにしたいと考えたときに、ツクール内で管理するのはつらいので、外部にデータベースを持って、API経由で利用できるとよいなと思っています。

プラグインのソースを見させていただくと、なかなかハードルは高そうではありますが、ちょうど今年のGWはゴールデンでなくなってしまっているので、GameWeekにしてみようかと思います。