Эффективность холста HTML5: загрузка изображений и рисование

Я планирую писать игру с использованием javascript/canvas, и у меня только один вопрос: о каких соображениях производительности я должен думать в отношении загрузки изображений или просто рисования с использованием методов canvas. Поскольку моя игра будет использовать очень простую геометрию для искусства (круги, квадраты, линии), любой метод будет прост в использовании. Я также планирую реализовать простой движок частиц в игре, поэтому я хочу, чтобы иметь возможность рисовать много мелких объектов без большой производительности.

Мысли?

Ответ 1

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

Если вы рисуете более подробные объекты с помощью штрихов, заливок градиента и другого чувствительного к производительности макияжа, вам будет лучше использовать спрайты изображений. Создание графической процедуры не всегда эффективно.

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

Если вы решите рисовать спрайты, вы должны прочитать некоторые советы и методы оптимизации в этом потоке.

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

Ответ 2

В этой статье обсуждается тема и проводится несколько тестов для сравнения различий.

Conculsions

Вкратце - Canvas любит небольшой размер холста, а DOM любит работать с несколькими элементами (хотя DOM в Firefox так медленно, что это не всегда так).

И если вы планируете использовать частицы, я подумал, что вы можете взглянуть на Doodle-js.

Ответ 3

Загрузка изображения из кеша происходит быстрее, чем его создание/загрузка из исходного ресурса. Но тогда вам нужно предварительно загрузить изображения, чтобы они попали в кеш.

Ответ 4

Это зависит от типа графики, которую вы будете использовать, поэтому я предлагаю вам реализовать самое простое решение и решить проблемы с производительностью по мере их появления.

В общем, я ожидал бы скопировать растровое изображение (рисование изображения) быстрее, чем воссоздать его из примитивов, поскольку сложность изображения становится выше.

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

Ответ 5

Как и в большинстве игр, вы можете посмотреть, что вам нужно сделать, и использовать смесь обоих.

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

Если вы нацеливаете, например, на IE9 и FF4, то в Windows вы должны получить хорошую производительность от рисования, поскольку они используют графическую карту, но для более общих браузеров вы, вероятно, захотите взглянуть на использование спрайтов, которые будут либо изображениями, которые вы рисуете как часть инициализации и перемещения, либо загружаете растровые изображения.

Это поможет узнать, какой тип игры вы смотрите, как динамическая графика должна быть, насколько велики растровые изображения, какой тип частоты кадров вы надеетесь.

Ответ 6

Пейзаж меняется при каждом выпуске браузера. Я предлагаю следовать инициативе HTML5 Games, которую начал Facebook, и набору тестов jsGameBench. Они охватывают широкий диапазон подходов от Canvas до DOM к преобразованиям CSS, а их преимущества и недостатки.

http://developers.facebook.com/blog/post/454

http://developers.facebook.com/blog/archive

https://github.com/facebook/jsgamebench

Ответ 7

Если вы просто рисуете простые объекты геометрии, вы также можете использовать div. Они могут быть кругами, квадратами и линиями в нескольких строках CSS, вы можете размещать их там, где хотите, и почти все браузер поддерживает стили (у вас могут быть проблемы с мобильными устройствами с использованием Opera Mini или старых версий браузера Android и, конечно, с IE7-), но не было бы почти никакого удара по производительности.