カスタムメニュープラグイン講座(第10回)「ツクール用の簡単なJavaScriptリファレンス2」
RPGツクールMZ向けのトリアコンタン氏のプラグイン「カスタムメニュープラグイン(SceneCustomMenu.js)」の使い方講座です。
リンク:
・カスタムメニュー作成プラグインを調べてみた(とんびさん)
・RPGツクールMZ プラグイン講座
・RPGツクールVXAce & MV & MZスクリプトwikiとプラグイン
前回に続き、ツクールで使用する簡単なJavaScriptのリファレンスを紹介します。
筆者はJavaScriptを触り始めて1年程なのでまだまだ未熟なので、ご指摘などありましたら遠慮無くコメントして頂けると幸いです。
【1】JavaScriptのデータの型
JavaScriptに限らず、プログラムで扱うデータには「型」が存在します。
ツクール的に言うと、「スイッチ」と「変数」は型が違います。ゲーム用スイッチの設定値はON(true)、OFF(false)の2種類しか無いのに対し、ゲーム用の変数では数値、文字列、配列、オブジェクトなど様々なデータを格納出来ます。
こちらでも紹介されている「型」を簡単にまとめます。
・真偽値(true/false):Boolean型。true(真)かfalse(偽)の2種類のみ。ゲーム用スイッチのON・OFFと同じと思って良い。
・数値:Number型。数値を代入する。
・文字列:String型。文字を代入する。
・配列:Array型。配列データ型。ツクールの例…データベースのアクター($dataActors)、アイテム($dataItems)、スキル($dataSkills)、ゲーム内のパーティー($gameParty.members())、所持アイテム($gameParty.items())など。
・オブジェクト:Object型。オブジェクトデータ。ツクールの例…ゲーム内のアクター1、戦闘中のエネミー1、武器1など。
ツクールを使っている方は、真偽値(ゲーム用スイッチ)、数値・文字列(ゲーム用変数)のイメージは出来ると思います。配列とオブジェクトについて簡単に解説します。
配列のデータ構造は、電車の車両のような箱が順番に並んでいると考えてください。
1両目のデータは○○、2両目のデータは○○・・・というかんじでイメージしてみましょう。
ツクールの「ゲーム用変数」で具体的に考えてみます。
上の例で述べた「車両」にあたるものは、「変数ID」です。現在のバージョン最大数は5000個です。
ゲーム用変数を例えば20個用意したとします。20個の変数のうち、どこに何を入れるかはツクールのイベント入力で編集出来ます。このとき、変数には数値(Number)ではなく、他の型も入れることが出来ます。
配列のデータを扱う場合、上記の例で言うと「○○番目の車両のデータを呼び出してください」や「△△番目の車両のデータに数値□□を代入してください」という感じです。
次にオブジェクト型の説明です。配列は電車の車両のように「番号がついて」順番に並んでいました。オブジェクトは番号ではなく、名前がついた要素の構造になっています。
配列を電車の車両に例えましたが、オブジェクトは「電車に乗る人」にしてみましょう。
乗車する人Aが居たとします。そのAには名前、年齢、職業、電話番号、住所、着ている服、履いている靴・・・などがあります。それらをまとめて括っているデータが「オブジェクト型」です。配列は順番(数値)で管理しているのに対し、オブジェクトは名(文字列・パラメータ値)で管理します。「Aさんの名前を教えて」や「Aさんの履いている服を変更」という感じでデータを扱います。
なんとなくイメージが出来た所で、ツクールの例をあげてみましょう。
データベース・アクターは配列データです。そのアクター1人1人のデータはオブジェクトデータです。なので、「アクター1の名前を呼び出す」などが出来ます。
下の画像のようなイメージです。
具体的にコードを書くと、アクターのパラメータの1つに名前(name)があります。
データベースの配列から呼び出すためには以下のようなコードになります。
$dataActors[n].name //nはアクターのデータベース番号
【2】演算子
変数の値を計算するための「+」や「=」などの記号は演算子と呼ばれています。
よく使用するものを紹介します。
【算術演算子】
加算:「+」の記号を使用。足し算。
減算:「-」の記号を使用。引き算。
乗算:「*」の記号を使用。掛け算。
除算:「/」の記号を使用。割り算。
剰余:「%」の記号を使用。割り算の余り。
【代入演算子】
代入:「=」を使用。
【比較演算子】
A > B :AがBより大きい場合(同値は含めない)
A < B :AがBより小さい場合(同値は含めない)
A >= B :AがB以上の場合(同値も含める)
A <= B :AがB以下の場合(同値も含める)
A == B :AとBが同じ場合
A === B :AとBが同じ場合(データ方も一致する場合)
A !== B :AとBが同じでは無い場合
【3】変数の宣言
JavaScriptで扱うデータ(変数)は、「宣言」しないと使用出来ません。
「○○という名前の変数を使用します!」と命令しないと、データ(変数)が存在しないのでエラーが出ます。
変数の宣言は以下の2種類があります。
・const
・let
具体的な記述は以下の通りです。
const abc = "ABC";
let def = "DEF";
この場合、変数名「abc」と変数名「def」を宣言しています(宣言するときは初期値を「代入」する必要があります。)
では、constとletの違いは何なのでしょうか。
constは再代入不可の変数、letは再代入(変更)可能の変数です。【重要!】
ツクール的に言えば、ゲーム用変数はletの振る舞いをします。逆にconstのように再代入が不可能の場合、非常に扱いにくい変数になりますね。なぜこのような再代入不可の変数が存在するのかというと、メソッド内の処理で、変更しなくても良い変数を誤って破壊しないようにする措置です。
ツクールの例を言うと、アクターの装備を変更する処理をする場合、一度メソッド内にデータベースの装備品を取得する必要があります。このとき、constで変数を宣言せずにletで装備品を宣言した場合、処理を誤ってしまえばデータベース内のアイテムパラメータが破壊されかねません。constは再代入出来ないのでその心配はありません。
なので変数を宣言する場合は可能な限りconstで宣言するのが良いでしょう。
※varという、letに似た振る舞いの宣言がありますが、こちらは古い宣言の方法です。本講座ではvarは使用せず、letを使用していきます。
【4】条件分岐
ツクールのイベント「条件分岐」は、ツクール内でも使用頻度が高いイベントです。
スクリプト内でも頻繁に使用します。記述方法は以下のようになります。
if( abc > def ){
//処理
};
ifのあとのカッコ内に条件を記述します。カッコ内で多様するのは比較演算子です。
上の例では、「変数abcが変数defより大きい場合に処理を実行」という意味です。
具体的に記述してみましょう。
ゲーム用スイッチ0001がONのとき、処理を実行 とする場合は
if($gameSwitches.value(1) === true){
//処理
}
というかんじです。
【5】簡単なプラグインを作ってみる
比較演算子と条件分岐を照らし合わせて、ごく簡単なプラグインを作成してみます。
ツクールのプロジェクト内のフォルダ js 内にある rmmz_windows.js を開いてみましょう。
そこの2176行目付近にこういう記述があります。
Window_ItemList.prototype.maxCols = function() {
return 2;
};
これはゲーム中のアイテムリストを表示した時の、リストの列数を設定しているメソッドです。return 2; となっている部分が、「アイテムリスト用ウィンドウの列数は2」という意味を持っています。
他のテキストファイルを用意し、この部分をコピー・ペーストします。
その後、講座1回目でも紹介したプラグイン導入をします。
【注意!】もとのスクリプトのファイルは変更しないようにしましょう!!
同じクラスとメソッドはオーバーライド(上書き)されます。それを踏まえて以下のように明記してみます。
Window_ItemList.prototype.maxCols = function() {
if($gameSwitches.value(1) === true){
return 1;
}else{
return 2;
}
};
if文におけるelseというのは、ツクールのイベントで言う「条件に当てはまらない場合」の処理です。
このコードでは、
ゲーム用スイッチ0001がONのときにアイテムリストの列数を1に、そうでなければ2にする
という処理をします。
実際にプレイして確認してみましょう。
話しかけている人は文章の表示と、スイッチ1のON/OFFの操作しかしていません。
列数がメニュー画面を開くと変わっていることが確認出来ます。
今回もカスタムメニュープラグインには触れませんでしたが、コードを書く上でどのようなデータ構造になっているかを理解していないと大きく躓くことになるでしょう。
記事の最初にあるリファレンスとコアスクリプト(ツクール標準のスクリプト)を少しずつでいいので読み解いていくのが良いと思います。
次回はメソッドをもう少し詳しく説明し、カスタムメニュープラグインの決定・キャンセルイベントの処理の例を紹介したいと思います。