気合い避けゲーを作る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"を簡単に説明させてもらいましたが、いかがでしたか?
以前のバージョンと比較すると、大幅に改良が加えられている事がわかると思います。
(これ以降のチャプターでは、簡単なサンプルコードをご紹介致します)
ここまで読んでいただき有難うございました。