Должен ли я использовать HTML5 Canvas или CSS3 Sprites для анимации объектов в игре?

Question

Я нахожусь в процессе создания стратегии игры (думаю, Warcraft) для Интернета.Я исследовал HTML5 Canvas и CSS3-спрайты и до сих пор не могу решить, какую технологию использовать.

Игра не будет завершена в течение следующих 6 месяцев.

Любой советбыть оцененным.

Answer 1

Как вы, наверное, так часто слышите ... "Это зависит ..." & trade;

Мое предложение будет учитывать ощущение приложения, которое вы ищете. Если вы пытаетесь создать очень графически насыщенное приложение, в основном с изображениями, я бы использовал Canvas. Однако, если вы пытаетесь анимировать некоторую графику, но страница остается и ведет себя более «как в Интернете», смешанной с другим содержимым HTML, я бы попробовал CSS3.

Два дополнительных пункта:

• В настоящее время Canvas лучше поддерживается, чем CSS3-анимация / спрайты.
• Если вы используете Canvas, вы собираетесь реализовать свой собственный цикл рендеринга и анимационный код (или использовать третью частично библиотеку). Ваш код создает анимацию, комбинируя различные слои каждого кадра, применяя движение и повторяя. Вы не можете просто сказать «переместите это изображение немного вправо». Тебе придется сделать это самому.

Answer 2

Веб-игра EA "Lords of Ultima", как бы она ни была скучна, является отличным примером военного мира в стиле WarCraft (ну, это скорее городское строительство, так как нет видимых юнитов), с анимацией и всем остальным.на чистой базе HTML и CSS спрайтов.Он выглядит и работает хорошо, и я думаю, что квадратная блочная блочная модель HTML подходит для такого типа плиточного дизайна, особенно с учетом того, что большая часть обработки изображений (вставка <img> или <div> с фоном, изменение фона)-позиция для анимации) и обработка мышью и кликом выполняется для вас в простом html.

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

Answer 3

Использовать холст. Если вы используете CSS-спрайты для создания игры, то вы собираетесь создать множество <div>, которые выполняют операции с DOM, которые могут замедляться, а также иметь много проблем с фокусировкой и совместимостью.

Может стоить обменять время разработки на производительность на <canvas>, если предположить, что «код будет сохраняться вечно».

Я думаю, что спрайтовая система CSS3 требует больше времени для разработки, потому что вам необходимо учитывать совместимость браузера.

Браузеры, такие как IE 8 (8 или 9?), Используют графический процессор для ускорения графики, что позволяет вам получить бесплатный ланч по закону Мура.

Answer 4

Есть плюсы и минусы для обоих. В настоящее время Canvas лучше поддерживается, чем CSS3, но вы сказали, что ваша игра не будет готова в течение еще 6 месяцев, и к тому времени поддержка CSS3 станет намного лучше. Здесь также есть много других переменных, таких как: В каком браузере будет просматриваться игра? Насколько продвинута графика для анимации? и т. д. Я бы сказал, что canvas будет лучше поддерживать браузеры текущего поколения и игровую графику, однако CSS3 будет быстрее, но даже не приблизится к поддержке или обработке графики. Но не похоже, что вы спешите, чтобы сделать это.

В основном:

Холст: графика, текущая поддержка в браузере пользователей

CSS3: скорость разработки

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