ボール (画像付き) を 2D シーンに投げて、ある程度の距離に到達したときに衝突をチェックしたいと思います。しかし、正しく「飛ばす」ことはできません。これは何百万回も尋ねられているようですが、見つければ見つけるほど混乱します..今、私はこの答えに従いましたが、ボールの動作が予想とは大きく異なるようです. 実際、キャンバスの左上に移動し、速度が速すぎて小さすぎます.vzを0.01などに設定することでこれを調整できますが、ボールがまったく表示されません...
これは私の目的です (簡略化) / 興味のある完全なソースへのリンク. 重要な部分は update() と render() です
var ball = function(x,y) {
this.x = x;
this.y = y;
this.z = 0;
this.r = 0;
this.src = 'img/ball.png';
this.gravity = -0.097;
this.scaleX = 1;
this.scaleY = 1;
this.vx = 0;
this.vy = 3.0;
this.vz = 5.0;
this.isLoaded = false;
// update is called inside window.requestAnimationFrame game loop
this.update = function() {
if(this.isLoaded) {
// ball should fly 'into' the scene
this.x += this.vx;
this.y += this.vy;
this.z += this.vz;
// do more stuff like removing it when hit the ground or check for collision
//this.r += ?
this.vz += this.gravity;
}
};
// render is called inside window.requestAnimationFrame game loop after this.update()
this.render = function() {
if(this.isLoaded) {
var x = this.x / this.z;
var y = this.y / this.z;
this.scaleX = this.scaleX / this.z;
this.scaleY = this.scaleY / this.z;
var width = this.img.width * this.scaleX;
var height = this.img.height * this.scaleY;
canvasContext.drawImage(this.img, x, y, width, height);
}
};
// load image
var self = this;
this.img = new Image();
this.img.onLoad = function() {
self.isLoaded = true;
// update offset to spawn the ball in the middle of the click
self.x = this.width/2;
self.y = this.height/2;
// set radius for collision detection because the ball is round
self.r = this.x;
};
this.img.src = this.src;
}
また、「自然な」飛行アニメーションを実現するために、requestAnimationFrameを使用して〜60fpsでキャンバスをレンダリングするときに、速度のどのパラメータが適切であるべきか疑問に思っています
誰かが私を正しい方向に向けることができれば、とても感謝しています（もちろん、論理を説明する疑似コードも）。
ありがとう