ツクールMVのjsプラグインを作ってGitHubのリポジトリで公開してみた

数日前に、ツクールMVのプラグインを javascript で作成して公開しました。

このときのツイートは、リツイートが２１件、いいねも４４件と、
今までのツイートの中で最も反響があったものでした。
うれしいので、ツイートをここに埋め込んでおきます(=^ェ^=)

タイトル画面にテキストを表示するプラグインを作りました。
クレジット表記やゲームのバージョンを簡単に表示できます。
NYSLなのでご自由にお使いください。#ツクールMVhttps://t.co/SpcLCPp35i pic.twitter.com/KOXuuW1ACY

— さくらくらうど (@SakuraCrowd) 2016年6月12日

５月末にあった無料お試し＋半額セールで steam の RPG Maker MV を買いました。
HTML5 に対応してウェブブラウザやスマホでできたり、
javascript を使ったプログラムをプラグインとして組み込めることにわくわくしています。
# 他の steam のゲームのように積みゲーにならないようになんとか一作は作りたいです。

SCTitleText プラグインとは？

タイトル画面に好きなフォントで好きな位置にテキストを表示するプラグインです。
くわしくは、 GitHub の公開ページの README.md に書いてありますのでそちらをご覧下さい。
RMMV/SCTitleText at master · sakura-crowd/RMMV


好きな音楽素材を使おうとしたときに
タイトル画面に提供者名を記載しようとしたら、
ゲームタイトル以外は簡単に設定できませんでした。

そこで、タイトルにテキスト描画するだけならば
プラグインの勉強にもちょうどいいだろうと思い作ってみました。

プラグインの設定ダイアログ

サンプル画像

 ツクールMVのプラグインマネージャで、このプラグインを選択して、
表示したい文字列や位置やフォントを設定するとサンプル画像のように表示されます。
A, B, C で指した場所のテキストがこのプラグインで表示したテキストです。

半透明も rgba(R, G, B, A) でできます。５０％の透明度の緑ならば rgba(0, 255, 0, 0.5) となります。

プラグイン作りの勉強方法

ウェブの解説ページや同梱の help の js のページを見たり、それでもわからない部分は実際に動作している js のソースコードを読んで勉強しました。

メニュー[Game]->[Open Folder] で開いた場所の js フォルダや js/plugins フォルダの js がとても参考になりました。
特に最初は、プラグインの勉強として js/plugins フォルダのプラグインを読みました。

SCTitleText も構造は js/plugins フォルダに最初から入っていた js を参考にしています。

プラグインの作り方

js フォルダにある javascript で定義されたクラスのイベントや関数は
ゲーム実行中に呼び出されます。
プラグインでは、そのイベントや関数の再定義をすることで改造できます。

SCTitleText プラグインではタイトル画面での処理を改造するので
Scene_Title というタイトル画面を管理するクラスの createForeground 関数を再定義することでテキストを表示しています。
テキストの描画方法などは、 js フォルダの rpg_scenes.js の Scene_Title の実装を参考にしました。

プラグインへ渡すパラメータの定義

さきほどのプラグインの設定ダイアログでは、文字列やフォントの設定をしています。

設定ダイアログで入力できるパラメータは、 js ファイルのコメントで指定します。
これも js/plugins フォルダの js を参考にすればよいです。

	/*: * @plugindesc
	* タイトル画面にテキストを表示します。
	* クレジット表記などにお使い下さい。
	* @author SakuraCrowd
	*
	* @param Font Size
	* @desc テキストのフォントサイズです。
	* @default 16 * * @help * ヘルプボタンを押したときに表示されるテキストを記述します。 */

これは SCTitleText の一部を改変したコメントです。

まず最初にコメントの始まりは /* ですが /*: のようにコロンを追加します。
これで、プラグインの設定ダイアログ用のコメントであることを表します。
/*:ja から始めると日本語版を別に定義できるようです。

だいたい雰囲気でわかると思いますがさらっと説明します。
@plugindesc のあとに書いた文字列はプラグインの説明として表示されます。
@author のあとに書いた文字列は作者名として表示されます。

@param はパラメータの名前です。
@desc は直前のパラメータの説明です。パラメータ編集のダイアログで表示されます。
@default はパラメータの既定値です。
@param, @desc, @default のセットはパラメータごとに繰り返し使うことができます。

@help のあとに書いた文字列はヘルプボタンを押したときのウィンドウに表示されます。

プラグインのパラメータの受け取り方

	var filename = 'SCTitleText'
	var parameters = PluginManager.parameters(filename);
	var text = String(parameters['Text'] || '')
	var x = Number(parameters['X'] || 0);
	var y = Number(parameters['Y'] || 0);
	var fontSize = Number(parameters['Font Size'] || 16);

PluginManager.parameters(プラグイン名) でパラメータの辞書（連想配列）を取得できます。

なかった場合の規定値は || に続けて記述します。

もともとの関数を呼び出す

さきほど、プラグインは改造したい場所の関数を再定義するといいました。

しかし、再定義するだけでは、もともとの機能が失われてしまいます。

そこで、関数を上書きする前に、元の関数を別の一時変数に覚えて起きます。

そして、それを再定義した関数の中で呼び出すことで、

もともとの機能に独自の機能を追加することができます。

	var _Scene_Title_prototype_createForeground =
	Scene_Title.prototype.createForeground;
	Scene_Title.prototype.createForeground = function() {
	_Scene_Title_prototype_createForeground.call(this);
	var maxWidth = Graphics.width - x * 2;
	var maxHeight = Graphics.height - y;
	this._gameTitleSprite.bitmap.textColor = textColor;
	this._gameTitleSprite.bitmap.outlineColor = outlineColor;
	this._gameTitleSprite.bitmap.outlineWidth = outlineWidth;
	this._gameTitleSprite.bitmap.fontSize = fontSize;
	this._gameTitleSprite.bitmap.fontFace = fontFace;
	this._gameTitleSprite.bitmap.fontItalic = fontItalic;
	var width = this._gameTitleSprite.bitmap.measureTextWidth(text);
	var height = fontSize + 1;
	this._gameTitleSprite.bitmap.drawText(text, x, y, width, height);
	};

Scene_Title.prototype.createForeground が上書きする関数です。

function() {...} で上書きする前に var _Scene_Title_prototype_createForeground にもとの関数を退避しています。

あとは、再定義した処理の冒頭で、 call してもともとの処理を実行しています。

そのあとで、改造したい処理を追加します。

GitHub での公開方法

javascript のプラグインを説明つきで公開する方法として GitHub は便利です。

とはいっても、今まで Gist しか使ったことがなかったので少し時間がかかりました。

しかし、やってみると思ったよりかなり簡単です。

まず、プロフィールのページでリポジトリを選択し、 New でリポジトリを作成します。

readme.md はここで作成することができます。

さらにフォルダやファイルなどを作る場合は、作成したリポジトリのページで、 create new file ボタンを押してドロップします。

ファイルに間違いがあって修正したければ upload ボタンを押してから同名のファイルをドロップすれば更新してくれます。

今後の予定

ツクールMVで、前々から作ろうとしていた「デスチェリー農場へようこそ」の続編を作ろうと企画を練り直したりしてわくわくしています。

それと並行して、日記ソフトのほうも作っています。

仕様が決まらなくなったりだらけてきたら、ツクールMVをやって、また停滞してきたら日記ソフトをやってと切替ながら進めていきたいです。