Chapter 09

気合い避けゲーを作る2(WASD操作)

かじるプログラミング
かじるプログラミング
2022.10.02に更新

気合い避けゲーを作る2(WASD操作)

前回は、マウスに追随する処理を実装しました。
今回は、キーボードのWASDを使った処理を実装してみましょう。

キーボードのボタンが押されている状態を判定します。
"draw関数"の内部にある"moveTowards関数"を削除し、"kb.pressing関数"に置き換えます。
具体的なコードは次の通りです。
(Wは上、Aは左、Sは下、Dは右にそれぞれ該当します)

// 1, コントロール(WASD)
if(kb.pressing("w")) reimu.y -= 8;// Wキー
if(kb.pressing("a")) reimu.x -= 8;// Aキー
if(kb.pressing("s")) reimu.y += 8;// Sキー
if(kb.pressing("d")) reimu.x += 8;// Dキー

これだけで、W,A,S,Dで上下左右に動ける様になります。(簡単ですね)

衝突でアニメーションの変更

衝突したタイミングでアニメーションを変更します。(ついでです)
例によってアニメ用の画像を用意してありますので、自由にお使いください。

霊夢(OH)


reimu_oh_01.png


reimu_oh_02.png


reimu_oh_03.png

魔理沙(OH)


marisa_oh_01.png


marisa_oh_02.png


marisa_oh_03.png

これらの画像をまとめてロードすると次の様になります。
"preload関数"に記述するのでしたね。

// 2, アニメーション
loadAni("r_good", "reimu_good_01.png", 3);
loadAni("r_oh", "reimu_oh_01.png", 3);
loadAni("m_good", "marisa_good_01.png", 3);
loadAni("m_oh", "marisa_oh_01.png", 3);

そして、衝突処理です。
衝突時に、2つのスプライトのアニメーションを変更し、
"setTimeout関数"を利用して500ミリ秒後にゲームを停止させます。
(少し余韻を持たせます)

// 3, スプライト同士の衝突
reimu.collide(marisaGroup, (a, b)=>{
	a.ani = "r_oh";// 4, アニメーション変更
	b.ani = "m_oh";
	setTimeout(()=>{// 5, 500ミリ秒後に停止
		noLoop();
	}, 500);
});

衝突したタイミングで霊夢と魔理沙のアニメーションが切り替わります。
(500ミリ秒後に停止します)

全体のコード

最後に全体のコードを載せておきますね。
(1,2,3,4,5の順番で追いかけてみてください)

let marisaGroup;// グループ
let reimu;// スプライト

function preload(){

	// 2, アニメーション
	loadAni("r_good", "reimu_good_01.png", 3);
	loadAni("r_oh", "reimu_oh_01.png", 3);
	loadAni("m_good", "marisa_good_01.png", 3);
	loadAni("m_oh", "marisa_oh_01.png", 3);

	// グループ
	marisaGroup = new Group();
}

function setup(){
	createCanvas(windowWidth, windowHeight);
	angleMode(DEGREES);
	frameRate(32);
	noSmooth();
	noStroke();

	// スプライト(霊夢)
	reimu = new Sprite(width/2, height/2, 45);
	reimu.shapeColor = color("white");
	reimu.ani = "r_good";
	reimu.scale = 2;

	// スプライト(魔理沙)
	setInterval(createMarisa, 1000);

	// 3, スプライト同士の衝突
	reimu.collide(marisaGroup, (a, b)=>{
		a.ani = "r_oh";// 4, アニメーション変更
		b.ani = "m_oh";
		setTimeout(()=>{// 5, 500ミリ秒後に停止
			noLoop();
		}, 500);
	});
}

function draw(){
	background(33);

	showScore();// スコア表示

	// 1, コントロール(WASD)
	if(kb.pressing("w")) reimu.y -= 8;
	if(kb.pressing("a")) reimu.x -= 8;
	if(kb.pressing("s")) reimu.y += 8;
	if(kb.pressing("d")) reimu.x += 8;

	// 全てのスプライトを調べる
	for(let sprite of allSprites){
		// キャンバスの外に出たら反対側へ移動させる(4方向)
		if(width < sprite.x) sprite.x = 0; // 右から出たら
		if(sprite.x < 0) sprite.x = width; // 左から出たら
		if(height < sprite.y) sprite.y = 0;// 下から出たら
		if(sprite.y < 0) sprite.y = height;// 上から出たら
	}

	// Debug
	allSprites.debug = mouse.pressing();
}

function showScore(){
	fill(255);
	textAlign(CENTER, TOP);
	textSize(40);
	text(marisaGroup.length, width/2, 20);
}

function createMarisa(){
	let marisa = new marisaGroup.Sprite(0, 0, 45);
	marisa.shapeColor = color("white");
	marisa.ani = "m_good";
	marisa.scale = 2;
	marisa.speed = random(2, 4);
	marisa.direction = random(360);
}

今回のサンプルコードは、気合い避けゲー(WASD)から確認する事が出来ますので、よろしければご覧くださいませ。

ここまで、"p5.play"を簡単に説明させてもらいましたが、いかがでしたか?
以前のバージョンと比較すると、大幅に改良が加えられている事がわかると思います。
(これ以降のチャプターでは、簡単なサンプルコードをご紹介致します)

ここまで読んでいただき有難うございました。