4

HTML5を使用してカジノベースのゲームを開発しています。アニメーションは正常に動作していますが、これはあまりスムーズではありません。つまり、ホイールの回転が停止すると、トランジションをスムーズにするために最終的な再配置としてボールを移動しますが、期待どおりではありません。完全なコードはこちら

BallReposition 関数 - アニメーションに現実感を与えるために、ボールの最終的な再配置のためにホイールが動きを停止した後に実行されます。

function ballReposition(){
curX = findNearestOnCircle(curX);
 if(curX > deadXRight){
        sign = "-";
    }else if(curX < deadXLeft){
        sign = "+";
    }       
    if(sign == "+"){
        curX = parseInt(curX) + ballRepositionIncVal;
        curY = Math.floor(Math.abs(getYOnCircle(curX, 130, 1)) + 0.5);      
    }else{
        curX = parseInt(curX) - ballRepositionIncVal;           
        curY = Math.floor(Math.abs(getYOnCircle(curX, 130, 0)) + 0.5);
    }
    var xy = normalizeXY(curX, curY);

    curX = parseInt(xy.split("-")[0]);
    curY = parseInt(xy.split("-")[1]);
    surface = document.getElementById("myCanvas");
    var surfaceContext = surface.getContext("2d");
    //removing older ball image.
    surfaceContext.save();
    // Translate to the center point of our image
    surfaceContext.translate(happy.width * 0.5, happy.height * 0.5);
    // Perform the rotation
    surfaceContext.rotate(DegToRad(angle));
    // Translate back to the top left of our image

    surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);             
    surface.getContext("2d").drawImage(happy, 0, 0);
    surface.getContext("2d").drawImage(ball, curX, curY);
    console.log(curX + curY);
    surfaceContext.restore();

    ballRepositionIncVal-=5;
    if(ballRepositionIncVal <= 0){
        clearInterval(myIntervalVar);
    }

}

その他の機能詳細 -

  1. drawCanvas - 画像をロードし、画像がロードされると、ホイールを回転させてボールを反時計回りに動かすループ関数の呼び出しを開始します。
  2. normalizeXY - ボールをいくつかの個別の位置、つまりホイール数の下の適切な位置に配置するために使用されます。

編集 -ここで更新されたフィドル構成

4

1 に答える 1

4

リアルな糸車を作成するには、対数的なアプローチを使用して車輪の速度を下げることができます。

これは、フレームごとに小さなパーセンテージで角度が減少することを意味します。パーセンテージであるため、スムーズな終了スピンが得られます (悪名高い荷馬車の車輪のエイリアシング効果が得られることにも気付くでしょう)。

このオンライン デモは、分離されたループを示しています (お好みで実装してください)。

var angle = 2;          /// start angle in radians
ctx.translate(w, h);    /// prepare canvas for rotation (w and h = 50%)

ctx.globalAlpha = 0.67; /// optional bonus: motion blur(-ish)
loop();                 /// start loop

function loop() {

    ctx.rotate(a);      /// use incremental rotation
    ctx.drawImage(img, -w , -h);

    /// spin down and only loop if angle > certain value
    a *= 0.995;

    /// continue if there is enough "inertia"
    if (a > 0.001) requestAnimationFrame(loop);
}

ループを継続するためのしきい値は、停止をどの程度「残忍」にするかを決定します。ホイールをより重く見せたい (質量を増した) 場合は、さらに小さな増分で角度を減らすことができます (例: try 0.998)。

ボールが跳ね返るには、物理​​モデリング、または少なくとも疑似物理モデリングに頼る必要があります。これには、ホイールのすべての細部の衝突検出、およびサブタイム ステップ (レイ キャスティング) チェックと z 軸での配置が含まれます。

ここで SO について説明するには少し広いと思いますが、衝突検出と物理シミュレーションに関する優れた記事を見つけてください。ここからは、基本から始めましょう。

于 2013-09-04T01:21:12.430 に答える