Почему игра подлагивает,спасет ли канвас если использовать в нем анимированный SVG?

Question

[Игорь]

isc.96.lt/t/gam/mar

Собственно чувствуется что игра подлагивает и идёт не плавно.

Думаю использовать канвас,вместо обычной html верстки.

Но в канвасе думаю те же свг анимированные элементы использовать.

Такого рода анимация свг:


Если заюзаю канвас спасет ли ситуацию,и в чём ошибки?

Answer 1

[napa3um]

Канвас для растровой графики, не для SVG. Перед использованием в canvas векторную графику нужно будет преобразовать в растровые спрайты. Но проблема у вас не в способе вывода графики, а в способе отсчёта тиков основного цикла. Для организации цикла используйте https://developer.mozilla.org/ru/docs/DOM/window.r... . Чуть более развёрнутое описание: html5.by/blog/what-is-requestanimationframe .

Comments

[Игорь]

var fps=40;
    
function loop(){
    setTimeout(function(){ 
        
        requestAnimationFrame(loop);
    
    
    rocks=allRoocksCord(twoRocks,rocks);
    marioCord=allRoocksCord(gamer,mario);

      moveMario();
        gravityDown();
      getBottomPlaceMario();
        mario.gg=0.1;

        if(keys[68]){ mario.X+=10;};
        if(keys[65]){ mario.X-=10;};
        if(keys[32]){ mario.Y-=30;  };



    },1000/fps)

};



loop();

так выходит?

[Николай]

Не надо ограничивать fps. Весь смысл requestAnimationFrame в том - что он сделает это с максимально возможным FPS. Уберите setTImeout, и внутри функции loop нужно вызвать просто запрос на следующую перерисовку(т.е. requestAnimationFrame). function loop() { // code; requestAnimationFrame(loop)};
А затем при начале игры вызываем requestAnimationFrame(loop).
Если нужно остановить - используем метод cancelAnimationFrame.

[napa3um]

Игорь Николаевич: попробуйте такой вариант, но я бы не смешивал setTimeout и requestAnimationFrame, для фиксированного количества FPS лучше внутри requestAnimationFrame делать проверку, прошло ли нужное для следующего фрейма время: stackoverflow.com/questions/19764018/controlling-f... .

[Игорь]

крч этот ответ не зачотный для меня.
ни то оно.

[napa3um]

Игорь Николаевич: не всегда у вопрошающего хватает компетенций, чтобы понять ответ. Ничего страшного, пробуйте решить проблему самостоятельно, чтобы набить все шишки самому.

Answer 2

[Елизавета Борисова]

setTimeout не нужно сочетать с raf, но вообще на SVG производительную игру не сделать.

Но в канвасе думаю те же свг анимированные элементы использовать

canvas работает с растром, те же не выйдет.
Для канваса, конечно же, поробуйте pixi и pixi-spine