RPGツクールは昔からあるRPGを作成するためのプラットフォームです。MVからHTML5に対応し、Webアプリケーションとしてリリースできるようになりました。RPGツクール最新作であるMZでもそれは変わりません。
今回はそんなRPGツクールMZを使って、NCMBにファイルを保存するプラグインを作ってみます。今回はゲームの画面をキャプチャして、ファイルストアに保存する方法を紹介します。
ファイル構成
RPGツクールの js/plugins
ディレクトリの中にJavaScript SDKとプラグインファイル(今回はmBaaS.jsとしています)を保存します。さらに MakeScreenCapture.js も追加します。
画面キャプチャ管理 - 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);
ファイルアップロードは一行で行えるのが分かるかと思います。
これでファイルストアにRPGツクールのスクリーンショットが保存できます。
まとめ
任天堂スイッチなどのゲームで、ボタン一つでゲーム画面を保存する機能があります。記念すべきシーンは保存しておきたいと思うものでしょう。さらにNCMBを使うことで、画像をクラウドにアップロードし、他のユーザとも共有できるでしょう。
ぜひRPGツクールとNCMBを使ってゲームの可能性を拡張してください!