【プラグイン講座】シーンに画像を表示する

プラグイン講座二日目です。
本日はシーンに画像を表示してみましょう
前回作ったSamplePlugin.jsをそのまま使いますので、まだ作れてないよーという方は前回の分を読んできてくださいね。

画像を表示すると一口に言っても

画像を表示すると一口に言っても、実はいくつかの手順を踏む必要があります。
具体的には

1.Bitmapの作成
2.Spriteの作成
3.シーンの中に貼り付ける

この3つの手順が必要です。

まずはSpriteの作成からいってみましょう。

//初期化
Scene_Sample.prototype.initialize = function() {
Scene_Base.prototype.initialize.call(this);
};

//中身を作る
Scene_Sample.prototype.create = function() {
Scene_Base.prototype.create.call(this);
};

//オリジナルのスプライトを作成するためのメソッド
Scene_Sample.prototype.createSprite = function() {
};

以上のコードを
Scene_Sample.prototype.constructor = Scene_Sample;
の下に追加してください(実は順番はどうでもいいのですが、この順がわかりやすいです)。

それぞれの意味は簡単にコメントで示していますが、
中括弧の中に
Scene_Base.prototype.initialize.call(this);
こんな感じのコードがinitializeとcreateにはあるのにcreateSpriteにはないですね。

これ(callメソッド)は、もともとツクールに備わっているScene_Baseのinitialize(とcreate)メソッド(funciton()あたりから};までの塊のことをメソッドや関数と言います。メソッドと関数は別物なのですが、ほぼ同じ意味なのでここでは詳しく触れずメソッドで統一します。詳細はJavaScriptの入門書を紐解きましょう!)の機能を呼び出しているのですね。
この呼び出しをしないと、何の動作もしない空っぽのcreateとinitializeが作られてしまい、シーンがうまく動かなくなってしまいます
で、createSpriteメソッドの中でcallしていないのは、このcreateSpriteメソッドはScene_Sampleで自作したメソッドであり、Scene_Baseは全く関係ないからなんですね。

他にもこれらのメソッドが実行される順番などがあるのですが……詳しく書くとややこしくなるので、ここではこう覚えておきましょう。

実際に描写するものはcreateの中に書く
変数などのように見えないものはinitializeの中に書く

とりあえず今は意味がわからなくても大丈夫です。
講座を進めていく中で徐々に理解できます(多分)。

ではシーンに画像を表示してみましょう。
シーンに画像を貼り付ける機能はcreateSpriteにしてもらいましょう
createSpriteを以下のように変更してください。

//オリジナルのスプライトを作成するためのメソッド
Scene_Sample.prototype.createSprite = function() {
//Bitpmapの作成
var bitmap = ImageManager.loadParallax(‘BlueSky’);
//スプライト生成
this.sprite = new Sprite(bitmap);
//addChild
this.addChild(this.sprite);
};

まずBitmapの作成ですね。
var bitmap = ImageManager.loadParallax(‘BlueSky’);
この「var」は変数の宣言です(ツクールでも変数ってありますよね)。
つまりbitmapという名前の変数を作成し、「=」を使って(この「=」は等しいという意味ではなく、代入という意味です)ImageManager.loadParallax(‘BlueSky’)を代入しているのです。

で、ImageManager.loadParallax(‘BlueSky’)ってなんやねん、ということになりますね。
要はimg\parallaxesフォルダのBlueSky.pngというファイルを読み込んでいるのです。
その読み込んだものをbitmapに代入したのですね。

次に
this.sprite = new Sprite(bitmap);
ですね。

「=」は同じく代入という意味です。
new SpriteはSpriteという大本の機能を「this.sprite」さんに使いますよーという宣言です(これをインスタンス化と言います)。
丸括弧の中には先ほど作ったbitmapがありますね。
このbitmapをSpriteに渡して、新しいSpriteの作成をおこないます。

this.spriteのthisも気になりますね。
このthisはScene_Sampleの中でなら自由に使えますよーという程度の意味です。
var bitmap←これはcreateSpriteメソッドの中以外では使えません。

注*実はこのthisの挙動はかなりややこしいので、きちんと知りたい方はJavaScriptの入門書を紐解くことをオススメします。
僕も理解できていない部分が大いにあります。

最後に
this.addChild(this.sprite);
ですね。

この一行で画像(スプライト)をシーンに貼り付けているのですが、これも定型文として覚えてしまっていいと思います。
作成したスプライトをaddChildして初めて、そのシーンに実際にそのスプライトが表示されるのですね。
つまりaddChildを忘れてしまうと、そのスプライトは表示されません。

ここで注意が一つあります。
無闇にaddChildしまくると、非常に重たくなります
特別な事情がない限り、一つのスプライトにつきaddChildは一回で十分です。
間違ってもupdateメソッド内でaddChildしないようにしましょう(updateメソッドの詳細は以降の講座で解説しますが、このメソッドは1秒間に60回呼ばれます)。

作成したcreateSpriteメソッドを実行させる

さて、createSpriteメソッドが完成しました。
ですがこのまま実行しても何の画像も表示されません
それもそのはずで、createSpriteメソッドはどこからも呼ばれていないからです。

そこで

//中身を作る
Scene_Sample.prototype.create = function() {
Scene_Base.prototype.create.call(this);
};

Scene_Sample.prototype.create = function() {
Scene_Base.prototype.create.call(this);
//createSprite実行
this.createSprite();
};

のように変更してください。
これでシーンが表示されたときに一度だけcreateSpriteメソッドが呼ばれます。
実際にそうなっているのかどうかの確認には
console.log(“”);
を使うと便利ですね。
具体的にはこうです。

Scene_Sample.prototype.createSprite = function() {
//Bitpmapの作成
var bitmap = ImageManager.loadParallax(‘BlueSky’);
//スプライト生成
this.sprite = new Sprite(bitmap);
//addChild
this.addChild(this.sprite);
console.log(“実行されましたよ”);
};

ではゲームを起動して、前回と同じようにしてScene_Sampleシーンを呼び出してください。
どうですか?
青空が表示されましたか?
されたらOKです。
ついでに、Developer ToolsのConsole欄を見てください(トリアコンタンさんのプラグインを入れているなら勝手に起動しているはずです)。
「実行されましたよ」という文字が一つだけ表示されているなら、無事にaddChildは一度だけ実行されたことになります。

画像を変形させてみる

画像を表示させただけじゃなんなので、画像を変形させてみましょう。
変形と言っても、この青空は画面いっぱいまで埋まっていますから、色でも変えてみましょうか。
createSpriteメソッド内に
this.sprite.setColorTone([255,0,0,0]);
の一行を追加してみてください。

ゲームを実行してみると、青空がピンク色になりますね。

これはSpriteクラスのsetColorToneメソッドを利用しています。
[赤,緑,青,グレー]
の順番で色を指定します(255が最高)。

もちろんこの他にもSpriteクラスには色々なメソッドが用意されています。
それを全て書くのは大変ですし、そもそもRPGツクールMVのヘルプにきちんと書かれています。
ヘルプを開いて、JSライブラリの欄を見てみましょう(下の方にあります)。
その中からSpriteを開き、Item Indexの欄を見れば何があるのかわかります。
なぜか英語ですが、基本的にはメソッドかプロパティだけしかないので、適当に使ってみてください。

注*クラスやプロパティについてもJavaScriptの根幹にかかわることですので、詳しくは入門書をひもといてください。

ここまで書いて

ここまで書いて、なぜプロツクーラーの方々が解説サイトを立ち上げないのかの理由がわかりました。
ある程度はJavaScriptのことを理解している前提で進めないと、解説がかなり難しいのですね。
僕もなるべくJavaScriptの基本的なことには触れず、ツクールのための解説に絞ってはいますが、これからプラグイン制作に挑戦しよう! という方にうまく伝わっているかどうか自信がないですね……。

とりあえず本日はここまでです。
わからないところがあればわかる範囲でお答えします。
たぶん。

フォローする