Холст нескольких изображений и производительность мобильного браузера

Question

Я пишу о производительности мобильного браузера с холстом HTML5. Я пытаюсь сделать простую платформенную игру (например, супер марио bros). У меня есть главный герой, два врага и блоки, имитирующие прыгающие платформы. Персонаж и враги нарисованы drawImage, блок сгенерирован fillRect (теперь, позже это будет также drawImage). Все анимируется (когда персонаж перемещается, символ X добавляется в блоки X и т. Д.).

Теперь я пытаюсь добавить некоторые случайные монеты. Сначала я создал переменную для изображения

var coinB = new Image(); 
coinB.src = 'coin.png'; 

Далее я создаю массив с объектами со случайными X и Y:

var k; 
for (k = 0; k <= 30; k++) { 
    coins.push({ 
     x: Math.floor(Math.random() * 36 + 4) * 100, 
     y: Math.floor(Math.random() * 3 + 1) * 100, 
     width:25, 
     height:25 
    }); 
} 

И после того, что я пытаюсь выбрать все и рисовать:

var l; 
/* left is the character X for the animation */ 
for (l = 0; l < coins.length; l++) { 
    ctx.drawImage(coinB, coins[l].x - left, coins[l].y, coins[l].width, coins[l].height); 
} 

Все находится в функции(), которая находится в requestAnimFrame.

К сожалению, после этого игра имеет около 30 кадров в секунду (от ранее 60 кадров в секунду без монет) на Mobile FireFox (Chrome Mobile 20-30 fps). Так что это примерно половина fps с монетами.

Есть ли лучший способ импортировать изображения и нарисовать их? Например, я делаю new Image() для всех вещей (mainchar = new Image(), enemy = new Image(), coin = new Image() = ect), то же самое с .src. Я предполагаю, что это не лучшее решение. Как мне сделать, чтобы получить лучшую производительность (потерять меньше fps)? Благодарим за помощь.

Answer 1

У меня такой опыт; Я искал советы и трюки, но нет никаких волшебных способов решения проблемы производительности. Ключом к улучшению характеристик является сокращение звонков до «drawImage» до абсолютного минимума ... имейте в виду, что это узкое место вашего процесса! Итак, не забудьте нарисовать только то, что в данный момент видно (т. Е. Не рисуют монеты/блоки/фон), которые не видны).

Что касается загрузки изображений, я не вижу альтернативы тому, что вы сейчас делаете. Лучшее, что вы можете сделать, это использовать уникальный файл, содержащий все изображения, а затем использовать нужную часть, когда вам это нужно; это должно сократить время загрузки (1 более крупный файл лучше, чем у многих небольших файлов), но не увеличит производительность.

Надеюсь, это немного помогло, повеселиться!