power spot. 2023/06/18 00:10

カスタムメニュープラグイン講座(第11回)「イベント、項目描写スクリプトの可能性」

RPGツクールMZ向けのトリアコンタン氏のプラグイン「カスタムメニュープラグイン(SceneCustomMenu.js)」の使い方講座です。

リンク:
カスタムメニュー作成プラグインを調べてみた(とんびさん)
RPGツクールMZ プラグイン講座
RPGツクールVXAce & MV & MZスクリプトwikiとプラグイン

Download → RPGツクールMZ データベース用リファレンス

Download → RPGツクールMZ ゲームデータ用リファレンス


今回は、イベント、項目描写スクリプトの可能性を紹介します。


【1】イベントについて

本講座第五回でも紹介しましたが、ウィンドウごとの「イベント」では何かしらの「処理」を行います。引用します。

決定イベント…決定ボタンが押された時の処理。
キャンセルイベント…キャンセルボタンが押された時の処理。
カーソルイベント…カーソルが移動した時の処理。
ボタンイベント…任意のボタンが押された時の処理。

さて、第五回講座でも紹介しましたが、カスタムメニュープラグインのすごいところは各イベントで「コモンイベント」も「スクリプト」も使用出来るということです。
ツクール的なイベントを使いこなせていれば、コモンイベントを呼び出せるといろんなことが出来るでしょう。

今回は「スクリプト」に焦点を当てたいと思います。

例えば、決定イベントで「特定のスイッチ:nをON」にする場合は、各イベントのパラメータ「スイッチ(SwitchId)はn」と設定すれば、イベント発生時にスイッチ:nがONになります。
しかし、これが決定イベントでスイッチ:をON、キャンセルイベントのときにはスイッチ:nをOFFにしたいというときはどの様にパラメータを設定すれば良いでしょうか。

1つはコモンイベントを使用する場合です。

キャンセルイベントでコモンイベント:mを呼び出す処理を設定します。
コモンイベント:mではスイッチnをOFFにする処理をイベント処理として入力します。
これでキャンセルイベントでスイッチ:nをOFFにする処理が出来ます。
ですが、これではイベントごとにコモンイベントを1つ消費する非効率的な使用となってしまいます。スイッチ1つをOFFにするぐらいはコモンイベントを介せず処理したいですね。


スイッチ1つだけ操作するのにコモンイベント1つ消費はもったいない

そこで、2つ目のやり方です。パラメータのスクリプトにスイッチ:nをオフにする処理を記述します。

$gameSwitches.setValue(n,false); //n番のゲーム用スイッチをOFF(false)にする

このように記述すれば、コモンイベントを消費せずにスイッチOFFの操作が出来ます。



【2】イベント処理(スクリプト)の記述の仕方

さて上記のやり方では、スイッチを1つしかOFFに出来ません。コモンイベントならばイベント内に処理をいくらでも記述出来るので、処理が複雑になるならばやはりコモンイベントに頼らざるを得ない・・・ そう考えるのは自然なことです。
実際、処理が複雑化するならばコモンイベント使うほうが管理も簡単だし、処理の流れの把握を確認するのも容易だと思います。
ただ、今回の例のようにスイッチを1つOFFに加えもう1処理、2処理ぐらいはコモンイベントを介せず記述出来れば・・・ そのやり方を紹介します。

JavaScriptでは、エディタ上では処理を記述したあと、; 」(セミコロン)を入力して改行しています。これはツクールのイベントと同じで、処理の次の段階に移行するという意味です。
ただ、ここで重要なのは、「 ; 」は必須ですが、改行は必須ではないということです。【重要!】
つまり複数行に渡って処理を記述してあるスクリプトは、1行にまとめても良いのです。

先程のスイッチを1つではなく、3つ処理するための記述は以下のようになります。

$gameSwitches.setValue(10,false); //10番のゲーム用スイッチをOFF(false)にする
$gameSwitches.setValue(25,true); //25番のゲーム用スイッチをON(true)にする
$gameSwitches.setValue(487,true); //487番のゲーム用スイッチをON(true)にする

「;」を省かずに1行にまとめてみます。

$gameSwitches.setValue(10,false);$gameSwitches.setValue(25,true); $gameSwitches.setValue(487,true); 

これをイベントの「スクリプト」に記述すれば、3つのスイッチ操作を処理することが出来ます。



【3】イベント系スクリプト記述の応用編

スクリプト記述で、処理のコードが長い時には一行で入力すれば処理出来ることが分かりました。
それでも、コード自身が長くなり過ぎると、可読性が悪くなったり、修正が大変なので、長い記述はおすすめしません。

応用編として紹介するのは、自分でスクリプト(メソッド)をプラグインファイルに追加し、それを呼び出す方法です。

記述するためのファイルは、トリアコンタン氏が用意してくれたものを利用してみます。

Download → SceneCustomMenuEx.js

ファイルをダウンロードし、ツクールのプロジェクトにプラグインをインストールします。
この時、SceneCustomMenuEx.jsはカスタムメニュープラグインの下になるようにします。


イベント処理のメソッドは、「Scene_CustomMenu」クラスから参照されます。
例えば、メソッド名を「testFunction」とした場合、イベント処理のスクリプトで呼び出すためには次のように記述します。

Scene_CustomMenu.prototype.testFunction = function(){
//処理を記述
}

ツクールのイベントに例えるならば、「testFunctionという名前のコモンイベントを追加」と言う感じでしょうか。

この中に処理を記述し、カスタムメニュープラグイン内のイベント処理・スクリプトには以下のように記述します。

this.testFunction();


以下がテスト用のコードです。呼び出されたタイミングでalert()でポップアップウィンドウを表示しています。

Scene_CustomMenu.prototype.testFunction = function(){
 alert("testFunctionの処理");
}

テストプレーの様子です。

カーソルイベントにて処理を発動させています


【4】項目描写スクリプト

上記のイベントで1行にまとめる方法を紹介しました。これは「項目描写スクリプト」でも同様のやり方で複数の処理を実行出来ます。
ただ、項目描写スクリプト自体が複数項目を入力出来るので、特殊なやり方を紹介します。

ifやswitchを使った処理を1行で記述する事が出来ます。

例えば、itemにアクター情報が格納されている状態(一覧取得スクリプト→[this._actor]; // メインメニューで選択したアクター)で、アクター1の時はテキストの色を青、アクター1以外はテキストの色を黄色にしたいとします。
その場合のコードは、以下のようになります。

if(item._actorId === 1){
  this.changeTextColor("#FFFF00");
}else{
  this.changeTextColor("#0000FF")
}

これを一行で記述して項目描写スクリプトに入力します。

if(item._actorId === 1){this.changeTextColor("#FFFF00");}else{this.changeTextColor("#0000FF")}

カーソル移動時にウィンドウの再描画スイッチをONにすることを忘れないように注意してください。

【5】項目描写スクリプトの応用編

一行で記述することはなるべく避けたいとして、イベント系スクリプトのようにプラグイン自体にメソッドを追加する方法です。
項目描写スクリプトは、クラス「Window_CustomMenu」です。
こちらにメソッドを追加してよりカスタマイズしてもよいでしょう。
メソッドを追加したら、項目描写スクリプトで記述します。


【6】応用編 ウィンドウを動かしてみる

ウィンドウを動かすプラグインを利用してみましょう。
以下の2つのプラグインを導入する必要があります。

プラグイン1 → ZinTween
プラグイン2 → ZinWindowTween
Download → huuzin(GitHub)
作者 → 風塵様

こちらのプラグインを導入すると、ウィンドウを上下左右に動かすことが出来ます。

次に、ウィンドウを動かすコードです。
x座標のみ移動するメソッドです。指定の座標xに向かって移動します。

window.ztXMoveTo(x,duration); // x:x座標、duration:時間

具体的に見ていきます。
シーンで生成されるウィンドウは、this._windowLayer.childrenという配列に格納されます。
例として、「x座標250に0.7秒かけて移動するウィンドウ」を挙げると

this._windowLayer.children[3].ztXMoveTo(250,0.7); //x:250に0.7秒かけて移動

となります。実際に使用する数値に修正し、上記コードをイベント(決定イベンドなど)のスクリプトに入力します。


ウィンドウの初期X座標を-800に設定。キャンセルイベントも同様にしてスクリプトを記述しています。

ウィンドウの生成順によってchildren[n]は変化します。自分で数値nを変えて試し、動かしたいウィンドウを見つけましょう。

また、ZinTweenでは「イージング」が設定されているので、そちらも一緒に記述してみます。

※イージング・・・動かす時に「だんだん早く」や「だんだん遅く」など、一定の速度ではない処理のこと。

this._windowLayer.children[3].ztXMoveTo(250,0.7).setEase(EaseType.EaseOutExpo);


ウィンドウの移動だけでなく、透明度の変更メソッドも存在します。また、イージングの種類もたくさんあるのでプラグインを覗いてみましょう。


イベントのスクリプトや項目位描写について説明しました。
どの処理に関しても、やはりJavaScriptを触らずしてクオリティの向上は無いと思います。

次回は戦闘中に呼び出したり、メモタグを上手く利用する方法を紹介したいと思います。