Бесплатные игры

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

Создание многопользовательской игры в режиме реального времени менее чем за день – часть 1/4

Вы играете в игры. Дух! Когда -либо думал о том, чтобы построить его самостоятельно. Хм.. Игры врожденно кажутся трудными для строительства. С множеством движущихся вещей (в буквальном смысле), развитие игры кажется, что оно ограничено разработчиками, которые погрузили свои ноги глубоко в святые воды сети, математики, графики и тому подобного. Однако, поскольку веб-сайт развивается так быстро, и со всеми новыми протоколами и библиотеками, которые охватывали в последние годы, теперь очень просто начать с многопользовательских игр на основе браузеров. В этой статье мы рассмотрим пошаговую реализацию многопользовательской игры Space Invaders в реальном времени (ах, ностальгия!) с Phaser3 и умелым в реальном времени. Я организовал финальную игру на https: // space-invaders-multiplayer.Herokuapp.com/ для вас, чтобы попробовать это. Попутно мы поймем архитектуру, проектирование системы, сетевые протоколы, а также посмотрим на предостережения, чтобы помнить об создании многопользовательских игр на основе браузеров. Эта учебная серия разбита на четыре части:

• Часть 1: Введение в игровые концепции и библиотеку Phaser
• Часть 2: Оценка сетевых протоколов для приложений в реальном времени
• Часть 3: Реализация кода на стороне сервера, чтобы все игроки синхронизировали
• Часть 4: Завершение кода на стороне клиента, чтобы отобразить игру

Последнее, прежде чем мы начнем. Эта статья предполагает базовое понимание JavaScript и Express/nodejss. Я постараюсь как можно больше объяснить все остальное ����‍����

Давайте получим игры!

Часть 1 – Введение в игровые концепции и Phaser

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

Правила игры для многопользовательских космических захватчиков

• Когда присоединится новый игрок, он будет случайным образом назначен аватаром монстра из трех доступных сортов.
• Каждый игрок может переместить свой аватар влево или вправо, используя клавиши со стрелками на клавиатуре
• Каждый игрок увидит свой собственный аватар в белом, но видит, что все остальные будут случайным цветом, который предварительно назначен им
• Когда в игре присоединяется заданное количество игроков, запускается корабль. Этот корабль движется вдоль горизонной оси в случайно выбранном направлении, которое случайным образом меняется каждые 5 секунд. Наряду с этим, скорость корабля также изменится. Этот корабль также снимает пули через регулярные промежутки
• Все аватары автоматически движутся вниз с заданным приращением на протяжении всей игры.
• Цель победы в игре – добраться до нижней границы экрана игры, не убивая одну или несколько пуль, застреленных кораблем.

Компоненты многопользовательской игры в реальном времени

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

Давайте посмотрим на каждый из них дальше.

1. Ресурсы

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

Если вы заинтересованы в том, чтобы сделать тему вашей игры Super Arcade, вы можете следовать этому учебному пособию Pixel Art от Glauber Kotaki, чтобы узнать, как.

2. Физика

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

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

3. Сеть

Окончательный основной компонент, который особенно важен для многопользовательской онлайн -игры, – это сеть. Может быть очень сложно поддерживать синхронизацию между всеми игроками, выяснить, какой игрок умер, а что все остальные согласны с этим утверждением.

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

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

Использование Phaser 3 для добавления активов и включения физики

Phaser-это каркас JavaScript для HTML5 с открытым исходным кодом и WebGl, предназначенная для HTML5. Мы будем использовать Phaser 3, чтобы построить игру. Причина, по которой я конкретно упоминаю версию, заключается в том, что между фазером 2 и 3 существует множество нарушающих изменений, включая синтаксис. Кроме того, если вы собираетесь добавить несколько крутых новых функций в игру самостоятельно в будущем, вы должны знать, что/где смотреть.

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

Для Phaser есть действительно хорошая серия видеоучебников, которую я бы порекомендовал, если бы вы впервые работали с Phaser 3.

В версии TL; DR, с Phaser3, мы можем указать объект конфигурации, который будет иметь информацию о холсте и самой игре, включая размер холста, его атрибуты стиля, различные сцены, которые включены в наши игровые процессы (вскоре обсуждается), тип физического двигателя (как у Phaser много) и т. Д.

Затем мы передаем объект конфигурации, чтобы запустить новую игру.

Это может показаться немного запутанным, поскольку вы еще не видели кода. Давайте сделаем это дальше.

Начало работы с игрой

Давайте пока перейдем прямо на игру. Мы будем беспокоиться о страницах запуска и таблицы лидеров, позже. Наша игра была бы HTML -страницей с холстом. Этот холст будет держать и запустить фактическую игру. Итак, давайте создадим файл, назовите его индекс.HTML . Чтобы сохранить организованные вещи, мы храним все наши HTML-файлы в папке, называемых видами и всеми файлами JavaScript на стороне клиента в папке, называемой Public . Давайте начнем представления/индекс.HTML -файл с основным скелетом:

Как вы можете видеть, все, что мы делаем здесь, это ссылка на файлы CSS и JS, которые мы добавим в ближайшее время, но, что более важно, ссылка на CDN Phaser JS. Вы можете скопировать CSS непосредственно из проекта GitHub

Кроме этого, в рамках HTML-тела у нас есть Div с удостоверением личности игрового контейнера . Вот где мы добавим наш игровой холст через JavaScript.

Давайте создадим файл в публичной папке, назовите его скрипт.JS и начните с определения объекта конфигурации игры, о котором мы говорили ранее.

Как вы можете видеть, кроме указания размера холста и его фонового цвета, мы также указали, куда этот холст должен идти (идентифицированным родителем) и массив сцен, которые мы хотели бы быть частью этого игра.

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

Для нашей игры у нас будет одна сцена (идентифицирована Gamescene). Сцена в Фазере – это класс, который расширяет фазер.Сцена класс. Давайте определим это для нашей игры. Добавьте следующий код над объектом конфигурации, когда он ссылается на класс Gamescene.

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

1. Метод PreLoad () получает все ресурсы, которые нам могут понадобиться, откуда бы они ни были, загружает их и поддерживает их, когда мы хотели бы добавить их в нашу игру.
2. Метод create () выполняется один раз, когда игра впервые работает. Мы можем добавить все инициализации переменной, определения анимации и т. Д. В этом методе.
3. Метод Update () непрерывно выполняется в цикле до тех пор, пока игра включена и, следовательно, может постоянно обновлять игровые объекты в соответствии с игровой логикой. Мы обновим аватары, застрелим пули, переместите корабль, все в этом методе..

Загрузка активов и создание анимации

Давайте сейчас загрузим некоторые активы. Определите метод preload () следующим образом

Первоначально я организовал эту игру на Glitch, в котором хранится все активы в своем ведре, извлекаемая по ссылке CDN. Вы можете использовать то же самое, в противном случае Amazon S3 – еще один популярный вариант.

Мы добавили три типа аватаров, все в белом и трех других цветах. Кроме того, мы также добавили активы для корабля, пули и, конечно, взрыва, чтобы играть, когда умирает игрок.

Как вы можете видеть, мы загрузили активы в фазере, используя это, используя это.нагрузка.SpriteSheet () и отправил ему три параметра:

• идентификатор
• Путь к фактическому файлу
• размеры файла (в пикселях).

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

п.С. Есть лучший способ реализовать цвета аватара. Мы могли бы просто добавить цветовой оттенок к существующему спрайту вместо загрузки одного и того же объекта несколькими цветами, что и отдельные активы. Я еще не знаю, но я обновлю это, когда понял это 🙂

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

В методе Create () мы определим анимацию для этого взрыва:

Мы использовали это Phaser’s This..Создать () метод для создания анимации. Этот метод принимает:

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

Мы пока ничего не добавим в метод Update (). Если вы заметили, мы на самом деле не создали экземпляр игры, мы сделаем это в более поздней части этой серии статьи.

Вот и все сейчас. Мы узнаем о сети для приложений в реальном времени в части 2 – оценка сетевых протоколов для приложений в реальном времени

Все статьи в этой серии:

• Часть 1: Введение в игровые концепции и библиотеку Phaser
• Часть 2: Оценка сетевых протоколов для приложений в реальном времени
• Часть 3: Реализация кода на стороне сервера, чтобы все игроки синхронизировали
• Часть 4: Завершение кода на стороне клиента, чтобы отобразить игру

Отдельный выпуск, относящийся к этому уроку, доступен на GitHub, если вы хотите его проверить.

Вы также можете следовать проекту GitHub для последних разработок этого проекта.

Если у вас есть какие -либо вопросы, пожалуйста, не стесняйтесь обратиться ко мне в Twitter @srushtika. Мои DM открыты 🙂

Категория: многопользовательское здание

Chimeraland – это бесплатная игра с открытым миром Soundbox Survival Mmorpg (массово многопользовательская онлайн -игра) для ПК (Windows) и Mobile (Android/IOS), разработанные Pixel Soft и опубликованы на уровне Infinite. Игра установлена ​​в доисторическом, мифическом мире […]

Muck-это бесплатная* однопользовательская и многопользовательская игра Roguelike для ПК (Windows) популярного норвежского разработчика, художника и YouTuber Dani (который также сделал Crab Game и Karlson). Muck – это низкий поли, случайный, но (очень) сложная смесь выживания (E.г. […]

Песочница представляет собой бесплатную игру и игру, децентрализованную и управляемую сообществом игровой экосистему и виртуальный мир для ПК (Windows и Mac) в активной разработке (Open Alpha) и построенная на блокчейне Ethereum (аналогично Decentrlantand). Игроки могут строить, владеть, делиться и […]

Core-бесплатная игра для игры и игровой платформу, похожая на Crayta и Roblox. Другими словами, ядро ​​является множеством бесплатных игр для игры, и миры для изучения, разработанного глобальным сообществом разработчиков, которые вы можете легко […]

. Игроки могут вскочить и создавать игры вместе в облаке, независимо от их опыта программирования. От […]

Wild Terra Online-это бесплатный MMORPG с песочницей и функциями выживания, установленные в полностью контролируемом игроке средневековых фэнтезийных мира. Вам не нужно будет выполнять цепочку задач и убивать тысячу волков для создания оборудования. Все много […]

Ark: Survival Evolved (Mobile)-это бесплатная игра «мобильная игра в приключении к приключению» от Studio Wildcard для мобильных динозавры и другие доисторические животные, природные опасности, […]

Unturned-это свободная игра для игры в ближнем бою и стрелка для ПК (Windows, Mac и Linux) в появившемся MMO/многопользовательском жанре выживания Apocalypse (хотя вы также можете играть в одиночку или в COOP в PVE). Вместо того, чтобы сосредоточиться на […]

Totemori-это веселая и инновационная бесплатная многопользовательская игра для общего экрана, где вы строите башни, пытаясь свергнуть все остальные. Totemori имеет многопользовательский многопользователь Local Versus и Co-Op для 4 игроков. Играйте против своих друзей или практикуйте ботов, […]

Галактическая нежелательная лига-это конкурентоспособная бесплатная арена Crafter Crafter-стрелок, смешанный с почти бесконечными возможностями строительства корабля. Построить что -нибудь. Сражаться с кем угодно. В космосе. Создайте свои нежелательные корабли буквально любые формы и размеры и бороться с творениями […]

Creativerse-это восхитительная игра в песочнице MMO в следующем поколении и в следующем поколении о приключениях, исследованиях и творчестве с друзьями. И теперь это свободно играть. Вы застряли в обширном и таинственном мире, который окружен свирепыми зверями и […]

Строительный комплект FPS – это строительный комплект FPS. Это игра, которая позволяет вам сходить с ума от творчества в песочнице накачки! Handscape делает это, предоставляя простые в использовании инструменты на основе интерфейса размещения блока, с которым все уже знакомы, чтобы создать однопользователь […]

Trove-это свободный для воспроизведения, открытый Action-Adventure Voxel Mmorpg от Trion Worlds для ПК (Windows, Mac), Xbox One, PS4 и Nintendo Switch. Trove имеет бесчисленные сферы, наполненные квестами, сундуками и врагами отличными и маленькими. Исследуйте и создайте свой путь […]

Roblox-это бесплатная многопользовательская платформа для создания видеоигр и создания игр (аналогично Core и Crayta), которая позволяет пользователям разрабатывать и делиться своими собственными играми и уровнями, а также играют все типы игр, созданных другими пользователями, из [[ …]