Знакомство Flash-разработчика игр с HTML5 Canvas

Автор: Анна Лысак Дата публикации: 12.10.2010
Последнее обновление:13.09.2017

Впечатлениями делятся Стив и Джефф Фултоны (Steve и Jeff Fulton) — Flash-разработчики с 15-летним стажем, вместе они разработали более 200 flash-игр самых разнообразных жанров и последние 5 лет занимаются консультированием и издательством собственных книг на тему разработки игр.

Последние несколько недель в свободное время я работаю с HTML5 Canvas, пытаясь воплотить в жизнь игру — простейший шутер. Это, наверное, самая простая игра, которую я только могу представить. При помощи Flash и Flash IDE (использовал для анимации взрыва) у меня это заняло несколько часов. Сейчас же я получил довольно хорошее представление, что значит, будучи разработчиком Flash, попытаться создать игру с HTML5 Canvas. Расскажу о некоторых вещах. которые вызывают у меня затруднения и большое беспокойство. Самое главное, что некоторые готовые решения, которыми активно пользуются Flash-разработчики, в HTML5 Canvas нужно создавать с нуля. Причем здесь не идет речь только о каких-то новых или крупных эффектах, а о проблемах, которые Flash решил много лет назад.

1. Предварительная загрузка: каждый объект должен быть предварительно загружен, перед тем, как ты начнешь его использовать. Для меня это значит, что нужно отслеживать каждый графический и звуковой эффект в отдельности, прежде чем продолжить процесс. Конечно, js-библиотека могла бы сделать это за тебя, но это все же «костыли», а не полноценное решение. Flash просто справляется с этой задачей.

2. События мыши: ты можешь отследить события мыши в Canvas, но это невозможно сделать для отдельных объектов в Canvas, так как они не являются частью DOM. (кстати, реализация объектов — это тоже «костыль»). Приходится придумывать довольно странные вещи, чтобы вообще сделать возможным распознавание событий мыши в Canvas: нужен 1-пиксельный битовый массив, следующий за мышью для обнаружения любого события мыши. Могу с уверенностью сказать, что и отслеживание событий мыши также требует применения «костылей».

3. Обнаружение столкновений: 100%-ный «костыль». Несомненно, что продвинутые разработчики уже реализуют это обнаружение, но иногда они также используют и математические библиотеки для обнаружения пересечения прямоугольников и окружностей. Самое главное, что тогда подобные вещи (реализация тех же пересечений) становятся недоступными для простых разработчиков которые хотят добавить интерактивности, но не желают погружаться в сложную математику. Flash решил эту проблему еще в прошлом столетии.

4. Аудио: поддержка аудио ужасна. Ты можешь проигрывать звук. Но можно проигрывать только один фрагмент этого звука за одну единицу времени, то есть если вы запускаете два выстрела, то звук второго выстрела прерывает звук первого. Кроме того, аудио может быть загружено как объект Javascript в Safari, но в Firefox и Chrome поддержка, кажется, отсутствует (речь, скорее всего, идет о предыдущих версиях браузеров, в последних ситуация уже лучше — ред.). Опять же, может есть способы найти решение, но это будут скорее пользовательские решения и ни о какой кросс-браузерности, скорее всего, речи не идет. Во Flash, даже при наличии его собственных известных проблем, поддержка аудио гораздо лучше во всех отношениях. С моей точки, зрения лучшим и самым универсальным способом реализации поддержки аудио c Canvas является загрузка 1 х 1 SWF и проигрывание звуков, используя JavaScript. Конечно, такое решение не будет работать там, где нет возможности использовать SWF и там придется как-то выкручиваться или же обходится совсем без звука.

5. Анимация: опять же 100%-ный «костыль». Я все еще пытаюсь заставить мои три простых взрыва выглядеть так же просто, как и во Flash, но пока как-то не очень получается. Сижу и расстраиваюсь.

6. Общее время разработки: в целом на реализацию моей идеи ушло около 40 часов (против 2-х часов во Flash). Большая часть этого времени потрачена на отладку и так как нет никаких реально работающих инструментов для это отладки, то это все было «comment, trace, comment trace»…более того, мне пришлось «изобретать» свою собственную функцию trace(). Можешь, конечно, сказать, что так как я не специалист в JavaScript, то много времени было потрачено впустую. Однако, я также не являюсь экспертом в C#, но когда я проделал аналогичную работу в Silverlight в прошлом году, я был приятно удивлен легкостью работы с ним. Чего не скажешь про HTML5 Canvas.

Я мог бы продолжить, но какой смысл? Canvas в будущем займет свое место и будет иметь большое значение в этой сфере. Я усиленно работаю над его изучением, чтобы иметь возможность в дальнейшем эффективно его использовать. Однако сейчас это ничто по сравнению с Flash. Просто я сейчас многие вещи реализовал бы более эффективно и творчески , используя древний Flash 5, чем Canvas.

Не забывайте, что спецификация HTML5 только разрабатывается. Чтобы добиться значительных улучшений понадобится еще 5-10 лет. Ох..

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

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

Примечание редакции: очень интересно было бы посмотреть и сравнить финальный вариант такой игры во Flash и HTML 5 Canvas. Авторы статьи обещали все же поделиться со страждущей общественностью результатами своих трудов ).

Материалы