第23回【シューティング制作.3】


まずは動画を見てくださいね!
JavaScriptでシューティング制作です!
今回はプログラム的にはとても簡単な、スプライトの表示。
昔は高速に重ね合わせするの、ほんとに大変だったんですよ!

スプライト画像を用意します。

画像は[コチラ]に置いておきますので、勉強に使う方がいたらダウンロードしてお使いください。
基本的には背景透明に出来る画像ソフトを使ってキャラクターを描きますが・・・なんならプログラムより大変です。
GIMPはWindows用、Mac用揃ってる高機能なフリーソフトです。
https://www.gimp.org/



画像を読み込む

//ファイルを読み込み
let spriteImage = new Image();
spriteImage.src = "sprite.png";
これだけで完了です!
本来は画像が読み込み終わったのを確認する必要があり、いくつも画像ファイルを使う場合もあるので画像用のクラスを作った方が良いかと思います。。


スプライトクラスを作ってデータを用意する

//スプライトクラス
class Sprite
{
	constructor( x,y, w,h )
	{
		this.x = x;
		this.y = y;
		this.w = w;
		this.h = h;
	}
}

//スプライト
let sprite = [
	new Sprite(  0, 0,22,42 ),
	new Sprite( 23, 0,33,42 ),
	new Sprite( 57, 0,43,42 ),
	new Sprite(101, 0,33,42 ),
	new Sprite(135, 0,21,42 ),
];
Spriteというクラスを作って配列spriteにデータを入れています。
クラス名は先頭大文字、配列名は小文字にしてます。なので別物なのですが、こういう命名はややこしいかもしれないので、解らなくなるという場合は工夫してみてください。


スプライトクラスを作ってデータを用意する

//スプライトを描画する
function drawSprite( snum, x, y )
{
	let sx = sprite[snum].x;
	let sy = sprite[snum].y;
	let sw = sprite[snum].w;
	let sh = sprite[snum].h;
	
	let px = (x>>8) - sw/2;
	let py = (y>>8) - sh/2;
	
	vcon.drawImage( spriteImage,sx,sy,sw,sh,px,py,sw,sh);
}
スプライトを描画します。
spriteImage(読み込んだスプライト画像)から指定の矩形分だけvcon(仮想画面)に転送しているだけで、特に難しい処理はしていません。

...
	drawSprite(2, 100<<8, 100<<8 );
...
ゲームループの描画処理に追加して描画しました。



最後にカメラ範囲外だった時のチェックを行います。
...
	if( px+sw/2 <camera_x || px-sw/2 >=camera_x+SCREEN_W 
			|| py+sh/2 <camera_y || py-sh/2 >=camera_y+SCREEN_H )return;
...
座標を中心にしているため、座標の上下左右にそれぞれスプライトの半分がはみ出します。
なのでそれを計算にいれてカメラ外かどうかをチェックします。
カメラ外の時にフィールド(仮想画面)へ描画するのはとても無駄なしょりなので追加しています。


今回は以上です!
次回へ続く...




akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)