【MV講座】TilingSpriteを使えるようにする

前回、TilingSpriteを適用したところ画像が表示されなくなってしまいました。
「チクショウめ! この俺をはめやがったな!」と思った方はあわてんぼうさんですね。
今回はTilingSpriteを使ってとりあえず画像を表示できるようにしてみましょう。

TilingSpriteはmove()させる必要がある

Spriteクラスを利用した場合、特に何もしなければ
・X座標に0、Y座標にも0が代入され、画像のサイズの通りに表示される
ことになっています。
ですがTilingSpriteの場合、画像のサイズは初期状態は0です。
つまりなーんも表示されません(サイズが0なわけですからね)。

そこで幅と高さを設定するわけですが、「widthプロパティとheightプロパティを利用すりゃええんやな! 前の講座でやったで!」と思った方もいるかなと思います。
ですが、TilingSpriteクラスにはmove()という便利なものがあります(Spriteクラスにもあるんですが)。
このメソッドを使うことにより、X座標・Y座標・幅・高さを全て一斉に設定できます。
move()の仕様さえ知っていれば可読性も上がりますし、プロパティの設定し忘れもほぼなくなります。
こちらを利用しましょう。

createBackground()を以下のように変更します。

Scene_Title.prototype.createBackground = function() {
this._backSprite1 = new TilingSprite(ImageManager.loadTitle1($dataSystem.title1Name));
this._backSprite2 = new TilingSprite(ImageManager.loadTitle2($dataSystem.title2Name));
this.addChild(this._backSprite1);
this.addChild(this._backSprite2);

this._backSprite1.move(0,0,400,300);//Additional code.
};

move ( x , y , width , height )の順で設定しています。
ゲームを実行してみると、中央になにやらヘムくチャラな絵が表示されたと思います。
こうではなく、とりあえずは元の画像の通りに表示させたいので、

this._backSprite1.move(0,0,400,300);//Additional code.

を以下のように修正します。

this._backSprite1.move(0, 0, Graphics.width, Graphics.height);//Additional code.

これは画面の幅と高さで描画しますよーというアレ(Graphics.widthがそういうヤツなんです)です。
さて表示してみると……


なんでやねん!!!!!!!
なんやねんこれ!

コアスクリプトを再読する

よくわからないことが起きた場合、理由は2つ考えられます。

1.上書きしているコアスクリプトの仕様
2.クラスの仕様

今回、僕は諸事情でTilingSpriteクラスの仕様をある程度知っていたので、1のコアスクリプトの仕様だなと当たりをつけました。
そこでコアスクリプトを眺めてみると、以下のメソッドが邪魔をしていることがわかりました。

Scene_Title.prototype.centerSprite = function(sprite) {
sprite.x = Graphics.width / 2;
sprite.y = Graphics.height / 2;
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;
};

というわけで、これをコメントアウトしたものをプラグインに追加しときましょう(実際にプラグインを制作するときは、こういう大雑把な改造はなるべくやらない方がよいらしいのですが、まあ講座なんでわかりやすさ重視で行きます。僕も初心者ですしね)。

Scene_Title.prototype.centerSprite = function(sprite) {
//sprite.x = Graphics.width / 2;
//sprite.y = Graphics.height / 2;
//sprite.anchor.x = 0.5;
//sprite.anchor.y = 0.5;
};

ついでに、ちっちゃい方の画像も表示させておきましょう。

this._backSprite1.move(0, 0, Graphics.width, Graphics.height);//Additional code.

の下に

this._backSprite2.move(0, 0, Graphics.width, Graphics.height);//Additional code.

を追加します。

注*今はまだツクールMV側で、ちっちゃい方の画像を設定しないでください。変な表示になります。

実行させてみると、いつもの画面が表示されますね。

これで準備は完了です。
ほな、また。

フォローする