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

Question

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

Игра не завершена еще 6 месяцев.

Любые советы будут оценены.

Answer 1

Как вы, наверное, слышал так часто ... «Это зависит ...» ™

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

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

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

Answer 2

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

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

Answer 3

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

В основном:

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

CSS3: Скорость развития

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

Answer 4

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

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

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

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