Холст против SVG для игр

Я понимаю, что есть много учебников и сайтов и все ответы "что лучше для игровых приложений?"Все они говорят,что SVG не подходит для игровых приложений, что canvas. Но это сбивает меня с толку.

  • еще что-то нарисовано на холсте, оно забыто.
  • SVG элементы могут быть изменены после создания, не касаясь каких-либо других визуальных элементов в игре.
  • Canvas не имеет встроенной анимации
  • SVG имеет встроенные анимации

Итак, предположим, я делаю платформер. Я хочу, чтобы главный герой прошел по сцене с красиво нарисованным фоном. В Canvas я должен либо воссоздать весь ее hitbox (перекрашивая пятно каждого движущегося объекта), либо сделать отдельный элемент canvas и использовать maybe ctxChar, ctxBG, ctxItems etc. С SVG, с другой стороны, он встроен. И я даже могу просто поставить <animate> тег внутри <use> тег, который изменяет ее положение x (или вручную измените его через js), а другой <animate> тег, чтобы изменить ее спрайт. И тогда фон никогда не нужно трогать.

что касается анимации группы элементов одновременно, я не вижу, как это быстрее в Canvas, чем в SVG. Что не так с помещением элементов svg в группы? Может ли это быть медленнее, чем перерисовка фона hitboxes и перерисовка самих сущностей для всех сущностей?

Edit: я думаю, что мой реальный вопрос не в том, может ли SVG работать, но почему люди думают, что это невозможно?--5-->

6
2d-games canvas svg

1 ответов

SVG V холст

Как профессиональный создатель игр мой совет - держаться подальше от SVG, если вы хотите создавать браузерные игры. Главная причина в том, что он просто слишком медленный. Вторая причина заключается в том, что это затруднит вашу работу программиста, потому что трудно найти решения для отсутствия производительности SVG. Третья причина, потому что это очень медленно, и игры Все о производительности.

эта страница будет идти по SVG game design оригинальный подход к Разработка веб-игр с использованием SVG но прежде чем погрузиться и прочитать все это, посмотрите на прототип игры, это все о прототип рун и реликвий. Немного о-ХУМ в моей книге.

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

Итак, для чего хорош SVG? Графические ресурсы. SVG-хороший способ упаковки изображений для вашей игры, как только вы их получите на клиенте, вы можете сделать их растровые изображения, а затем использовать их для визуализации игры. Красота в том, что вы получаете разрешение независимой масштабируемости SVG и малый размер изображений. Но, визуализируя их в растровое изображение во время загрузки, вы получаете полное использование GPU для перемещения пикселей. SVG слишком медленный для использования в игре.

зачем использовать холст? Я хотел бы сказать, потому что это быстро, но это не тогда, когда вы сравниваете его с родным приложением c++, которое будет работать на 10* быстрее, чем эквивалентный Javascript / холст игре. В десять раз быстрее очень важно, но тогда вы не получите кросс-платформенное преимущество, которое вы получаете с Javascript.

В настоящее время canvas-лучший вариант для действительно кросс-платформенных игровых приложений. Используя 2D или 3D webGL, вы можете создавать полноэкранные игры с полной частотой кадров. HTML5 имеет хороший набор API для всех игровых потребностей и прост в освоении.

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

Фазер является javascript холст игровой движок, который имеет много ресурсов и примеров. Это хорошее место, чтобы начать и посмотреть, что можно сделать. Не будьте втянуты в тот факт, что игровые движки продают себя как таковые. HTML5 & JavasScript из коробки лучший игровой движок в городе, работает родной код, имеет огромную базу пользователей и поддержки. Время, которое вы тратите на изучение того, как использовать API игрового движка, не будет потрачено на изучение того, как использовать API HTML5 (и, честно говоря, API HTML5 идеальны, результат 20-летних браузерных войн), что на самом деле проще, чем игровые движки, чтобы использовать и учиться.

11