Как я делал игру на HTML5

HTML5 - зло!

Что такое HTML5?

Для программиста, решившего написать на нём игру — это ужос! По сути это дополнительное JavaScript API. Возможность рисовать примитивы, текст и картинки на холсте (Canvas). Ближе всего это API к OpenGL. Т.е. все трансформации вы совершаете не над отдельными объектами, но над объектом класса Canvas, на котором происходит рисование. В общем разобраться в основах не сложно, если есть опыт программирования на C-like языках и OpenGL.

Теперь о грустном…
На самом деле про саму игру я не расскажу, т.к. особо нечего — простая зомби-стрелялка с мобильным управлением. За-то расскажу про HTML5.

ООП

В JavaScript нет нормального ООП. Там есть прототипы, знакомые многим флеш разработчикам по AS2. Без специальной функции-надстройки работа с классами превратилась бы в кошмар. Но даже используя надстройку выходит не очень красиво.
Например вот так выглядит вызов родительского конструктора:
this.constructor.prototype.constructor.apply(this, [param0, param1, etc...]);

Про разработку на JavaScript вообще можно долго говорить, но лучше самому попробовать и поплеваться. Опыт — штука полезная, хотя не всегда приятная… (:

Примитивы и текст

Никакого антиалиасинга вам тут не будет. Текст вообще может рисоваться без попиксельной точности. Контур текста может легко быть смещён на 1-2 пикселя относительно самого текста. Так же точность сильно скачет в зависимости от браузера.

Звук

Реализован на самом примитивном уровне — можно загрузить звук и проиграть его, поигравшись громкостью. Для дизайна сгодится, для игр — нет. Сложные звуковые эффекты сделать невозможно. Даже каналов нету. Из всех форматов наиболее поддерживаемый разными браузерами — WAVE. Т.е. размер игры на пустом месте вырастает в 2-3 раза.

Эффекты и alpha-канал

В стандартное API входят такие эффекты, как, например, градиентная заливка полигона или тень для элемента. Если первое работает вполне себе хорошё во всех браузерах, то второе на некоторых браузерах работает отвратительно для картинок с alpha-каналом. Проще говоря прозрачность картинок учитывается не правильно. Тень может запросто наложиться не на видимую часть картинки, на на сам прямоугольник картинки. Выглядит по идиотски.

Быстродействие

Не знаю, что там на счёт «скорость работы, как у нативных приложений» — у меня не было возможности потестить на мобильном браузере. Но на Венде и МакОси работало вполне себе быстро, но… Периодические лаги задалбывали очень и очень. Возможно сказывается мой небольшой опыт программирования на JavaScript, но всё равно неприятно.

Сохранение

Для сохранения локальных данных есть специальный объект window.localStorage. К сожалению заработал он у меня только в Хроме под Вендой. Т.ч. сохранение я не делал, хотя очень хотелось. Возможно в мобильных браузерах всё работает, но рисковать не хотелось.

Защита игры

Тут всё почти как во Flash. Т.е. из реальных способов защиты — только обфускация, которая почти не спасает. Но при этом чтобы выдернуть ресурсы не нужно вообще никаких программ — они лежат открыто. Проще тупо не парится и забить на защиту игры. (:

Итогo: 5 коп.

Писать игры на HTML5 (читай JavaScript) можно. Но чертовски неудобно и от того неприятно. Интересный опыт, но повторения не хочется…
Лично моё мнение — никогда HTML5 не сможет заменить собой Flash, Silverlight или, тем более, Unity. В дизайне и UI они будут соперничать, в играх — специализированные плагины уже победили и не проиграют до выхода HTML6 (а там видно будет).

Ссылки по теме

Создание игры на Javascript Canvas
HTML5 Platformer Tutorial
Canvas Demos — Tutorials
HTML5 Canvas — the basics
HTML5 Specs

Терпения вам и мужества. (:

P.S.

Как я уже писал, я не верю, что Спилы делают ставку на HTML5 — это не разумно. Попиарятся и всё. Если действительно делать ставку на что-то кроссплатформенное, то лучше было отдать те $50000 разработчикам haXe, чтобы они быстрее портировали своё решение на множество платформ и написали удобный инструментарий. Это было бы разумнее.
  • +12

Комментарии (21)

0
Я тоже заинтересовался html5 когда его начали активно пиарить как «убийцу флеша», но немного по собирав информации о нем я понял, что для некоторых веб-решений html5 — это хорошая замена Flash'у но только не для игр. Тем более я где-то прочитал, что «завершение работ над спецификацией HTML5 намечено на 2024 год». Не знаю насколько этому можно верить, но я успокоился :)
0
+ и спасибо за хороший информативный пост.
а в плане нормального ООП, не пробовал ещё haXe->js? по идее должно решить этот трабл, но сначала конечно привыкнуть надо. сам давно собираюсь попробовать, но дальше небольших тестов с js-библиотеками из haXe дело пока не шло.
0
Не, нафиг такие извраты. Я пробовал haXe/PHP — такой мусорный код получается, что ужос! Думаю в JavaScript оно ещё страшнее компилит. К тому же тут не просто JavaScript, тут Canvas всем рулит. Неужели они портировали архитектуру Flash-классов на JavaScript? Это ж такие тормоза будут…
Так что нафиг. Да и было интересно покопаться, поплеваться, но доделать именно на JavaScript. (:
0
Плюс тебе =), хороший пост. Тоже думал о пятом аштиэмэле, хорошо. что ты меня опередил =)
0
Вполне обоснованный пост, но я думаю большинство девелоперов так и не поняло, почему мы (Спилы) ставим на HTML5.

Покажите любую технологию, которая работает сегодня в браузере на любом девайсе?

Мы не верим, что рынок native app-ов это верное направление. Гораздо легче зайти на сайт и загрузить что тебе надо прямо в браузере.

Именно поэтому рынок флешек на огромоном подъеме последние года. То же самое случится и с мобильниками — победит технология, что работает сразу и не требует никаких установок.

Но (!) привыкать и адаптироваться надо к любой новой технологии. Когда вышел iPhone, все также кричали, что неудобно — да еще и нужен Мак. Ничего, привыкли ведь :)
0
dothatin.com/

Отличная кнопочка на хтмл5 процессор напрягает по полной программе ( mobdb.com/reddit/button.html).

Кто что говорил по поводу быстродействия? ;)
0
она ещё и кривая)) Чота тут не так с вашим хтмлом. это язык разметки. И я сильно сомневаюсь что «оно» победит флеш. хм. Еслиб адобовцы ещё чуть-чуть поднапряглись, хтмл 5 для нативных приложений вопще нужен бы не был. И этих тем бы думаю не поднималось) Та что я скрещиваю пальцы, и жду сюрпризов от адобовцев) Они умные ребята.
+1
Не, лет этак через 20-50 возможно и имеет смысл ставить на некий аналог HTML5. Но по сути HTML5 отличается от того же Flash только открытостью. Типа любой производитель железок/софта сможет реализовать поддержку стандарта с учётом характеристик своей железки. Минус тоже по сути один — открытось ведёт к десяткам разных реализаций стандарта.
А натив не умрёт никогда, т.к. ничто не помешает сделать инструмент, который будет автоматически проигрывать натив из Сети. Да и правильные языки, движки и средства разработки в купе с нивелированием мощностей мобильных платформ решают!
0
хороший пост, плюсанул. а зомби-стрелялку свою на html5 не покажешь? :) в конкурсе Спилов будешь участвовать?
0
Кому интересно, у нас уже потихоньку набирается библиотека хтмл5 игр — m.agame.com
0
К сожалению это игры именно для «поиграть», почти все они обфусцированы и поучиться там нечему… ):
0
ГГ — можно поучится деобфускации :)
А ирония в том, что надо в нагрузку к игре еще и обфускатор свой писать.
0
У меня нету проблемы сделать игру, у меня есть проблема с совместимостью для разных устройств. И мне нужен не обфусцированный работающий пример, желательно использующий те же фишки, что и я в своей игре. Чтобы наверняка.
Так что на сами игры мне пофиг и разбираться в обфусцированном говно-коде нет никакого желания.
0
Еще к большему сожалению пытался запустить несколько игр — ни одна из попыток не завершилась успехом. Прогрессбар зависает где после половины, где почти в конце. браузер ФФ 3.6
0
Игра на хтмл5
www.phoboslab.org/biolab/
+1
ты бы еще пробросил обсуждение на ДТФ dev.dtf.ru/forum/flat.php?id=24289&page=1&page_size=20#m354207

кстати, если прочитать внизу игры
Opera 10.61: Perfect
Safari 5.0 (Mac): Perfect
Firefox 4 Beta 3: Perfect
Firefox 3.6: Sound issues; slow
Chrome 7: Sound issues
IE 9 Preview: Sound issues; slow

еще — «game itself will only run with ~12 FPS (iPhone 3GS) anyway»

Так что вывод — очень не шоколадно, гемор разрастается в разы. Работает далеко не на всем, а на IE — особенно не работает. А кусок рынка на IE большой.

Цитата: "
— супер. такими темпами через полгодика увидим ферму на ХТМЛ5!
— к сожалению, не раньше чем пользователи попрощаются c IE.
canvas, используемый в этой демке, не поддерживается даже в IE8.
а сборка костылей из Flash/VML/Silverlight равносильна написанию двух версий игры.
"

Кто-то верит что ИЕ умрет?
0
Обсуждения на ДТФ не видел.
Попробовал играть в ФФ 3.6 тормозов и проблем со звуком не увидел.

Про шоколад никто не спорит — каждый браузер опять будет трактовать по своему.

Но своя ниша будет, хотя писать так игры изврат ;)
0
На макОС.

Сафари — все норм = летает.
Фирефокс — 1фпс = слайдшоу.

Вот и «Не требуется плагинов» ))), но работает не везде одинаково (((
0
Там так и написано, что в FF3.6 игра тормозит.
Если уж Кока-Кола отличается по вкусу не только в разных странах, но и в разных говродах (а так формула, жёсткие ТУ, etc), то невнятный стандарт разные производители уж точно по разному реализуют. Так что басни-сказки всё это, про быстрый, клёвый и надёжный HTML5 на всех платформах.
+1
Кстати кому интересно появилось видео по созданию Biolab (HTML5)

csharksgames.blogspot.com/2010/09/making-biolab-html5-game.html
+1
вот тут кстати его удобнее смотреть: http://vimeo.com/14920760

у чувака выходит прикольный движок с довольно крутым редактором уровней.
я уже вбил свой е-мейл на http://impactjs.org/ :)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.