Полотна холста и игровая анимация

Question

Мне интересно, как это сделать? draw, wait 1 секунда draw frame2 wait 1 секунда draw frame3 wait 1 секунда. ясно анимация холст

теперь я предполагаю, что вы должны сделать это на перекрывающий холсте так, что оно не будет протирает мое текущим обновление игры на 60 кадров в секунде.

Я также буду иметь рамки анимации прозрачным png , чтобы вы могли видеть, что за ним тоже. думаю дым анимация.

Что является лучшим способом подождать 1 секунду, использовать заданный интервал или установить таймаут? Я уже использую set animframerate на моем основном полотном слоя

Мне нужно знать, как анимировать, пока происходит другая анимация, так как моя голова говорит мне, что картинка на экране является процедурной, поэтому, если метод получает вызов, чтобы оживить что-то все остальное останавливается, пока он становится анимированным.

Answer 1

Опираясь на отдельный холст является хорошим способом, чтобы иметь несколько слоев, но есть несколько способов сделать то, что вы хотели:

1. Если PNG изображения предопределено, вы можете просто сделать его прямо на холст с context.drawImage(). Прозрачность будет сохранена. Пока изображение загружается на страницу до его рендеринга, при повторном рендеринге каждого кадра будет немного накладных расходов.
2. Вы можете нарисовать на скрытый холст, а затем нарисовать этот холст на свой основной холст. Вы можете сделать это, создав холст в JavaScript и никогда не записывая его на страницу. Например: var layer = document.createElement('canvas');, а затем позвоните context.drawImage() с layer как параметр image. Я написал реализацию Layer class, которую вы можете использовать, чтобы сделать это проще.
3. Вы можете нарисовать прямо на своем основном холсте с помощью прозрачности, установив свойство globalAlpha вашего объекта графического контекста. (Не забудьте установить его обратно до 1 после того, как вы закончите рисовать свои прозрачные вещи.)
4. Вы можете нарисовать на вторичном видимом холсте, который абсолютно расположен над вашим основным холстом. Для этого вам нужно установить CSS background-color вторичного холста на transparent.

Кроме того, есть два хороших способа ждать одну секунду:

1. Использование setTimeout или setInterval. Это будет как можно ближе к периоду задержки (в данном случае одна секунда), а затем выполнить обратный вызов асинхронно. Используйте setTimeout, если вы хотите выполнить что-то один раз и setInterval, если вы хотите выполнить что-либо с предопределенным интервалом бесконечно (то есть каждую секунду).

2. Сохраните переменную, которая содержит последний раз, когда вы выполнили функцию, которую хотите запустить, и проверьте, достаточно ли вы дождались, прежде чем запускать код. Это приведет к синхронному запуску кода. Например:

   // Outside of your animation loop 
   var lastRun = Date.now(); 
   // Inside your animation loop 
   if (lastRun + 1000 < Date.now()) { 
       /* Run you callback code */ 
   } 
   

   Поскольку вы используете requestAnimationFrame запустить основной цикл анимации, это будет работать в скором времени после задержки (например,1 секунда), при которой браузер готов рисовать новый кадр. Обратите внимание: если вы хотите, чтобы код с использованием этого метода выполнялся асинхронно, вы также можете использовать web workers.

Если вы не рисование текста на холст без кэширования его или рисования тысячи объектов на холст, шансы очень хорошо, что ваша производительность не рисовать переплете, поэтому я выбрал бы самое простое решение даже если он не является асинхронным. Вы можете использовать библиотеку stats.js, чтобы проверить производительность вашего холста.