p5.playでかんたんスプライト
p5.playであっさりスプライト
公式サイトのリファレンスから、スプライトについてざっくりとまとめていきます。
公式リファレンスを読むのはちょっと。。。という方に見ていただければ幸いです。
こちらに導入用の記事も御座いますのでよろしければ!!
p5.playをかじる本
スプライトの使い方について
基本的にはpreload関数、setup関数、draw関数の3つを使います。
それぞれの関数の役割は下記の通りです。
function preload(){
// ここでは素材データの読み込みを行います
}
function setup(){
createCanvas(windowWidth, windowHeight);// キャンバスを生成します
// ここではスプライトを生成します
}
function draw(){
background(33);// 背景を塗ります
// ここではスプライトの描画をします
}
Spriteの生成と描画
-
画像データのロード
preload関数では、loadImage関数を使って画像データをロードしています。
img変数に生成された画像オブジェクトを格納します。 -
スプライトの生成
setup関数では、createSprite関数を使ってスプライトを生成しています。
tanuki変数に生成されたスプライトを格納します。 -
スプライトの描画
drawSprites関数は、生成されたスプライト全てをまとめて描画する関数です。
この関数が実行されて初めてキャンバスにスプライトが描画される事になります。
let img;// 画像データを格納する変数
let tanuki;// スプライトを格納する変数
function preload(){
img = loadImage("t_tanu.png");// 1, 画像データをロードします
}
function setup(){
createCanvas(windowWidth, windowHeight);
tanuki = createSprite(width/2, height/2);// 2-1, スプライトを作ります
tanuki.addImage(img);// 2-2, イメージデータを適用します
}
function draw(){
background(33);
drawSprites();// 3, スプライトを描画します
}
これだけでスプライトを使う事ができます。
スプライトのパラメーターについて
スプライトには様々なパラメーターが準備されています。
パラメーターとは"値"そのものであり、スプライトの状態を示すものです。
代表的なパラメータをまとめていきます。
スプライトの横幅、高さ
スプライトのwidthには、スプライトの横幅が格納されています。
スプライトのheightには、スプライトの高さが格納されています。
これらの値は固定値であり、値を変更する事はできません。
console.log(スプライト.width);// スプライトの横幅を確認します
console.log(スプライト.height);// スプライトの高さを確認します
スプライトの座標
スプライトのpositionには、座標データが格納されています。
position.x, position.yに数値を代入する事で、位置を変更する事ができます。
// 値を確認する時
console.log(スプライト.position.x);// スプライトのx座標を確認します
console.log(スプライト.position.y);// スプライトのy座標を確認します
// 値を変更する時
スプライト.position.x = 100;// x座標を100に
スプライト.position.y = 100;// y座標を100に
スプライトの速度
スプライトのvelocityには、速度データが格納されています。
velocity.x, velocity.yに数値を代入する事で、移動速度を変更する事ができます。
xは水平方向(+は右方向、-は左方向)へ、yは垂直方向(+は下方向、-は上方向)です。
// 値を確認する時
console.log(スプライト.velocity.x);// スプライトのx速度を確認します
console.log(スプライト.velocity.y);// スプライトのy速度を確認します
// 値を変更する時
スプライト.velocity.x = 5;// x速度を5に(右に動く事になります)
スプライト.velocity.y = -5;// y座標を-5に(上に動く事になります)
スプライトの角度
スプライトのrotationには、角度のデータが格納されています。
rotationに数値を代入する事で、角度を変更する事ができます。
初期値は0度で、回転は反時計回り(右回り)になります。
// 値を確認する時
console.log(スプライト.rotation);// スプライトの角度を確認します
// 値を変更する時
スプライト.rotation = 45;// 角度を45度に
スプライトの回転速度
スプライトのrotationSpeedには、回転速度のデータが格納されています。
rotationSpeedに数値を代入する事で、回転速度を変更する事ができます。
初期値は0(+だと右回転、-だと左回転)になります。
// 値を確認する時
console.log(スプライト.rotationSpeed);// スプライトの回転速度を確認します
// 値を変更する時
スプライト.rotationSpeed = 5;// 回転速度を5に
スプライトの拡大率
スプライトのscaleには、拡大率のデータが格納されています。
scaleに数値を代入する事で、拡大率を変更する事ができます。
初期値は1(等倍)です。
// 値を確認する時
console.log(スプライト.scale);// スプライトの拡大率を確認します
// 値を変更する時
スプライト.scale = 3;// 3倍の大きさに
スプライトの表示/非表示
スプライトのvisibleには、スプライトの表示/非表示を表す真偽値(true/false)が格納されています。初期値は表示(true)です。
trueの場合はキャンバスに表示されますが、falseの場合はキャンバスに表示されません。
// 値を確認する時
console.log(スプライト.visible);// スプライトの表示/非表示を確認します
// 値を変更する時
スプライト.visible = false;// 非表示にします
スプライトの固定
スプライトのimmovableには、スプライトを固定状態を表す真偽値(true/false)が格納されています。初期値は(false)です。
trueの場合は、スプライト同士の衝突時に座標が固定(動かない)されることになります。
bounce関数と一緒に使う事が多いと思います。
// 値を確認する時
console.log(スプライト.immovable);// スプライトの固定状態を確認します
// 値を変更する時
スプライト.immovable = true;// 固定状態にします
スプライトの関数について
スプライトには様々な関数が準備されています。
関数とは"命令"の事です。関数の引数に様々な値を付与する事で様々な動作をさせる事ができます。
代表的な関数をまとめていきます。
速度と角度を指定する
スプライトのsetSpeed関数は、速度と角度を指定します。
角度は度数法です。
スプライト.setSpeed(速度, 角度);
x方向とy方向の速度を指定する
スプライトのsetVelocity関数は、x方向の速度とy方向の速度を指定します。
xは水平方向(+は右方向、-は左方向)へ、yは垂直方向(+は下方向、-は上方向)です。
スプライト.setVelocity(x速度, y速度);
横方向、縦方向に反転する
スプライトのmirrorX関数、mirrorY関数は、それぞれ横、縦方向にスプライトを反転させます。
引数には、-1, 1のいずれかであり、-1の場合は反転、1の場合は元の状態になります。
// 水平方向に反転する場合
スプライト.mirrorX(-1);// 水平方向に反転します
// 元に戻す場合
スプライト.mirrorX(1);// 元に戻ります
スプライトを消す
スプライトのremove関数を実行する事で、スプライト自身を消す事ができます。
スプライト.remove();
スプライト同士の衝突判定について
スプライトAとスプライトBの衝突を調べる事ができます。
(ここでは2つのスプライトをAとBとで表します)
衝突
overlap関数を使う事で、スプライト同士の衝突を調べる事ができます。
この関数の戻り値がtrueの時は衝突、falseの時は衝突していない状態です。
if(スプライトA.overlap(スプライトB)){
スプライトB.remove();// スプライトBを消す
}
衝突(跳ね返り)
bounce関数を使う事で、スプライト同士の衝突を調べる事ができます。
この関数の戻り値がtrueの時は衝突、falseの時は衝突していない状態です。
その後、両者は自動で跳ね返ります。
if(スプライトA.bounce(スプライトB)){
スプライトB.remove();// スプライトBを消す
}
スプライトとマウスの反応について
スプライトとマウスの反応を調べる事ができます。
ここでは4つのイベントを紹介します。
マウスでクリックした時(押した時)
onMousePressedパラメータに関数を指定します。
スプライト.onMousePressed = (e)=>{
console.log("スプライトを押したな!!");
}
マウスでクリックした時(離した時)
onMouseReleasedパラメータに関数を指定します。
スプライト.onMouseReleased = (e)=>{
console.log("スプライトを離したな!!");
}
マウスがスプライトの上に乗った時
onMouseOverパラメータに関数を指定します。
スプライト.onMouseOver = (e)=>{
console.log("スプライトにマウスを乗っけたな!!");
}
マウスがスプライトの上から離れた時
onMouseOutパラメータに関数を指定します。
スプライト.onMouseOut = (e)=>{
console.log("スプライトからマウスが離れたな!!");
}
最後に
よく使う機能に的を絞って解説をしてみました。
p5.playはとても扱いやすいライブラリなのでとてもオススメです。
ここまで読んでいただき有難うございました。
(もしよろしければこちらの動画もご覧になってくださいませ)
Discussion