Mixing canvas и элементы CSS3

Question

Я использую HTML5-игру с использованием холста. Теперь я думаю о создании всех текстовых надписей, таких как всплывающие подсказки, речи, infowindows и т. Д., Используя HTML-элементы с абсолютной позицией над холстом. Поэтому я могу использовать множество эффектов и переходов CSS3.

Но я не уверен в производительности. Эти наложения должны быть добавлены и удалены frecuently (что-то вроде MMORPG, так что будет много речевых пузырей и т. Д.).

Есть, вероятно, 2 вопросы, касающиеся производительности:

1. DOM обходом для добавления/удаления. Может быть, кеш может помочь?

2. HTML и CSS3.

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

Рекомендации: мнения, впечатления?

Заранее спасибо.

Answer 1

Рассмотрите возможность использования только одной из упомянутых двух технологий. Возможно, вы можете освободить это приложение на мобильных устройствах или планшетах. Я думаю, что на этих устройствах будут проблемы с обработкой одновременно. И еще одно: если вы останетесь в холсте, не будет никаких проблем с совместимостью. Это не техничный, но мыслящий ответ.

Answer 2

Один из способов приблизиться к этому - использовать «динамическую» карту изображения за вашим холстом. Затем вы можете использовать dom, как требуется. Обратите внимание, что вам нужно будет пройти клики на холсте до карты изображения.

Answer 3

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

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

С элементами DOM (особенно при использовании библиотеки, такой как jQuery) это тривиально, и вы можете создать богатый и интерактивный интерфейс с минимальными усилиями.

Единственный недостаток, о котором я могу думать, это то, что вы можете столкнуться с несогласованностью браузера, особенно если используете CSS3, но снова jQuery поможет в этом.

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