【MV講座】プラグインパラメーターでデザインを可能にする その1

前回はプラグインパラメーターを設定して、スクロール速度を調整できるようになりましたね。
では今回は、プラグインパラメーターから描画領域を設定できるようにしてみましょう
これができるようになると、コードを直接いじらなくともある程度のデザインができるようになります。
これは便利ですねえ。いいですねえ。最高ですねえ。

デザインを決めている箇所

今回のプラグインで言うデザインとは、描画領域のことです。
その描画領域を決めているのはNTMO.TTTT.ScrollBackImagesクラスのmoveMainSprite()とmoveSubSprite()です。
デフォルトの設定では画面全体を描画領域とするようになっています。
これをプラグインパラメーターから変えられるようにしましょう。

どのように変えるか

NTMO.TTTT.ScrollBackImagesクラスを初期化するとき、moveMainSprite()とmoveSubSprite()が呼ばれていますね。
ここを変えればよいのでしょうか?
答えはNOです。
もちろんここを直接変えても目的の動作は達成できるのですが、前にも言ったように、それではNTMO.TTTT.ScrollBackImagesクラスがプラグインパラメーターに依存する形になってしまいます。
使い回しがやりにくくなるので、それはあんまりよろしくないんですね。

というわけでScene_Title.prototype.createBackgroundの最下部に以下の二行を書き足しましょう!

this.scrollBackImages.moveMainSprite();
this.scrollBackImages.moveSubSprite();

これで準備完了です。

プラグインパラメーターを作る

前回と同じようにして、プラグインパラメーターを作っていきます。
moveMainSprite()とmoveSubSprite()は引数に数値を取りますから、これも前と同じものがそのまま使えますね。
というわけでペタリ。

* @param メイン背景の描画領域
* @type number[]
* @min -2000
* @max 2000
* @desc メイン背景の描画領域を指定します。[x, y, width, heigh]の順。サイズに-1を指定した場合、スクリーンのサイズが代入されます。
* @default [“0″,”0″,”-1″,”-1″]

* @param サブ背景の描画領域
* @type number[]
* @min -2000
* @max 2000
* @desc サブ背景の描画領域を指定します。[x, y, width, heigh]の順。サイズに-1を指定した場合、スクリーンのサイズが代入されます。
* @default [“0″,”0″,”-1″,”-1″]

前と同じとか言ってたくせに、なんか色々違うんですけど? 『同じ』の意味を辞書で調べてみ?」と思った方もいるかと思いますが、解説しますのでお待ちください。
まずtype。
numberのあとに[]がついていますね。
これは配列であることを意味します。
そして、座標やサイズに小数点は(ここでは)使う必要性がないので、整数のみを指定できるように変更しています。
defaultの値が[]で囲まれているのは配列を意味します(numberが配列をしているので、初期値も配列を意味するようにしなければならないのです)。
なお、defaultの中の数値はダブルクォーテーションでくくる必要があります(JSON構文に準拠する必要があるためです。JSON構文の詳細を知りたい方はググってください)。シングルクォーテーションではエラーが出ます。

MV上でプラグインパラメーターを確認したとき、上図のような感じになっていたらOKです。

JSON文字列をオブジェクトに変換する

さて準備が整いました。
「あとはこの配列をmoveMainSprite()とかにぶっこみゃいいんだろ? 楽勝だぜヒャッホウ!」と思ったせっかちさんは、もう少々お待ちください。
前回、僕は「プラグインパラメーターは結局文字列に変換される」と書きました。
今回作ったプラグインパラメーターもそうです。
ということは、[“0″,”0″,”-1″,”-1″]は配列として認識されるわけではなく、「[“0″,”0″,”-1″,”-1″]」という文字列として扱われるのです!
これは困りましたねぇ。
困りました。
困ってください。
困らないと解説のしがいがありません!

さて、困ったみなさん、どうかご安心ください。
JavaScriptには、文字列(正確にはJSON構文に準拠した文字列)をオブジェクト(今回で言うと配列)に変換する機能があるのです!
それがこちら、JSON.parse()です。

で、JSON.parse()を使う際に僕がいつもワンクッション挟んでいる関数があるので、それを導入しましょう。

var convertParam = function(param) {
if(param !== undefined){
try {
return JSON.parse(param);
}catch(e){
console.group();
console.error(‘%cParameter is invalid ! You should check the following parameter !’,’background-color: #5174FF’);
console.error(‘Parameter:’ + eval(param));
console.error(‘Error message :’ + e);
console.groupEnd();
}
}
};

この関数をgetParamDouble関数のすぐ下に設置してください。
これで変換の準備が整いました。

パラメーターを導入する

まずプラグインパラメーターを色々と設定している箇所に、以下の2つを追加します。
これで、プラグインパラメーターの各値(この時点では文字列)が代入されたことになります。

param.settings_mainBackground = getParamString([‘MainDrawingArea’, ‘メイン背景の描画領域’]);
param.settings_subBackground = getParamString([‘SubDrawingArea’, ‘サブ背景の描画領域’]);

次に、代入された文字列をJavaScriptで使える配列(オブジェクト)に変換します。

////==============================
//// Convert parameters.
////==============================
param.settings_mainBackground = convertParam(param.settings_mainBackground);
param.settings_subBackground = convertParam(param.settings_subBackground);

先ほど作成したconvertParam()関数を呼んで、その結果を代入しているんですね。
はい、これで前回作成したパラメーターと同じような感じで使えるようになってます。

注*この変換処理のコードはプラグインパラメーターの各値を代入したすぐ下に設置してください。

というわけで、createBackground()を以下のように変更してください

_Scene_Title_createBackground.call(this);

//Hide the original background to display the scrolling background.
this._backSprite1.visible = false;
this._backSprite2.visible = false;

//Create scrolling background.You should ‘move()’ each image, if you want to draw a certain range.
this.scrollBackImages = new NTMO.TTTT.ScrollBackImages(this);
var main_x = param.settings_mainBackground[0];
var main_y = param.settings_mainBackground[1];
var main_width = param.settings_mainBackground[2];
var main_height = param.settings_mainBackground[3];
var sub_x = param.settings_subBackground[0];
var sub_y = param.settings_subBackground[1];
var sub_width = param.settings_subBackground[2];
var sub_height = param.settings_subBackground[3];
this.scrollBackImages.setMainSpeed(param.speed_mainBackgroundX,param.speed_mainBackgroundY);
this.scrollBackImages.setSubSpeed(param.speed_subBackgroundX, param.speed_subBackgroundY);
this.scrollBackImages.moveMainSprite(main_x, main_y, main_width, main_height);
this.scrollBackImages.moveSubSprite(sub_x, sub_y, sub_width, sub_height);

わざわざ一度main_xなどの変数に一度代入しているのは、param.settings_mainBackground[0]だけでは何の変数か後から読んだときにわからないからです。あと、そのまま使うと引数がやたら長くなって見にくいからですw

実行してみる

実行結果は以下のようになります。

GYAAAAAAAAAAAAAAAAAAAAAAA!
画面が真っ黒だああああああ!

と思った方はちょっと落ち着いてください。
プラグインパラメーターのwidthとheightのデフォルト値は-1です。
これでは何も表示されなくて当たり前です。

メインの描画領域を

width:400
height:400

にしてみましょう。

何やら表示されましたね。
プラグインパラメーターの説明には「サイズに-1を指定した場合、スクリーンのサイズが代入されます」と書かれていますので、これは次回実装しましょう。
というわけで今回はここまでで。

フォローする