ニコニコっぽいテキストを表示するプラグイン

概要

現代もののゲームをやるとニコニコ動画的な動画サイトが登場することがあります。そこで、ツクールMVでもそういった表現ができるようにするプラグインを作成しました。
プラグインの仕様、雰囲気は下記動画参照です。

使い方

イメージ図

こういう使い方をします。細かい説明は以下で解説します。

ピクチャとリンク

まずはじめに本プラグイン対象となるピクチャを指定する必要があります。
ピクチャ番号が1のときは、スクリプトコマンドで NLTManager.linkPicture(1); と指定します

文字の表示

文字の表示方法ですが、一番シンプルな方法は以下です。
NLTManager.show('こんにちは');
文字位置指定は以下でできます。ニコニコと同様に naka、ue、shitaに対応しています。デフォルトはnakaです
NLTManager.show('こんにちは', 'ue');
文字色指定は以下でできます。色は white、black、red、blue、orange、green、pink、cyan、purple、yellowです。デフォルトはwhiteです
NLTManager.show('こんにちは', 'ue', 'red');
文字サイズ指定は以下でできます。 使えるのはb、m、s です。デフォルトはmです。big medium、small の略です
NLTManager.show('こんにちは', 'ue', 'red', 'b');
基本的に文字のy位置はランダムです。なので実行ごとに違う結果になります。しかし、演出上必ず決まった位置に表示したい場合もあると思います。
そのときは、以下のように指定できます。 0 ≦ y < 1 の間で指定してください。 0.5で真ん中です。
NLTManager.show('こんにちは', 'ue', 'red', 'b', 0.5);

設定する必要がない、デフォルトで構わない項目はnullでも可
NLTManager.show('こんにちは', null, null, null, 0.5);

ディレイ

NLTManager.show('こんにちは');
NLTManager.show('おはよう');
NLTManager.show('こんばんは');
とすると、3個が同じx位置に表示されてしまい、不自然な感じになるので、それぞれの間にデフォルトで10フレームのディレイが設けられています。
このデフォルトを変えたい場合は以下のようにします。
NLTManager.setDelay(5);

アドリブ

何も表示するテキストがない場合にランダムに表示されるテキストを登録します。パラメータはNLTManager.showと同じです
NLTManager.addAdlib('www', 'naka', 'orange', 's');
この追加した文言は場所移動、セーブ、ロードなどをしても保持されます。なので初期化したいときは明示的に以下のスクリプトを実行してください
NLTManager.clearAdlib();

リンク解除

途中でピクチャと本プラグインの関係を絶ちたい場合は以下を実行します
NLTManager.unLink();
また単純にピクチャを消去すればリンクは解除されます

フォントの設定

font/gamefont.css 内に以下のように本プラグインで使用したいフォントを指定します

1
2
3
4
@font-face {
font-family: ForNico;
src: url("noto.otf");
}

そして、プラグインパラメータに Font とあるのでこれの値を上記例だと「ForNico」に設定します

透明ピクチャを活用

マップ画面全体に適用したいとか、ある領域に描画したいとか、そういうときは透明なピクチャを表示してそれにリンクしてください。
マップ画面全体の場合は816x624の透明画像をピクチャとして表示して、それを本プラグインの対象にするという方法です。

ダウンロード

https://raw.githubusercontent.com/kido0617/rpgmakerMV-plugin/master/NiconicoLikeText/NiconicoLikeText.js

制限事項

  1. ツクールで使用できる制御文字については実装していません。変数値、アクター名は実装する価値はあると思っています。制御文字の文字色、文字サイズ、アイコンはニコニコ感がなくなるので実装する予定はありません。
  2. 複数ピクチャに対して同時に本プラグインを適用することはできません。最後にNLTManager.linkPicture(n)を実行したピクチャが対象です。

ライセンス

MIT
自由にご利用ください。

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

概要

ツクールのメッセージの一括入力用に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
};