0

我对画布动画有疑问。我正在使用本教程。这很简单，但现在我想制作 60 fps 的动画。我试过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 回答
1

只是一个想法，一个简单的修复，您可以尝试向精灵表添加额外的帧？这也将改善您的动画，而不必担心破坏其他东西:)

于 2013-04-29T21:24:20.413 回答
0

每当您移动精灵时，您应该将移动的像素数除以每秒的帧数。例如，如果您想以dx60fps 的速度每秒移动他的像素，请将其定义var fps = 60;为全局变量并x += dx/fps;在您移动他时执行此操作。之前的帧率是多少？30fps还是什么？不管它是什么，如果你想让它以 60fps 的速度以与以前相同的速度运行，dx通过将你的前一个乘以 fps 来使你等于每秒行进的像素数dx。因此，如果它以 30fps 的每帧 10px 移动，则制作var dx = 300;.

于 2013-09-05T04:42:55.163 回答