2016-12-29 15 views
0

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:

+0

なぜジャンプしていないのか分かりましたが、-10は明らかに目立つジャンプのために小さすぎます。y – YSbakker

答えて

2

Made an MCVEあなたはいくつかのことを必要とします。あなたは重力を下向きの加速と考えることができます。あなたのコードでは、ある程度一定の値で減少しています(velocity.y)。もちろん、実際にはvelocity.yをプレイヤーの動きに追加する必要があります。今すぐあなたはvelocity.xを追加するだけです。

ステップ2:あなたは停止が落下するものをしたい場合は、あなたはプレイヤーの下方への移動を停止するいくつかのロジックが必要になるだろう。これはプレイヤーのYポジションを確認するのと同じくらいシンプルになるか、ゲームオブジェクトに対してより高度なチェックを行うことができます。いずれにせよ、あなたは画面から落ちないようにする何かを実装しなければならないでしょう。

ステップ3:あなたはこれら二つのことをしたら、あなたは、単にいくつかの値にvelocity.y値を設定することによって、あなたのkeyPressed()機能を修正することができます。また、プレーヤーが空中に飛び込むのを防ぐため、ここにチェックインすることもできます。

ストーリーのモラルは、問題を小さなステップに分割して、一度にそれらのステップの1つで作業する必要があります。立ち往生した場合は、MCVEを投稿してください。がんばろう。

+0

最初の2つのステップは実際には既にあり、 'draw()'の2番目のステートメントを見てください。しかし、構文は 'p1.pos'ではなく' p1.pos.y'でなければなりません。だから私はそれを調べます。また、私は 'var collision'を使って衝突を検出する仕組みを作りました。しかし、あなたの答えをありがとう、それは実際に非常に有用です。数時間のコーディングの後に、あなたは間違いを見るのをやめます。 – YSbakker

+0

MCVEをhttps://jsfiddle.net/YSbakker/og46fmLx/1/で作成しました。これは私の問題を正しく示しています。ジャンプは基本的に瞬間的ですが、適用される重力は滑らかです。これはどうしたらできますか? – YSbakker

+0

@YSbakker別の質問がある場合は、新しい質問を投稿するだけです。しかしあなたの問題は、あなたの速度を落とさない**ということだと思います。すぐに '5'と同じ値に設定するだけです。おそらく '100'はジャンプの値が大きすぎることがわかります。ただ速やかに速度をキャンセルして' 5'に設定するだけで動作します。 –

関連する問題