0

キャンバス アニメーションに問題があります。私はこのチュートリアルで作業しています。至ってシンプルですが、今度は60fpsでアニメーションを作りたいと思います。試してみsetInterval(Update, 1000/60)ましたが、もちろん動作していますが、スプライトに問題があります。そのアニメーションは速すぎます。60fps にして、キャラクターのスプライト アニメーションを遅くする方法はありますか (より自然に見えるようにするため)。

実例がなくて申し訳ありませんが、スプライト用の ftp なしで作成するのは少し難しいです。

コード：

var canvas;
var ctx;
var dx = 10;
var x = 30;
var y = 0;
var WIDTH = 1000;
var HEIGHT = 340;
var tile1 = new Image ();
var posicao = 0;
var NUM_POSICOES = 3;

    function KeyDown(e){
        switch (e.keyCode) {
            case 39: 
                if (x + dx < WIDTH){
                    x += dx;
                    posicao++;
                    if(posicao == NUM_POSICOES)
                        posicao = 1;
                }
                break;   
        case 37:
            if (x + dx < WIDTH){
                    x -= dx;
                    posicao++;
                    if(posicao == NUM_POSICOES)
                        posicao = 1;
                }

        }
    }
    function KeyUp(e){
        posicao = 0;
    }
    function Draw() {   
        tile1.src = posicao+".png";
        ctx.drawImage(tile1, x, y);
    }
    function LimparTela() {
        ctx.fillStyle = "rgb(233,233,233)";   
        ctx.beginPath();
        ctx.rect(0, 0, WIDTH, HEIGHT);
        ctx.closePath();
        ctx.fill();   
    }
    function Update() {
        LimparTela();   
        Draw();
    }
    function Start() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        return setInterval(Update, 1000/60);
    }
        window.addEventListener('keydown', KeyDown);
        window.addEventListener('keyup', KeyUp);
Start();
4

3 に答える 3

1

Update() を「スロットル」して実行頻度を下げることができます。

var counter=5;

function Update() {
    if(--counter>0){ return; };
    LimparTela();   
    Draw();
    counter=5;
}

ユーザーがキーを押した場合、カウンターを 0 に設定することでアニメーションを強制できます。

function KeyDown(e){
    switch (e.keyCode) {
        case 39: 
            if (x + dx < WIDTH){
                x += dx;
                posicao++;
                if(posicao == NUM_POSICOES)
                    posicao = 1;
            }
            // zero the counter to force the animation now
            counter=0;
            break;   
    case 37:
        if (x + dx < WIDTH){
                x -= dx;
                posicao++;
                if(posicao == NUM_POSICOES)
                    posicao = 1;
            }
            // zero the counter to force the animation now
        counter=0;
    }
}
于 2013-04-30T05:09:08.173 に答える
0

スプライトを移動するときはいつでも、移動したピクセル数を 1 秒あたりのフレーム数で割る必要があります。たとえば、dx60fps で 1 秒あたりのピクセル数で彼を動かしたい場合var fps = 60;は、グローバル変数として定義し、x += dx/fps;彼を動かすときに実行します。以前のフレームレートは？30fpsか何か？それが何であれ、60fpsで以前と同じ速度にしたい場合は、前のものにfpsdxを掛けて、1秒あたりに移動したピクセル数に等しくします. dxしたがって、30fps で 1 フレームあたり 10px で動いていた場合は、var dx = 300;.

于 2013-09-05T04:42:55.163 に答える