HTML5 буфер изображения - PullRequest
Новая
       20

HTML5 буфер изображения

1 голос
/ 24 декабря 2011

Я начинающий программист в javascript. Я не использую jQuery! И я хочу сделать простую игру.

Я загружаю несколько изображений на холст, используя

imageObj.onload = function () {}

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

function keydown_handler (e) {my_key [String.fromCharCode (e.keyCode)]] = правда; Move ();}

Моя проблема в том, что когда я нажимаю клавиши и перемещаю изображения на холсте, изображение мерцает. Я предполагаю, что это потому, что он загружает изображение каждый раз, когда я нажимаю клавишу. Если это правда, как я могу загрузить изображение ОДИН РАЗ в память, а затем ВЫЗВАТЬ это изображение из памяти и изменить его координаты?

Спасибо!

Ответы [ 2 ]

4 голосов
/ 24 декабря 2011

Что вам действительно нужно сделать, так это создать цикл рендеринга с помощью javascript с помощью requestAnimationFrame () и выполнить рендеринг с помощью элемента canvas.Вот действительно простой пример рендеринга с HTML5: 

<!DOCTYPE html>
<html>
    <body>
        <canvas id="gameCanvas" width="800px" height="600px"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById('gameCanvas');
            var context = canvas.getContext('2d');
            var myImage = new Image();
            var myImage.onload=function(){init();};
            var myImage.src='location/of/image.png';
            var imageX = 0, imageY = 0;

            function render()
            {
                window.requestAnimationFrame(render);

                // clear canvas
                canvas.width = canvas.width;

                context.drawImage(myImage, imageX, imageY);

                imageX++;
                imageY++;
            }

            function init()
            {
                window.requestAnimationFrame(render);
            }
        </script>
    </body>
</html>

Никогда не будет мерцания при рендеринге через холст, поскольку браузер уже выполняет двойную буферизацию этой поверхности рендеринга;и ручная двойная буферизация холста фактически приведет к значительному снижению частоты кадров.То, с чем вы, вероятно, сталкиваетесь (если вы визуализируете через холст), это разрыв кадра.Использование requestAnimationFrame решит проблему разрыва, по сути v-синхронизируя рендер (так как он ожидает окончания выполнения кода для рендеринга).

Надеюсь, это поможет вам начать работу с верным путем для рендеринга с HTML5.

2 голосов
/ 24 декабря 2011

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

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

https://stackoverflow.com/a/2864533/594558

...