【MV講座】タイトル画面を改造する

前回分はご覧になりましたか?
この講座で使っていくテンプレート用のプラグインも配布していますので、まずそちらから読んでくださいね。

おさらい

確認がてら、前回のおさらいから始めましょう。

【作りたいプラグイン】
・タイトル画面の背景を自動でスクロールさせられるようにしたい
・パーティクルっぽいものも表示させられるようにしたい
【改造する箇所】
rpg_scenes.jsファイルのScene_TitleクラスにあるcreateBackgroundメソッドをいじくり回す

だいたいこんな感じです。
実はあとでもう一つ機能を追加する予定なのですが、まずはここまで作ってみましょう。
では行きます。

createBackground()を読む

まずはコアスクリプトのcreateBackground()の全コードを引用します

this._backSprite1 = new Sprite(ImageManager.loadTitle1($dataSystem.title1Name));
this._backSprite2 = new Sprite(ImageManager.loadTitle2($dataSystem.title2Name));
this.addChild(this._backSprite1);
this.addChild(this._backSprite2);

何をしているのかわかりますでしょうか?
一行目でthis._backSprite1にSpriteクラスのインスタンスの参照を代入しています(インスタンスとか参照とか何を言っているのかわからない場合、特に気にしなくてもよいです。this._backSprite1を用いてSpriteを使えるように準備しているといった程度の理解で大丈夫です)。
Spriteクラスについては前回の講座でも触れましたね(前回の講座というのは、まっさらなシーンを作るやつのことです)。
要は$dataSystem.title1Nameという名のファイルをロードしているわけです。
$dataSystem.title1Nameというのは、「ツール→データベース→システム→タイトル画面」を開いたときに表示される、でっけぇ方の画像のことです。
二行目もにたようなことをしていて、こっちはちっちゃい方の画像をロードしているのですね。
3行目4行目で、実際の画面に貼り付けています。
やっていることは非常にシンプルですね。

どう改造するか

createBackground()を読んで、どのような処理をしているかはわかりました。
ではどうやって改造していきましょうか?

・タイトル画面の背景を自動でスクロールさせられるようにしたい

のですから、this._backSprite1とthis._backSprite2をスクロール(座標を変更する)させればよいと思われます。
ですがその方法が問題です。
そのままスクロールさせたのでは、画像の幅が足りない部分が真っ黒な表示になってしまいます
また、スクロールと一口に言っても、一枚の画像を画面の端に到達した時点で元の位置に戻すという方法では、表示に違和感があります。
端的に言うと不細工です。
非常にブサイクです。

ではどうしましょうか?
画像を二枚用意しておき、それをナンヤラ計算し、シームレスにスクロール表示させてみましょうか?
これなら真っ黒な表示はなくなり、ブサイクではなくなります。
ですが背景をスクロールさせるということは、似たような画像を敷き詰めておきたい場合もあるのではないでしょうか?
その場合ですと、画像を2枚用意し、ナンヤラ計算してという方法は非常に煩雑です(そもそも2枚じゃ足りない)。
また、斜めにスクロールさせたい場合が結構大変です。

ウーン、困りましたね。
困りました。
困ってください。

TilingSpriteクラスを利用する

困ったときはヘルプです。
ツクールMVのヘルプを覗いてみましょう。
すると、TilingSprite Classという非常にソソる名前のクラスが見つかります。
調べてみると、これはタイル用のスプライトを作成するクラスで、綺麗なスクロール表示にも対応させることができるようです。
今回はこれを利用します。

スクリプトを上書きする

ではさっそくTilingSpriteクラスを適用していきましょう。
前回用意したテンプレートの

//Declare NTMO namespace.
var NTMO = NTMO || {};

というコードの下に、まずはcreateBackground()をそのままコピペします。

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

その後、SpriteをTilingSpriteに変更してみます。

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);
};

さて、実行してみましょう(プラグインの追加をお忘れなく)。

AIYAAAAAAAAAAAAAAAAAA!

画面が真っ黒やんけ!
オワタ!
バグった!
AIYAAAAAAAAAAAAAAAAAA!

そう思った方、ちょっとお待ち下さい。
次回に続きます。

フォローする