Разработка браузерной стратегии. Стоимость создания онлайн игры не на нашем движке, а с нуля. Что входит в услугу «Разработка браузерных игр на заказ»
Закрыть
Политика конфиденциальности и защиты информации
Оставляя данные на сайте, Вы соглашаетесь с Политикой конфиденциальности и защиты информации.
Защита данных
Администрация сайта (далее Сайт) не может передать или раскрыть информацию, предоставленную пользователем (далее Пользователь) при регистрации и использовании функций сайта третьим лицам, кроме случаев, описанных законодательством страны, на территории которой пользователь ведет свою деятельность.Получение персональной информации
Для коммуникации на сайте пользователь обязан внести некоторую персональную информацию. Для проверки предоставленных данных, сайт оставляет за собой право потребовать доказательства идентичности в онлайн или офлайн режимах.Использование персональной информации
Сайт использует личную информацию Пользователя для обслуживания и для улучшения качества предоставляемых услуг. Часть персональной информации может быть предоставлена банку или платежной системе, в случае, если предоставление этой информации обусловлено процедурой перевода средств платежной системе, услугами которой Пользователь желает воспользоваться. Сайт прилагает все усилия для сбережения в сохранности личных данных Пользователя. Личная информация может быть раскрыта в случаях, описанных законодательством, либо когда администрация сочтет подобные действия необходимыми для соблюдения юридической процедуры, судебного распоряжения или легального процесса необходимого для работы Пользователя с Сайтом. В других случаях, ни при каких условиях, информация, которую Пользователь передает Сайту, не будет раскрыта третьим лицам.Коммуникация
После того, как Пользователь оставил данные, он получает сообщение, подтверждающее его успешную регистрацию. Пользователь имеет право в любой момент прекратить получение информационных бюллетеней воспользовавшись соответствующим сервисом в Сайте. На сайте могут содержаться ссылки на другие сайты. Сайт не несет ответственности за содержание, качество и политику безопасности этих сайтов. Данное заявление о конфиденциальности относится только к информации, размещенной непосредственно на сайте.Безопасность
Сайт обеспечивает безопасность учетной записи Пользователя от несанкционированного доступа.Уведомления об изменениях
Сайт оставляет за собой право вносить изменения в Политику конфиденциальности без дополнительных уведомлений. Нововведения вступают в силу с момента их опубликования. Пользователи могут отслеживать изменения в Политике конфиденциальности самостоятельно.Создай свою игру, приглашай друзей играть онлайн и в дальнейшем сделай всё это источником своего постоянного дохода. Вам нравятся космические браузерные онлайн стратегии? ? Вы хотите попробовать себя в качестве Администратора игровой вселенной?
Если Вы ответили "да" на эти вопросы, то у нас есть для Вас очень и очень заманчивое предложение.
Вы можете создать свою онлайн игру на базе игровой вселенной Суперновы.
Как создать свою игру
Сегодня онлайн-играм посвящают время миллионы людей по всему миру, многие из которых увлечены идеей создать свою онлайн-игру. Для одних – это всего лишь увлекательное хобби, с помощью которого можно «убить» время в команде единомышленников, другие видят в этом неплохую возможность заработать.
Геймеры, всерьез увлеченные своей мечтой, начинают обучаться всем «премудростям» разработки игровых приложений, таким как программирование, моделирование объектов и дизайн. Однако на это требуется большое количество времени, да и не каждому это под силу. Другие решают пойти по так называемому «профессиональному» пути: они набирают команду программистов и поручают создание игры им, . Однако не нужно сразу расставаться с мечтой, поскольку создать свою игру, в которую можно играть онлайн, вполне реально не имея навыков профессионального разработчика.
Прежде всего, нужно определиться с жанром и тематикой игры. В наше время довольно популярными онлайн-играми являются стратегии, особенно на космическую тему. К примеру, такая сетевая стратегия, как «Супернова», предоставляет возможность создать свою браузерную онлайн-игру на базе уже готовой игровой Вселенной. Разработчики, зная все «подводные камни» создания игр, предлагают сделать вам собственный проект. У вас будет современный, регулярно обновляющийся игровой движок. Вы будете избавлены от необходимости нанимать программистов, а вам самим не понадобятся знания технической стороны создания онлайн-игр. Вам нужно лишь определиться, чего вы хотите достичь и какую игру сделать. Остальное предоставьте нашим опытным специалистам.
Неслучайно мы говорим об онлайн-играх, поскольку они имеют широкую аудиторию. Браузерные игры позволяют привлечь тех пользователей, у которых нет возможности (или желания) устанавливать их на компьютер. Такая игра будет пользоваться популярностью и не создаст неудобств геймеру, что побудит его играть снова и снова. Это важно, поскольку онлайн-игры приносят неплохой доход владельцу.
Создай свою игру, приглашай друзей играть онлайн и в дальнейшем сделай всё это источником своего постоянного дохода. Для этого воспользуйся услугами разработчиков игры «Супернова» и воплоти свою мечту в реальность!
Плюсы нашего предложения очевидны:
- Вы получите современный, постоянно обновляемый игровой движок космической браузерной онлайн стратегии.
- Вам не надо иметь в штате программиста MySQL и/или PhP
- Вам не надо обладать никакими знаниями в области продакшена игр, чтобы открыть свою игру.
- Вы можете превратить свою игру в источник неплохого постоянного дохода.
- Игроку Вашей игры не надо ничего качать и устанавливать. Всё работает прямо в браузере.
Итак, какие именно варианты создания Вами своей игры мы предлагаем.
1 вариант создания своей браузерной онлайн игры :Вы можете абсолютно бесплатно скачать движок браузерной космической стратегии Супернова и делать с ним абсолютно всё, что угодно. Бесплатная версия игрового движка содержит только основной игровой функционал и будет достаточной, для оценки внутренних механизмов игры. Вы можете установить скачанный игровой движок на свой хостинг и открыть свой сервер в течении 5 минут. Всё абсолютно бесплатно, движок постоянно обновляется и дорабатывается нашей командой программистов (не забывайте качать новые версии для поддержания игрового движка в актуальном состоянии. Уведомление о новой версии автоматически покажется в админке игры).
Вы можете усомниться, мол, с чего вдруг команда программистов даёт мне свой игровой движок, дорабатывает его и не просит денег.Ответ прост. Для это есть 3 причины. Первая: Нам нужно большое количество установок на различные хостинги и типы серверов. Так мы имеем возможность адаптировать наш движок браузерной космической стратегии под почти все виды серверного железа и софта. То есть Вы, используя наш движок онлайн игры на своем сервере выступаете в роли тестера. Вторая: Если Ваш игровой сервер приобретёт популярность и вы решите ввести в игру функционал по продаже игровых ресурсов или артефактов за реальные деньги (донат), то мы можем предложить Вам уже готовое, полностью настроенное решение. Естественно, платное. Третье: Мы остро нуждаемся в единомышленниках - людях, мечтающих создать космическую стратегию всех времён и народов. Установив её вы наверняка сможете найти функционал и идеи, которые захотите внести в будущие версии. Мы с радостью ждем ваших идей по доработке игрового функионала.
Создание вашей собственной онлайн стратегии. Шаг 1 Скачивание установочного архива: Создание вашей собственной онлайн стратегии. Шаг 2 Подготовка архива:Сохраните архив с движком себе на компьютер и распакуйте его. Сам архив не удаляйте. В нашем примере мы распаковали все вна диск D в папку my_space_game. Это лишь пример, строго следовать ему не обязательно.
Вам необходимо будет залить архив на свой веб-сервер, удволетворяющий требованиям движка к серверным компонентам:
Требования
==========
MySQL 5.x - режим STRICT_TRANS_TABLES должен быть ОТКЛЮЧЕН
PHP >= 5.2.х - НЕ СОВМЕСТИМ С PHP 5.3.1!
Web-server
XCache >= 1.2.х - опционально, но крайне, крайне желательно. Без XCache не
будут работать некоторые фишки и заметно возрастет нагрузка
на MySQL.
Вы можете выбрать любой, нравящийся вам хостинг, но далее все инструкции будут приводиться для хостера BEGET , посокльку там отзывчивая техподдержка, есть пробный бесплатный период и вы можете потестировать и установить движок совершенно бесплатно.
После регистрации у хостера войдите в панель управления хостингом и запустите файловый менеджер
В правой части файлового менеджера выберите свой домен, дважды кликните по нему, чтобы войти в каталог и далее войдите в каталог public_html. Загрузите в этот каталог тот архив, который вы скачали на шаге 1 и распакуйте его так, чтобы все файлы и папки движка оказались к корне папки public_html
В итоге в каталоге public_html у вас будет куча файлов и папок
На этом подготовка файлов почти завершена. И мы переходим к созданию игровой базы данных.
Создание вашей собственной онлайн стратегии. Шаг 4 Создание и подготовка базы данных:В панели управления хостингом выберите пункт MySQL
и в открывшемся окне создайте новую базу данных и пароль для неё. Запомните или запишите введённые данные. Они пригодятся позже.
В нашем случае имя базы данных igorrnc_mygame и пароль mygame . Имя пользователя идентично имени базы, о чём нас предупреждает система.
После успешного создания базы переходим в панель управления ею, щелкнув по иконке с надписью phpMyAdmin справа от неё
В открвышемся окне выбираем вкладку "Импорт" и нажимаем кнопку "выберите файл".
Указываем путь к дампу базы данных. Это файл supernova.sql Он лежит в каталоге, который мы распаковали на шаге 2 в подкаталоге docs:
После того, как указали файл, жмём "вперёд" и ждём окончания процесса импорта данных
По окончанию процесса вы получите уведомление от системы и в левой части экрана появятся новые записи базы данных.
Поздравляю! мы всего в паре шагов от финала! Окно браузера с phpMyAdmin можно закрыть. Он нам больше не понадобится.
Создание вашей собственной онлайн стратегии. Шаг 5 Создание конфигурационного файла игры:Идём в распакованный на шаге 2 локальный каталог с игрой и находим в подкаталоге /docs файл с названием config.php.sample
Переименовываем его в config.php , удалив слово sample . На все предупреждения системы говорим "Заткнись, тут я хозяин!"
Открываем получившийся файл блокнотом и заполняем данными с шага 4.
Сохраняем файл и идём в менеджер файлов хостинга чтобы залить его на сервер в корень каталога public_html.
После успешной заливки файла открываем в браузере адрес вашей игры. Убеждаемся что всё работает.
Зайдите в игру с админскими правами. По умолчанию админский аккаунт:
Логин: "admin" (без кавычек)
Пароль: "admin" (без кавычек)
ОБЯЗАТЕЛЬНО смените пароль администратора на странице /options.php
Настройте игру на странице /admin/settings.php
Сверхновая готова к запуску!
Посмотреть что Вы получите после установки нашего бесплатного движка можно на нашем демо-сервере.
Для входа в игру используйте LOGIN: test PASSWORD: test
2 вариант создания своей браузерной онлайн игры : Создание Вашего игрового сервера.Данный вариант ни чем не отличается от первого, но пригодится тем, кто не имеет навыков работы с серверной частью игровых приложений и не имеет возможности установить наш игровой движок самостоятельно.
Чтож, мы готовы прийти Вам на помощь. Мы приобретём для Вашей будущей игры доменное имя, арендуем и настроим сервер Вашей будущей игры и произведём туда установку и настройку игрового движка. Вам останется только привлечь в неё игроков и настроить игровые параметры (название игры, скорость добычи ресурсов и прочие индивидуальные для каждой игры мелочи) через удобную админ-панель вашей игры. То есть всё будет сделано "под ключ". Вам останется лишь наслаждаться приятными хлопотами администратора игрового мира.
После оплаты данного товара в течении трех рабочих дней вы получите собственную игру, аналогичную по функционалу нашим игровым серверам.
В стоимость услуги входит:
Доменное имя в зоне.ru (например spacegame.ru), если оно не занято на момент регистрации.
- Хостинг для Вашей игры, оплаченный на полгода.
- Уже установленный и полностью готовый к работе игровой движок супернова.
Преимущества данного варианта создания своей игры: ваша игра расположена на личном сервере и не зависит от нашего оборудования. Вы получаете полностью автономный игровой проект с собственным доменным именем.
Посмотреть что Вы получите после покупки готового сервера можно на нашем демо-сервере.
Для входа в игру используйте LOGIN: test2 PASSWORD: test2
3 вариант создания своей браузерной онлайн игры : Аренда уже готового игрового сервера.Вы получаете в аренду на год игровую вселенную с именем "www.ВАШЕ_ИМЯ.. По прошествии года будет необходимо приобрести продление аренды на льготных условиях.
В данной игровой вселенной вы получаете административные права и вольны делать всё что угодно со своей игровой вселенной.
Преимущества данного варианта создания своей браузерной онлайн игры: вам не надо поддерживать собственный хостинг, игровое имя домена уже разрекламировано и вы, вполне вероятно, заинтересуете уже играющих в игру участников из других игровых вселенных.
В стоимость создания игровых вселенных, в любом из выбранных вариантов, включен базовый функционал. Дополнительные функции (модули игры) покупаются напрямую у разработчика игрового движка. Контакты будут предоставлены.
Стоимость создания онлайн игры не на нашем движке, а с нуля.Очень часто нам задают вопрос вроде такого: "Я не хочу игру про космос! Сколько будет стоить создать 3Д игру про дельфинов-киборгов, которые убивают ниндзя-зомби?"
Всем привет!
Что представляет собой игра? Видимо наиболее коротким описанием будет «клон Цивилизации» =). Но это не значит что у меня не хватило фантазии придумать что-то свое. Просто сделать «Цивилизацию» было моей мечтой. Вряд ли бы я получил столько удовлетворения от написания другой игры. Ну а фанаты Цивилизации наоборот считают, что моя игра совсем не похожа на Цивилизацию, разве что только с виду. Может это и к лучшему.
Игра называется The Fate of Nation http://fatenation.com
Расписывать архитектуру и логику работы приложения можно до бесконечности поэтому придется видимо разделить на несколько частей статью, если к ней будет интерес. Кроме того не вижу большого смысла приводить много кода, так как реализовать написанное мной можно на любом языке и платформе.
Для создания игры я использовал php и MySQL на сервере, html и javascript на клиенте. Flash не используется. Из html5 есть только видео на сайте и несколько областей с канвасом в самой игре - включая поверхность карты и мини-карту. Объем кода клиентской части в несколько раз превышает серверную часть, поэтому в основном буду рассказывать о клиентской разработке, но начнем с сервера.
Общая архитектура Общая архитектура приложения выглядит как полностью асинхронное веб приложение на JavaScript. Перезагрузок страниц не предусмотрено. Обмен данными с сервером исключительно через Ajax и JSON . В JSON"е передаются только данные, без html кода. Html разметка загружается отдельно в начале загрузки приложения и процессится с данными через клиентский шаблонизатор по мере загрузки данных с сервера.
На сервере никаких фреймворков не использовал - хотя начинал писать с использованием Zend Framework, который выкосил потом за ненадобностью. Вместо него создал свою простую архитектуру отдаленно напоминающую контроллеры и экшены из ZendFramework .
Как видно из рисунка, на сервере одна точка входа - файл index.php. В процессе игры на сервер идут запросы вроде такого: /Unit/Move. И посылается JSON с параметрами, в данном случае это id юнита и координаты перемещения. Сервер перенаправляет этот запрос на index.php, в котором последовательно выполняется подключение к БД, проверка текущего пользователя и парсинг строки запроса для определения контроллера (Unit) и действия (Move). Если контроллер не задан то сервер выдает индексную страницу с кодом для построения клиентского приложения, но об этом позже. Если же контроллер задан то ищется файл этого контроллера, подключается его код и запускается обработка запросов этого контроллера, где соответственно ищется необходимый экшн, а в нем производится проверка входных данных и дергается бизнес логика.
Для работы с БД написан специальный класс абстракции базы данных через который проходят все запросы к БД от бизнес логики и контроллеров, экранирование данных и прочие небольшие удобства. Собственно на сервере все довольно просто с архитектурой, а зона ответственности сервера заключается лишь в проверке входных данных и выдаче информации из БД. Все остальное делает клиент.
Теперь немного о самой игре.
Карта Первое что было сделано это карта на которой происходят почти все игровые действия: строительство городов, улучшений (посевы, дороги), перемещение юнитов и исследование карты. Размер карты составил 1000 на 1000 клеток для каждой отдельная запись в БД. Я видел игры где карта сделана бесконечной и записи о клетках динамически вставлялись тогда, когда с клеткой производились какие-либо действия. Но меня такой подход немного пугал своей непредсказуемостью. Гораздо проще планировать игру, когда точно знаешь, что у тебя есть фиксированная карта. Можно запланировать расположение игроков их количество, количество городов и юнитов, приблизительно оценить нагрузку.Итого получилось 1000 * 1000 = 1 000 000 записей в БД для карты. До этого я не работал с таким количеством записей и меня это насторожило. Думал что будет тормозить.
Я решил перехитрить MySql и разместить карту в 10-ти таблицах по 100 000 записей в каждой с надеждой, что станет быстрее работать. В итоге пришлось написать дурацкую логику по выборке клеток из нескольких таблиц сразу, а замеры показали что производительность только упала. Вернул все назад в 1-у таблицу.
- x, y - это координаты клетки.
- terrain - тип территории (луг, лес, гора...).
- resource - ресурс если он есть на клетке (глина, лошади).
- wens9_code - название поля произошло от west-east-north… 9 - означает что изображение данной клетки зависит от территорий 8-ми рядом стоящих клеток и естественно от территории самой этой клетки - всего 9. Эту логику я спер с 3-ей цивилизации, насмотревшись их спрайтов территорий там где по 512 вариантов иконок для одной клетки!)) Потом у меня вскипел мозг разбирая зависимости по которым они выбирали иконки и я понял, какой это большой геморрой. =) И все только для одного: чтобы спрайты имели жесткие концы в виде ромбиков 128 на 64 пикселя. В конце концов мы решили использовать png24 с полупрозрачными краями накладывающиеся друг на друга и создающих в 10 раз лучший и разнообразный ландшафт, чем в описанном примере из Цив3. А выбираем иконки случайно независимо от соседних клеток. Это видно на скрине - сразу не скажешь где там одинаковые иконки полей. Вот горы по краям размыть забыли и они имеют четкие границы - что плохо смотрится.
- starting_position - означает что в этой клетке появится игрок.
Когда я делал эти «регионы» я не предполагал насколько они увеличат производительность. Оказалось выделить 100 клеток фильтруя по полю региона получается многократно быстрее чем фильтруя по координатам. Несмотря на то, что я объединил x и y координаты клетки в одно поле location = 1000*x + y. Сделал это прежде всего для удобства - чтобы легче было достать одну клетку.
Затем каждую сущность (города, юниты, ресурсы), которые располагаются на карте и имеют соответственно конкретные координаты, я также пометил регионом, что увеличило производительность выборок в сотни раз. Одно дело искать значения в таблице по ключу с миллионом уникальных значений и другое дело по ключу с 10 000 значений.
Таким образом получилась такая система: клиент запрашивает регионы - сервер достает из БД карту и все сущности на ней, быстро фильтруя по регионам - клиент отрисовывает это все в браузере на канвасе. У каждой сущности есть такие поля как время до окончания битвы или время до перемещения в следующую клетку - в этом случае по истечении этих таймаутов мы обновляем локально только то что требуется. Например если мы исследуем карту то догружаем только что открытые клетки и не более. Если вражеский юнит переместился - догружаем следующую точку его перемещения.
Исследование карты Однако меня терзал еще один вопрос. Мне позарез хотелось сделать исследование карты - чтобы изначально она была не разведана и нужно было ходить по ней чтобы что-то увидеть.
Такого я не видел еще в браузерных играх (собственно как и юнитов передвигающихся по карте, а не по воздуху). Я принялся за расчеты. Стартовая позиция игрока расположена внутри региона. То есть максимальное количество игроков 10 000 как и регионов. Каждый игрок может разведать всю карту. Итого 10 000 * 1 000 000 = 10 миллиардов записей может быть в таблице пермишенов на клетки! Таблица карты показалась на фоне этого детским лепетом =). Конечно эта цифра завышена. Вряд ли кому-то удастся разведать всю карту - она очень большая. Но десятки и сотни миллионов записей в таблице пермишенов точно могут быть в конце игры.
И на эту таблицу нужно было джойнить все сущности включая саму карту каждый раз при выборке регионов. Здесь опять спас меня ключ по полю региона, который позволил делать эти джоины намного быстрее.
Провести нагрузочное тестирование чтобы определить на каком этапе сервер начнет тормозить не удалось еще. Максимум что я видел это чуть более 2-ух миллионов записей в таблице пермишенов.
Перемещение юнитов Чтобы сделать перемещение юнитов пришлось тоже подумать и переписать логику несколько раз.Первое что нам нужно, это точно отслеживать время открытия новых клеток чтобы можно было отфильтровывать клетки, юниты и города по этим данным. Сразу напрашивается использовать таблицу пермишенов на карту, но со спец-полем - означающим время когда эта запись станет активной. Так и было сделано. Клиент отправляет id юнита, и новую координату дислокации. Сервер просчитывает текущую позицию юнита, координаты клеток по которым он будет перемещаться, и в зависимости от территории этих клеток, типа юнита и других параметров высчитывает время когда этот юнит будет в каждой клетке. Затем дополнительно просчитываются таким же образом соседние клетки в зависимости от радиуса обзора юнита.
Все это вставляется в таблицу пермишенов на клетки и карта работает как часы. Юнит ходит по карте, при каждом его перемещении мы запрашиваем клетки вокруг него, стандартными методами, которые отфильтруют сущности уже по новым данным пермишенов учитывая время активации пермишена, где будут заветные открытые области.
Далее записи пермишенов, которые говорят о перемещении юнита мы помечаем еще 2 полями: id юнита и типом записи: "обзорные клетки " или "клетки по которым идет юнит ". Первое поле нужно чтобы при остановке юнита или смене пункта назначения можно было их удалить, второе нужно чтобы при выборке юнита записать ему времена смены дислокации.
Затем коллеги по работе мне подсказали еще один довольно очевидный момент: ввести поле означающее время выхода юнита с данной клетки. Я назвал его out_timestamp. Это позволило легко выбирать текущие позиции всех юнитов и соответственно фильтровать вражеских юнитов по видимым нами клеткам.
Уверен, что мой пример не самая удачная архитектура для подобной игры, но вроде работает =) В следующих статьях могу рассказать о клиентской архитектуре, кешировании, используемом фреймворке и о том, как мне удалось сделать демонстрационную версию игры работающую без запросов к серверу, чисто на клиенте.
Да, кстати, часто после различных постов об игре народ начинает хвалить графику, а не геймплей. Так что скажу сразу - я ее не рисовал!!! Это все наш художник-дизайнер Максим Кудрицкий.
Для разработки "с нуля" проекта браузерной онлайн игры уровня "Жуков" требуется программист-архитектор, который сумеет по заданию спроектировать и реализовать базис игры + возможность дальнейшего активного участия в развитии проек...
Разработка броузерной on-line игры.Наша команда планирует разработку браузерной on-line игры. Есть идеи, но не можем определиться с жанром. Требуется программисты php, и художники. Если Вас не затруднит Вы можете помочь с выбором жанра на сайте http://game.promosystem.biz проголосовав...
Разработка 3D онлайн игрыДля разработки игры требуются: 1)Дизайнеры; 2)Программисты; 3)Художники2D/Моделлеры3D; 4)Писатель для сюжета; 5)Специалист по балансу; 6)Бета-тестер; 7)СПОНСОР; ICQ 316-265-836
Разработка он лайн игрыТак случилось что после начала работы программеры которые были подобраны не справились даже с начальным этапом. От вас жду реальных предложений по срокам исполнения. Обращаю внимание, что в игре будет 2-х уровневая партнерка на реальные деньги, т.е. ...
Разработка 3д Игры!Разработать игру на подобии arena.ru, в 3d исполнении (клиент до 200Мб) Более подробные условия работы и т.д. будет обговариваться с понравившимся кондидатом или кондидатами. Заключение договора, в дальнейшем по желаю постоянная работа. В ваших предл
Разработка Web - игрыРазработка игры on-line. Возможен аналог on-line игры(Ganjawars, Haddan), что ближе разработчику(ваши предложения). Обязательная экономическая составляющая, боевая составляющая, визуализация игровых предметов и др.. Время создания проекта оговаривает...
Разработка рума Poker Texas Hold"emТребуется разработать онлайн-покер рум Texas Hold"em с возможностью последующего добавления игр. Флеш или ехе вариант. Возможность принимать оплату в WebMoney, Egold, Paymer Check. Опыт разработки и портфолио - обязательны.
Команда програмистов PHP/Javascript для разработки браузерной игрыВ общем так. Есть конкретный проект разработки браузерной игры. Нужна сплачённая группа програмистов для реализации. Концепт написан,Сервер есть, домен тоже. Команда художников уже работает. Проект ОЧЕНЬ перспективный. Это не очередной БК с другой
Браузерная интернет играПривет друзья. Я ZOLTER, разработчик одной из новых браузерных Интернет игр. Я понимаю что этим сейчас некого не удивишь, но уверяю вас что у меня масса интересных идей. Если все их удастся воплотить в жизнь – игра будет популярна в сети. Проблема в
Для начала установите зависимости. Создайте папку проекта, перейдите в неё и запустите следующий код:
Npm init npm install --save express socket.io
Для быстрой настройки сервера целесообразно использовать фреймворк Express , а для обработки веб-сокетов на сервере - пакет socket.io . В файл server.js поместите следующий код:
// Зависимости var express = require("express"); var http = require("http"); var path = require("path"); var socketIO = require("socket.io"); var app = express(); var server = http.Server(app); var io = socketIO(server); app.set("port", 5000); app.use("/static", express.static(__dirname + "/static")); // Маршруты app.get("/", function(request, response) { response.sendFile(path.join(__dirname, "index.html")); }); // Запуск сервера server.listen(5000, function() { console.log("Запускаю сервер на порте 5000"); });
Это довольно типичный код для сервера на связке Node.js + Express. Он устанавливает зависимости и основные маршруты сервера. Для этого демонстрационного приложения используется только один файл index.html и папка static . Создайте их в корневой папке проекта. Файл index.html довольно простой:
Наша многопользовательская игра canvas { width: 800px; height: 600px; border: 5px solid black; }
Ваш пользовательский интерфейс может содержать куда больше элементов, поэтому для более крупных проектов CSS-стили лучше помещать в отдельный файл. Для простоты я оставлю CSS в коде HTML. Обратите внимание, что я включил в код скрипт socket.io.js . Он автоматически заработает в рамках пакета socket.io при запуске сервера.
Теперь нужно настроить веб-сокеты на сервере. В конец файла server.js добавьте:
// Обработчик веб-сокетов io.on("connection", function(socket) { });
Пока что в игре нет никаких функций, поэтому в обработчик веб-сокетов ничего добавлять не нужно. Для тестирования допишите следующие строки в конец файла server.js:
SetInterval(function() { io.sockets.emit("message", "hi!"); }, 1000);
Эта функция будет отправлять сообщение с именем message и содержимым hi всем подключенным веб-сокетам. Позже не забудьте удалить эту часть кода, так как она предназначена только для тестирования.
В папке static создайте файл с именем game.js . Вы можете написать короткую функцию для регистрации сообщений от сервера, чтобы убедиться в том, что вы их получаете. В файле static/game.js пропишите следующее:
Var socket = io(); socket.on("message", function(data) { console.log(data); });
Запустите сервер командой node server.js и в любом браузере перейдите по ссылке http://localhost:5000 . Если вы откроете окно разработчика (нажать правую кнопку мыши → Проверить (Inspect)), то увидите, как каждую секунду приходит новое сообщение:
Как правило, socket.emit(name, data) отправляет сообщение с заданным именем и данными серверу, если запрос идет от клиента, и наоборот, если запрос идет от сервера. Для получения сообщений по конкретному имени используется следующая команда:
Socket.on("name", function(data) { // аргумент data может содержать любые отправляемые данные });
С помощью socket.emit() вы можете отправить любое сообщение. Можно также передавать объекты JSON, что для нас очень удобно. Это позволяет мгновенно передавать информацию в игре от сервера к клиенту и обратно, что является основой многопользовательской игры.
Теперь пусть клиент отправляет некоторые состояния клавиатуры. Поместите следующий код в конец файла static/game.js:
Var movement = { up: false, down: false, left: false, right: false } document.addEventListener("keydown", function(event) { switch (event.keyCode) { case 65: // A movement.left = true; break; case 87: // W movement.up = true; break; case 68: // D movement.right = true; break; case 83: // S movement.down = true; break; } }); document.addEventListener("keyup", function(event) { switch (event.keyCode) { case 65: // A movement.left = false; break; case 87: // W movement.up = false; break; case 68: // D movement.right = false; break; case 83: // S movement.down = false; break; } });
Это стандартный код, который позволяет отслеживать нажатие клавиш W , A , S , D . После этого добавьте сообщение, которое оповестит сервер о том, что в игре появился новый участник, и создайте цикл, который будет сообщать серверу о нажатии клавиш.
Socket.emit("new player"); setInterval(function() { socket.emit("movement", movement); }, 1000 / 60);
Эта часть кода позволит отправлять на сервер информацию о состоянии клавиатуры клиента 60 раз в секунду. Теперь необходимо прописать эту ситуацию со стороны сервера. В конец файла server.js добавьте следующие строки:
Var players = {}; io.on("connection", function(socket) { socket.on("new player", function() { players = { x: 300, y: 300 }; }); socket.on("movement", function(data) { var player = players || {}; if (data.left) { player.x -= 5; } if (data.up) { player.y -= 5; } if (data.right) { player.x += 5; } if (data.down) { player.y += 5; } }); }); setInterval(function() { io.sockets.emit("state", players); }, 1000 / 60);
Давайте разберёмся с этим кодом. Вы будете хранить информацию о всех подключенных пользователях в виде объектов JSON. Так как у каждого подключённого к серверу сокета есть уникальный id, клавиша будет представлять собой id сокета подключённого игрока. Значение же будет другим объектом JSON, содержащим координаты x и y .
Когда сервер получит сообщение о том, что присоединился новый игрок, он добавит новый вход в объект игроков при помощи id сокета, который будет в этом сообщении. Когда сервер получит сообщение о движении, то обновит информацию об игроке, который связан с этим сокетом, если он существует.
io.sockets.emit() - это запрос, который будет отправлять сообщение и данные ВСЕМ подключённым сокетам. Сервер будет отправлять это состояние всем подключённым клиентам 60 раз в секунду.
На данном этапе клиент ещё ничего не делает с этой информацией, поэтому добавьте со стороны клиента обработчик, который будет отображать данные от сервера в Canvas .
Var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); socket.on("state", function(players) { context.clearRect(0, 0, 800, 600); context.fillStyle = "green"; for (var id in players) { var player = players; context.beginPath(); context.arc(player.x, player.y, 10, 0, 2 * Math.PI); context.fill(); } });
Этот код обращается к id Canvas (#canvas) и рисует там. Каждый раз, когда от сервера будет поступать сообщение о состоянии, данные в Canvas будут обнуляться, и на нём в виде зеленых кружков будут заново отображаться все игроки.
Теперь каждый новый игрок сможет видеть состояние всех подключенных игроков на Canvas . Запустите сервер командой node server.js и откройте в браузере два окна. При переходе по ссылке http://localhost:5000 вы должны будете увидеть нечто похожее:
Вот и всё! Если у вас возникли проблемы, посмотрите архив с исходным кодом .
Некоторые тонкостиКогда будете разрабатывать более функциональную игру, целесообразно разделить код на несколько файлов.
Такие многопользовательские игры - отличный пример архитектуры MVC (модель-представление-контроллер). Вся логическая часть должна обрабатываться на сервере, а всё, что должен делать клиент - это отправлять входные пользовательские данные на сервер и отображать информацию, которую получает от сервера.
Однако в этом демо-проекте есть несколько недостатков. Обновление игры связано со слушателем сокета. Если бы я хотел повлиять на ход игры, то мог бы написать в консоли браузера следующее:
While (true) { socket.emit("movement", { left: true }); }
Теперь данные о движении будут отправляться на сервер в зависимости от характеристик компьютера более 60 раз в секунду. Это приведёт к тому, что игрок будет передвигаться невероятно быстро. Так мы переходим к концепции определения полномочного сервера.
Ни на каком этапе клиент не должен контролировать какие-либо данные на сервере. Например, никогда не нужно размещать на сервере код, который позволит клиенту определять своё положение/здоровье на основе данных, которые передаются через сокет, так как пользователь сможет легко подделать сообщение, исходящее из сокета, как показано выше.
Когда я создавал свою первую многопользовательскую игру, я написал код так, что игрок мог стрелять тогда, когда отправлялось сообщение о стрельбе, которое со стороны клиента было связано с нажатием кнопки мыши. Умелый игрок мог воспользоваться этим, вставив строчку на JavaScript, очень похожую на ту, что упоминалась выше, чтобы заполучить почти неограниченную скорость стрельбы.
Лучшая аналогия, которую я могу привести, заключается в том, что клиенты должны посылать на сервер только информацию о своих намерениях, которые затем будут обрабатываться и использоваться для изменения состояния игроков, если они валидны.
В идеале циклы обновлений как у клиента, так и на сервере не должны зависеть от сокетов. Попытайтесь сделать так, чтобы обновления игры находились за пределами блока socket.on() . В противном случае вы можете получить много странных нелогичных действий из-за того, что обновление игры будет связано с обновлением сокета.
Кроме того, старайтесь избегать такого кода:
SetInterval(function() { // код... player.x += 5; // код... }, 1000 / 60);
В этом отрезке кода обновление координаты х для игрока связано с частотой смены кадров в игре. SetInterval() не всегда гарантирует соблюдение интервала, вместо этого напишите нечто подобное:
Var lastUpdateTime = (new Date()).getTime(); setInterval(function() { // код... var currentTime = (new Date()).getTime(); var timeDifference = currentTime - lastUpdateTime; player.x += 5 * timeDifference; lastUpdateTime = currentTime; }, 1000 / 60);
Это не так изящно, зато обеспечит более плавную и последовательную работу. Усложните демо-проект и попробуйте сделать так, чтобы обновление осуществлялось согласно времени, а не частоте смены кадров. Если не захотите на этом останавливаться, попытайтесь создать на сервере физический движок, который будет управлять движениями игроков.
Также можно сделать так, чтобы из игры удалялись отключенные игроки. Когда сокет отключается, автоматически отправляется сообщение о разъединении. Это можно прописать так:
Io.on("connection", function(socket) { // обработчик событий... socket.on("disconnect", function() { // удаляем отключившегося игрока }); }); ,
