
Как я делал игру на 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 CanvasHTML5 Platformer Tutorial
Canvas Demos — Tutorials
HTML5 Canvas — the basics
HTML5 Specs
Терпения вам и мужества. (:
P.S.
Как я уже писал, я не верю, что Спилы делают ставку на HTML5 — это не разумно. Попиарятся и всё. Если действительно делать ставку на что-то кроссплатформенное, то лучше было отдать те $50000 разработчикам haXe, чтобы они быстрее портировали своё решение на множество платформ и написали удобный инструментарий. Это было бы разумнее.- +12
- elmortem
Комментарии (21)
а в плане нормального ООП, не пробовал ещё haXe->js? по идее должно решить этот трабл, но сначала конечно привыкнуть надо. сам давно собираюсь попробовать, но дальше небольших тестов с js-библиотеками из haXe дело пока не шло.
Так что нафиг. Да и было интересно покопаться, поплеваться, но доделать именно на JavaScript. (:
Покажите любую технологию, которая работает сегодня в браузере на любом девайсе?
Мы не верим, что рынок native app-ов это верное направление. Гораздо легче зайти на сайт и загрузить что тебе надо прямо в браузере.
Именно поэтому рынок флешек на огромоном подъеме последние года. То же самое случится и с мобильниками — победит технология, что работает сразу и не требует никаких установок.
Но (!) привыкать и адаптироваться надо к любой новой технологии. Когда вышел iPhone, все также кричали, что неудобно — да еще и нужен Мак. Ничего, привыкли ведь :)
Отличная кнопочка на хтмл5 процессор напрягает по полной программе ( mobdb.com/reddit/button.html).
Кто что говорил по поводу быстродействия? ;)
А натив не умрёт никогда, т.к. ничто не помешает сделать инструмент, который будет автоматически проигрывать натив из Сети. Да и правильные языки, движки и средства разработки в купе с нивелированием мощностей мобильных платформ решают!
А ирония в том, что надо в нагрузку к игре еще и обфускатор свой писать.
Так что на сами игры мне пофиг и разбираться в обфусцированном говно-коде нет никакого желания.
www.phoboslab.org/biolab/
кстати, если прочитать внизу игры
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 равносильна написанию двух версий игры.
"
Кто-то верит что ИЕ умрет?
Попробовал играть в ФФ 3.6 тормозов и проблем со звуком не увидел.
Про шоколад никто не спорит — каждый браузер опять будет трактовать по своему.
Но своя ниша будет, хотя писать так игры изврат ;)
Сафари — все норм = летает.
Фирефокс — 1фпс = слайдшоу.
Вот и «Не требуется плагинов» ))), но работает не везде одинаково (((
Если уж Кока-Кола отличается по вкусу не только в разных странах, но и в разных говродах (а так формула, жёсткие ТУ, etc), то невнятный стандарт разные производители уж точно по разному реализуют. Так что басни-сказки всё это, про быстрый, клёвый и надёжный HTML5 на всех платформах.
csharksgames.blogspot.com/2010/09/making-biolab-html5-game.html
у чувака выходит прикольный движок с довольно крутым редактором уровней.
я уже вбил свой е-мейл на http://impactjs.org/ :)