Изграждане на игра на браузър в реално време за по -малко от ден – част 1/4 – Dev Community, Мултиплейър сграда | Безплатни игри

Безплатни игри

Както можете да видите, този клас има три празни метода. Те идват с фазера.Сценен клас. Всеки от тези методи има различна функция, както е обяснено по -долу

Изграждане на игра на браузър в реално време за по -малко от един ден – част 1/4

Екран на играта

Играете ли игри. Дъх! Някога мислили някога да си построите един. Хм.. Игрите вътрешно изглеждат трудни за изграждане. С много движещи се парчета (доста буквално) развитието на играта изглежда, че е ограничено до разработчици, които са потопили краката си дълбоко в светите води на мрежа, математика, графика и други подобни. Въпреки това, когато мрежата се развива толкова бързо и с всички нови протоколи и библиотеки, които са се простирали през последните години, сега е супер лесно да започнете с Building Browser базирани мултиплейър игри. В тази статия ще разгледаме стъпка по стъпка прилагането на мултиплейър игра на космически нашественици в реално време (ах, носталгията!) с Phaser3 и умело в реално време. Хоствах на финалната игра на https: // space-invaders-multiplayer.HerokuApp.com/ за да го изпробвате. По пътя ще разберем архитектурата, дизайна на системата, протоколите за работа в мрежа зад това, а също така ще гледаме на предупрежденията, които трябва да имаме предвид, когато изграждате мултиплейър браузъри, базирани на браузъри. Тази серия от уроци е разбита на четири части:

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

Последно нещо, преди да започнем. Тази статия предполага основно разбиране на JavaScript и Express/NodeJS. Ще се опитам да обясня всичко останало колкото е възможно повече ����‍����

Нека вземем игри!

Част 1 – Въведение в концепциите за игри и фазер

Нека започнем с разглеждането на правилата за играта, тъй като това не е точно като оригиналната ретро класика.

Правила за играта за мултиплейър космически нашественици

  • Когато се присъедини нов играч, те ще бъдат назначени на случаен принцип чудовищен аватар от трите налични сорта.
  • Всеки играч може да премести аватара си наляво или надясно, използвайки клавишите със стрелки на клавиатурата си
  • Всеки играч ще види собствен аватар в бяло, но вижте всички останали в произволен цвят, който им е предварително подписан
  • Когато предварително зададен брой играчи се присъединят към играта, стартира кораб. Този кораб се движи по хоризонталната ос в произволно избрана посока, която се променя на случаен принцип на всеки 5 секунди. Заедно с това скоростта на кораба също ще се промени. Този кораб също изстрелва куршуми на равни интервали, които можем да предварително настроим
  • Всички аватари автоматично се движат надолу с предварително зададен прираст през цялата игра.
  • Целта да спечелите играта е да стигнете до долната граница на екрана на играта, без да бъдете убити от един или повече куршуми, застреляни от кораба.

Компоненти на мултиплейър игра в реално време

Макар че може да изглежда, че има куп неща, които се случват зад мрежа в реално време, те наистина се свеждат до три основни компонента:

Нека разгледаме всеки от тях по -нататък.

1. Активи

Активите са критичните елементи, които съставляват играта. Ако искате да се появи обект във вашата игра, можете или да нарисувате такова в платното на играта, или по -добре, но все пак да използвате изображение или спрайт лист и да анимирате заедно. По същия начин, всяко аудио, което искате да въведете и играете в играта, ще попадне под активите му.

Активи на играта

Ако се интересувате да направите темата на вашата игра Super Arcade, можете да следвате този урок за изкуство Pixel от Glauber Kotaki, за да научите как.

2. Физика

Физиката е това, което ни позволява да движим активите наоколо и решава колко различни обекти в нашата игра си взаимодействат помежду си. Например, в проста игра на понг топката се отхвърля обратно в определена посока, с определена скорост в зависимост от това коя част от греблото се сблъска с. По подобен начин в нашата игра това може да включва изчисления, където корабът трябва да отиде, с каква скорост, стрелба на куршуми, сблъсък на тези обекти на куршуми с аватари на играчите и т.н.

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

3. Мрежа

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

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

Сега, когато имаме по -добро разбиране на основните компоненти, нека проучим как можем да накараме тези да работят в нашата игра.

Използване на Phaser 3 за добавяне на активи и активиране на физиката

Phaser е платно с отворен източник и WebGL, изобразяваща JavaScript Framework за HTML5. Ще използваме Phaser 3, за да изградим играта. Причината конкретно да спомена версията е, че има много нарушени промени между Phaser 2 и 3, включително синтаксиса. Освен това, в случай, че искате да добавите няколко готини нови функции към играта в бъдеще, трябва да знаете какво/къде да търсите.

Лого Phaser3

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

Има наистина добра поредица от видео уроци за Phaser, която бих препоръчал, ако за първи път работите с Phaser 3.

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

След това предаваме обекта за конфигурация, за да започнем нова игра.

Това може да звучи малко объркващо, тъй като все още не сте виждали код. Нека направим това след това.

Първи стъпки с играта

Нека засега да стигнем направо на екрана на играта. Ще се притесняваме за страниците за стартиране и класация, по -късно. Нашата игра би била HTML страница с платно, представено върху нея. Това платно ще държи и пусне действителната игра. Така че, нека създадем файл, да го наречем индекс.html . За да поддържаме нещата организирани, ще съхраняваме всички наши HTML файлове в папка, наречена Views и всички файлове от страна на клиента JavaScript в папка, наречена Public . Нека започнем изгледите/индекса.HTML файл с основен скелет:

Както можете да видите, всичко, което правим тук, е връзка към CSS и JS файловете, които ще добавим скоро, но също така по -важното е връзката към Phaser JS CDN. Можете да копирате CSS директно от проекта GitHub

Освен това, в рамките на HTML тялото, имаме DIV с идентификатор на играч-контейнер . Това е мястото, където ще добавим нашето платно чрез JavaScript.

Нека създадем файл в публичната папка, да го наречете скрипт.JS и започнете с дефиниране на обекта за конфигуриране на играта, за който говорихме по -рано.

Както можете да видите, освен да уточним размера на платното и нейния цвят на фона, ние също уточнихме къде трябва да отиде това платно (идентифицирано от родител) и масив от сцените, които бихме искали да бъдем част от това игра.

Phaser използва концепцията за „сцени“, за да организира съдържанието на играта. Можете да мислите за сцена като за това, което визуално можете да видите по всяко време. Докато играете игра, ако играта преминава на различен фон с различни взаимодействия между обектите на играта, тогава вероятно това е отделна сцена от това, което гледате преди.

За нашата игра ще имаме една сцена (идентифицирана от Gamescene). Сцена в Phaser е клас, който разширява фазера.Сценен клас. Нека определим това за нашата игра. Добавете следния код над конфигурационния обект, тъй като той се позовава на класа Gamescene.

Както можете да видите, този клас има три празни метода. Те идват с фазера.Сценен клас. Всеки от тези методи има различна функция, както е обяснено по -долу

  1. Методът PRELOAD () получава всички ресурси, от които може да се нуждаем, откъдето и да са, зарежда ги и ги поддържа готови, когато искаме да ги добавим към нашата игра.
  2. Методът Create () се изпълнява веднъж, когато играта за първи път работи. В този метод можем да добавим всички променливи инициализации, дефиниции на анимацията и т.н.
  3. Методът Update () се изпълнява непрекъснато в цикъл, докато играта е включена и следователно е в състояние постоянно да актуализира обектите на играта според логиката на играта. Ще актуализираме аватарите, снимаме куршуми, ще преместим кораба, всичко това в този метод..

Зареждане на активи и създаване на анимации

Да продължим напред и да заредим някои активи сега. Дефинирайте метода PRELOAD (), както следва

Първоначално бях домакин на тази игра на Glitch, която съхранява всички активи в кофата му, извлечена от CDN връзка. Можете да използвате същото, иначе Amazon S3 е друга популярна опция.

Добавихме три вида аватари, всички в бяло и три други цвята. Отделно от тях, добавихме и активи за кораба, куршума и, разбира се.

Както можете да видите, ние заредихме актив на Spritesheet в Phaser, използвайки това.Зареждане.spritesheet () и го изпрати три параметъра:

  • идентификаторът
  • път към действителния файл
  • размерите на файла (в пиксели).

Можем също просто да го наречем изображение, но тогава няма да можем да правим готините анимации с него, както ще видите скоро.

P.С. Има по -добър начин за прилагане на цветовете на аватарите. Можем просто да добавим цветен нюанс към съществуващ спрайт, вместо да зареждаме един и същ обект в множество цветове като отделни активи. Все още не знам как, но ще актуализирам това, когато го разбрах 🙂

Ако инспектирате листа за спрайт “експлозия”, ще видите, че това е куп различни изображения, поставени един до друг. Начинът, по който причиняваме „анимация“, е чрез преминаване през тези различни изображения с определена скорост, което изглежда, че всъщност това е прозрачно видео на експлозия, която се случва.

В метода Create () ще дефинираме анимацията за тази експлозия:

Използвахме Phaser’s това.Анимации.създайте () метод за създаване на анимацията. Този метод поема:

  • Ключът, който ще използваме по -късно, за да възпроизведем тази анимация
  • Рамки, които генерират кадри, използвайки идентификатора на актива, към който бихме искали да приложим тази анимация
  • каца, която определя скоростта, с която бихме искали да възпроизведем тази анимация
  • Повторете, което определя колко пъти ще се изпълнява анимацията
  • ScheonComplete указва дали активът, който е анимационен или не, трябва да изчезне след извършването на анимацията

Засега няма да добавим нищо в метода за актуализиране (). Ако забележите, ние всъщност не сме инсталирали играта, ще го направим в по -късна част от тази серия от статии.

Това е засега. Ще научим за работата в мрежа за приложения в реално време в част 2 – Оценка на мрежовите протоколи за приложения в реално време в реално време

Всички статии от тази серия:

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

Отделно издание, свързано с този урок, е достъпно в GitHub, ако искате да го проверите.

Можете също да следвате проекта GitHub за най -новите разработки по този проект.

Ако имате някакви въпроси, не се колебайте да се свържете с мен в Twitter @Srushtika. Моите DM са отворени 🙂

Категория: Мултиплейър сграда

Chimeraland е безплатен за игра на отворен свят Sandbox Survival MMORPG (масово мултиплейър онлайн игра за игра) за компютър (Windows) и Mobile (Android/iOS), разработен от Pixel Soft и публикуван от Level Infinite. Играта е поставена в праисторически, митичен свят […]

WindowsIPhone & iPad Android

Muck е безплатна* игра с един играч и мултиплейър за оцеляване Roguelike за PC (Windows) от популярния норвежки разработчик, художник и YouTuber Dani (който също направи Crab Game и Karlson). Мук е нисък поли, небрежен, но (много) предизвикателна комбинация от оцеляване (e.g. […]

Windows

Sandbox е безплатен за игра и игра и игра, децентрализирана и общностна игрална екосистема и виртуален свят за PC (Windows и Mac) в активното развитие (отворена алфа) и изградена на блокчейн Ethereum (подобно на DeCentraland). Играчите могат да строят, притежават, споделят и […]

Windows

Core е безплатна игра за събиране на игри и платформа за създаване на игри, подобна на Crayta и Roblox. Core е с други думи, мултиверса от безплатни игри за игра и светове за изследване, проектирано от глобална общност от разработчици, която лесно можете […]

Windows

Crayta е безплатна за игра платформа за съвместна игра и мултиплейър аркадна колекция за игри, изградена на Unreal Engine 4 за компютър, подобно на Core и Roblox. Играчите могат да влязат и да създават игри заедно в облака, независимо от техния опит за програмиране. От […]

Windows

Wild Terra Online е безплатен за игра MMORPG с пясъчници и функции за оцеляване, поставен в напълно контролиран от играча средновековен фентъзи свят. Няма да е необходимо да изпълнявате верига от задачи и да убивате хиляди вълци, за да създадете оборудване. Всичко е много […]

WindowsMac Linux

Ark: Survival Evolved (Mobile) е безплатна игра* Mobile Ection-Eventure Survival Game от Studio Wildcard за Mobile (Android, iOS), поставена в праисторически свят, където играчите, които са заседнали на остров, трябва да оцелеят в роуминг Динозаври и други праисторически животни, природни опасности, […]

IPhone & iPad Android

Разбъркан е безплатен за игра на меле и стрелско игра с тематика с тематика. Вместо да се фокусира върху […]

WindowsMac Linux

Totemori е забавна и иновативна безплатна игра за споделен екран на екрана, където изграждате кули, докато се опитвате да свалите всички останали. Totemori разполага с местен срещу и кооперативен мултиплейър за до 4 играчи. Играйте срещу приятелите си или практикувайте срещу ботове, […]

WindowsMac Linux

Galactic Junk League е конкурентна безплатна за игра Crafter Arena-стрелец, смесен с почти безкрайни възможности за изграждане на кораби. Изградете каквото и да било. Борете се с когото и да било. В космоса. Изградете вашите боклуци, за да буквално всякакви форми и размери и се борете срещу творенията на […]

Windows

Creativerse е възхитителна безплатна игра и следващо поколение MMO Sandbox Game за приключения, проучване и креативност с вашите приятели. И сега е свободно да се играе. Вие сте заседнали в огромен и мистериозен свят, който е заобиколен от свирепи зверове и […]

Windows Mac

Gunscape е строителен комплект FPS. Това е игра, която ви позволява да се развихрите с творчеството си в пясъчна кутия за изпомпване! Gunscape прави това, като предоставя лесни за използване инструменти въз основа на интерфейс за блокче-зареждане, с който всички вече са запознати, за да създадат един играч […]

WindowsMac Linux

Trove е безплатен за игра, отворен екшън-приключение Voxel MMORPG от Trion Worlds за PC (Windows, Mac), Xbox One, PS4 и Nintendo Switch. Trove разполага с безброй сфери, пълни с куестове, сандъци и врагове страхотни и малки. Разгледайте и създайте своя начин […]

WindowsMacПлейстейшън 4Xbox One Превключвател

Roblox е безплатна за игра, масово мултиплейър онлайн видеоигри и платформа за създаване на игри (подобно на Core и Crayta), която позволява на потребителите да проектират и споделят свои собствени игри и нива и да играят всички видове игри, създадени от други потребители, от [[ …]