FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

RGPツクールでゲームスクリーンショットをクラウドに保存する

f:id:mbaasdevrel:20210513234321p:plain

RPGツクールは昔からあるRPGを作成するためのプラットフォームです。MVからHTML5に対応し、Webアプリケーションとしてリリースできるようになりました。RPGツクール最新作であるMZでもそれは変わりません。

今回はそんなRPGツクールMZを使って、NCMBにファイルを保存するプラグインを作ってみます。今回はゲームの画面をキャプチャして、ファイルストアに保存する方法を紹介します。

ファイル構成

RPGツクールの js/plugins ディレクトリの中にJavaScript SDKとプラグインファイル(今回はmBaaS.jsとしています)を保存します。さらに MakeScreenCapture.js も追加します。

f:id:mbaasdevrel:20210513211543p:plain

画面キャプチャ管理 - MakeScreenCapture.js - #ツクプラMZ

mBaaS.jsの内容

まずプラグインの説明などを記述します。 @param はプラグイン設定時に利用する変数になります。ここではNCMBを初期化するアプリケーションキーとクライアントキーを指定しています。

//=============================================================================
// RPG Maker MZ - Save Data to mBaaS
//=============================================================================
/*:ja
 * @target MZ
 * @plugindesc ボタンをクリックするとNCMBにデータ保存するプラグイン
 * @author Atsushi Nakatsugawa
 *
 * @param applicationKey
 * @desc NCMBのアプリケーションキー
 * @default *******************
 *
 * @param clientKey
 * @desc NCMBのクライアントキー
 * @default *******************
 *

設定の続きです。次にプラグインコマンドとして呼び出す機能を設定します。今回は save コマンドでメッセージを保存します。

 * @command capture
 * @desc キャプチャをファイルストアにアップロードします
 * 
*/

スクリプトについて

初期化

まずスクリプト全体を (() => {})() で囲みます。これはJavaScriptの変数スコープを制限することで、他の機能へ悪影響を及ぼさないためです。

(() => {
  // この中に記述します
})();

プラグイン初期化時のパラメータを受け取る

プラグイン初期化時に設定したアプリケーションキーとクライアントキーを受け取るには PluginManager.parameters を使います。

const pluginName = 'mBaaS';
onst params = PluginManager.parameters(pluginName);

そして、動的にJavaScript SDKを読み込みます。JavaScriptを読み込み完了すると onload が呼ばれますので、このタイミングでNCMBを初期化します。今回は匿名認証を使って認証も行っています。

let ncmb;
const js = document.createElement('script');
js.type = 'text/javascript';
js.src = './js/plugins/ncmb.min.js';
document.querySelector('head').appendChild(js);
js.onload = () => {
  ncmb = new NCMB(params.applicationKey, params.clientKey);
  ncmb.User.loginAsAnonymous();
}

プラグインコマンドの設定

プラグインコマンドは PluginManager.registerCommand で設定します。

PluginManager.registerCommand(pluginName, 'capture', async (args) => {
  // この中に記述します
});

まず MakeScreenCapture.js を使ってスクリーンキャプチャを撮り、さらにそのデータBitmapを取得します。

await SceneManager.takeCapture('png');
const b = SceneManager.getCapture();

Bitmapは _canvas にCanvasデータがあります。そのCanvasに対して toBlob を実行するとBlobデータが取得できます。

b._canvas.toBlob(async (blob) => {
  // この中に記述します
}, "image/png");

最後にそのデータをファイルストアにアップロードします。その際にはファイル名が必要なので、自動で生成しています。

// ファイル名
const fileName = (new Date).getTime() + '.png';
// ファイルアップロード
await ncmb.File.upload(fileName, blob);

ファイルアップロードは一行で行えるのが分かるかと思います。

f:id:mbaasdevrel:20210513234400p:plain

これでファイルストアにRPGツクールのスクリーンショットが保存できます。

まとめ

任天堂スイッチなどのゲームで、ボタン一つでゲーム画面を保存する機能があります。記念すべきシーンは保存しておきたいと思うものでしょう。さらにNCMBを使うことで、画像をクラウドにアップロードし、他のユーザとも共有できるでしょう。

ぜひRPGツクールとNCMBを使ってゲームの可能性を拡張してください!

RPGツクールMZ

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。