p5.jsを使い始めたばかりですが、シンプルさが好きですが、把握できないものが1つあります。keyPressed()関数がスムーズにジャンプしない
私はFiddle次の設定:どこに問題がある
function Player(location, width, height, speed, weight) {
this.pos = location;
this.width = width;
this.height = height;
this.velocity = speed;
this.mass = weight;
this.grav = new p5.Vector(0, this.mass * 10);
}
function Wall(location, width, height) {
this.pos = location;
this.width = width;
this.height = height;
}
var p1 = new Player(new p5.Vector(-100, 0), 50, 70, new p5.Vector(0, 0), 1);
var wall1 = new Wall(new p5.Vector(100, -100), 50, 50);
var collision = false;
var jump = new p5.Vector(0, -10);
function setup() {
createCanvas(1000, 500);
background(100);
}
function draw() {
// Set zero-point
translate(-p1.pos.x * 0.95 + 100, height - p1.height);
// Apply gravity if p1 is not touching object
if (p1.pos.y > 0) {
// Do not apply p1.grav
collision = true;
} else {
p1.pos.add(p1.grav);
collision = false;
}
noStroke();
fill(55, 37, 73);
background(100);
rect(p1.pos.x, p1.pos.y, p1.width, p1.height);
rect(wall1.pos.x, wall1.pos.y, wall1.width, wall1.height);
if (p1.pos.x < -p1.width * 2) {
p1.velocity.x = 10;
p1.pos.add(p1.velocity.x);
} else {
if (keyIsDown(LEFT_ARROW)) {
p1.velocity.x = 5;
p1.pos.sub(p1.velocity.x);
} else if (keyIsDown(RIGHT_ARROW)) {
p1.velocity.x = 5;
p1.pos.add(p1.velocity.x);
}
}
}
function keyPressed() {
if (key == ' ') {
p1.pos.y += jump.y;
}
}
だから最終keyPressed()
関数です。ユーザがスペースを押すたびに、私はPlayerに基本的にy-ベロシティを加えてジャンプさせます。現在の状態は簡素化されていますが、基本的に位置はjump.y
に設定されています。 (これは前にしたので、これはちょっと変わっていますが、今は動作していないようです。)この問題は解決されました。
とにかく、それは主要な問題ではありません。主な問題は、(動作したとき)、ジャンプは全くアニメーション化されず、基本的にちょうどp1オブジェクトの位置を変更したことです(前に説明したように)しかし、私は最終的にジャンプが、よりスムーズな "ウォーキング"アニメーションと同様に、はるかに良いアニメーションになることを願っています。
私はすでに
p1.velocity.y = jump.y;
p1.pos.y += p1.velocity.y;
ようなものでp1.pos.y += jump.y;
を交換しようとしたが、私は同様の結果を得ました。
draw()
の機能が繰り返しで、keyPressed()
の機能がないと思われます。私もdraw()
の内部に関数を入れてみましたが、これはうまくいきませんでした。
私は本当にここで失われています。
EDIT:あなたはものが落ちるしたい場合は、重力が必要になるだろう:
ステップ1:
なぜジャンプしていないのか分かりましたが、-10は明らかに目立つジャンプのために小さすぎます。y – YSbakker