スキップしてメイン コンテンツに移動

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

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

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

5月末にあった無料お試し+半額セールで 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) でできます。50%の透明度の緑ならば 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をやって、また停滞してきたら日記ソフトをやってと切替ながら進めていきたいです。

コメント

このブログの人気の投稿

QTableView で表を表示してみる

タイトルは駄洒落を狙っているわけではありません。 こんばんわ SakuraCrowd です。 今回は今作っているソフトの経過報告です。 最近のブログのパターンは、 「XXX作ったよ。これがスクリーンショットね。あとこんなこと思ったよ。」 という流れですが、 今日はできていないソフトの部分的な話なので、 いつもよりもプログラムちっくな話になると思います。(´Ծ_Ծ´)メガネノトキハマジメブッテル QTableView は GUIライブラリ Qt のクラスです。 それを Python で使うための PySide というライブラリを使っています。 某表計算ソフト っぽい表の GUI です。 このデータの日付が 09/01 なのでおそらくその日に   QTableView 使うぞ!(`・ω・´) とサンプルデータを作ったのでしょう。 Qt Designer という GUI エディタを使うとポトペタでウィンドウを設計できます。 選択できる GUI の中に QTableView と QTableWidget があります。 どちらも上のような表の GUI です。 QTableWidget は 簡単 に値をいれたりできます。 Qt Designer 上で直接編集 することができるので、 サンプルの表を簡単に作ることができます。 それに対して、 QTableView は Qt Designer 上では値を編集できません。たぶん。 QTableView の強みは MVC の構造 を使えることです。 名前のとおり QTableView は View です。 これにデータを管理している Model オブジェクトを設定して使います。 Model クラスを作る手間がかかりますが、 GUI の細かな操作をしなくても Model に応じた表を表示してくれます。 Model は QAbstractTableModel を 継承 して作ります。 コンストラクタで基底クラスの処理を呼び出し、いくつかの純粋仮想関数をオーバーライドします。 def __init__ ( self , parent= None , *args):...

和風狩ゲー「WildHearts」プレイ日誌(ツイートまとめ)

幻想的な和風のおとぎ話の世界のような雰囲気で始まる、カラクリで戦略が広がる狩ゲー 「 Wild Hearts 」のプレイ感想(主にツイート)のまとめです。 通常価格は1万円近くしますが、Steam のスプリングセールで 85 % オフの 1, 455 円で購入しました。 カラクリは思ったより全然簡単に出せて面白い!幻想的なマップと御伽噺のような獣たち 20250317 https://x.com/SakuraCrowd/status/1901213871937134633 カラクリ(最初はハコ)を一瞬で配置してそれに乗ってジャンプ強攻撃したり、高い壁のぼったりする要素が新しい。 すごく感動したのが、マップのおとぎ話のような幻想的なデザイン。 フィールドには入れる小屋があったり、それを壊されたり、ダイナミックなステージの変化も楽しい #WildHearts 武器強化や図鑑がこれから増えていくのを思うとワクワク!20250316 https://x.com/SakuraCrowd/status/1901215264269906190 武器を細かく強化していけそうなのがわくわくする 野営地に置く鍛冶の施設とかも少しずつ解除して、好きな位置に配置できる あと討伐した敵の情報も倒した数で詳細な情報が見られる #WildHearts 1バトル5分だけどハラハラ!初の武器強化! 20250317   https://x.com/SakuraCrowd/status/1901597289082405135 ハナヤドシを5回狩ると図鑑が詳しくなって、生態の説明の他に、レアなアイテムを落とす部位もわかった。 しっぽの先についている塊に栄養を吸い取られているためにいつも貪欲らしい。 その塊を何とか3回部位破壊して今作れる一番強いからくり刀できた 一戦5分くらいでできるのがいい #WildHearts コハクヌシを倒して氏繁救出!マグマみたいなのは琥珀だったのかー 20250317 鍛冶師のなつめが言っていた、氏繁をコハクヌシから助ける コハクヌシの住処の洞窟の上から声がして、探してたらやられてしまったw そのあとまたその場所に戻ってバトル再開して勝った 氏繁はなんか飄々としていて、まじめななつめとの3人の旅が面白くなりそう #WildHearts カラカラとなったらコダマを探すの...

LibreOffice Writer 文書の差分 (WinMerge x TortoiseGit) + 社畜PCの原因と対策

お久しぶりです。皆様におかれましてはお風邪などをひかれてはいませんでしょうか。 春と秋だけあればいいのにヽ(`Д´)ノとつい思ってしまう SakuraCrowd です。 今日はいつものような製作日記ではなく、ちょっとした役立つメモを書きました。 タイトルにもあるとおり、 TortoiseGit への WinMerge の導入の仕方です。 今まではソースコードくらいしか差分で確認しなかったので、 TortoiseGit 標準の Diff ツールで問題なかったのですが、 LibreOffice の Writer が最近自分の中で便利だと話題になっていて、それを差分表示するためにちょっと調べてみました。 #Writer は、文章書いて、ちょっと絵をいれたり表を作るのに便利だと思います。 #リッチテキストのエディタを探していて、これが一番よさそうな気がしたので使ってます。 それとブログを書くときはあまり長く書かないつもりだった、 Win7 PC が社畜PCになってしまった際の原因と対策も後半に書きました。割と有用な情報かもしれませんので、時間がありましたらご覧下さい。 まずは TortoiseGit で Writer の odt ファイルを管理して、差分も普通に表示させる方法です。 WinMerge(+plugin) 導入手順 すでに TortoiseGit はインストールしてある前提ではなします。 1.信頼と実績の窓の杜様から WinMerge 日本語版をダウンロードします。 WinMerge - 窓の杜ライブラリ 私の PC は 64 ビット版なのでそちらを選びました。 2.WinMerge をインストールします。 フォルダを指定し普通にインストールできます。 インストール直前の設定で TortoiseGit をチェックしておくと自動的に TortoiseGit の利用する Diff ツールの設定を置き換えてくれるようです。 これの設定は TortoiseGit の設定の Diff ツールの項目で確認できます。 3.LibreOffice Writer のファイルを読むためのプラグインをダウンロードします。 ぐぐって出てくる英語版のDLサイトは応答がなかったりしましたが、日本...