このチャプターの目次
スプライトの動作
次のパラメータを2つ使う事で、スプライトを好きな方向に移動させる事ができます。
スプライト.speed = 速度;
スプライト.direction = 角度;
角度の場合は、0度は右、90度は真下、180は左、270は上方向になります。
// 省略
function setup(){
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES);
frameRate(32);
noSmooth();
noStroke();
// スプライト(霊夢)
reimu = new Sprite(width/2, height/2, 80);
reimu.shapeColor = color("orange");
reimu.ani = "r_good";
reimu.scale = 4;
reimu.speed = 2;// 1, 速度
reimu.direction = 180;// 2, 角度
}
// 省略
速度や角度を変えてみて、思う方向に移動できるか試してみましょう。
クリックで向きを変える
クリックで向きをランダムに変えるサンプルを作ってみましょう。
最後の行に"mousePressed関数"を新たに用意し、次の様に記述します。
// 省略
function mousePressed(){
console.log("mousePressed");
reimu.speed = random(2, 8);// 1, ランダムで速度を変える
reimu.direction = random(360);// 2, ランダムで角度を変える
}
なんとも落ち着きのない感じが出て良いですねw
当然ながら、このスプライトを放っておくとキャンバスの外へ出て行ってしまいます。
こうなると永遠にスプライトは画面に戻ってきません。(さようなら!!)
キャンバスから出ない様にする
"allSprites"変数には全てのスプライトが配列として格納されています。
次のコードは、スプライトが外に出たタイミングで反対側に移動さる処理です。
// 省略
function draw(){
background(33);
// 1, 全てのスプライトを調べる
for(let sprite of allSprites){
// 2, キャンバスの外に出たら反対側へ移動させる(4方向)
if(width < sprite.x) sprite.x = 0; // 2-1, 右から出たら
if(sprite.x < 0) sprite.x = width; // 2-2, 左から出たら
if(height < sprite.y) sprite.y = 0;// 2-3, 下から出たら
if(sprite.y < 0) sprite.y = height;// 2-4, 上から出たら
}
}
// 省略
全てのスプライトを画面内に閉じ込めることに成功しました。
全体のコード
最後に全体のコードを載せておきますね。
let reimu;// スプライト
function preload(){
// アニメーション
loadAni("r_good", "./assets/reimu_good_01.png", 3);
}
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 = 4;
reimu.speed = 2;// 速度
reimu.direction = 180;// 角度
}
function draw(){
background(33);
// 全てのスプライトを調べる
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;// 上から出たら
}
}
function mousePressed(){
console.log("mousePressed");
reimu.speed = random(2, 8);// ランダムで速度を変える
reimu.direction = random(360);// ランダムで角度を変える
}
次回は1対1の衝突についてのお話です。