超初心者のためのMVプラグイン講座 マップ画面に画像を表示してみる


はじめに

この記事は、以下のユーザーを対象にしています
・エディタの機能は一通り使いこなせる(変数とか、プラグイン素材の追加の仕方とか)

・でもプラグインを自分で作るのは全然ムリ! 関数ぐらいなら分かるけど、スプライトってなに?

・JavaScriptの正しい知識より、ゲームを作れる知識がほしい。

さて、記念すべきプラグイン講座1回目は、マップ上に画像を表示してみる、だ。記事のサムネイルのように、マップ上にサキュバスちゃんの画像を表示するプラグインを作ってみよう。

これを応用すれば、マップ上に味方のステータスを表示するプラグインなどを作れる。画像表示はプラグイン制作の基本だから、ぜひマスターしておこう。

ソースコードはGitHubにて公開中です。
Rawボタンを右クリックすると保存できます。

なお、このプラグインを作るにあたり、なのさんのプラグインを参考にしました。

ソースコードの解説

(function(){ … })(); ってなに?

(function(){

...中略...

})();

一行目からさっそく分からないよー。なんなのこの記述は。最後も意味深な記述をしてあるし。

あー、うん、これはね、即時関数っていうんだけど、説明すると長くなるので今回は割愛。とりあえず、プラグインを作るときはこの記述で囲っておけばいいよ。僕はそういう認識だけど、なんか不都合があるようならコメントで教えてください。

中略部分に処理を書いていけばいいのね。最初と最後の記述は、おまじない感覚で今は覚えておくよ……。

call関数ってなに?

(function() {

	var createUpper = Spriteset_Map.prototype.createUpperLayer;
	Spriteset_Map.prototype.createUpperLayer = function() {
		createUpper.call(this);
		
		var sprite = new Sprite();
		sprite.bitmap = ImageManager.loadEnemy('Succubus');
		sprite.x = 10;
		sprite.y = 10;
		sprite.visible = true;
		this.addChild(sprite);
	}

})();

あーもうワケが分からない! なにこれ!

落ち着け。全部を解説するとまた長くなるので、かいつまんで説明するぞ。

Spriteset_Map.prototype.createUpperLayerってあるよな? Spritesetってのは文字通りスプライト(説明は後述)の集合体で、まあ平たく言うなら画像素材の集まりだ。

Spriteset_Map って書いてあるけど、これはマップ画面で使う画像を集めてあるモノってこと?

そう。今回はマップに画像を表示したいので、Spriteset_Mapに新たに画像を追加する必要がある。ハイライトした3行は、そのための下準備を行なっているんだ。

下準備なんだ。ここで画像を読み込んでいるのかと思った。

読み込みはその下の var sprite = new Sprite(); 以降だ。これは後で説明する。

説明を省略してばかりでは講座にならないので、もう少し詳しく書こう。
この3行で行なっているのは、RGSS3までで言うところのエイリアスのようなものだ。
Spriteset_Map.prototype.createUpperLayer は、文字通りマップ画面の上にレイヤー(描画領域)を作成する関数。
この関数の中に、サキュバスを読み込む処理を書けばいいことになる。

だが、そのままこの中にサキュバス読み込み処理を書くと上書きになってしまう。
要するに、ツクール側でやっていたタイルセットの読み込みなどが全て上書きされて消えてしまうのだ。
これは困る。上書きではなく、末尾に追記したい。

これを防ぐために、createUpperLayer という変数をこちらで宣言し、その変数にSpriteset_Map.prototype.createUpperLayer関数を代入している。
これにより、createUpperLayer変数は、Spriteset_Map.prototype.createUpperLayer関数と同じ機能をもった存在になるのだ。

その後、Spriteset_Map.prototype.createUpperLayer = function() { で関数の中を上書きしているのだが、createUpper.call(this); で元々の処理を呼び出している。
これで、上書き前のSpriteset_Map.prototype.createUpperLayerの処理の全てを呼び出すため、結果的に関数に追記する形になるのだ。

……やっぱりよく分からない。

ツクールXP~VXAceまでを使っていた人なら、スクリプトの競合回避をしていると思ってもらえばいい。文法まで覚える必要はないが、仕組みは理解しておきたいな。

みんなで同じ部分をいじり回しちゃうとカオスなことになるから、元の関数はコピーして取っておいて、後で呼び出して上書きを防ごうってことかな?

なんだ、よく分かってるじゃないか。まさにその通り。

なお、関数ってなに? って言われるとさすがにキツいものがある。暴論を承知で分かりやすく説明するなら、コモンイベントみたいなもんだ。一連の処理をまとめたもの。こればっかりはググって調べてくれ。

最初のうちは、見よう見まねでいい。少しずついじっていって、挙動を確認して理解していこう。

画像の読み込みと登録

(function() {

	var createUpper = Spriteset_Map.prototype.createUpperLayer;
	Spriteset_Map.prototype.createUpperLayer = function() {
		createUpper.call(this);
		
		var sprite = new Sprite();
		sprite.bitmap = ImageManager.loadEnemy('Succubus');
		sprite.x = 10;
		sprite.y = 10;
		sprite.visible = true;
		this.addChild(sprite);
	}

})();

さあお待ちかね、画像の読み込みと登録だ。

これはなんとなく分かるかも……。スプライトってのがよく分からないけど。

Sprite と Bitmap は、画像表示の基本中の基本……だが、とりあえずSpriteさえ覚えておけばそんなに困らない。簡単に説明しよう。

Spriteとは、画像を操作するための機能群だ。
どの位置に表示するのか、透明度はいくつか、回転させるなら角度はいくつか、などを決めることができる。

var sprite = new Sprite(); で、spriteという新しいスプライトを作成している。
その次の sprite.bitmap だが、ここで晴れて画像ファイルの指定が行なえる。
Bitmapは、画像ファイルに限らず、文字や図形の描画も扱えるクラスだが、まあ画像の指定に使うプロパティ(変数)とでも思っておけばいい。

これも暴論を承知で例えると、Bitmapは画像ファイルで、Spriteはピクチャの表示機能みたいなものである。
Bitmapだけでも画像の表示はできるが、座標の指定もできないし、当然移動もできない。
スイッチで表示や非表示を切り替えることもできない。

以上が、Spriteの簡単な説明。覚えておくべきはSpriteだ。ピクチャの表示機能とだいたい同じものを持っている。

xやyが出てくるけど、ここで座標を指定しているんだね。

そうだ。visibleってのは表示・非表示を指定するプロパティで、これをtrueにすることでマップ上に表示される。

ImageManager.loadEnemyってのが画像の読み込み関数で、loadEnemyの場合はEmenyフォルダから指定したファイル名の画像を探して読み込んでくれる。

これがシステム画像ならloadSystemだし、ピクチャならloadPictureだ。これは、rpg_manager.jsのImageManagerの部分(694行目あたり)に一覧が書かれている。一度目を通しておくといい。

最後のaddChildは……。うんまあ、俺もよく分かってない。

…………

SpriteをScene_Mapに登録する処理、だと思う。登録した順番が遅いほど、重なった時に上に表示されるはず。この表示順を後から変更する手段は分からない。

まあ、分からないならこれもおまじない感覚でいいよね。ちょっと疲れたし……。

つーわけで、いかがかな? 分からないことがあればどうぞ。分かる範囲で答えます。

なんつー不安な講座だ……。

ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く!
田中 賢一郎
インプレス (2015-12-11)
売り上げランキング: 8,328

You may also like...

1 件の返信

  1. 2015年12月14日

    […] 今回導入テスト用にプラグインを自作してみました。画面上にエネミー画像が表示されるだけのプラグインです(プラグイン作成にあたってゲーム研究の弓猫チャンネル 2人の目線でゲームを研究様の超初心者のためのMVプラグイン講座 マップ画面に画像を表示してみるの記事を参考にさせていただきました) […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)