一括入力がしやすいテキストエディタプラグインの紹介

概要

ツクールのメッセージの一括入力用に4行ごとにボーダーが引かれるVisual Studio Codeのプラグインを作りました。
メッセージを一度テキストエディタでどばっと書いて一括入力で流し込むケースがあると思います。
そのとき、4行区切りになっていると便利だというニーズがあったからです。

4行ごとにボーダーが引かれるエディタ

インストール

まず、Visual Studio Codeをダウンロードします。フリーのマイクロソフト製のエディタです。
インストールしたら起動して、プラグインのインストールボタンを押します。

プラグインのインストールボタン

入力欄に rpgmaker と入力すると rpgmaker-text というプラグインが表示されるのでインストールします。
インストールしたら再読込しましょう。これで有効になっているはずです。

rpgmaker-textをインストール

TIPS

機能をOFFにしたいときは、Ctrl + Shift + P で表示されるコマンド欄でrpgmaker-text:Toggleを選択すればON/OFFを切り替えられます。

On/OFFの切り替え

フリーのビジュアルノベルアセットのFungusが便利

Fungusについて

Unity製のゲームに簡単なストーリーパート的なのをつけたいと思っていた。
アセットストアでビジュアルノベルのカテゴリを開いて物色していたら、やけに高評価でしかもFREEのアセットがあるのを発見。
それがFungus だ。
このカテゴリでは「宴」が有名で、恐らく日本語対応的な意味でも最強だろうとは思うけど、そこまでちゃんとしたものは必要でなかった。
とりあえず、このFungusを試してみることにした。M.I.T. licenseで、ロイヤリティもないので、完全にフリーである。

Fungusの紹介

イメージしやすいようにFungusの画面を一例として出しておく。

Fungusはフローチャートを作って記述する。メニューからコマンドを実行するとヒエラルキー上ではFlowchartというオブジェクトが生成されることになる。
Hierarchy

このFlowchartオブジェクトがあるシーンでは、Flowchartウィンドウを開くことができ、処理を記述することができる。例えば、以下のような感じだ。
図にあるように分岐なども自由にできる。
Fungusのフローチャート

このフローチャートのそれぞれのブロックにインスペクタでコマンドを追加する。
このコマンド群はメッセージの表示、画像の表示、ウェイト、フェード、音声、カメラなど機能は十分にある。
当然のことながら、コマンドから自由にメソッドをInvokeすることができるので、既存システムとのやりとりが可能だ。
フローチャートの開始トリガーがあり、既存システムから呼び出すことも可能である。
フローチャートの各ブロック

また、表示するダイアログも自分の好きなように変えられるので心配ない。

大量の文章を記述するために、テキストでコマンドを実行することもできる。
以下のように記述可能だ。

1
2
3
4
5
john bored left: Wow, I've got my own SayDialog!
sherlock bored right: Big whoop, so do I.
john hide:
sherlock hide:

さらにLuaのスクリプトを組み込むこともできるらしい(試してはいない)。

最後に

Fungusがまさに自分が求めていたもので完璧だった。
興味をもったらぜひFungusを試してみてください。Exampleシーンも豊富で理解しやすいです。

Fungus(Asset Store)
ドキュメント
OpenSourceなのでGithubページもある。

ウィンドウをたくさん出すプラグイン

ウィンドウを画面にたくさん出したら何かに使えるかなぁと思い、作ったけど、何の用途に使えるか不明だった。
せっかく作ったので公開。こういう機能があったら使えるよーというのがあれば教えてください。

ウィンドウたくさん出す

ダウンロードは↓から
https://raw.githubusercontent.com/kido0617/rpgmakerMV-plugin/master/WindowManager/WindowManager.js

使用方法

プラグインを追加したら、スクリプトコマンドで以下のようにします。

1
2
WindowManager.show(0, 10, 10,180, 80); //0番目のウィンドウを x=10,y=10の座標で 180の幅、80の高さで表示
WindowManager.drawText(0, "あいうえお"); //0番目のウィンドウに あいうえお と表示

スクリプト例

画像出したいときは以下のような感じ

1
2
WindowManager.show(3, 400, 200, 300, 300);
WindowManager.drawPicture(3, 'cat'); //Pictureの名前がcatの画像を表示

制御文字使いたい場合は、\を2つ重ねて使う。

1
WindowManager.drawText(0, "\\I[1]あいうえお");

ライセンス

MIT ご自由にどうぞ

マスクを使ってゲージを作る

変わったゲージ

今回はPIXIのマスクの機能を使って変わったゲージを作りたいと思います。
こういうゲージです。

完成図

デザインはともかく、ちょっと特殊な形のゲージです。

画像の用意

画像を2つ用意します。まず、ゲージの枠。
ゲージの枠

そして、ゲージの中身
ゲージの中身

想像のとおり、この2つを重ねるゲージが満タンの状態になります。

マスクを作る

扇形のマスクを使って、ゲージの中身を部分的に描画します。
例えば下図のようにするとマスクをすると下半分の白い部分だけが描画されます。
マスク
なので、ゲージが100%のときは360度の円、ゲージが50%なら180度の円のマスクを設定すれば、パーセンテージに応じたゲージが出来上がります。
ソースコードはこんな感じになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//ウィンドウとしてゲージを作ります
Window_Gauge.prototype.initialize = function() {
Window_Base.prototype.initialize.call(this, 0, 0, 300, 300);
this.opacity = 0; //ウィンドウ部分を消すため
//ゲージの枠を読み込み
var base = new Sprite(ImageManager.loadPicture('Base'));
//ゲージの中身を読み込み
var gauge = new Sprite(ImageManager.loadPicture('Gauge'));
//マスクを作る
var mask = new PIXI.Graphics();
mask.beginFill(0xffffff, 1); //白画像で塗りつぶす設定
//扇を描く。(144, 151)を中心に半径150で0度の角度からπ[rad]の角度で描画
//ここで角度を変数などに格納して描画するようにすれば、値に応じたゲージが出来ます
mask.arc(144, 151, 150, 0, 3.14);
mask.endFill();
gauge.mask = mask; //ゲージの中身にマスクを設定
base.addChild(gauge); //ゲージの枠にゲージの中身をaddChild
this.addChild(base); //できたゲージをウィンドウにaddChild
};

複雑な計算式はプラグインで記述する

ダメージ計算式のプラグイン化

ダメージの計算式は基本的に直接テキストボックスに書けば良い。
しかし、何行にも渡るような複雑な計算式を実現したい場合、狭すぎて記載しにくい。
そこで、そういった場合はプラグインとして記述する方法がある。

例えば、以下のようなプラグインを作る。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(global){
global.Calc = {
SpecialAtk: function(a, b){
//a b は計算式で使っているのと同様
//ここでは例として生きているメンバーのatkの合計をダメージとする
var members = $gameParty.aliveMembers();
var atk = 0;
for(var i = 0; i < members.length; i++){
atk += members[i].atk;
}
return atk - b.def; //returnした数値が計算式の結果となる
}
};
})(this);

そして、計算式を記述する際に、Calc.SpecialAtk(a, b); のように記載すればOK。

こんな感じ

応用

これと同様に条件分岐のスクリプトの箇所もプラグイン化すると複雑な条件分岐を書きやすくなる。

こんな感じ