0

Vamos imaginar 2 imagens imagem A e imagem B, eu quero desenhar a imagem A a 60 fps, e a imagem B a 30 fps.

Eu queria saber (usando o requestAnimationFrame) qual é a melhor forma de fazer isso, deveria criar outro canvas?

2
  • Essa imagem seria um conjunto de commandos para desenhar no canvas, um tipo de textura animada ou você só estaria repintando uma imagem? De qualquer forma o requestAnimationFrame sempre vai rodar a 60fps, se quiser que qualquer coisa rode a 30 faça uma condição que desenhe a imagem frame sim frame não, 60/2=30 sacou? mas isto pode te dar problemas caso você queira que coisas rodem a 20 ou 40. Se não estiver fazendo jogos setInterval parece uma boa
    – Mendes
    21/06/2017 às 19:09
  • Sim, o problem é que eu estou fazendo um jogo
    – Safirah
    21/06/2017 às 19:14

1 Resposta 1

2

window.requestAnimationFrame() na verdade só invoca a função passada por parâmetro a cada 16,67 milissegundos (isto é, 60 vezes por segundo). A responsabilidade da função passada como parâmetro para window.requestAnimationFrame() é desenhar o que precisar desenhar, seja usando <canvas>, <img> ou <div> com background-image.

Vamos imaginar que imagemA e imagemB são ImageBitmaps com as frames dispostas horizontalmente, lado a lado, que você desenha num <canvas> usando renderingContext.drawImage(). Teremos, então, algo semelhante a:

var canvas = document.getElementById("meuCanvas"),
    ctx = canvas.getContext("2d"),
    imagemA = new Image(),
    imagemB = new Image(),
    num_ticks = 0,
    largura_A, altura_A, frames_A, x_A, y_A,
    largura_B, altura_B, frames_B, x_B, y_B,
    bmpA, bmpB;
// carregar as imagens
imagemA.src = "path/to/imageA";
imagemB.src = "path/to/imageB";
// quando as imagens terminarem de carregar...
Promise.all([
    new Promise(function (resolve, reject) {
        imagemA.onload = function () { resolve(this); }
    }),
    new Promise(function (resolve, reject) {
        imagemB.onload = function () { resolve(this); }
    })
]).then(function (imgA, imgB) {
    bmpA = createImageBitmap(imgA);
    bmpB = createImageBitmap(imgB);
    desenhar_frame(); // inicia a animação
});
function desenhar_frame() {
    // imagemA tem largura_A por altura_A pixels e frames_A frames, sendo desenhado em (x_A, y_A);
    // imagemB tem largura_B por altura_B pixels e frames_B frames, sendo desenhado em (x_B, y_B).
    // o frame de A sempre avança
    ctx.drawImage(
        bmpA,
        x_A, y_A,
        largura_A, altura_A,
        x_A * (num_ticks % frames_A), 0,
        largura_A, altura_A
    );
    // B tem que ser desenhado toda vez, mas o frame só avança chamada sim, chamada não
    ctx.drawImage(
        bmpB,
        x_B, y_B,
        largura_B, altura_B,
        x_B * (num_ticks % (2 *frames_B)), 0,
        largura_B, altura_B
    );
    // avança o contador de frames e registra a função para
    // se chamar de novo daqui a 1/60 segundos
    num_ticks ++;
    requestAnimationFrame(desenhar_frame);
};
2
  • Upvote por causa do imagemA.onload = function () { resolve(this); } que é de uma genialialidade ..., eu teria passado uma referencia a imagemA no argumento do resolve.
    – Mendes
    21/06/2017 às 19:53
  • @ColdMeson_06: Na verdade, como this naquele contexto é imagemA, retornar uma referência seria absolutamente igual. Na verdade, não precisava passar nada no .resolve(), já que a imagemA está sempre no escopo, mas num exemplo menos tosco pode ser uma técnica conveniente.
    – Wtrmute
    21/06/2017 às 20:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .