Существует множество способов создания игр на HTML5, а материалов по
техническим аспектам каждого способа совсем немного, поэтому, в рамках
этой статьи, я сделаю более широкий обзор разработки игр на HTML5.
Почему именно HTML5? С чего начать разработку? Что делать и куда идти,
когда вы в тупике? Как монетизировать и распространять свою игру? На все
эти вопросы мы постараемся ответить.
Большая часть аудитории уже осознает важность HTML5, но я хочу ещё раз повторить почему при разработке игры стоит обратить внимание на HTML5. Если вы разрабатываете игры только для iOS, то используете язык Objective-C и в этой ситуации минусов больше, чем плюсов… но, если вы хотите, чтобы ваша игра работала на множестве платформ, ваш выбор HTML5.
Кроссплатформенность
Одним из наиболее очевидных преимуществ использования HTML5 для игр, является то, что игра будет работать на любом современном устройстве. Конечно, вам придётся поломать голову над тем, как ваша игра будет адаптироваться под разные размеры экранов и виды управления, и, возможно, вам придётся написать немного “персонализированного” кода для каждой платформы (основной ингибитор – это звук), но это гораздо лучше, чем альтернатива каждый раз полностью порировать игру.
Я наблюдаю очень много игр, которые не работают на мобильных устройствах и планшетах и, в большенстве случаев, главной ошибкой при разработке игры является как раз забота о мобильных устройствах.
Уникальность распространения
Большенство игр на HTML5, которые были разработаны по этому принципу, спроектированы таким же образом, как флеш-игры или старые добрые мобильные игры. В некторых случаях, это имеет смысл, но такой подход обходит стороной все преимущества Web как платформы. Это тоже самое, что еслиб iOS-разработчик построил игру, которая не понимает различий между нажатиями на экран и мышью – или, если бы игра Doodle Jump была бы построена так, что для управления в ней были бы стрелочки внизу экрана, вместо использования возможностей устройства.
Очень легко поддаться техникам, которые работали в прошлом и тормозят инновации. Это ловушка, в которую попал и я, пытаясь на 100% воссоздать то, что успешно работало на iOS, Android и Flash – и у мня ничего не получалось до того, как я побеседовал с Робом Хоуксом (Rob Hawkes). При эмуляции того, что работало раньше важно понимать, что платформа Open Web – это еще один вариант, а инновации случаются только тогда, кгда рискуешь и пробуешь что-то новое.
Распространение игр на HTML5 часто воспримается как слабая сторона технологии, но это только потому, что люди ищут в ней тот же смысл, что и для классических мобильных играх, когда онлайн магазин является единственным местом найти игры. В играх на HTML5 в ваших руках находится вся невероятная мощь гиперссылок. Ссылки могут быть легко распространены между веб и мобильными устройствами (вспомните, по скольким ссылкам вы переходите в приложениях для Facebook и Twitter) и она, естесствено, не должы быть ограничены только главным меню игры. Технология позволяет привязать к игре свой профиль и делать кучу интересных вещей, таких как переход к определенному месту игры, попытаться побить рекорд друзей или играть вместе с другом в реальном времени – используйте это в ваших целях!
Взгляните на то, с помощью каких принципов распространяются вирусные веб-сайты стали и примените эти принципы к своим играм.
Более быстрый процесс разработки
Не нужно ждать, пока пройдет компиляция, обновления и отладка происходят в реальном времени и, сделав игру, вы можете внедрять обновления моментально.
Действительно ли вам нужен игровой дижок
По сути, это дело каждого. Игровые движки почти всегда экономят время, необходимое для создания полнофункциональной игры, но я знаю, что есть люди, которые хотят понять каждую составляющую игры и любят все делать сами и с нуля.
Если игра простая, то построить её с нуля не так уж и трудно (если вы имеете опыт работы с JavaScript и понимаете как работают игры). Например игра Simple Valley (исходник) создана без игрового движка и ни один из её компонентов не имел какой-то супер науки. Конечно, Simply Valley, очень простая игра и создание какой-нибудь RPG с нуля, скорее всего, приведёт к большему выдергиванию волос.
Выбираем между игровым движком и конструктором игр
Большая часть аудитории сайта Mozilla Hacks будет, скорее всего, склоняться к использованию игрового движка, но есть и альтернативный вариант – конструкторы игр, такие, как Construct 2. Используя конструктор, вам не придется писать на JavaScript, вместо этого вы просто создаёте событие с кодом в редакторе, что создаёт баланс между простотой использования, быстротой проектирования/разработки и удобством настройки вместе с контролем за конечным результатом. Я видел несколько впечатляющих игр, которые построены с помощью конструктора, но, как разработчик, я пропагандирую написание с нуля / использование игрового движка.
Находим подходящий игровой движок / конструктор игр
Существует довольно много движков для игр на HTML5, что очень хорошо,но, как всегда, есть и плохие новости – большинство из них либо уже перестали поддерживаться разработчиками, либо скоро перестанут. Вам, безусловно, нужен движок, который постоянно обновляется и улучшается с течением времени.
HTML5GameEngine.com – прекрасное место для начала поиска игрового движка, т.к. на сайте представлены около 20 движков, которые имеют постоянную поддержку и примеры разработанных игр.
Если вы хотите ознакомиться с более полным списком движков, взгляните сюда (вам придётся отсеять много мусора).
Технические уроки
Техническая стороная – это не всё, что требуется для созания веселой игры. Ниже приведены несколько мест, чтобы изучить игровую механику.
Создание функционирующей игры – это всего лишь часть уравнения. Вы же хотите, чтобы игроки проводили больше времени за игрой, делились ею со своими друзьями и, может быть, даже что-то покупали. Для игр, которые фокусируются на этих аспектах общими элементами являются аккаунты пользователей, таблица результатов, достижения, интеграция с социальными сетями и внутриигровые платежи. Может показаться, что большую часть из них достаточно легко реализовать, но часто возникает много кроссплатформенных сложности, которые просто игнорируются. Также можно позаботиться о том, чтобы обеспечить главный центральный сервис, который работает во многих играх, например Xbox Live, в котором игроки коллекционируют достижения, потому что заботятся о своём рейтинге.
js13kGames
Это соревнование, в котором вам необходимо разработать игру на HTML5, размер которой не превышает 13Кб.
Mozilla Game On
Ежегодное игровое соревнование от Mozilla, начинающееся в декабре и заканчивающееся в феврале, с фантастическими призами.
Clay.io’s “Got Game?”
Соревнование по разработке игр на HTML5 для студентов.
Ludum Dare
Ludum Dare не имеет ощутимых приов и не привязано конкретно к играм на HTML5, но многие разработчики на HTML5 всё равно в нём участвуют.
One Game a Month
Это не столько соревнование, сколько инструмент для сбора отчетности, который не граничивается только HTML5, но многие из участников работают с ним. Цель – выбирать одну игру каждый месяц. Я бы не рекомедовал бы это мероприятие для создания большой игры, т.к. один месяц слишком мало, но для обучения и разработки простых игр вполне сойдёт.
Этот ресурс является самым активным сообществом разработчиков игр на HTML5. Большенство из них очень дружелюбны и помогут вам с любой проблемой.
#BBG
Это канал для игр на HTML5 в IRC.
Внутриигровые платежи, на мой взгляд, являются поводом обратить внимание на разработку долгосрочной HTML5-игры. На данный момент у большенства HTML5-игр есть большая проблема – нехватка качественного контента и остутсвие правильной игровой механики для того, чтобы игроки совершали покупки.
Это модель доходности имеет самый высокий потенциал, но и наиболее трудно достижимая на сегодняшний день – не технически, а потому что сложно следать правильную игру. Лучший способ узнать, как правильно монетизировать вашу игру этим методом – взглянуть на игры, которые отлично зарабатывают на мобильной и флеш платформах – игры от King.com и Zynga.
Лицензирование
Лицензирование для игр на HTML5 будет самым сильным и последовательным способом зарабатывания денег тогда и только тогда, когда ваша игра хорошо работает на мобильных устройствах.
Существуют бесчисленное множество игровых порталов с фдеш играми, которые получают мобильный трафик, но не могут его монитезировать. Им необходимо найти HTML5 игры с неэксклюзивными лицензиями (права на размещения игры на своём сайте и на внесение незначительных изменений) и предложить их своим посетителям.
Обычно, неэксклюзивные лицензии для игр на HTML5 (т.е. вы можете продать игру на несколько сайтов) стоят $500 – $1000 в зависимости от игры и издателя. Некоторые издатели диктуют модель монетизации, когда вы не получаете денег за сам продукт, а имеете процент (около 40-50%) от доходов с рекламы.
Лицензирование – самый безопасный способ заработать деньги прямо сейчас, но есть предел – с одиночной игры вы сможете заработать не более $5000 -$6000, но эти деньги здесь легче получить, чем с помощью внутриигровых платежей или рекламы.
Реклама
Реклама находится между внутриигровыми платежами и лицензированием. С её помощью проще заработать, чем с помощью внутриигровых платежей, а также она позволяет иметь более высокий предел заработка, нежели лицензирвоание (но, вероятно, меньший, чем внутриигровые платежи). Рекламные объявления достаточно легко реализовать: просто выбрать рекламную сеть (опасайтесь жесткихусловий Adsense) и реализовать в игре на различных этапах.
Наиболее часто используемыми рекламными сетями являются LeadBolt для мобильных устройств и CPMStar для настольных компьютеров и ноутбуков. Вы также можете использовать Clay.io, которая помогает с рекламой и пытается максимизировать доход, используя различные рекламные сети в зависимости от типа устройства и других факторов.
В наши дни, все больше и больше онлайн-магазинов принимают игры на HTML5 как есть. Каждый из них имеет собственные требования (для Facebook требуется SSL-шифрование, большенство требуют по-разному отформатирвоанные файл манифеста и т.д), но в них очень легко попасть (обычно не более 30 минут на модерацию). Если вы хотите ускорить процесс, воспользуйтесь Clay.io – он поможет автоматически создавать файлы манифеста и заботится о SSL-шифровании – документация о сервисе тут.
Теперь ваш черед идти вперёд и делать великолепные, инновационные веб-игры – я с нетерпением жду, что появится на горизонте в ближайшие месяцы и годы.
Источник: http://blog.n1dev.ru/
Интересно? Делись:
Блог: http://romanlovetext.blogspot.com/
Преимущества HTML5
Большая часть аудитории уже осознает важность HTML5, но я хочу ещё раз повторить почему при разработке игры стоит обратить внимание на HTML5. Если вы разрабатываете игры только для iOS, то используете язык Objective-C и в этой ситуации минусов больше, чем плюсов… но, если вы хотите, чтобы ваша игра работала на множестве платформ, ваш выбор HTML5.
Кроссплатформенность
Одним из наиболее очевидных преимуществ использования HTML5 для игр, является то, что игра будет работать на любом современном устройстве. Конечно, вам придётся поломать голову над тем, как ваша игра будет адаптироваться под разные размеры экранов и виды управления, и, возможно, вам придётся написать немного “персонализированного” кода для каждой платформы (основной ингибитор – это звук), но это гораздо лучше, чем альтернатива каждый раз полностью порировать игру.
Я наблюдаю очень много игр, которые не работают на мобильных устройствах и планшетах и, в большенстве случаев, главной ошибкой при разработке игры является как раз забота о мобильных устройствах.
Уникальность распространения
Большенство игр на HTML5, которые были разработаны по этому принципу, спроектированы таким же образом, как флеш-игры или старые добрые мобильные игры. В некторых случаях, это имеет смысл, но такой подход обходит стороной все преимущества Web как платформы. Это тоже самое, что еслиб iOS-разработчик построил игру, которая не понимает различий между нажатиями на экран и мышью – или, если бы игра Doodle Jump была бы построена так, что для управления в ней были бы стрелочки внизу экрана, вместо использования возможностей устройства.
Очень легко поддаться техникам, которые работали в прошлом и тормозят инновации. Это ловушка, в которую попал и я, пытаясь на 100% воссоздать то, что успешно работало на iOS, Android и Flash – и у мня ничего не получалось до того, как я побеседовал с Робом Хоуксом (Rob Hawkes). При эмуляции того, что работало раньше важно понимать, что платформа Open Web – это еще один вариант, а инновации случаются только тогда, кгда рискуешь и пробуешь что-то новое.
Распространение игр на HTML5 часто воспримается как слабая сторона технологии, но это только потому, что люди ищут в ней тот же смысл, что и для классических мобильных играх, когда онлайн магазин является единственным местом найти игры. В играх на HTML5 в ваших руках находится вся невероятная мощь гиперссылок. Ссылки могут быть легко распространены между веб и мобильными устройствами (вспомните, по скольким ссылкам вы переходите в приложениях для Facebook и Twitter) и она, естесствено, не должы быть ограничены только главным меню игры. Технология позволяет привязать к игре свой профиль и делать кучу интересных вещей, таких как переход к определенному месту игры, попытаться побить рекорд друзей или играть вместе с другом в реальном времени – используйте это в ваших целях!
Взгляните на то, с помощью каких принципов распространяются вирусные веб-сайты стали и примените эти принципы к своим играм.
Более быстрый процесс разработки
Не нужно ждать, пока пройдет компиляция, обновления и отладка происходят в реальном времени и, сделав игру, вы можете внедрять обновления моментально.
Выбор игрового движка
Игровые движки - это очередной уровень абстракции, который выполняет одни из наиболее трудоемких задачи при разработке игры. Большенство из них выполняют загрузку ресурсов, ввод данных, просчитывают физику, обрабатывают звук, строят карты спрайтов и анимации, но функции каждого могут отличаться. Многие движки являются баребонами, а некоторые (например ImpactJS) идут ещё дальше и включают в себя 2D-редактор уровней и инструменты отладки.Действительно ли вам нужен игровой дижок
По сути, это дело каждого. Игровые движки почти всегда экономят время, необходимое для создания полнофункциональной игры, но я знаю, что есть люди, которые хотят понять каждую составляющую игры и любят все делать сами и с нуля.
Если игра простая, то построить её с нуля не так уж и трудно (если вы имеете опыт работы с JavaScript и понимаете как работают игры). Например игра Simple Valley (исходник) создана без игрового движка и ни один из её компонентов не имел какой-то супер науки. Конечно, Simply Valley, очень простая игра и создание какой-нибудь RPG с нуля, скорее всего, приведёт к большему выдергиванию волос.
Выбираем между игровым движком и конструктором игр
Большая часть аудитории сайта Mozilla Hacks будет, скорее всего, склоняться к использованию игрового движка, но есть и альтернативный вариант – конструкторы игр, такие, как Construct 2. Используя конструктор, вам не придется писать на JavaScript, вместо этого вы просто создаёте событие с кодом в редакторе, что создаёт баланс между простотой использования, быстротой проектирования/разработки и удобством настройки вместе с контролем за конечным результатом. Я видел несколько впечатляющих игр, которые построены с помощью конструктора, но, как разработчик, я пропагандирую написание с нуля / использование игрового движка.
Находим подходящий игровой движок / конструктор игр
Существует довольно много движков для игр на HTML5, что очень хорошо,но, как всегда, есть и плохие новости – большинство из них либо уже перестали поддерживаться разработчиками, либо скоро перестанут. Вам, безусловно, нужен движок, который постоянно обновляется и улучшается с течением времени.
HTML5GameEngine.com – прекрасное место для начала поиска игрового движка, т.к. на сайте представлены около 20 движков, которые имеют постоянную поддержку и примеры разработанных игр.
Если вы хотите ознакомиться с более полным списком движков, взгляните сюда (вам придётся отсеять много мусора).
Инструменты для обучения
Если вы выбрали игровой движок, следующие сайты помогут вам с уроками и документацией.Технические уроки
- jsGameWiki полон ссылок на технические уроки и ресурсы
- HTML5 Gamedev Starter - почти тоже самое, что jsGameWiki, но более легок в усвоении
- Mozilla Hacks -> Games
- How To Design A Mobile Game With HTML5 для разработки игры, которая будет хорошо выглядеть и на мобильных устройствах
- No Tears Guide to HTML5 Games - относительно старый (около 2.5 лет), но все ещё очень хороший инструмент, если вы не использхуете игровой движок.
Техническая стороная – это не всё, что требуется для созания веселой игры. Ниже приведены несколько мест, чтобы изучить игровую механику.
Полезные инструменты
Удержание пользователей, монетизация и многое другоеСоздание функционирующей игры – это всего лишь часть уравнения. Вы же хотите, чтобы игроки проводили больше времени за игрой, делились ею со своими друзьями и, может быть, даже что-то покупали. Для игр, которые фокусируются на этих аспектах общими элементами являются аккаунты пользователей, таблица результатов, достижения, интеграция с социальными сетями и внутриигровые платежи. Может показаться, что большую часть из них достаточно легко реализовать, но часто возникает много кроссплатформенных сложности, которые просто игнорируются. Также можно позаботиться о том, чтобы обеспечить главный центральный сервис, который работает во многих играх, например Xbox Live, в котором игроки коллекционируют достижения, потому что заботятся о своём рейтинге.
- Clay.io – аккаунты пользователей, таблицы результатов, достижения, внутриигровые платежи, статистика и аналитика, распространение и многое другое.
- Scoreoid – тоже самое.
- stats.js – монитор быстродействия на JavaScript. Отображает кадры в секунду и производительность с течением времени.
- Socket.IO – клиент-серверное взаимодействие в реальном времени (если вы хотите иметь сервер для своей игры).
- pixi.js –Движок-рендер для canvas и WebGL.
- CocoonJS – Улучшает производительность игр на HTML5 для устройств на iOS и Android
Мотивация
Независимо от того, что вы разрабатываете, дополнительная мотивация всегда имеет значение. Для игр, такая мотивация исходит от окружения себя такими же как вы, работающими над играми.js13kGames
Это соревнование, в котором вам необходимо разработать игру на HTML5, размер которой не превышает 13Кб.
Mozilla Game On
Ежегодное игровое соревнование от Mozilla, начинающееся в декабре и заканчивающееся в феврале, с фантастическими призами.
Clay.io’s “Got Game?”
Соревнование по разработке игр на HTML5 для студентов.
Ludum Dare
Ludum Dare не имеет ощутимых приов и не привязано конкретно к играм на HTML5, но многие разработчики на HTML5 всё равно в нём участвуют.
One Game a Month
Это не столько соревнование, сколько инструмент для сбора отчетности, который не граничивается только HTML5, но многие из участников работают с ним. Цель – выбирать одну игру каждый месяц. Я бы не рекомедовал бы это мероприятие для создания большой игры, т.к. один месяц слишком мало, но для обучения и разработки простых игр вполне сойдёт.
Помощь сообщества
HTML5GameDevs.comЭтот ресурс является самым активным сообществом разработчиков игр на HTML5. Большенство из них очень дружелюбны и помогут вам с любой проблемой.
#BBG
Это канал для игр на HTML5 в IRC.
Как делать деньги
Внутриигровые покупкиВнутриигровые платежи, на мой взгляд, являются поводом обратить внимание на разработку долгосрочной HTML5-игры. На данный момент у большенства HTML5-игр есть большая проблема – нехватка качественного контента и остутсвие правильной игровой механики для того, чтобы игроки совершали покупки.
Это модель доходности имеет самый высокий потенциал, но и наиболее трудно достижимая на сегодняшний день – не технически, а потому что сложно следать правильную игру. Лучший способ узнать, как правильно монетизировать вашу игру этим методом – взглянуть на игры, которые отлично зарабатывают на мобильной и флеш платформах – игры от King.com и Zynga.
Лицензирование
Лицензирование для игр на HTML5 будет самым сильным и последовательным способом зарабатывания денег тогда и только тогда, когда ваша игра хорошо работает на мобильных устройствах.
Существуют бесчисленное множество игровых порталов с фдеш играми, которые получают мобильный трафик, но не могут его монитезировать. Им необходимо найти HTML5 игры с неэксклюзивными лицензиями (права на размещения игры на своём сайте и на внесение незначительных изменений) и предложить их своим посетителям.
Обычно, неэксклюзивные лицензии для игр на HTML5 (т.е. вы можете продать игру на несколько сайтов) стоят $500 – $1000 в зависимости от игры и издателя. Некоторые издатели диктуют модель монетизации, когда вы не получаете денег за сам продукт, а имеете процент (около 40-50%) от доходов с рекламы.
Лицензирование – самый безопасный способ заработать деньги прямо сейчас, но есть предел – с одиночной игры вы сможете заработать не более $5000 -$6000, но эти деньги здесь легче получить, чем с помощью внутриигровых платежей или рекламы.
Реклама
Реклама находится между внутриигровыми платежами и лицензированием. С её помощью проще заработать, чем с помощью внутриигровых платежей, а также она позволяет иметь более высокий предел заработка, нежели лицензирвоание (но, вероятно, меньший, чем внутриигровые платежи). Рекламные объявления достаточно легко реализовать: просто выбрать рекламную сеть (опасайтесь жесткихусловий Adsense) и реализовать в игре на различных этапах.
Наиболее часто используемыми рекламными сетями являются LeadBolt для мобильных устройств и CPMStar для настольных компьютеров и ноутбуков. Вы также можете использовать Clay.io, которая помогает с рекламой и пытается максимизировать доход, используя различные рекламные сети в зависимости от типа устройства и других факторов.
Распространение
Заключительным этапом разработки игры является её распространение. Игра готова и вы хотете, чтобы люди в неё играли. К счастью, есть много мест для вашей игры (многие из которых, часто, остаются неиспользованными).В наши дни, все больше и больше онлайн-магазинов принимают игры на HTML5 как есть. Каждый из них имеет собственные требования (для Facebook требуется SSL-шифрование, большенство требуют по-разному отформатирвоанные файл манифеста и т.д), но в них очень легко попасть (обычно не более 30 минут на модерацию). Если вы хотите ускорить процесс, воспользуйтесь Clay.io – он поможет автоматически создавать файлы манифеста и заботится о SSL-шифровании – документация о сервисе тут.
- Firefox Marketplace
- Clay.io
- Chrome Webstore
- Windows App Store
- Amazon Appstore
- HTML5Games.com
- Kongregate, Newgrounds (и многие другие игровые порталы)
Теперь ваш черед идти вперёд и делать великолепные, инновационные веб-игры – я с нетерпением жду, что появится на горизонте в ближайшие месяцы и годы.
Источник: http://blog.n1dev.ru/
Интересно? Делись:
Блог: http://romanlovetext.blogspot.com/
