このチャプターの目次
物理演算を使う
p5.playには、Box2dベースの物理演算も実装されています。
"物理演算"とは、重力や衝突等の自然界における物理法則のシミュレーションの事です。
"Flappyなゲーム"を作るためには、この概念について理解をしておく必要があります。
重力を有効にする
"world"変数のプロパティ"gravity"に重力の方向を設定し、
重力を有効にします。(これだけです)
| プロパティ | 意味 |
|---|---|
| world.gravity.x | x方向の重力の強さ |
| world.gravity.y | y方向の重力の強さ |
実際には次の様にして実装をします。
(今回の開始コードです)
let cvs;// キャンバス
let player;// プレイヤー
function setup(){
// キャンバスの準備
cvs = new Canvas(480, 320);
world.gravity.y = 12;// 重力を設定する
// プレイヤー
player = new Sprite(width/2, height/2);
player.width = 30;
player.height = 30;
player.color = "orange";
player.image = "./assets/reimu_good_01.png";// 画像を設定する
}
function draw(){
background("silver");// 背景色
}
実行すると次の様になります。
落ちていく霊夢!!
左右キーボードでジャンプ
キーボードの左右を判定し、
画面上方向に速度を与える事で"ジャンプ"を実装する事ができます。
(速度についての説明はもう不要ですね)
// 省略
function draw(){
background("silver");// 背景色
// キーボード
if(kb.presses("left")){
player.vel.x = -2;
player.vel.y = -5;
}
if(kb.presses("right")){
player.vel.x = 2;
player.vel.y = -5;
}
}
キーボードの左右を押すと、霊夢がジャンプします。
それっぽい!!
床の上に乗る
次は、動かない"床"を用意してみます。
スプライトのプロパティ"collider"に対し、
次の値を設定する事で物理演算上の取り扱いを決める事ができます。
| プロパティ | 意味 |
|---|---|
| dynamic | 動く物体(デフォルト値) |
| static | 動かない物体 |
| none | 物理上無視される物体 |
動かない物体として、"floor"を配置したコードを確認してみましょう。
(動かない物体なので、"static"にします)
let cvs;// キャンバス
let player;// プレイヤー
let floor;// 床
function setup(){
// キャンバスの準備
cvs = new Canvas(480, 320);
world.gravity.y = 12;// 重力を設定する
// プレイヤー
player = new Sprite(width/2, height/2-100);
player.width = 30;
player.height = 30;
player.color = "orange";
player.image = "reimu_good_01.png";// 画像を設定する
// 床
floor = new Sprite(width/2, height/2+80);
floor.width = 120;
floor.height = 20;
floor.color = "gray";
floor.collider = "static";// 動かない物体
}
// 省略
実行すると、床が配置されてその上に乗る事ができる様になります。
落ち着きます!!
次回はカメラとスクロールについての解説になります。
お楽しみに!!