Создаем многопользовательскую браузерную игру. Часть вторая. Разбираем игровой фреймворк


Оглавление (нажмите, чтобы открыть):

Frontender Magazine

С выходом Ouya, Xbox One и PS4 в этом году диванно-консольный гейминг становится популярным как никогда. Несмотря на распространение многопользовательских игр, доступных на мобильных устройствах, и даже на распространение опыта многопользовательского взаимодействия в вебе, все это не заменит удовольствия от игры бок о бок с другом. Работая с Node.js и библиотекой Socket.IO, я обнаружил прекрасную возможность не только изучить что-то новое, но также поэкспериментировать с использованием веб-технологий и различных устройств (мобильные гаджеты и ноутбуки) для воссоздания опыта игр на приставках.

Эта статья даст вам краткий обзор фундаментальных основ работы библиотеки Socket.IO в контексте разработки многопользовательской игры в слова, использующей несколько экранов. Браузер на устройстве с большим экраном, таком как телевизор или компьютер, будет «приставкой», а мобильный браузер будет выступать в роли контроллера. Socket.IO и Node.js обеспечат необходимую связь между браузерами для передачи данных и обеспечения игрового взаимодействия в реальном времени.

Игра «Анаграмматикс»

Игра представляет из себя соревнование по разгадыванию анаграмм — слов, при перестановке букв в которых образуются новые слова. Геймплей достаточно прост — на основном экране появляется слово, а на каждом из контроллеров-смартфонов наших игроков появляется список похожих по написанию слов. Одно из появившихся слов — анаграмма к слову на основном экране. Игрок, который первым правильно выбрал анаграмму, получает очки за раунд. Выбор неправильного слова уменьшает суммарное количество очков игрока. После завершения 10 раундов побеждает игрок, набравший большее количество очков.

Перед тем, как скачать исходный код, чтобы поиграть самостоятельно, убедитесь, что у вас установлен Node.js. Откройте репозиторий игры на GitHub, клонируйте его с помощью команды git clone https://github.com/ericterpstra/anagrammatix.git и затем выполните команду npm install , чтобы скачать и установить все зависимости (Socket.IO и Express). После этого выполните node index.js , для запуска сервера игры. Чтобы начать непосредственно саму игру, откройте в браузере адрес https://localhost:8080 . Для проверки возможности многопользовательской игры вам потребуется открыть несколько окон браузера.

Если вы хотите поиграть, используя мобильные устройства, вам необходимо узнать IP-адрес вашего компьютера в локальной сети. Само собой, мобильные устройства должны находиться в той же сети, что и компьютер с запущенным приложением игры. Для начала игры просто замените ‘localhost’ в адресной строке на IP-адрес компьютера (например, `https://192.168.0.5:80801). Если вы используете Windows, то вам необходимо отключить фаерволл Windows или открыть порт 8080.

Используемые технологии

Для реализации игры «Анаграмматикс» используются только HTML, CSS и JavaScript. Чтобы сохранить код игры насколько это возможно простым, использование различных сторонних библиотек и фреймворков было сведено к минимуму. Основные технологии, используемые в игре, перечислены ниже:

  • Node.js — используется для создания серверной части игры и позволяет использовать фреймворк Express и библиотеку Socket.IO. Кроме того, часть логики игры реализуется на стороне сервера и оформлена в виде отдельного Node-модуля, о котором мы поговорим позже.
  • Express — сам по себе Node.js удовлетворяет многим требованиям, предъявляемым при разработке современных веб-приложений. Однако, добавление библиотеки Express позволит нам оптимизировать отдачу статичных файлов (HTML, CSS и JavaScript) пользователям. Мы также используем Express для логирования и реализации окружения, совместимого с Socket.IO.
  • Socket.IO — эта библиотека позволяет очень просто реализовать обмен данными между браузером и сервером (в данном случае представляющим собой связку Node.js и Express) в реальном времени. Socket.IO использует протокол веб-сокетов, если он поддерживается браузером по умолчанию. Старые браузеры, такие как IE9, не поддерживают этот протокол — в этом случае Socket.IO будет использовать сокеты через Flash или AJAX-технологию long-polling.
  • Клиентский JavaScript – для простоты, на фронтенде используется несколько JS-библиотек:
    • jQuery – в основном используется для обработки событий и манипуляций с DOM.
    • TextFit — небольшая библиотека, изменяющая размер текста таким образом, чтобы он заполнял свой контейнер. Использование этой библиотеки позволяет заполнять браузер главным экраном «Анаграмматикс» целиком, вне зависимости от ширины экрана устройства.
    • FastClick.js – небольшая библиотека, убирающая задержку в 300 миллисекунд между тапом по экрану и обработкой события на мобильных устройствах. Это позволит сделать наш игровой контроллер более отзывчивым.
  • CSS – обычный CSS для того, что бы добавить стиль и немного красок в нашу игру.

Архитектура

В целом, архитектура игры соответствует рекомендованной конфигурации по использованию Socket.IO вместе с Express, доступной на сайте Socket.IO. В этой конфигурации Express используется для обработки HTTP-запросов, отправляемых в Node-приложение. Модуль Socket.IO подключается к Express и начинает отслеживать подключения к тому же порту, ожидая входящих websocket-соединений.

Когда браузер подключается к веб-приложению, оно возвращает ему index.html и все необходимые для начала работы JavaScript- и CSS-файлы. Клиентская часть приложения подключается к Socket.IO и создаёт websocket-соединение. Каждое websocket-соединение обладает уникальным идентификатором для того, чтобы Node и Socket.IO могли работать с несколькими соединениями и отправлять данные соответствующему клиенту.

Разработка серверной части

Модули Express и Socket.IO не входят в Node.js. Они являются внешними зависимостями, которые должны быть загружены и установлены отдельно. Менеджер пакетов Node.js (npm) сделает это за нас при запуске команды npm install . То же самое он сделает со всеми зависимостями, перечисленными в файле package.json . Файл package.json вы можете найти в корневой директории проекта. Он содержит определяющий зависимости проекта JSON-объект:

Файл index.js в корневой директории проекта — это точка входа для всего приложения. Первые несколько строк инициализируют все необходимые модули. Express настроен для обеспечения доступа к статическим файлам, а модуль Socket.IO настроен так, чтобы отслеживать подключения к тому же порту, что и Express. Следующие строки — основа приложения, необходимая для работы сервера.

Весь код серверной части игры вынесен в отдельный файл agxgame.js. Этот файл подключается в приложение в качестве модуля Node с помощью следующего фрагмента кода: var agx = require(‘./agxgame’) . Когда клиент подключается к приложению с помощью Socket.IO, модуль agxgame должен выполнять функцию initGame . За это отвечает следующий фрагмент кода:

Функция initGame в модуле agxgame также добавит слушатель событий:

Здесь gameSocket — это объект, созданный с помощью Socket.IO, чтобы инкапсулировать взаимодействие относительно уникального подключения через сокет между сервером и браузером. Функция on добавляет слушатель для определенного события и привязывает к нему функцию. Когда браузер передает событие hostCreateNewGame через веб-сокет, библиотека Socket.IO вызывает функцию hostCreateNewGame . Имена событий и функций не обязательно должны быть такими, мы назвали их так для наглядности.

Разработка клиентской части

Когда браузер подключается к игре, сервер отдает ему файл index.html из директории public , который содержит пустой div с id gameArea. В index.html также содержится несколько HTML сниппетов внутри тегов . Эти фрагменты помещаются внутрь gameArea в зависимости от того, что необходимо отобразить на экране в данный момент.

Для подключения браузера к серверу Socket.IO требуется клиентская библиотека Socket.io. Так как мы используем Socket.IO через Express, мы можем использовать получить файл библиотеки с сервера с помощью следующего тега:

Большая часть логики игры и весь клиентский код расположен в файле app.js. Код заключен в самовызывающуюся функцию и организован с применением паттерна объектно-буквенного обозначения пространства имен. Это означает, что все переменные и функции, используемые в приложении, являются свойствами объектов IO и App . Структура клиентского кода выглядит примерно так:

При первом запуске приложения после окончания загрузки документа вызываются 2 функции: IO.init() и App.init() . Первая настраивает подключение через Socket.IO, вторая показывает стартовый экран игры в браузере.

Следующая строка в IO.init() инициализирует подключение через Socket.IO между браузером и сервером:

Вслед за этим вызывается функция IO.bind() , которая добавляет слушатель событий Socket.IO на клиенте. Этот слушатель работает аналогично слушателю на стороне сервера, но в обратном направлении. Обратите внимание на следующий пример:

В приведенном фрагменте IO — это объект-контейнер, используемый для организации кода. Объект socket создается библиотекой Socket.IO и содержит свойства и методы для подключения с использованием вебсокетов, а функция on добавляет слушатель события. Когда сервер передает событие playerJoinedRoom , на клиенте выполняется функция IO.playerJoinedRoom .

Коммуникация между клиентом и сервером

Геймплей «Анаграмматикс» достаточно прост. Здесь нет большого количества файлов, нет графики или анимации, и нет ничего кроме нескольких слов на экране. То, что в действительности делает это приложение настоящей интерактивной игрой и (я надеюсь) добавляет веселья, так это взаимодействие между 3 окнами браузера. Важно отметить, что эти 3 браузера не связываются напрямую между собой, а отправляют данные на сервер, который их обрабатывает и возвращает ответ соответствующему браузеру. Каждое из событий подразумевает передачу данных, поэтому информация из клиентского браузера, такая, как имя игрока и выбранный ответ, должна передаваться на сервер, а затем другим клиентам.

Возможно, проследить за данными, передаваемыми от клиента серверу и обратно, довольно сложно, особенно при одновременном подключении сразу 3 клиентов. К счастью, в Google Chrome есть отличный инструмент, который нам в этом поможет. Если вы откроете панель инструментов разработчика в Chrome и перейдете на вкладку «Network» (Сеть), вы сможете следить за всем трафиком, идущим через вебсокеты в этом отдельном окне, выбрав пункт WebSockets на панели инструментов внизу. На открывшейся панели вебсокетов, в левой колонке, появляется список соединений. Кликнув на соединении в списке, и затем кликнув на вкладку Frames, вы увидите список сеансов обмена данными, которые производились через это отдельное соединение. Обратите внимание на следующий пример:

Наибольший интерес для нас представляет первая колонка на вкладке Frames. Она показывает данные, которые прошли через вебсокет-соединение. На изображении выше каждый объект в колонке Data представляет передаваемые данные и названия событий, которые произошли. Каждый объект имеет свойства name и args . Значение свойства name — это название прозошедшего события, например, playerJoinedRoom или hostCheckAnswer . Значение свойства args содержит массив данных, передаваемых между клиентом и сервером.

Вкладка «Frames» в инструментах разработчика Chrome вместе с использованием console.log() позволяют проще отлаживать приложение и следить за событиями и передачей данных между клиентом и сервером.

Геймплей

Теперь, когда мы понимаем принципы организации архитектуры игры и то, как она реализована, давайте перейдем к геймплею и разберем по частям процесс одной игровой сессии в «Анаграмматикс».

Пользователь открывает браузер и переходит по адресу приложения

Node.js и Express отдают файлы из директории public. Файл index.html загружается вместе с app.js и необходимыми клиентскими JavaScript-библиотеками.

В public/app.js вызываются функциии IO.init() и App.init() . Инициализируется клиентская часть игры. Добавляются слушатели событий для работы с Socket.IO. Происходит инициализация кода для загрузки стартового экрана. Библиотека FastClick загружается для ускорения обработки тач-событий. Следующий фрагмент кода внутри функции App.showInitScreen переместит в div gameArea HTML-фрагмент intro-screen-template , расположенный в index.html, тем самым показав его пользователю.

Функция App.bindEvents добавит несколько обработчиков события клика для кнопок, которые появляются на экране. Следующий фрагмент кода добавляет обработчики события клика для кнопок «Создать» и «Присоединиться», которые появляются на стартовом экране.

Пользователь кликает по кнопке «Создать»

На клиенте срабатывает событие hostCreateNewGame . Функция App.Host.onCreateClick выполняет всего одно действие — передает событие на сервер, чтобы сообщить, что необходимо создать новую игру: IO.socket.emit(‘hostCreateNewGame’) .

Сервер создает новое игровое лобби и возвращает идентификатор лобби клиенту. Концепция игрового лобби уже реализована в Socket.IO. Лобби объединяет определенные клиентские подключения и обеспечивает передачу событий только тем клиентам, которые в данный момент «находятся» в одном лобби. Данная технология отлично подходят для создания отдельных игровых партий при использовании одного сервера. Без неё будет гораздо сложнее определить, какие игроки и хосты (основные экраны) должны быть соединены друг с другом, когда некоторое количество людей пытаются запустить несколько игр на одном сервере.

Следующая функция внутри agxgame.js создаст новое игровое лобби:

В приведенном фрагменте кода this — это уникальный объект Socket.IO, хранящий информацию о подключении клиента. Функция join «переносит» подключение клиента в указанное лобби. В данном случае его идентификатор определяется путем генерации случайного числа в диапазоне от 1 до 100000. Идентификатор лобби отправляется обратно клиенту и используется в качестве уникального идентификатора для игровой сессии.

Клиент (основной экран) получает с сервера событие newGameCreated и отображает идентификатор лобби как идентификатор игры на экране. Чтобы показать сгенерированный случайный идентификатор игры на экране, на клиенте (внутри public/app.js) вызываются функции App.Host.gameInit и App.Host.displayNewGameScreen . Идентификатор игры и идентификатор лобби Socket.IO совпадают.

Игрок подключается к игре и нажимает «Присоединиться»

В этот момент отображается HTML-шаблон join-game-template . Когда открывается новое окно, клиент, как и прежде, подключается через Socket.IO. Если игрок нажимает на кнопку «Присоединиться», появляется экран, на котором игроку необходимо ввести имя и идентификатор игры, к которой он хочет присоединиться.

Первый игрок нажимает на кнопку «Старт»

Имя игрока и идентификатор игры отправляются на сервер. Когда игрок нажимает на кнопку «Старт» после ввода его (или ее) имени и соответствующего идентификатора игры, эта информация собирается в один объект data и отправляется на сервер. За это отвечает следующий фрагмент кода в функции App.Player.onPlayerStartClick :

На сервере игрок переносится в игровое лобби. Когда сервер получает событие playerJoinGame , он вызывает функцию playerJoinGame (см. agxgame.js). Эта функция переносит сокет-подключение пользователя в выбранное игроком лобби. Затем она отправляет в ответ данные (имя игрока и идентификатор сокета) клиентам в этом лобби, так основной экран получает информацию о подключенных игроках.

В приведенном ниже фрагменте кода (этот код выполняется внутри функции playerJoinGame ) gameSocket относится к глобальному объекту Socket.IO. Он позволяет осуществлять поиск по всем созданным на сервере лобби. Если указанное лобби найдено, игра продолжается, иначе подключенный игрок получает сообщение об ошибке.

Игрок видит экран ожидания. Когда клиент получает событие playerJoinedRoom , на экране отображается сообщение о подключении пользователя к игре (см. скриншот выше).

Другой игрок подключается и нажимает «Присоединиться»

Повторяются те же действия, что и в случае с первым игроком до момента получения с сервера события playerJoinedRoom . При получении клиентом, который является основным экраном, события playerJoinedRoom вызывается функция App.Host.updateWaitingScreen . Эта функция обрабатывает информацию о количестве игроков в лобби. Если игроков двое, клиент основного экрана отправляет событие hostRoomFull .

Начинается обратный отсчет

Сервер получает событие hostRoomFull и отправляет событие beginNewGame . Событие beginNewGame отправляется сервером основному экрану и двум подключенным игрокам в определенном лобби с помощью следующего кода:

Обратите внимание на то, что идентификатор игры, который видят игроки, и идентификатор лобби Socket.IO, в которой хранятся подключения клиентов, совпадают. Функция in указывает на определенное лобби, а in(. ).emit() отправляет событие только тем пользователям, которые находятся в этом лобби.

Хост начинает обратный отсчет, а игрокам отправляется сообщение «Приготовьтесь». На клиенте событие beginNewGame является сигналом к началу новой игры. На клиенте, который является основным экраном, выполняется функция App.Host.gameCountdown , которая загружает шаблон host-game-template и показывает 5-секундный таймер обратного отсчета. На экранах игроков функция App.Player.gameCountdown просто показывает сообщение «Приготовьтесь».

Игра начинается

Когда обратный отсчет заканчивается, хост (клиент основного экрана) сообщает серверу о том, чтоб необходимо начать игру. Так как хост не может напрямую общаться с игроками, он должен сообщить серверу, что обратный отсчет завершен. Когда обратный отсчет достигает значения 0, хост передает событие hostCountdownFinished . Сервер обрабатывает это событие и начинает игру путем вызова функции sendWord .

Функция sendWord подготавливает данные для следующего раунда игры. В данном случае это первый раунд. Функция sendWord состоит из двух частей: собирающей данные для раунда и передающей эти данные на основной экран и игрокам в лобби.

Функция getWordData занимается тяжелой работой по выбору слов для раунда и подготовкой их к отправке клиентам. Данные для каждого раунда хранятся в следующем формате:

Перед каждым раундом массив words перемешивается. Первый элемент выбирается в качестве слова для отображения на экране. Второй элемент выбирается в качестве правильного ответа. Массив decoys также перемешивается, и первые 5 элементов добавляются в качестве неправильных ответов.

Затем правильный ответ вставляется в случайное место в списке неправильных ответов. Эти данные отправляются обратно клиенту в следующем формате (см. функцию getWordData в agxgame.js):

На основном экране появляется слово. Функция App.Host.newWord выводит слово большими буквами на экране, а также хранит правильный ответ и номер текущего раунда.

Игрокам показывается список слов. Функция App.Player.newWord анализирует список вариантов ответа (который содержит и правильный ответ) и формирует ненумерованный список элементов button для отображения на экранах игроков.

Игрок выбирает вариант ответа

Слово, на кнопку с которым нажал пользователь, отправляется на сервер и передается на клиент основного экрана. Каждая из отображаемых на экране игрока кнопок со словами имеет обработчик клика по ней, который вызывает функцию onPlayerAnswerClick при клике или касании. Следующий фрагмент кода собирает необходимые данные и передает их на сервер:

Событие playerAnswer обрабатывается сервером, и ответ передается на клиент основного экрана. Сервер передает событие hostCheckAnswer , а вместе с ним и ответ пользователя.

Клиент основного экрана проверяет правильность ответа

Клиент основного экрана проверяет ответ пользователя в текущем раунде. Функция App.Host.checkAnswer сначала проверяет, является ли отправленный ответ ответом на текущий раунд. Это помогает избежать проблем с отслеживанием времени, когда оба игрока выбирают правильный ответ сразу же друг за другом. Так как первый игрок выбрал правильный ответ, раунд должен завершиться, и второй игрок не должен получить очки (или штраф) за выбранный вариант.

Если игрок выбрал правильное слово, сумма очков игрока увеличивается, и вызывается событие hostNextRound . Если выбран неправильный ответ, сумма очков игрока уменьшается, и игра продолжается в текущем раунде.

Игра заканчивается, когда использован весь набор слов

Функция hostNextRound определяет, должна ли игра закончиться. Если номер текущего раунда меньше, чем количество элементов в массиве wordPool , то игра продолжается в следующем раунде. Если номер текущего раунда превышает количество доступных слов, то сервер передаст клиентам в комнате событие gameOver .

На основном экране появляется имя победителя. Когда сервер передает событие gameOver , на клиенте вызывается функция App.Host.endGame . Эта функция проверяет, у какого из игроков больше очков. Имя победившего игрока выводится на основной экран.

Значение переменной App.Host.numPlayersInRoom устанавливается в 0 (даже если технически сокет-подключения игроков все еще «находятся» в текущем лобби Socket.IO). Это сделано для того, чтобы позволить игрокам начать новую игру. Флаг App.Host.isNewGame устанавливается в значение true , чтобы показать, что начинается новая игра.

Игроки начинают заново

Игрок нажимает на кнопку «Начать заново», и клиент передает событие playerRestart . Сервер отправляет клиенту основного экрана уведомление о том, что игрок хочет сыграть снова, повторно передав событие playerJoinedRoom . Функция App.Host.updateWaitingScreen проверяет значение флага App.Host.isNewGame , видит, что оно равно true , и выводит на экран шаблон create-game-template , пока другой игрок не подключится к игре.

Мастер Йода рекомендует:  Пентагон заинтересовался атаками на эстонские правительственные сайты

Когда второй игрок нажимает на кнопку «Начать заново», повторяется та же последовательность действий, и игра начинается заново.

Создать игру, Конструкторы игр, Игровые движки, Разработка игр, Игровые ресурсы

Навигация по сайту
Сайт:

  • С чего начать?
  • Онлайн поддержка
  • Главная страница
  • Наши баннеры
  • Каталог новостей

Дополнительно:

  • Блоги пользователей
  • FAQ (Вопросы — Ответы)
  • Видео каталог
  • Фотоальбом
  • Каталог сайтовКаталог игр (на разработке)
  • Мини-чат

Файловый архив:

  • Конструкторы игр
  • Игровые движки
  • Модули для разработки игр
  • HTML5 игровые движки
  • Среды программирования
  • Игры пользователей
  • Исходники и примеры игр
  • Программы пользователей
  • Исходники и примеры ПО
  • Ресурсы для игр
  • Полезный софт
  • Литература по ЯП
  • Литература по созданию игр

Каталог статей:

  • Конструкторы игр
  • Программирование
  • Игровые движки
  • Разработка игр
  • Остальное

Форум:

  • Новые сообщения
  • Разработка игр
  • Конструкторы игр
  • Игровые движки
  • Проекты пользователей
  • Статьи, примеры, исходники
  • Команды разработчиков
  • Программирование
  • Дополнительно
  • Популярные игры
  • Игровые ресурсы

Интересное

Категории раздела
Flash [3]
Scirra Construct [14]
001 Game Maker, Map 001 [0]
3D Game Studio [1]
Blender (Блендер) [1]
Остальное [1]

10 Лучших пользователей

/

Партнеры сайта
.

Создание многопользовательской(online) игры на Game Maker. (часть 1)

! Клиент-сервер — в этой схеме создается сервер игры, к которому подключаются клиенты. Главным выступает сервер, клиенты только отправляют ему данные и получают их, связи между клиентами нет. При использовании данной схемы у сервера появляется возможность перед отправкой данных всем игрокам откорректировать данные. Данная схема является наиболее распространенной, т.к. снимает нагрузку с клиента, переводя всю работу по рассылке данных на сервер.

! Клиент-клиент — один из клиентов запускает игру, после чего остальные игроки подключаются к нему. Происходит обмен данными между клиентами и они узнают информацию друг о друге. В данной схеме каждый клиент отправляет данные остальным сам. Данная схема используется редко, т.к. дает неоправданную нагрузку на клиент игры.

! Game Maker поддерживает следующие типы подключений: IPX, TCP/IP, Modem и Serial.

5 бесплатных open source движков для игр на JavaScript

Если вы только начали программировать и хотите написать мобильную и/или кроссплатформенную игру, беритесь за JS. Связка HTML+JavaScript работает везде. С фреймворками типа Electron на ней даже можно строить десктопные приложения.

Взгляните на 5 движков, с которым работа над игрой — в радость. Все они на момент написания статьи бесплатны и имеют открытый исходный код (open source). А еще — позволяют делать игры для Facebook. У каждого движка есть песочница, чтобы писать и тестировать код онлайн!

Для веб-разработчика создание HTML5-игры — повод ближе узнать Canvas и WebGL, поработать с 2D- и 3D-графикой в браузере. Это еще и урок оптимизации, ведь интерактивные красивости должны съедать как можно меньше памяти.

PixiJS

Эту библиотеку используют в качестве игрового движка, но на самом деле у нее более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Поэтому рекомендую веб-разработчикам присмотреться к Pixi.

Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. Но первый работает заметно быстрее, особенно когда нужно одновременно анимировать сотни и даже тысячи объектов. Скорость достигается за счет того, что WebGL — инструмент низкоуровневый. А значит без дополнительных фреймворков кодить для него трудоемко: нужно прописывать каждую мелочь в управлении текстурами и шейдерами. И здесь на сцену выходит PixiJS, который берет это на себя.

Тест производительности — разработчики назвали его Bunnymark. Вы можете сотнями добавлять на сцену шустрых разноцветных кроликов и следить, как меняется кадровая частота (FPS) — то есть как быстро идет рендеринг. На слабеньком нетбуке я получила частоту 29–30 кадров в секунду даже при безостановочном насыпании 25 000 кроликов на сцену. При этом анимация уже добавленных прыгунов быстро восстанавливалась до скорости 30 кадров секунду даже при наличии 75 000 мелких кролей на экране. На хорошей машине можно получить FPS на уровне 40–60+. Показатели зависят от видеокарты и браузера.

Песочница — интерактивная библиотека, где можно поиграть с заготовками кода. На сайте движка вы найдете более 60 готовых примеров работы с видео, текстом, графическими эффектами, текстурами, спрайтовой и скелетной анимацией. Скачать заготовку можно в один клик. Код подробно откомментирован — все понятно, даже если вы учите JS со вчерашнего дня. Если официальных примеров мало, загляните в папку examples GitHub-репозитория, куда участники сообщества добавляют собственные наработки. При желании можете пополнить ее своим вкладом.

Доступность. В PixiJS есть функции, которые помогают адаптировать игру для людей с нарушениями зрения. Основа доступности — озвучивание экрана и поддержка клавиатурного управления наряду с «мышиным» и тактильным.

Взгляните на эту демку. Вы можете зажигать лампочки кликом мышки по нужной дощечке (вариант для зрячих) или же выбирать дощечки клавишей Tab, а лампочки включать нажатием Enter (вариант для незрячих и слабовидящих).

Исходники на Github.

Сообщество: живое и общительное — обитает в основном на форуме HTML5GameDevs, куда можно обращаться с вопросами.

Плюсы: Стабильно быстрый 2D-рендеринг даже на слабых машинах (при условии, что браузер поддерживает WebGL). Низкоуровневость — ниже только чистый JS, так что работа движка очень прозрачна. Кроссплатформенность, поддержка тачскрина. Удобная песочница, подробная документация на английском языке, понятный вводный курс для новичка. Движок хорош для создания небольших казуальных 2D-игр для мобильных устройств и ПК.

Минусы: в сравнении с движками, заточенными именно под игры, предлагает меньше инструментов «из коробки». Мало руководств на русском языке.

Phaser

Игровой движок для настольной и мобильной разработки на JS и TypeScript. Работает на основе PixiJS — использует его для визуализации сцен. Следовательно, опирается на тот же шустрый WebGL с возможностью отката на Canvas в устаревших браузерах.

Сейчас параллельно существуют две версии движка: Phaser 2 и Phaser 3. «Трешка» увидела свет 13 февраля 2020 года. По заявлению разработчиков, они полностью переписали движок, чтобы придать ему модульную структуру и сделать data-ориентированным. Знакомство с новой версией пока осложняется нехваткой документации и действующих примеров. Но работа в этом направлении идет полным ходом: уже есть базовое руководство, урок «Делаем первую игру на Phaser 3» и экспериментальная лаборатория примеров. Примеры пока с дисклеймером «Извините, может не работать». Поэтому когда люди сегодня говорят о Phaser, они обычно имеют в виду Phaser 2.

Песочница отличается фантастическим числом интерактивных примеров и заготовок — на момент написания статьи их 685! Это гораздо больше, чем у PixiJS и большинства других движков. Код можно быстро скачать в виде .zip- или .tar.gz-файлов или клонировать в GitHub. Также доступны такие фишки, как мобильный предпросмотр сцены и сменные темы оформления для редактора кода.

Игровая витрина с проектами пользователей — быстрый способ оценить возможности движка и вдохновиться на что-то свое. Можно отдельно вывести игры с пометкой STAFF PICK («Выбор команды [Phaser]»).

Исходники: на GitHub.

Сообщество: большое и активное. Для общения есть каналы в Slack и Discord, а также ветки по Phaser 2 и 3 на форуме HTML5GameDevs. Новости можно узнавать в Twitter и из еженедельной рассылки. На русском языке уроков и статей хоть и не море, но больше, чем о PixiJS. Например, на хабре есть любопытные статьи «Разработка браузерной онлайн-игры» и «Обучающая игра за неделю, или попытка таймкиллера по английскому».

Плюсы: перспективный движок, оптимизированный под мобильные платформы. Очень прост в освоении благодаря пошаговым инструкциям для новичка. Тонны примеров, постоянно выходят новые уроки и руководства.

Минусы: последняя версия — Phaser 3 — еще сырая. Плагины и утилиты к движку стоят в среднем 20$ и поддерживают только Phaser 2. У второй версии движка есть неочевидные настройки, которые трудно изменить — например, скорость движения объектов автоматически подстраивается под FPS (см. статью «История участия в Game Jam» на хабре).

Babylon.js

Для разработки браузерных 3D-игр этот фреймворк так же значим, как Pixi — для 2D. Работа с мешами, освещением, материалами, физикой, позиционным звуком — вот это все — продумано, задокументировано, снабжено интерактивными примерами. С Babylon можно делать игры для Android, iOS и десктопных браузеров. Наряду с JS поддерживается TypeScript.

Движок дружелюбен к новичкам, но без сюсюканья: вас не заманивают красивыми картинками. Первое, что радует глаз в разделе документации — интерактивный Get Started, который меняется в зависимости от выбора языка (JS/TS). Вы можете сходу оценить список возможностей и доступных расширений, поиграть с примерами, посмотреть видеоуроки — например, вводное занятие для начинающих (на английском с французским акцентом).

Для первого знакомства отлично подойдет пошаговый текстовый курс Babylon 101. Но это не для тех, кто хочет «мегаигру за 30 минут». Нужно быть готовым читать, вникать, экспериментировать.
У Babylon есть свой онлайн-редактор 3D-сцен, который подробно описан в разделе Resources (тег Editor). Там же вы узнаете, как подружить Babylon.js с Unity, Blender, Ionic Angular и ReactJS.

Песочница: у движка очень удобный редактор кода (Playground) с мгновенным предпросмотром и прослушиванием (если речь о звуке, в том числе позиционном). Здесь можно писать с нуля или редактировать код примеров и заготовок. Еще одна фишка песочницы — компонент Inspector для быстрой отладки кода.Также есть Sandbox — онлайн-просмотрщик 3D-сцен и моделей, куда можно перетаскивать файлы с жесткого диска.

Игровая витрина на главной странице движка содержит более 100 красочных сцен, игр и демонстраций.

Исходники: на GitHub.

Сообщество: активное — новые сообщения на форуме появляются каждый час. В Рунете по движку много уроков, статей и переводов. Пример с хабра: «Создание шейдеров на основе Babylon.js и WebGL: теория и примеры».

Плюсы: мощный, бурно развивающийся движок со множеством онлайн-инструментов, готовых рецептов и ресурсов. Среди расширений — 60 заготовок для создания эффектов (огня, травы, частиц, меха и других), генерации ландшафта, работы с GUI и прочего. Команда регулярно фиксит баги, найденные сообществом.

Минусы: требует времени на изучение, бывают ошибки при импорте 3D-моделей из Blender и Autodesk 3ds Max.

Egret Engine

Если вы хотите делать игры для Facebook, знайте, что Egret — в числе официально рекомендованных для этого движков. Китайский фреймворк позволяет создавать кроссплатформенные 2D-игры, которые адаптируются под размер экрана.

Лично мне нравится, что документация, инструкции по установке, примеры и справка по API доступны с одной страницы. Все это, включая комментарии в коде, добросовестно переведено на английский. НО! Языковой ступор настигает при запуске среды Egret Launcher — интерфейс на китайском. Спасают англоязычные руководства.

Параллельно с развитием 2D-движка готовится к релизу Egret Engine 3D. Пока оценить работу с трехмерной графикой можно только по приглашениям в режиме закрытого бета-теста. Из громких обещаний 3D-версии — плагин, конвертирующий заготовки из Unity 4 и 5 в сцены HTML5.

Песочница: простая и удобная — с

50 примерами, предпросмотром на экране смартфона, возможностью быстро скачать свой код или сбросить изменения. Каждый пример также доступен по QR-коду.

Игровая витрина: около 20 разношерстных проектов, которые открываются по клику или QR, плюс еще десятка красочных мобильных игр — только по QR. Все на китайском, но казуалки интуитивно понятны (например, «Веселая Кухня»), чего не скажешь о карточной игре, комиксе-слайдере и сюрреалистическом непонятно-чем.

Исходники: на GitHub.

Сообщество: По сведениям разработчиков, 75% китайских игроделов, работающих с HTML5, используют Egret. Среда выполнения Egret-приложений за время существования движка была установлена более чем на 500 миллионах мобильных устройств. В Twitter и Facebook новости движка появляются минимум пару раз в месяц. На GitHub можно наблюдать жаркие дискуссии участников проекта — на китайском.

Плюсы: регулярные обновления, совместимость с инструментами Egret (визуальным редактором кода Egret Wing, анимационной платформой DragonBones, менеджером игровых ресурсов ResDepot и другими). Есть архив старых версий движка с описанием изменений на английском.

Минусы: интерфейс лаунчера и игр-примеров — на китайском. Лаунчер для Windows работает только с 64-битными системами. Заготовки в песочнице — очень простенькие, пока нет поддержки 3D. Документация или подробное описание на русском отсутствуют — единственная статья вышла на хабре в 2015 году.

LayaAir

Еще один перспективный китайский движок с амбициозной задумкой. Позволяет создавать 2D-, 3D-, AR- и VR-игры для Android, iOS, ПК и даже консолей! Да, приложения виртуальной реальности на JS — это неплохо придумано. Кстати, для этого движка можно еще писать на TypeScript и ActionScript.

Фишка в том, что вы пишете код один раз и можете получить результат в виде HTML5, Flash или мобильного приложения. Движок умеет работать с векторной графикой, растровыми шрифтами, скелетной анимацией, частицами, физикой. Еще он совместим с упомянутой выше системой анимации DragonBones. Есть свои средства работы со звуком — на основе OpenAL и HTML5 Audio.

LayaAir использует свой формат 3D-моделей (.lm). На сайте разработчика есть плагин для конвертации игровых объектов Unity3D в .lm-файлы. Об устройстве и настройке 3D-сцены в LayaAir читайте здесь, а о переносе сцен из Unity — тут.

У LayaAir своя IDE со встроенными редакторами кода, UI, сцен, покадровой анимации, частиц. Также в LayaAirIDE есть средства для упаковки игры во Flash или нативное приложение. Минус в том, что часть пунктов интерфейса в среде разработки не переведена. Контекстные меню, некоторые подсказки и названия закладок автоматически переводятся на русский или другой основной язык вашей системы. Сообщения и предупреждения в отладочной консоли — на английском. В итоге получаем такую картинку:

Если вы изначально пишете для мобильных устройств, скачайте набор LayaNative SDK, где есть средства тестирования и пересборки HTML5 для запуска на планшетах и смартфонах.

Есть документация и справка по API на английском. От сайта впечатления неоднозначные — многое переведено, но не сразу находится. Совет: если перевода нет на сайте, ищите его на GitHub — и наоборот. Критически важные разделы, в том числе страница загрузки движка — переведены полностью.

Песочница — более сотни примеров (в основном простеньких). Можно редактировать код «на лету». Интерфейс большей частью переведен на английский, а вот комментарии в коде остались на китайском.

Игровая витрина — в Википедии пишут, что на движке сделана минимум сотня игр. На сайте представлено около 30 мобильных игр в 2D и 3D. К сожалению (для меня), все они на китайском языке и доступны после регистрации в игровой секции одного очень популярного китайского портала. Но есть и хорошие новости. Для оценки производительности в вашем браузере — смотрите демо в 2D, 3D и VR. Также можно заценить простенький шмап.

Сообщество: китайские товарищи общаются на форуме, который работает по принципу «Вопрос–ответ» и более-менее переводится Гугляндексом.

Исходники: на GitHub. Обратите внимание, что свободен только движок LayaAir, а весь фреймворк LayaBox с тонной дополнительных инструментов и примочек имеет лицензию Freeware.

Плюсы: поддержка 3D, виртуальной и дополненной реальности. Возможность создавать нативные приложения. Совместимость с Unity. Набор бесплатных дополнительных инструментов. Движок активно развивается.

Минусы: IDE на китайском (но есть англоязычная справка по настройке), сайт переведен частично и сыроват. Иногда посреди английского мануала тебя направляют в китайскую секцию сайта, хотя есть переведенная. Раздел Developers Community на момент написания статьи не работал. Материалов для новичков маловато: платные онлайн-курсы на китайском не в счет. На русском пока вообще ничего нет.

Что еще почитать/посмотреть о создании игр на JS

Вебинар «Разработка 2D-realtime игры на JavaScript» — работа на чистом JS — без фреймворков.

Вебинар «Основы работы с Immutable.js» — как JS-библиотека для работы с иммутабельными данными помогает делать игры.

Статья «Создаем игру для самых маленьких на Phaser в Intel XDK» — подробно описывает первые шаги в работе с движком, дает советы, где брать ресурсы.

Статья «Трехмерная графика в вебе» — о WebGL и библиотеках для работы с ним.

Статья «Многопользовательский онлайн-шутер на WebGL и asyncio» — клиентская часть на BabylonJS, серверная — на Python.

Если вы только начали программировать и хотите написать мобильную и/или кроссплатформенную игру, беритесь за JS. Связка HTML+JavaScript работает везде. С фреймворками типа Electron на ней даже можно строить десктопные приложения.

Взгляните на 5 движков, с которым работа над игрой — в радость. Все они на момент написания статьи бесплатны и имеют открытый исходный код (open source). А еще — позволяют делать игры для Facebook. У каждого движка есть песочница, чтобы писать и тестировать код онлайн!

Для веб-разработчика создание HTML5-игры — повод ближе узнать Canvas и WebGL, поработать с 2D- и 3D-графикой в браузере. Это еще и урок оптимизации, ведь интерактивные красивости должны съедать как можно меньше памяти.

PixiJS

Эту библиотеку используют в качестве игрового движка, но на самом деле у нее более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Поэтому рекомендую веб-разработчикам присмотреться к Pixi.

Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. Но первый работает заметно быстрее, особенно когда нужно одновременно анимировать сотни и даже тысячи объектов. Скорость достигается за счет того, что WebGL — инструмент низкоуровневый. А значит без дополнительных фреймворков кодить для него трудоемко: нужно прописывать каждую мелочь в управлении текстурами и шейдерами. И здесь на сцену выходит PixiJS, который берет это на себя.

Тест производительности — разработчики назвали его Bunnymark. Вы можете сотнями добавлять на сцену шустрых разноцветных кроликов и следить, как меняется кадровая частота (FPS) — то есть как быстро идет рендеринг. На слабеньком нетбуке я получила частоту 29–30 кадров в секунду даже при безостановочном насыпании 25 000 кроликов на сцену. При этом анимация уже добавленных прыгунов быстро восстанавливалась до скорости 30 кадров секунду даже при наличии 75 000 мелких кролей на экране. На хорошей машине можно получить FPS на уровне 40–60+. Показатели зависят от видеокарты и браузера.

Песочница — интерактивная библиотека, где можно поиграть с заготовками кода. На сайте движка вы найдете более 60 готовых примеров работы с видео, текстом, графическими эффектами, текстурами, спрайтовой и скелетной анимацией. Скачать заготовку можно в один клик. Код подробно откомментирован — все понятно, даже если вы учите JS со вчерашнего дня. Если официальных примеров мало, загляните в папку examples GitHub-репозитория, куда участники сообщества добавляют собственные наработки. При желании можете пополнить ее своим вкладом.

Доступность. В PixiJS есть функции, которые помогают адаптировать игру для людей с нарушениями зрения. Основа доступности — озвучивание экрана и поддержка клавиатурного управления наряду с «мышиным» и тактильным.

Взгляните на эту демку. Вы можете зажигать лампочки кликом мышки по нужной дощечке (вариант для зрячих) или же выбирать дощечки клавишей Tab, а лампочки включать нажатием Enter (вариант для незрячих и слабовидящих).

Исходники на Github.

Сообщество: живое и общительное — обитает в основном на форуме HTML5GameDevs, куда можно обращаться с вопросами.

Плюсы: Стабильно быстрый 2D-рендеринг даже на слабых машинах (при условии, что браузер поддерживает WebGL). Низкоуровневость — ниже только чистый JS, так что работа движка очень прозрачна. Кроссплатформенность, поддержка тачскрина. Удобная песочница, подробная документация на английском языке, понятный вводный курс для новичка. Движок хорош для создания небольших казуальных 2D-игр для мобильных устройств и ПК.

Минусы: в сравнении с движками, заточенными именно под игры, предлагает меньше инструментов «из коробки». Мало руководств на русском языке.

Phaser

Игровой движок для настольной и мобильной разработки на JS и TypeScript. Работает на основе PixiJS — использует его для визуализации сцен. Следовательно, опирается на тот же шустрый WebGL с возможностью отката на Canvas в устаревших браузерах.

Сейчас параллельно существуют две версии движка: Phaser 2 и Phaser 3. «Трешка» увидела свет 13 февраля 2020 года. По заявлению разработчиков, они полностью переписали движок, чтобы придать ему модульную структуру и сделать data-ориентированным. Знакомство с новой версией пока осложняется нехваткой документации и действующих примеров. Но работа в этом направлении идет полным ходом: уже есть базовое руководство, урок «Делаем первую игру на Phaser 3» и экспериментальная лаборатория примеров. Примеры пока с дисклеймером «Извините, может не работать». Поэтому когда люди сегодня говорят о Phaser, они обычно имеют в виду Phaser 2.

Песочница отличается фантастическим числом интерактивных примеров и заготовок — на момент написания статьи их 685! Это гораздо больше, чем у PixiJS и большинства других движков. Код можно быстро скачать в виде .zip- или .tar.gz-файлов или клонировать в GitHub. Также доступны такие фишки, как мобильный предпросмотр сцены и сменные темы оформления для редактора кода.

Игровая витрина с проектами пользователей — быстрый способ оценить возможности движка и вдохновиться на что-то свое. Можно отдельно вывести игры с пометкой STAFF PICK («Выбор команды [Phaser]»).

Исходники: на GitHub.

Сообщество: большое и активное. Для общения есть каналы в Slack и Discord, а также ветки по Phaser 2 и 3 на форуме HTML5GameDevs. Новости можно узнавать в Twitter и из еженедельной рассылки. На русском языке уроков и статей хоть и не море, но больше, чем о PixiJS. Например, на хабре есть любопытные статьи «Разработка браузерной онлайн-игры» и «Обучающая игра за неделю, или попытка таймкиллера по английскому».

Плюсы: перспективный движок, оптимизированный под мобильные платформы. Очень прост в освоении благодаря пошаговым инструкциям для новичка. Тонны примеров, постоянно выходят новые уроки и руководства.

Минусы: последняя версия — Phaser 3 — еще сырая. Плагины и утилиты к движку стоят в среднем 20$ и поддерживают только Phaser 2. У второй версии движка есть неочевидные настройки, которые трудно изменить — например, скорость движения объектов автоматически подстраивается под FPS (см. статью «История участия в Game Jam» на хабре).

Babylon.js

Для разработки браузерных 3D-игр этот фреймворк так же значим, как Pixi — для 2D. Работа с мешами, освещением, материалами, физикой, позиционным звуком — вот это все — продумано, задокументировано, снабжено интерактивными примерами. С Babylon можно делать игры для Android, iOS и десктопных браузеров. Наряду с JS поддерживается TypeScript.

Движок дружелюбен к новичкам, но без сюсюканья: вас не заманивают красивыми картинками. Первое, что радует глаз в разделе документации — интерактивный Get Started, который меняется в зависимости от выбора языка (JS/TS). Вы можете сходу оценить список возможностей и доступных расширений, поиграть с примерами, посмотреть видеоуроки — например, вводное занятие для начинающих (на английском с французским акцентом).

Для первого знакомства отлично подойдет пошаговый текстовый курс Babylon 101. Но это не для тех, кто хочет «мегаигру за 30 минут». Нужно быть готовым читать, вникать, экспериментировать.
У Babylon есть свой онлайн-редактор 3D-сцен, который подробно описан в разделе Resources (тег Editor). Там же вы узнаете, как подружить Babylon.js с Unity, Blender, Ionic Angular и ReactJS.

Песочница: у движка очень удобный редактор кода (Playground) с мгновенным предпросмотром и прослушиванием (если речь о звуке, в том числе позиционном). Здесь можно писать с нуля или редактировать код примеров и заготовок. Еще одна фишка песочницы — компонент Inspector для быстрой отладки кода.Также есть Sandbox — онлайн-просмотрщик 3D-сцен и моделей, куда можно перетаскивать файлы с жесткого диска.

Игровая витрина на главной странице движка содержит более 100 красочных сцен, игр и демонстраций.

Исходники: на GitHub.

Сообщество: активное — новые сообщения на форуме появляются каждый час. В Рунете по движку много уроков, статей и переводов. Пример с хабра: «Создание шейдеров на основе Babylon.js и WebGL: теория и примеры».

Плюсы: мощный, бурно развивающийся движок со множеством онлайн-инструментов, готовых рецептов и ресурсов. Среди расширений — 60 заготовок для создания эффектов (огня, травы, частиц, меха и других), генерации ландшафта, работы с GUI и прочего. Команда регулярно фиксит баги, найденные сообществом.

Минусы: требует времени на изучение, бывают ошибки при импорте 3D-моделей из Blender и Autodesk 3ds Max.

Egret Engine

Если вы хотите делать игры для Facebook, знайте, что Egret — в числе официально рекомендованных для этого движков. Китайский фреймворк позволяет создавать кроссплатформенные 2D-игры, которые адаптируются под размер экрана.

Лично мне нравится, что документация, инструкции по установке, примеры и справка по API доступны с одной страницы. Все это, включая комментарии в коде, добросовестно переведено на английский. НО! Языковой ступор настигает при запуске среды Egret Launcher — интерфейс на китайском. Спасают англоязычные руководства.

Параллельно с развитием 2D-движка готовится к релизу Egret Engine 3D. Пока оценить работу с трехмерной графикой можно только по приглашениям в режиме закрытого бета-теста. Из громких обещаний 3D-версии — плагин, конвертирующий заготовки из Unity 4 и 5 в сцены HTML5.


Песочница: простая и удобная — с

50 примерами, предпросмотром на экране смартфона, возможностью быстро скачать свой код или сбросить изменения. Каждый пример также доступен по QR-коду.

Игровая витрина: около 20 разношерстных проектов, которые открываются по клику или QR, плюс еще десятка красочных мобильных игр — только по QR. Все на китайском, но казуалки интуитивно понятны (например, «Веселая Кухня»), чего не скажешь о карточной игре, комиксе-слайдере и сюрреалистическом непонятно-чем.

Исходники: на GitHub.

Сообщество: По сведениям разработчиков, 75% китайских игроделов, работающих с HTML5, используют Egret. Среда выполнения Egret-приложений за время существования движка была установлена более чем на 500 миллионах мобильных устройств. В Twitter и Facebook новости движка появляются минимум пару раз в месяц. На GitHub можно наблюдать жаркие дискуссии участников проекта — на китайском.

Плюсы: регулярные обновления, совместимость с инструментами Egret (визуальным редактором кода Egret Wing, анимационной платформой DragonBones, менеджером игровых ресурсов ResDepot и другими). Есть архив старых версий движка с описанием изменений на английском.

Минусы: интерфейс лаунчера и игр-примеров — на китайском. Лаунчер для Windows работает только с 64-битными системами. Заготовки в песочнице — очень простенькие, пока нет поддержки 3D. Документация или подробное описание на русском отсутствуют — единственная статья вышла на хабре в 2015 году.

LayaAir

Еще один перспективный китайский движок с амбициозной задумкой. Позволяет создавать 2D-, 3D-, AR- и VR-игры для Android, iOS, ПК и даже консолей! Да, приложения виртуальной реальности на JS — это неплохо придумано. Кстати, для этого движка можно еще писать на TypeScript и ActionScript.

Фишка в том, что вы пишете код один раз и можете получить результат в виде HTML5, Flash или мобильного приложения. Движок умеет работать с векторной графикой, растровыми шрифтами, скелетной анимацией, частицами, физикой. Еще он совместим с упомянутой выше системой анимации DragonBones. Есть свои средства работы со звуком — на основе OpenAL и HTML5 Audio.

LayaAir использует свой формат 3D-моделей (.lm). На сайте разработчика есть плагин для конвертации игровых объектов Unity3D в .lm-файлы. Об устройстве и настройке 3D-сцены в LayaAir читайте здесь, а о переносе сцен из Unity — тут.

У LayaAir своя IDE со встроенными редакторами кода, UI, сцен, покадровой анимации, частиц. Также в LayaAirIDE есть средства для упаковки игры во Flash или нативное приложение. Минус в том, что часть пунктов интерфейса в среде разработки не переведена. Контекстные меню, некоторые подсказки и названия закладок автоматически переводятся на русский или другой основной язык вашей системы. Сообщения и предупреждения в отладочной консоли — на английском. В итоге получаем такую картинку:

Если вы изначально пишете для мобильных устройств, скачайте набор LayaNative SDK, где есть средства тестирования и пересборки HTML5 для запуска на планшетах и смартфонах.

Есть документация и справка по API на английском. От сайта впечатления неоднозначные — многое переведено, но не сразу находится. Совет: если перевода нет на сайте, ищите его на GitHub — и наоборот. Критически важные разделы, в том числе страница загрузки движка — переведены полностью.

Песочница — более сотни примеров (в основном простеньких). Можно редактировать код «на лету». Интерфейс большей частью переведен на английский, а вот комментарии в коде остались на китайском.

Игровая витрина — в Википедии пишут, что на движке сделана минимум сотня игр. На сайте представлено около 30 мобильных игр в 2D и 3D. К сожалению (для меня), все они на китайском языке и доступны после регистрации в игровой секции одного очень популярного китайского портала. Но есть и хорошие новости. Для оценки производительности в вашем браузере — смотрите демо в 2D, 3D и VR. Также можно заценить простенький шмап.

Сообщество: китайские товарищи общаются на форуме, который работает по принципу «Вопрос–ответ» и более-менее переводится Гугляндексом.

Исходники: на GitHub. Обратите внимание, что свободен только движок LayaAir, а весь фреймворк LayaBox с тонной дополнительных инструментов и примочек имеет лицензию Freeware.

Плюсы: поддержка 3D, виртуальной и дополненной реальности. Возможность создавать нативные приложения. Совместимость с Unity. Набор бесплатных дополнительных инструментов. Движок активно развивается.

Минусы: IDE на китайском (но есть англоязычная справка по настройке), сайт переведен частично и сыроват. Иногда посреди английского мануала тебя направляют в китайскую секцию сайта, хотя есть переведенная. Раздел Developers Community на момент написания статьи не работал. Материалов для новичков маловато: платные онлайн-курсы на китайском не в счет. На русском пока вообще ничего нет.

Что еще почитать/посмотреть о создании игр на JS

Вебинар «Разработка 2D-realtime игры на JavaScript» — работа на чистом JS — без фреймворков.

Вебинар «Основы работы с Immutable.js» — как JS-библиотека для работы с иммутабельными данными помогает делать игры.

Статья «Создаем игру для самых маленьких на Phaser в Intel XDK» — подробно описывает первые шаги в работе с движком, дает советы, где брать ресурсы.

Статья «Трехмерная графика в вебе» — о WebGL и библиотеках для работы с ним.

Статья «Многопользовательский онлайн-шутер на WebGL и asyncio» — клиентская часть на BabylonJS, серверная — на Python.

Создание фреймворка. Структура. Урок 1

Дата публикации: 2020-09-15

От автора: приветствую вас, друзья. С этого урока мы с вами начнем создание собственного PHP фреймворка. По итогу мы должны получить вполне функциональное решение, а заодно познакомиться с принципами работы современных PHP фреймворков. В этом уроке мы создадим начальную структуру фреймворка, а также начнем писать класс Router, который будет отвечать за маршрутизацию во фреймворке.

В видео версии урока вы найдете ответы на такие вопросы:

Что такое PHP фреймворк?

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Чем полезен процесс написания собственного фреймворка?

Что такое маршрутизация?

Какова структура адресов фреймворка?

Что такое контроллер и экшен (действие)?

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Создание браузерной игры. Как заработать миллион?

К браузерным играм не привыкли относиться всерьез, но на самом деле – это неплохой бизнес для небольшой команды друзей, у которых нет денег, но есть светлые мысли. А если еще и деньги есть, то тогда все значительно упрощается.

На самом деле создать браузерную онлайн игру может любой, у кого есть желание учиться, но не думайте, что вас ждет легкая прогулка. Даже если вы мастер на все руки (программист и дизайнер в одном флаконе), то придется потратить уйму времени. Если же вы не владеете ни кодом, ни карандашом, то затраты будут финансовыми.

Как создать браузерную игру ничего не изучая?

Ответ – никак. Для начала нужно будет выучить HTML – язык разметки, который работает в связке с каскадной таблицей стилей – CSS. Эти языки располагают текст и изображения на странице, собирая картинку из множества фрагментов. Поскольку вы намерены сделать именно браузерную игру, то ей обязательно понадобится сайт, желательно красивый и функциональный. Поэтому не обойтись без JavaScript – самого простого способа визуализировать вашу игру на стороне геймера. Этот язык позволяет менять местами элементы страницы без ее перезагрузки. По сути, JavaScript управляет элементами CSS и HTML в реальном времени.

Для создания браузерной игры придется выучить HTML, CSS, PHP и JavaScript, так что бессонные ночи вам гарантированы

Язык программирования PHP нужен для создания движка игры. Он используется на сервере для обработки данных, поступающих от разных геймеров. Это – ядро, которое приводит в действие все внутренние механизмы.

Я не хочу ничего учить, но у меня есть деньги

Поздравляем, вы избежали многих проблем. И тут же получили новые. Чтобы сделать браузерную игру хорошего качества (в плохую никто играть не будет) нужно иметь хорошую команду разработчиков, а хорошие спецы стоят денег. Если брать по минимуму, то вам необходимы:

  • Программист – 2 штуки
  • Дизайнер и художник – 2 штуки
  • Гейм-дизайнер – 1 штука
  • Комьюнити-менеджер – 1 штука
  • Гейм-мастер – 1 штука.

Если у вас нет личных знакомств, то придется обращаться к аутсорсингу. Обычно такие ребята трутся на биржах фрилансеров, самой популярной их которых является www.fl.ru/.

Всех необходимых работников можно найти на биржах фрилансеров

Правда, в этом случае нужно быть очень осторожным, поскольку фрилансеры привыкли регулярно срывать сроки. Как говорят опытные руководители, можно бесконечно смотреть на 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% игроков вообще не платят, либо платят копейки. Однако они создают массовку, на которую подтягивается крупная рыба. Сконцентрируйтесь на ней. Остальным дайте возможность резвиться бесплатно.
  • Постарайтесь сделать так, чтобы донаторы не сильно выделялись из общей массы, иначе масса уйдет, оставив вас без донаторов и без денег. В общем, бряцайте мускулами аккуратно.
  • Лучше всего тратят деньги те, кто не хочет тратить свое время, поэтому монетизируйте наиболее рутинные операции. Не разменивайтесь по мелочам.
  • Уроки истории создания игр показывают, то онлайн-проект должен быть бесконечным. Если у геймера появится чувство, что ему нечего делать — он уйдет, а туда, где нет онлайна, новый геймер не придет никогда.

Напоследок хочется сказать – не так страшен черт, как его малюют. Даже лучшие геймдевы когда-то начинали с нуля, и кто знает, может быть именно вы станете следующим Джоном Кармаком или Ричардом Гэрриотом?

Какую платформу .NET Framework я использую для создания настольной игры?

Я бы хотел использовать .NET для создания настольной игры.

  • Я планирую реализовать базовую настольную игру (что-то похожее на шахматы, но менее сложное), как выпускной проект AI term.
  • Графический интерфейс не очень важен (он не должен быть простым в использовании, интуитивным, анимированным и т.д.), но если он не добавляет слишком много усложнений, я хочу добавить лучший графический интерфейс.
  • Основная цель — представить в качестве термина проект, но я хочу поделиться им с сообществом, чтобы другие могли играть. Развертывание должно облегчить совместное использование игры с рабочими станциями Windows.

Какую структуру вы предлагаете для такого проекта? Я знаю эту тему, но это не то, что я ищу.

Если вы делаете настольную игру, такую ​​как шахматы, и вы не хотите использовать ее как часть в портфолио игрового программирования, я бы рекомендовал вам просто использовать инфраструктуру пользовательского интерфейса Windows, например WPF. В такую ​​систему очень легко подключиться к событиям, и вы сможете использовать встроенный дизайнер макета интерфейса в Visual Studio. Просто создайте сетку кнопок (используя изображения для их содержимого)/другие элементы управления. Это позволит вам тратить меньше времени на то, как это выглядит, а также на задачи программирования, связанные с графикой /UI, и быстро заставить вас программировать логику игры.

Если вы используете этот проект для портфолио игрового программирования, я согласен с использованием XNA с использованием Джорджа. Если вы это сделаете, обратитесь к другу-художнику, чтобы позаботиться о дизайне интерфейса и графическом контенте для вас (но не о графическом программировании, конечно).

Вы также можете иметь лучшее из обоих миров. Вы можете сделать свою логику игры логики UI-agnostic, и программировать лучший интерфейс позже. Это подтверждают почтовые шахматы.

Если вы сказали, что графический интерфейс не важен сейчас , тогда вам не нужна игровая инфраструктура, которая только замедлит вас при создании вашей игры. Форм Windows более чем достаточно для вас.

Вам следует сосредоточиться на реализации сборки игрового движка. Эта сборка должна иметь открытый протокол связи и не должна быть осведомлена о каком-либо графическом интерфейсе. Другими словами, вы должны отделить свой движок от графического интерфейса пользователя.

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

Сервер для многопользовательской браузерной игры

12.07.2013, 19:12

Клиент для браузерной игры.
Я планирую сделать клиент для игры. С чего начать понятия не имею.

написать бота для браузерной игры
Здрасте. я ничего не знаю про web програмирование. Однако поставил цель написать бота для.

Создание браузерной игры.
Я хочу создать браузерную игру, какие типы программирования мне нужно знать? Добавлено через 36.

Принцип создания браузерной игры
С чего начинаются писаться браузерные игры? С регистрации игрока?

Какую клиент-серверную архитектуру лучше использовать для многопользовательской игры
Здравствуйте. Более-менее подучил C#, есть небольшой опыт написания приложений WinForms и WPF. .

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

10 лучших Java фреймворков

Здравствуйте, давайте рассмотрим лучшие на сегодняшний день Java фреймворки, предназначенные для веб-разработки и создания приложений.

Скачать исходники для статьи можно ниже

Фреймворк – программное обеспечение, облегчающее разработку проектов. Употребляется также слово «каркас». Своего рода каркас. Ведь согласитесь, что намного проще разработать программу или сайт на основе каркаса, чем с полного нуля. С нуля будет гораздо сложнее, если только речь не идет о совсем простых проектах.

Существуют фреймворки для всего, включая: фреймворки для разработки веб-приложений, настольных приложений, разработка сетевых приложений, разработка мобильных приложений, REST APIs, развертывания Web-сервисов, создания игр и др.

1. Grails

Сайт фреймворка: “grails.org”

Grails — программный каркас для создания веб-приложений, написанный на скриптовом языке Groovy, который в свою очередь основан на Java.

Grails сделан как часть платформы Java, и это означает, что его очень легко можно использовать вместе с Java библиотеками, фреймворками и существующей базой кода.

Grails поддерживется такими популярными средами разработки как Eclipse, Netbeans, Intellij.

Полезное:
Как создать своё первое простое веб-приложение с Grails в IDE NetBeans на русском языке:
“netbeans.org/kb/docs/web/grails-quickstart_ru.html”

2. Spring

Сайт фреймворка: “spring.io”

Spring Framework (или коротко Spring) — универсальный фреймворк с открытым исходным кодом для Java-платформы.

Spring, вероятно, наиболее известен как источник расширений, нужных для эффективной разработки сложных бизнес-приложений вне тяжеловесных программных моделей.

Spring может быть рассмотрен как коллекция меньших фреймворков или фреймворков во фреймворке.
Большинство этих фреймворков может работать независимо друг от друга, однако они обеспечивают большую функциональность при совместном их использовании.
Эти фреймворки делятся на структурные элементы типовых комплексных приложений:

– Inversion of Control-контейнер: конфигурирование компонентов приложений и управление жизненным циклом Java-объектов.

– Фреймворк аспектно-ориентированного программирования.

– Фреймворк доступа к данным.

– Фреймворк управления транзакциями.

– Фреймворк MVC: каркас, основанный на HTTP и сервлетах, предоставляющий множество возможностей для расширения и настройки.

– Фреймворк удалённого доступа.

– Фреймворк аутентификации и авторизации.

– Фреймворк удалённого управления.

– Фреймворк работы с сообщениями.

– Тестирование: каркас, поддерживающий классы для написания модульных и интеграционных тестов.

Spring имеет собственную MVC-платформу веб-приложений.

3. Vaadin

Сайт фреймворка: “vaadin.com”

Vaadin — свободно распространяемый фреймворк для создания веб-приложений и простых сайтов, разрабатываемый одноимённой финской компанией.

Вся разработка ведется на Java, но Java-код выполняется только на сервере, на клиенте же выполняется чистый JavaScript.

Можно применять две основные модели разработки: на стороне сервера и на стороне клиента (браузера).

На официальном сайте фреймворка можно посмотреть примеры:

4. Play Framework

Сайт фреймворка: “playframework.com”

Фреймворк Play с открытым исходным кодом позволяет легко создавать веб-приложения при помощи языков программирования Java и Scala. Фреймворк прост в использовании.

Фреймворк Play поддерживается в среде разработки Eclipse and IntelliJ IDEA.

5. Spark

Сайт фреймворка: “sparkjava.com”

Spark – микро-фреймворк с открытым исходным кодом для создания веб-приложений в Kotlin и Java 8 с минимальными усилиями.

Фреймворка Spark использую в основном для созданяи REST APIs и простых веб приложений и сервисов, а также для создания сайтов.

6. Struts

Сайт фреймворка: “struts.apache.org/index.html”

Struts — фреймворк с открытым исходным кодом для создания Java веб-приложений. Struts поставляется с плагинами для поддержки REST, AJAX и JSON.

Данный фреймворк был на пике своей популярности десять лет назад – тогда он был лидером в веб-разработке на Java – но со временем такие фреймворки как Spring, Grails, Vaadin и др. отобрали большую долю его пользователей.

Одноко, недавно вышло удачное обновление фреймворка Struts и многие веб-разработчики снова переходят на него.

7. Netty

Netty – это асинхронный событийно-ориентированный сетевой фреймворк
для быстрой разработки высокоэффективных протоколов клиент-сервер.

Фреймворк Netty с каждым годом только набирает популярность. В 2011 году проект был удостоен награды Duke’s Choice за инновации в сетевом программировании.
Сегодня его используют в своих разработках такие гиганты, как Apple, Twitter, Facebook, Google и Instagram. На базе Netty построены многие известные проекты с открытым кодом: Infinispan, HornetQ, Vert.x, Apache Cassandra и Elasticsearch.

8. JavaFX (не фреймворк)

Информация о JavaFX: “oracle.com/technetwork/java/javase/overview/javafx-overview-2158620.html”

JavaFX — платформа на основе Java для создания приложений с насыщенным графическим интерфейсом. Может использоваться как для создания настольных приложений, запускаемых непосредственно из-под операционных систем, так и для интернет-приложений (RIA), работающих в браузерах, и для приложений на мобильных устройствах. JavaFX призвана заменить использовавшуюся ранее библиотеку Swing. Платформа JavaFX конкурирует с Microsoft Silverlight, Adobe Flash и аналогичными системами.

JavaFX включена в стандартные пакеты jdk и jre. Просто скачайте jdk или jre, чтобы использовать функции javafx.

9. LibGDX

Сайт фрейворка: «libgdx.badlogicgames.com»

Об этом фрейворке у меня есть несколько статей в рубрике – Android и LibGDX.

libGDX – бесплатный кроссплатформенный фреймворк для разработки игр и визуализации, основанный на языке программирования Java с некоторыми компонентами, написанными на C и C++ для повышения производительности определенного кода. В настоящее время поддерживает Windows, Linux, Mac OS X, Android, iOS и HTML5 как целевые платформы.

То есть с помощью libGDX можно создавать HTML5 странички, а также Android, iOS приложения и программы для Windows, Linux, Mac OS X!

10. JSF – Java Server Faces

JSF – Java Server Faces широко используются для разработки серверных компонентов, которые могут быть непосредственно использованы в веб-приложениях.

Он служит для того, чтобы облегчать разработку пользовательских интерфейсов для Java EE-приложений. В отличие от прочих MVC-фреймворков, которые управляются запросами, подход JSF основывается на использовании компонентов. Состояние компонентов пользовательского интерфейса сохраняется, когда пользователь запрашивает новую страницу и затем восстанавливается, если запрос повторяется. Для отображения данных обычно используется JSP, Facelets, но JSF можно приспособить и под другие технологии, например XUL.

11. GWT

Google Web Toolkit (GWT) — свободный Java-фреймворк, который позволяет веб-разработчикам создавать Ajax-приложения. Его особенность — это компилятор Java -> JavaScript, позволяющий почти всю разработку клиента и сервера реализовать на основе Java и лишь на последнем этапе создать соответствующие JavaScript, HTML и CSS. Выпускается под лицензией Apache версии 2.0. GWT делает акцент на повторное использование и кросс‐браузерную совместимость.

Создание фреймворка для программирования игрового веб-сервера

Здравствуйте!
Посетила меня мысль на диплом взять subj.

Хочу поделиться своей затеей и выслушать мнение перед началом работ (либо, если это никому не надо думать над другой темой).
Итак, на Python есть такая штука — Tornado. Это асинхронный неблокирующий веб-сервер и минифреймворк (очень быстрый при правильном использовании).
Я являюсь веб-разработчиком и в данный момент использую его на стороне сервера для написания различных веб-сервисов.

Tornado очень мощная штука, но очень много кода приходится дописывать самому. Например, там нет функционала для работы с БД и приходится юзать сторонние библиотеки (например, sqlalchemy).
Хочется обвязать все недостающие вещи в единое целое, при этом оставить фреймворк максимально минималистичным, и тем не менее многозадачным.
Кроме того, хочется использовать в качестве СУБД что-нибудь нереляционное (mongodb, к примеру), попробовать воспользоваться преимуществами nosql-баз и решить их проблемы, исключить недостатки.

Работу вижу по двум направлениям:
— Web-сервер и фреймворк для быстрого создания сайтов и веб-сервисов (MVC pattern, формы, админка, сессии, социальные прикрутки и т.д.). Обмен с клиентом по HTTP. Это я себе представляю достаточно четко, потому что сам являюсь web-разработчиком.
— Игровой Web-сервер. Обмен с клиентом по протоколу TCP (ну можно и HTTP, если, скажем, браузерка). Что здесь необходимо разработчиком я представляю слабо, поэтому и пишу сюда.

Ожидаемый Профит:
— скорость разработки приложения (за счет автоматизации чаще встречающихся задач).
— скорость работы приложения (есть мнение, что nosql СУБД в разы быстрее квадратных баз), а Tornado сам по себе очень быстр, как говорилось выше (пруфы в гугле).
— асинхронная, неблокирующая природа сервера (не моя заслуга, но планирую еще больше подчеркнуть это преимущества Tornado зачет асинхронного режима работы с БД)
— для геймдева возможность использования спроектированной БД как для самого веб-сервера, так и для бэкенда (админка, статистика), ну и для сайта =).

Вопросы:
— Посоветуйте, на что обратить внимание для второго направления разработки. Какие задачи можно автоматизировать?
— С какими проблемами чаще всего сталкиваются разработчики игровых серверов? Пишутся ли они на Python?
— Насколько нужна такая штука?
— Может это уже есть? А я все проворонил .

С нетерпением жду ваших ответов 🙂

Асинхронка не панацея сама по себе. Любое долгое действие (а синхронные запросы к SQL базе по сути своей потенциально медленные) — садит производительность ощутимо, вплоть до отказа в обслуживании. То есть тебе понадобится ещё и асинхронная работа с файлами (да дисковые операции тоже медленные), с базой данных, поддержка многопоточности (асинхронка по сути своей одноядерный процесс, нужно дополнительно распараллеливать).

Ziberbulger
> — Посоветуйте, на что обратить внимание для второго направления разработки.
> Какие задачи можно автоматизировать?
Игру пиши. Увидишь, как только код повторяется больше 1 раза — можно выносить в процедуру или пробовать автоматизировать другими способами.

> — С какими проблемами чаще всего сталкиваются разработчики игровых серверов?
> Пишутся ли они на Python?
Пишутся вполне. Вот это кажется на питоне серверная часть ( realmofthemadgod.com ) и другие можно поискать.
Проблем море 😉 Пиши, простой сервер. Напишешь, увидишь где он будет хорошо работать, а где плохо.

> — Насколько нужна такая штука?
Кому? Мне нет не нужна. Школьнику Васе Пупкину? Может и нужна, написать ММОРПГ онлаен, ну как все школьники обычно пишут мморпг, в разделе Флейм-ПроЭкты.
В первую очередь она нужна тебе для будущих игр, если окажется удачной — выпустишь для народа.

> — Может это уже есть? А я все проворонил .
В Гугле забанили? Поищи.
Обычно кроме сетевой части вся серверная часть весьма специфична для каждого проекта, нереально сделать одно решение, которое подойдёт всем. Я думаю если и есть то в виде раздельных частей — сервер отдельно, БД отдельно, логику сам напишешь.

kvakvs
как раз комментировал ваш пост в смежной теме про python насчет Tornado =)

в общем, то я как раз написал сюда, потому что именно в геймдеве опыт маловат. скажем так, я и не хотел делать универсальное решения, потому что прекрасно знаю судьбы таких проектов.
Хотел просто автоматизировать некоторые процессы (ну вот как раз, например, решение проблем «долгих действий», работа с памятью (memcache) и т.д.), чтобы кто-то мог взять это за основу — не более. Короче, вспомогательные штуки, объединенные под одним инструментом, а не универсальный конструктор.

Но, наверное, вы правы, стоит опробывать это самому, чтобы понять где, что да как. Поэтому, наверное, сосредоточусь пока на первой части, предметную область которой знаю достаточно хорошо.
И все же, если кто-то поделится частыми проблемами, возникающими при разработке игрового сервера, буду рад читать и стараться решать их в своем проекте.

Насчёт игровых сервисов используя ваш сервис. Если вы пишите web-сервер, то и работайте с веб-приложениями. Логика работы сервера с stand-alone играми сильно отличается, от тех что основаны на веб-страницах.
По мне так есть 3 разделения веб игр:
1. Классический вариант, где есть лишь страницы и скрипт на сервере, игрок жмёт действие, и сервер перенаправляет его на другую страницу или меняет контент, страница обновляется.
2. Более современный, и на данный момент самый популярный, это с использованием AJAX в критических областях логики. Где нужен обмен информацией без необходимости всё перезагружать снова.
3. Самый на данный момент современный, и ещё толком не устоявшийся, но имхо, очень потенциальный. Это WebSockets — возможность используя WebSockets протокол, который поддерживают все последние ведущие браузеры. Возможность обмениваться информацией с сервером напрямую из JavaScript’а. Т.к. разработчик контролирует соединением из скрипта, то это позволяет соединиться один раз, и далее обмениваться мелкими пакетами. Механика практически такая же как с TCP протоколом, с небольшим парсером WebSocket протокола на стороне сервера (пакеты имеют заголовки, и применяют маску на данные, плюс и другие операции).
Таким образом, в броузерах, можно уже смело разрабатывать полноценные realtime игры, почти как нормальные stand-alone или консольные. Тем более что html5 имеет canvas, которые позволяет работать как с 2D, так и с WebGL рендерами, что открывает возможности для рендера и т.п.

Если разрабатывать сервер для игр, то имхо, но поддерживать WebSockets — это априори для современных серверов подобного рода. Но снова, писать сервер игровой логики на скриптовом языке, с веб моделью сервера — имхо, не разумно.
Ведь игровые сервера сокетные, это обычно один процесс, работающий с клиентами, или мелкая сеть с разными обязанностями. А веб сервер, это процесс — на клиента, где AJAX и html ещё ок, а вот сокеты уже другое дело.

идея может и безумна . но как раз таки хочется спроектировать это так, чтобы сервер, скажем так, заранее не знал явно с каким клиентом он будет работать, а если уж знал, то явно.
Сейчас объясню. Почему бы не сделать режимы работы сервера? То есть функционал заложен, а разработчик сам определяет в какой конфигурации запустить сервер. Если фреймворк будет использоваться для «создания сайтов» или веб-сервисов, то будет продуцировать и какой-нить клиентский код (скажем, на клиентской стороне какой нить MVC-фреймворк типа backbone.js можно заюзать и жестко связать это с сервером) и разработка сведется к определению моделей, форм и распиранию клиентского кода необходимыми коллбэками к эвентам. В двух словах, в этом режиме сервер «будет знать», что его используют как бэкэнд для сайта (и клиент — явно браузер) и будет строить по соответсвующим моделям каркас приложения. Если это браузерная игра — юзаем те же WebSockets и всячески помогаем разработчику избежать выполнения черновой работы (по тому же парсингу пакета запроса), опять же настраивая каркас, но уже под определенную задачу. Если клиент standalone — слушаем указанный сокет и работаем в этом режиме. Хотя конечно:
MoKa
> писать сервер игровой логики на скриптовом языке, с веб моделью сервера — имхо,
> не разумно.
наверное, согласен

Я прекрасно понимаю, что пытаюсь разные задачи объединить под одну, но иду на это, скажем так, сознательно в надежде выявить из них нечто общее. Все же, диплом, хочется и поисследовать какую-то предметную область,. Хотя в данном случае, скорее всего в плане исследований будет противопоставление nosql и реляционок для указанных выше задач.

Чтобы написать что-то универсально делающее ряд вещей, сначала напиши его по 1 разу для всех случаев, которые должен покрыть твой универсал. Не универсально. Придёт понимание, что в коде было общего, и как его лучше сделать.
А до того, как появится личный опыт — ни-ни.

kvakvs
> А до того, как появится личный опыт — ни-ни.
+1

Делай законченный продукт, а не фреймворк, работу которого даже оценить нельзя будет (т.к. на нём ничего не будет написано.) Тем более комиссия обычно с трудом воспринимает то, работу чего не может увидеть.

MoKa
Веб-сокеты не работают у 85% юзеров сейчас — они по умолчанию только в хроме включены. Так что альтернативы аяксу/комету на сегодняшний день нет.

петрушка
> Веб-сокеты не работают у 85% юзеров сейчас — они по умолчанию только в хроме
> включены. Так что альтернативы аяксу/комету на сегодняшний день нет.
Речь идёт не о сегодняшнем дне.
Многие разработчики крупных приложений, уже поддерживают WebSocket’ы, и они используются на front-end’е, если поддерживаются.

Речь идёт о «завтрашнем» дне. Когда разрабатываешь продукт, нужно думать о том времени, когда он выйдет(и чуток наперёд), а не когда начинаешь разработку.
Поэтому их поддержка — очень разумное решение для разработки которая закончиться не ранее чем через пол года.

спасибо за советы! помогли определить направление мыслей!

Как создать онлайн игру

В некоторых странах, таких как Южная Корея например, онлайн-игры стали практически национальным видом спорта. Не менее популярны они и в Европе, США и нашей стране, а их создатели хитов этой быстрорастущей сферы становятся миллионерами в считанные месяцы.

Естественно, у многих, кто столкнулся с миром онлайн игр как игрок или же как начинающий предприниматель возникает вопрос — как же сделать онлайн игру?

На самом деле это достаточно просто.

В первую очередь необходимо определиться с видом игры. Все онлайн игры делятся на несколько очень непохожих друг на друга типов:

RPG (Role-Playing Game, ролевая игра), или скорее MMORPG (Massively Multyplaying Online Role-Playing Game – многопользовательская онлайновая ролевая игра) – ролевые игры, подобные World of Warcraft или Lineage. Играющему предстоит выбрать роль (отсюда и название) — стать орком или гномом, воином или магом и т.п., после чего включиться в бурную жизнь игрового мира.

Такая игра состоит из двух основных частей. Серверная часть — это, собственно, игровой мир, а по сути — база данных, где хранится информация об игроках, их умениях и навыках («статы»), а также всевозможных предметах и объектах игрового мира. Клиентская часть — это программа, которую игрок запускает на своем компьютере для того, чтобы увидеть игровой мир и своего персонажа, а также совершать какие-либо действия в нем. Основная задача клиента — обмениваться информацией с сервером (получать данные об объектах и существах, окружающих персонаж игрока в каждый момент времени, и передавать на сервер информацию о действиях игрока), а также отображать полученные с сервера данные в виде привлекательной графики, как правило, трехмерной.

Для программирования как клиентской, так и, особенно, серверной части, необходимы отличные знания и хороший опыт собственно программирования, создания баз данных, навыки 3D-дизайна, ну и, конечно же, развитое воображение, которое поможет создать сложный и интересный игровой мир. Кроме того, сделать современную игру в одиночку просто невозможно. Нужна команда профессионалов.

Добавить комментарий