Создать игру 2д в браузере
В 2014 году я впервые побывал на CodeDay в Нью-Йорке. И хотя CodeDay не совсем хакатон, это было моё первое знакомство с подобными мероприятиями. Там мы с моим другом Кеннетом Ли написали многопользовательскую игру в танчики. Так как несколько моих друзей спрашивали меня о том, как я её написал, я решил описать процесс её создания.
В этом посте я вкратце опишу ход своих рассуждений и покажу, как воссоздать архитектуру, а также дам некоторые советы, если вы захотите сделать игру сами. Этот пост рассчитан на тех, кто владеет основами JavaScript и Node.js. Если вы с ними не знакомы, то есть много замечательных онлайн-ресурсов, где можно их изучить.
Прим. перев. На нашем сайте есть много познавательных материалов как по JavaScript, так и по Node.js — обязательно найдёте что-нибудь подходящее.
Бэкенд игры написан на Node.js с использованием веб-сокетов, которые позволяют серверу и клиенту общаться в режиме реального времени. Со стороны клиента игра отображается в HTML5-элементе Canvas . Для начала нам, конечно же, понадобится Node.js. В этой статье описана работа с версией 6.3.1, но вы можете использовать любую версию выше 0.12.
Прим. перев. Если вы не знакомы с веб-сокетами, рекомендуем прочитать наш вводный материал.
Создание проекта
Для начала установите зависимости. Создайте папку проекта, перейдите в неё и запустите следующий код:
Для быстрой настройки сервера целесообразно использовать фреймворк Express, а для обработки веб-сокетов на сервере — пакет socket.io. В файл server.js поместите следующий код:
Это довольно типичный код для сервера на связке Node.js + Express. Он устанавливает зависимости и основные маршруты сервера. Для этого демонстрационного приложения используется только один файл index.html и папка static . Создайте их в корневой папке проекта. Файл index.html довольно простой:
Ваш пользовательский интерфейс может содержать куда больше элементов, поэтому для более крупных проектов CSS-стили лучше помещать в отдельный файл. Для простоты я оставлю CSS в коде HTML. Обратите внимание, что я включил в код скрипт socket.io.js . Он автоматически заработает в рамках пакета socket.io при запуске сервера.
Теперь нужно настроить веб-сокеты на сервере. В конец файла server.js добавьте:
Пока что в игре нет никаких функций, поэтому в обработчик веб-сокетов ничего добавлять не нужно. Для тестирования допишите следующие строки в конец файла server.js :
Теперь пусть клиент отправляет некоторые состояния клавиатуры. Поместите следующий код в конец файла static/game.js :
Эта часть кода позволит отправлять на сервер информацию о состоянии клавиатуры клиента 60 раз в секунду. Теперь необходимо прописать эту ситуацию со стороны сервера. В конец файла server.js добавьте следующие строки:
Давайте разберёмся с этим кодом. Вы будете хранить информацию о всех подключенных пользователях в виде объектов JSON. Так как у каждого подключённого к серверу сокета есть уникальный id, клавиша будет представлять собой id сокета подключённого игрока. Значение же будет другим объектом JSON, содержащим координаты x и y .
На данном этапе клиент ещё ничего не делает с этой информацией, поэтому добавьте со стороны клиента обработчик, который будет отображать данные от сервера в Canvas .
Вот и всё! Если у вас возникли проблемы, посмотрите архив с исходным кодом.
Некоторые тонкости
Когда будете разрабатывать более функциональную игру, целесообразно разделить код на несколько файлов.
Такие многопользовательские игры — отличный пример архитектуры MVC (модель-представление-контроллер). Вся логическая часть должна обрабатываться на сервере, а всё, что должен делать клиент — это отправлять входные пользовательские данные на сервер и отображать информацию, которую получает от сервера.
Однако в этом демо-проекте есть несколько недостатков. Обновление игры связано со слушателем сокета. Если бы я хотел повлиять на ход игры, то мог бы написать в консоли браузера следующее:
Теперь данные о движении будут отправляться на сервер в зависимости от характеристик компьютера более 60 раз в секунду. Это приведёт к тому, что игрок будет передвигаться невероятно быстро. Так мы переходим к концепции определения полномочного сервера.
Лучшая аналогия, которую я могу привести, заключается в том, что клиенты должны посылать на сервер только информацию о своих намерениях, которые затем будут обрабатываться и использоваться для изменения состояния игроков, если они валидны.
В идеале циклы обновлений как у клиента, так и на сервере не должны зависеть от сокетов. Попытайтесь сделать так, чтобы обновления игры находились за пределами блока socket.on() . В противном случае вы можете получить много странных нелогичных действий из-за того, что обновление игры будет связано с обновлением сокета.
Кроме того, старайтесь избегать такого кода:
В этом отрезке кода обновление координаты х для игрока связано с частотой смены кадров в игре. SetInterval() не всегда гарантирует соблюдение интервала, вместо этого напишите нечто подобное:
Это не так изящно, зато обеспечит более плавную и последовательную работу. Усложните демо-проект и попробуйте сделать так, чтобы обновление осуществлялось согласно времени, а не частоте смены кадров. Если не захотите на этом останавливаться, попытайтесь создать на сервере физический движок, который будет управлять движениями игроков.
Также попытайтесь создать собственный физический движок. Это сложно, но весело. Если захотите попробовать, то рекомендую прочитать книгу «The Nature of Code», в которой есть много полезных идей.
Если хотите посмотреть на гораздо более продвинутый пример, вот игра, которую я сделал, а также исходный код, если вы хотите узнать, как это было написано. На этом всё. Спасибо, что прочитали!
В январе я участвовала в своем первом геймджеме — Global Game Jam 2022, в Стамбуле. На джеме все участники писали игры на движках — ибо надо быстро. Игровой движок — это физика, рендеринг, скрипты, искусственный интеллект. Создавать игру с нуля или пользоваться движком — вопрос вкуса. Вон, Джонатан Блоу вообще пишет свой движок, чтобы писать на нем игру.
Я обратила внимание, что большинство студентов использовали либо Unity либо GameMaker. Сама я питаю нежные чувства к Construct, но на нем всего одна команда делала игру. Я решила поискать альтернативу для себя, заодно запилила подборку бесплатных движков для начинающих (а может и продолжающих) игроделов.
Еще я веду канал в Telegram GameDEVils (на русском) и блог на Substack (на английском), делюсь там клевыми материалами (про геймдизайн, разработку и историю игр).
Популярные движки Steam и itch.io
Вот статистика, игры на каких движках выкладывают в Steam:
Топ-11 движков в Steam:
- Unity (27148)
- Unreal (6869)
- GameMaker: Studio (2806)
- RPGMaker (1938)
- Ren'Py (1235)
- XNA (572)
- Adobe AIR (398)
- Godot (384)
- Cocos2d (326)
- MonoGame (280)
- Construct (201)
И на каких движках чаще публикуют на itch.io:
Топ-11 движков на itch.io:
- Unity (82 000)
- Construct (18 300)
- GameMaker: Studio (12 100)
- Godot (8 640)
- Twine (7 800)
- Unreal Engine (4 800)
- Bitsy (4 800)
- RPG Maker (4 500)(не бесплатно, но есть триалка)
- PICO-8 (4 200)($15)
- Ren'Py (3 100)
- LÖVE (1 500)
1. Unity
На Unity разработали много игр, прям МНОГО. Вот ссылочка на Википедию. Unity поддерживается на iOS, Android, Windows Phone, Tizen и Fire OS.
Если оборот или объем привлеченных инвестиций не превышает $100 тыс. за последние 12 месяцев, то можно пользоваться бесплатной подпиской Personal.
Про Unity на Хабре:
2. Unreal
Игровой движок от компании Epic Games, тоже очень популярный, вот список игр из Википедии.
Unreal Engine бесплатный аж с 2015 года, но разработчики игр должны передавать 5% от выручки с продаж игры компании Epic Games, если ежеквартальная выручка превышает $1 000 000.
Про Unreal на Хабре:
3. GameMaker: Studio2
Интерфейс Game Maker объединяет в себе редакторы спрайтов, объектов, комнат, скриптов, а также тайм-лайнов (последовательностей действий с привязкой по времени), путей (маршрутов) движения и констант. Летом 2021 года YoYo Games сделали беплатный доступ без ограничений по времени. Изначально они выдавали триалку только на месяц, для знакомства. Правда экспортировать на бесплатной версии можно разве что на GXC.
За базовую подписку CREATOR (≈ 80 руб./мес.) появляется экспорт для Windows, macOS и Linux. За INDIE (≈ 260 руб./мес.) появляется экспорт для HTML5 и мобилки.
Проблема GameMaker, и других движков типа «наведи и щелкни» в том, что разработчики более ограничены. С другой стороны, GameMaker популярен, потому что позволяет создать игру без предварительных навыков программирования.
Про GameMaker на Хабре:
4. Godot
Про Godot на Хабре:
Cocos2d
Крос-платформенный опенсорсный фрейворк для разработки игр и приложений, преимущественно для мобилки с лицензией MIT. Cocos2d-x развертывается в iOS, Android, HTML5, Windows и Mac.
Фреймворк поддерживает создание 2D и 3D игр, предоставляет такие функции, такие как рендеринг графики, графический интерфейс, аудио, сеть, физика, пользовательский ввод и т.д. Ядро написано на C++ и поддерживает разработку на C++, Lua или JavaScript. У фрейворка есть множество ответвлений: Cocos2d-ObjC, Cocos2d-x, Cocos2d-html5 и Cocos2d-XNA.
Про Cocos2d на Хабре:
5. Construct
Ноу-код движок для создания 2D игр. Запускается в браузере, работает из десктопа офлайн. Движок не дает большой гибкости, как GameMaker, и также дружелюбен к новичкам без технического бэкграунда + на ютубе выложена куча туториалов.
Есть бесплатная версия Construct, основное ограничение — 2 слоя и максимум 25 «событий» (если авторизоваться, то 50 «событий») в проекте. За события считается любое действие / поведение объекта. Но чтобы попробовать, и даже собрать элементарный платформер — хватает. Персональная лицензия стоит около $5.
6. Twine
Платформа для интерактивного сторителлинга и визуальных новелл, бесплатная, с бесплатной публичной лицензией (GPL).
Чтобы создать простенький сторителлинг с помощью Twine, код писать не нужно. Но можно. Можно дополнить свои истории с за счет переменных, условной логики, изображений, CSS и JavaScript.
Про Twine на Хабре:
7. Adobe AIR SDK (HARMAN)
Кроссплатформенный движок (Windows, OS X, Linux, QNX, Android) от компании Adobe, которая пару лет назад передала на нее права компании HARMAN. Этот движок можно использовать бесплатно, если вы зарабатываете менее 50 тысяч долларов в год. Движок все еще популярен в Steam, от части из-за адаптаций браузерных игр на Flash.
На Хабре про AIR:
8. Ren'Py
Опенсорсный движок для создания визуальных новелл в 2D-графике с бесплатным коммерческим использованием.
Про Ren'Py на Хабре:
9. Bitsy
Крошечный онлайн редактор для мини-игр. Это какой-то супер-милый проект и милым сайтом. Разработчик выкладывает логи проекта на itch.io. И там же можно поиграть в игры, сделанные с помощью Bitsy движка.
10. LÖVE
Фреймворк для создания 2D игр на Lua. Он бесплатный, с открытым исходным кодом и работает на Windows, Mac OS X, Linux, Android и iOS. Лицензия zlib, позволяет свободное использовать движок даже в коммерческих проектах с закрытыми исходниками.
Про LÖVE на Хабре:
11/12. XNA и/или MonoGame
НЕбесплатные движки с itch.io и Steam
PICO-8
RPG Maker
Это серия движков для создания РПГ, точнее JRPG, японских ролевых игр. Для RPG Maker тоже нет бесплатной подписки, но есть пробная триалка. RPG Maker поддерживает только Windows. В Steam он лежит для разовой покупки от 500 до 3000 рублей, в зависимости от продукта, там есть несколько «комплектаций». Менять скрипты под себя можно на Ruby-подобном языке.
Больше бесплатных движков
Вот бонусом еще 11 бесплатных вариантов движков:
1. Amazon Lumberyard
Бесплатный кросс-платформенный игровой движок, разработанный Amazon. Визуальная технология Lumberyard основана на CryEngine, но команда разработчиков Amazon уже внесла в систему значительные обновления. Роялти нет, лицензионных сборов нет. Amazon зарабатывает деньги через Amazon Web Service. Естественно, у этого игрового движка прекрасная совместимости с AWS. Помимо бесшовной интеграции с AWS, Lumberyard также предлагает интеграцию с Twitch.
Про Amazon Lumberyard на Хабре:
2. Solar2D (бывший Corona SDK)
Кросплатформенный движок с открытым исходным кодом для создания мобильных 2D-игр и приложений. Поддерживает такие платформы, как Android, iOS, Kindle, macOS, Windows, Linux. Предусмотрена сборка веб-приложений (HTML5). Solar 2D использует интегрированный Lua, наложенный поверх C++ / OpenGL.
Про Solar2D на Хабре:
3. jMonkeyEngine
Движок с открытым исходным кодом, написанный на Java для создания игр и приложений для Android или iOS. Точнее jMonkeyEngine — это набор библиотек для низкоуровневой разработки, а в высокоуровневый инструментарий его превращает интегрированная среда разработки, к примеру jMonkeyEngine 3 SDK.
Про jMonkeyEngine на Хабре:
4. SpriteKit
Это движок для 2-D игр, разработанный Apple и предназначенный для устройств Apple.
Про SpriteKit на Хабре:
5. Box2D
Физический движок от разработчика из Blizzard Entertainment, написан на C++, лицензия MIT.
Про Box2D на Хабре:
6. LibGDX
Кросплатформенная среда разработки на Java, которая предоставляет унифицированный API для создания 2D- и 3D-игр. LibGDX дружит с движком Box2D (физика реального мира), можно добавить поддержку TrueType шрифтов или работать с 3D объектами.
А еще коммьюнити LibGDX проводит геймджемы раз в сезон (март, июнь, сентябрь, декабрь), вот ссылочка на подробную информацию: Game Jams.
Про LibGDX на Хабре:
7. Urho3D
Бесплатный 2D и 3D игровой движок, запускается на Windows, Linux, macOS/iOS/tvOS, Android, и даже на Raspberry Pi и в браузере. Вики Urho3D содержит всю инфу для начала работы с движком, включая практические руководства по настройке.
Про Urho3D на Хабре:
8. CryEngine
Если вы использовали версию движка 5.5+ и заработали 5000$, то придется выплачивать 5% от прибыли. Если вы используете более ранние версии, то можете подать заявку на освобождение от выплат.
Про CryEngine на Хабре:
9. Panda 3D
Движок с открытым исходным кодом для 3D-игр. Язык разработки игр — Python. Сам движок написан на C++ и использует автоматический wrapper-генератор для предоставления полной функциональности движка в интерфейсе Python. Panda 3D может работать практически на всех основных платформах.
10. Bitty
Небольшой кроссплатформенный движок и опенсорсный фреймворк для создания 2D-игр на Lua…
11. Phaser
HTML5-опенсорсный движок для тех, кому хочется писать JavaScript or TypeScript браузерные 2D игры. Для начала работы с движком создатель предлагает просто начать вносить свои правки в уже существующие общедоступные игры и смотреть, что из этого получается. Плюс есть форум, где чувачки из комьюнити активно отвечают.
Кстати, про геймджем по-турецки скоро отдельный пост запилю. Вот пока моя фотка во время джема:
(Это я в шапочке, честное слово)
Мой канал в Telegram с находками про разработку игр, историю игр и геймдизайн: GameDevils (на русском) и блог на Substack (на английском).
Теплым летним вечером посетила мысль, которая, наверняка, посещает многих: хочу сделать свою игру! Энергии было через край, поэтому работа пошла с огоньком.
Итогом стал небольшой прототип браузерного 2d платформера с физикой.
Под катом — руководство для новичков от новичка по созданию такой игры. Если вы — опытный игродел, заходите делиться ценными советами!
Инструменты на проекте
Классический JavaScript — Для простоты я постарался воспользоваться самым базовым синтаксисом языка. Так же в проекте нет сборщика: каждый файл подключается как есть. Благодаря этому, надеюсь, проект будет понятен широкому кругу разработчиков.
PixiJS — Мне понравился этот движок 2d графики. Каких-либо замечаний по его работе не возникло. Плюс в наличии — хорошая документация.
PhysicsJS — Одной из причин проекта было желание попробовать в деле готовый физический движок. Выбор пал на PhysicsJS. В процессе разработки иногда не хватало документации, приходилось открывать его исходники. Но свою работу он выполнил, физика тел выглядит вполне реалистично.
JQuery — Возможности библиотеки используются минимально и ее можно спокойно убрать при желании. Но лично мне JQuery нравится, я с удовольствием его использую для работы с HTML.
Архитектура приложения
Максимально 60 раз в секунду браузер вызывает метод перерисовки экрана.
При каждой перерисовке идет обновление физической модели и последовательное рисование слоев игры: карты, игровой машины, призовых звезд.
Если между перерисовками экрана пользователь нажимал на кнопки управления — то модель получает об этом информацию, которая будет учтена при следующей перерисовке.
Можно изобразить этот процесс в виде схемы:
1. Обновление модели.
2. Вызов PhysicsJS для расчета физики.
3. Последовательный вызов слоев на перерисовку.
4. Опрос обновленной модели и перерисовка с помощью PixiJS.
Особенности реализации
Коллизии — физический движок дает удобное API определения коллизий. Не нужно самому вспоминать математику.
Но иногда коллизии не нужны. — например, когда собираешь призовые звезды. Мне кажется логичным включить в физический движок тип объектов, которые фиксируют факт столкновения с ними, но при этом не взаимодействуют с другими объектами (объекты-призраки). К сожалению, я не нашел в PhysicsJS такой возможности. В итоге, даже если удалять призовую звезду после коллизии, то движок уже изменил скорость игрока, замедлив его.
Уверен, есть более красивое решение, но я сделал так: после факта коллизии возвращаем игроку его характеристики до столкновения, благо PhysicsJS позволяет так себя обманывать.
Результат — сбор звезд не нарушает скорости игрока.
Разные модели у движков — физический движок делает поворот объекта вокруг его центра масс, а графический движок по умолчанию разворачивает по левому верхнему углу объекта. Если этот факт не учитывать, то результат будет довольно забавным.
Решением является рисование автомобиля относительно его центра, а не левого верхнего угла.
Теперь все выглядит как надо
Показ кнопок управления на мобильном устройстве — сделал реверанс в сторону прогресса: показываю большие кнопки управления для мобильных устройств. Главное, не забыть, что зажатие кнопки делается touch событиями, и что нужно запретить появление выделения текста от этого долгого нажатия через css стиль.
Расход батареи телефона от работы игры заметно увеличивается. Думаю, виноват физический движок, который активно нагружает процессор работой.
Выводы
В целом, процесс создания игры не показался мне очень сложным. Используя готовые движки для графики и физики, можно значительно упростить разработку, почти не думая о математике. Насколько это эффективный подход — вопрос для отдельной статьи. Спасибо всем за внимание и надеюсь, мои наработки помогут вам создать что-нибудь свое, если вы давно собирались это сделать! Удачи!
HTML5 вместе с CSS3 и JavaScript дают разработчику широкие возможности создания игр с использованием 3D, анимации, Canvas, математики, цветов, звука, WebGL. Одно из наиболее очевидных преимуществ HTML5 заключается в его независимости и от платформы, и в общем случае от аппаратной начинки.
При детальном рассмотрении можно выявить предоставляемые движками дополнительные возможности: упрощение некоторых часто встречающихся задач или подгрузка ресурсов, оформленный ввод, физика, звук, bitmap’ы (таких, конечно же, немного). Есть и довольно слабо оформленные движки, а есть и те, которые предоставляют в пользование разработчику редактор 2D уровней и инструменты отладки.
Предполагается, что большинство движков служат для сокращения временных затрат на разработку полноценной игры. Однако многие разработчики предпочитают создавать свой проект полностью с нуля, чтобы лучше представлять его устройство. Существует немного JavaScript-HTML5 движков, которые действительно чего-то стоят, однако и у них может быть один большой недостаток: они более не поддерживаются или близки к прекращению поддержки. Поэтому, выбирая движок, остановите свой выбор на тех продуктах, поддержка которых будет длиться достаточно продолжительное время.
Итак, вот, собственно, сами движки.
Crafty
Легкий модульный игровой движок, включающий множество функций: анимацию, управление событиями, перерисовку регионов, отслеживание пересечений и столкновений, спрайтовую графику и многое другое. Поддерживает все браузеры, в т.ч. IE9. Никаких дополнительных усилий прилагать не требуется.
Quintus
Quintus – игровой HTML5-движок, разработанный, чтобы быть модульным и легковесным, с четким JavaScript-подобным интерфейсом. Для того, чтобы реализовать основные особенности ООП-игрового движка в HTML5-движке, в Quintus в некотором отношении схож с jQuery, а также поддерживает плагины, управление событиями и гибкую модель наследования, чтобы упростить повторное использование реализованных функций.
gameQuery
Простой в использовании плагин jQuery, упрощающий разработку игры за счет использования реализованных игровых компонентов. Благодаря особенностям реализации совместим со множеством браузеров, в т.ч. их мобильными версиями.
Идеально подойдет для реализации 2D спрайтовых аркад в ретро-стиле и головоломок вроде Судоку. Он имеет готовый к использованию самозапускающийся игровой цикл. Поддерживаются мышь и клавиатура. Отлично документирован, и главным недостатком можно считать только отсутствие поддержки звуков.
lycheeJS
Игровая библиотека JavaScript, которая предлагает готовое решение для проектирования и реализации HTML5 Canvas и WebGL или нативных OpenGL игр внутри браузера или стационарных платформ. Оптимизирован для Google Chrome.
Enchant.js
Фреймворк Enchant.js для HTML5+JavaScript игр был разработан в 2011 году, распространяется с открытым исходным кодом (MIT лицензия) и потому бесплатен.
The Render Engine
Кросс-браузерный опенсорсный движок, написанный полностью на JavаScript. Созданный с нуля для того, чтобы быть максимально гибким, он имеет обширный API и использует самые новые фичи современных браузеров. Этот фреймворк предназначен, чтобы делать все за вас: ваша идея – его реализация с помощью самых часто используемых инструментов.
GameJS
Большая библиотека на верхнем уровне HTML Canvas. В добавок к функциям рисования в ней имеется растущий ассортимент полезных для разработки игр модулей. Большинство имеющегося API основан на популярной PyGame.
CSS Game Engine
Для формирования страницы используются JavaScript и CSS. Вместе они работают достаточно уверенно и слаженно. Разработан для новичков, обучающихся азам программирования видеоигр. Вам будет проще, если у вас уже есть какие-то навыки работы с CSS.
ClanFX
clanfx основан на JavaScript и CSS и использует плиточную графику. Работает на данный момент в Firefox, Epiphany и Opera. Среди реализованных фич: анимированные спрайты, эффекты заклинаний, постройки, плитки/текстуры и базовый искусственный интеллект.
gTile
Браузерный движок на чистом JavaScript и DHTML. В gTile плиточная графика была выбрана за ее простоту и доступность. Упор в реализации был сделан на высокий уровень интерактивности и поведении игровых объектов. Меньшее внимание было уделено графике. А потому движок подойдет больше для создания текстовых РПГ, а графических возможностей должно хватить для изображения локаций.
Графический JS движок с открытым исходным кодом (GPLv3). Легкий в использовании синтаксис предназначен для того, чтобы сделать фреймворк быстрым и расширяемым.
2D игровая библиотека, основанная на HTML5. Использует и Canvas, и средства DOM.
Cocos2D
Портированный с iPhone графический 2D HTML5-движок на JavaScript. Позволяет быстро создавать 2D игры и графические приложения, которые могут работать на всех современных устройствах без установки дополнительных плагинов.
CopperLicht
WebGL библиотека и JavaScript 3D движок для создания браузерных игр и 3D приложений. Использует WebGL Canvas, поддерживаемый современными браузерами и способный поддерживать рендеринг 3D моделей, используя аппаратное ускорение без плагинов.
Этот HTML/JavaScript движок – реинкарнация набора инструментов для разработки олдскульных RPG (но с более привлекательной графикой). И все только с помощью HTML и JS. Никаких плагинов. Никакого Flash.
LimeJS
HTML5 движок для разработки игр с поддержкой сенсорного ввода. LimeJS создан с использованием Closure Library, созданной Google, и в нем уже реализованы классы и функции для отслеживания времени, событий, обработки форм и анимации. Также фреймворк поддерживает спрайтовые листы (т.е. все используемые изображения могут быть помещены в один файл).
Phaser
Ещё один фреймворк для создания мобильных и десктопных игр на HTML5 с применением Canvas и WebGL. Бесплатный и с открытым исходным кодом. Есть быстрые гайды для старта на JavaScript и TypeScript.
К браузерным играм не привыкли относиться всерьез, но на самом деле – это неплохой бизнес для небольшой команды друзей, у которых нет денег, но есть светлые мысли. А если еще и деньги есть, то тогда все значительно упрощается.
На самом деле создать браузерную онлайн игру может любой, у кого есть желание учиться, но не думайте, что вас ждет легкая прогулка. Даже если вы мастер на все руки (программист и дизайнер в одном флаконе), то придется потратить уйму времени. Если же вы не владеете ни кодом, ни карандашом, то затраты будут финансовыми.
Как создать браузерную игру ничего не изучая?
Ответ – никак. Для начала нужно будет выучить HTML – язык разметки, который работает в связке с каскадной таблицей стилей – CSS. Эти языки располагают текст и изображения на странице, собирая картинку из множества фрагментов. Поскольку вы намерены сделать именно браузерную игру, то ей обязательно понадобится сайт, желательно красивый и функциональный. Поэтому не обойтись без JavaScript – самого простого способа визуализировать вашу игру на стороне геймера. Этот язык позволяет менять местами элементы страницы без ее перезагрузки. По сути, JavaScript управляет элементами CSS и HTML в реальном времени.
Для создания браузерной игры придется выучить HTML, CSS, PHP и JavaScript, так что бессонные ночи вам гарантированы
Язык программирования PHP нужен для создания движка игры. Он используется на сервере для обработки данных, поступающих от разных геймеров. Это – ядро, которое приводит в действие все внутренние механизмы.
Я не хочу ничего учить, но у меня есть деньги
Поздравляем, вы избежали многих проблем. И тут же получили новые. Чтобы сделать браузерную игру хорошего качества (в плохую никто играть не будет) нужно иметь хорошую команду разработчиков, а хорошие спецы стоят денег. Если брать по минимуму, то вам необходимы:
- Программист – 2 штуки
- Дизайнер и художник – 2 штуки
- Гейм-дизайнер – 1 штука
- Комьюнити-менеджер – 1 штука
- Гейм-мастер – 1 штука.
Всех необходимых работников можно найти на биржах фрилансеров
Правда, в этом случае нужно быть очень осторожным, поскольку фрилансеры привыкли регулярно срывать сроки. Как говорят опытные руководители, можно бесконечно смотреть на 3 вещи: как течет память, как горит дедлайн и как не работает фрилансер.
Во сколько обойдется разработка?
Во столько, сколько у вас есть денег. Вот здесь приведены примерные выкладки и структура расходов на создание среднестатистической браузерки. Итоговая сумма – 25 миллионов рублей. Однако не стоит пугаться этой цифры. В статье автор посчитал расходы на разработку по максимуму, так что при желании эту сумму модно уменьшить в разы и даже десятки раз. Или увеличить, если ваш папа – прокурор. Безусловно, такие проекты, как Drakensang Online или City of Steam требуют сумм как минимум с шестью нулями, но простую табличную браузерку можно сделать за пару десятков тысяч рублей.
В конце концов, вы всегда можете обратиться к краудфандингу. Пути Кикстартера неисповедимы, взлететь там может любой проект. Главное правильно подать блюдо.
Этапы разработки
Создание браузерной игры с нуля можно разделить на несколько этапов:
1. Поиск идеи
Поскольку у вас вряд ли есть 25 миллионов рублей и вы вряд ли являетесь гением в программировании и дизайне, единственное, чем вы можете зацепить пользователя, это необычный сеттинг. Даже пресловутая кампания из эльфов, орков, людей и гномов способна увлечь клиента, если погрузить их в необычную среду или заставить делать странные вещи. Например, игра Ботва Онлайн была написана «по приколу» четырьмя людьми в свободное от работы время, но благодаря своему необычному сеттингу быстро стала успешным бизнес проектом.
2. Разработка сюжета
Сюжет очень важен (если конечно, вы не делаете стратегию). Если у самого воображения не хватает, наймите кого-нибудь, у кого оно есть. В крайнем случае, обратитесь к аутсорсингу и найдите толкового копирайтера, у которого уже есть опыт создания квестов.
3. Создание игры
Даже если вы выучили вдоль и поперек JavaScript и CSS, вы все еще ничего не знаете о том, как создать браузерную игру. Это примерно то же самое, как если бы вы выучили теорию плавания, ни разу не побывав в бассейне. Лучший выход в этом случае – воспользоваться самоучителем. Вот здесь можно многое узнать о разработке игр, причем не только браузерных.
Скорее всего, ваша первая браузерка будет выглядеть так. Это – легендарный Бойцовский Клуб
4. Продвижение проекта
Последний этап, на котором дело в свои руки берут комьюнити-менеджер и специалист по маркетингу (если таковой имеется). В крупных компаниях на долю рекламы уходит примерно 60% бюджета, поэтому на эту статью денег лучше не жалеть. Если же ваши финансы поют романсы, то тогда не остается ничего другого, как самому перепахивать игровые форумы и завлекать геймеров всеми возможными способами.
Как создать браузерную игру с помощью конструктора
Оказывается, ушлые программисты уже давно создали кучу конструкторов MMO, которые могут помочь новичку создать браузерную онлайн игру бесплатно. Это не значит, что вы можете успокоиться и удалить все закладки по программированию, но с помощью конструктора можно здорово ускорить процесс.
Популярный игровой конструктор Construct 2
Большой популярностью пользуется MMO Constructor – отечественный продукт, в котором можно создать все элементы полноценной браузерной RPG. Взамен авторы требуют совсем ничего – 50% от прибыли проекта. Разобраться в конструкторе непросто, но добрые люди уже написали гайды. Также чтобы создать браузерную игру, можно воспользоваться такими программами, как Construct Classic, Eclipse, FPS Creator.
Больше информации о конструкторах можно узнать на форуме Gcup, где тусуются все: и продвинутые геймдевы, и зеленые новички.
Так что там насчет миллиона?
Любая, даже мобильная игра должна приносить прибыль. Иначе нет никакого смысла тратить свое и чужое время. Дабы сделать свой проект финансово успешным, нужно слушать, что говорят опытные разработчики и делать то же самое:
- Не жадничайте! Более 80% игроков вообще не платят, либо платят копейки. Однако они создают массовку, на которую подтягивается крупная рыба. Сконцентрируйтесь на ней. Остальным дайте возможность резвиться бесплатно.
- Постарайтесь сделать так, чтобы донаторы не сильно выделялись из общей массы, иначе масса уйдет, оставив вас без донаторов и без денег. В общем, бряцайте мускулами аккуратно.
- Лучше всего тратят деньги те, кто не хочет тратить свое время, поэтому монетизируйте наиболее рутинные операции. Не разменивайтесь по мелочам.
- Уроки истории создания игр показывают, то онлайн-проект должен быть бесконечным. Если у геймера появится чувство, что ему нечего делать — он уйдет, а туда, где нет онлайна, новый геймер не придет никогда.
Напоследок хочется сказать – не так страшен черт, как его малюют. Даже лучшие геймдевы когда-то начинали с нуля, и кто знает, может быть именно вы станете следующим Джоном Кармаком или Ричардом Гэрриотом?
Читайте также: