在不到一天的時間內構建實時多人瀏覽器遊戲 – 第1/4部分 – 開發社區,多人遊戲建築|免費遊戲
免費遊戲
如您所見,此類具有三個空的方法. 這些帶有移相器.場景課. 這些方法中的每一個具有不同的功能,如下所述
在不到一天的時間內構建實時多人瀏覽器遊戲 – 第1/4部分

你玩遊戲嗎. du! 曾經想過自己建造一個. 唔.. 遊戲天生似乎很難構建. 涉及許多動人的作品(從字面上看),遊戲開發似乎僅限於將腳浸入網絡,數學,圖形等的神聖水域的開發人員. 但是,隨著網絡的發展如此迅速,並且隨著近年來跨越的所有新協議和圖書館的發展,現在開始構建基於瀏覽器的多人遊戲是非常簡單的. 在本文中,我們將逐步實施實時的多人遊戲入侵者遊戲(啊,懷舊!)帶有phaser3和實時的. 我已經在https:// space-invaders-multiplayer舉辦了最後一場比賽.Herokuapp.com/供您嘗試. 在此過程中,我們將了解其背後的體系結構,系統設計,網絡協議,並在構建基於多人瀏覽器的遊戲時要牢記註意事項. 這個教程系列分為四個部分:
- 第1部分:遊戲概念簡介和移動器庫
- 第2部分:評估實時應用程序的網絡協議
- 第3部分:實施服務器端代碼以使所有播放器保持同步
- 第4部分:完成客戶端代碼以渲染遊戲
我們開始之前的最後一件事. 本文對JavaScript和Express/nodejs進行了基本理解. 我將盡量解釋其他所有內容
讓我們開始遊戲!
第1部分 – 遊戲概念和移動器簡介
讓我們開始查看遊戲規則,因為它不會與原始復古經典相同.
多人太空入侵者的遊戲規則
- 當新玩家加入時,他們將在三個可用品種中隨機分配一個怪物頭像.
- 每個玩家都可以使用鍵盤上的箭頭鍵向左或向右移動頭像
- 每個玩家都會看到自己的白色頭像,但看到其他所有人都會以預先分配給他們的隨機顏色
- 當預設數量的玩家加入遊戲時,發射了一艘船. 該船以隨機選擇的方向沿地平線軸移動,該方向每5秒隨機變化. 隨之而來的是,船的速度也會改變. 這艘船還定期射擊,我們也可以預設
- 所有的化身都會在整個遊戲中以預設增量自動向下移動.
- 贏得比賽的目的是將其登上游戲屏幕的底部邊界,而不會被船隻射擊的一個或多個子彈殺死.
實時多人遊戲的組件
雖然似乎有很多網絡實時遊戲後面發生的事情,但它們確實歸結為三個核心組件:
讓我們進一步看看.
1. 資產
資產是構成遊戲的關鍵要素. 如果您希望一個對像出現在遊戲中,則可以在遊戲畫布上繪製一個物體,或者更好地使用圖像或精靈表並隨身攜帶動畫. 同樣,您想在遊戲中介紹和播放的任何音頻都將屬於其資產.

如果您有興趣製作遊戲的主題超級街機,可以關注格勞伯·科塔基(Glauber Kotaki)的本像素藝術教程.
2. 物理
物理學使我們能夠移動資產並決定遊戲中的不同對像如何相互作用. 例如,在一個簡單的乒乓球比賽中,球朝某個方向彈回,其速度取決於槳的哪一部分與. 同樣,在我們的遊戲中,這可能包括計算船需要去的地方,速度,子彈的射擊,這些子彈對象與玩家的頭像的碰撞等等.
所有這些東西基本上都是數學計算,符合物理概念,在引擎蓋下. 但是,即使在一個簡單的遊戲中,也可以從頭開始寫很多數學. 因此,我們可以使用可以為我們做大部分數學魔術的物理引擎編寫所有內容.
3. 聯網
對於多人遊戲實時遊戲特別重要的最終核心組件是網絡. 保持所有球員之間的同步,弄清楚哪個球員死亡,如果其他所有人都同意該主張.
不用擔心,如果所有這些都開始變得複雜,不一定是. 有許多先前存在的設計模式可以幫助我們以正確的方式開始. 我們可以選擇有關特定遊戲的機制,希望遊戲體系結構是如何的. 在本文系列中,我們將討論我為構建這個遊戲的模式和建築選擇以及為什麼.
既然我們對核心組件有了更好的了解,那麼讓我們探索如何在遊戲中使用這些功能.
使用移相器3添加資產並啟用物理
Phaser是一種開源的畫布和WebGL渲染HTML5的JavaScript框架. 我們將使用Phaser 3來構建遊戲. 我特別提到版本的原因是,調查器2和3(包括語法)之間存在許多破壞的變化. 另外,如果您希望將來自己為遊戲添加一些很酷的新功能,則應該知道什麼/在哪裡看.

移相器不僅允許我們在畫布上顯示資產,在網頁上播放動畫和聲音等,而且還帶有內置的物理引擎(實際上是多個). 這意味著我們只能說出當兩個對象碰撞時需要做的事情,並且它會自動關注碰撞並執行一件代碼,如果發生了.
有一個非常不錯的視頻教程系列,我建議您第一次使用Phaser 3.
在IT的TL; DR版本中,使用Phaser3,我們可以指定一個配置對象,該對象將具有有關畫布和遊戲本身的信息,包括畫布的大小,其樣式屬性,我們的遊戲玩法中包含的各種場景(不久討論),物理引擎的類型(由於移動器有很多)等.
然後,我們通過配置對像開始新遊戲.
這聽起來可能有些混亂,因為您還沒有看到任何代碼. 接下來讓我們去做.
開始遊戲
讓我們直接進入遊戲屏幕. 我們會擔心發布和排行榜頁面,以後. 我們的遊戲將是一個HTML頁面,上面放著畫布. 這個畫布將持有並運行實際的遊戲. 因此,讓我們創建一個文件,稱其為索引.html . 為了保持組織的井井 . 讓我們開始視圖/索引.帶有基本骨架的HTML文件:
如您所見,我們在這裡所做的只是鏈接到CSS和JS文件,我們將很快添加,但更重要的是指向Phaser JS CDN的鏈接. 您可以直接從GitHub項目中復制CSS
除此之外,在HTML機構中,我們有一個帶有遊戲符號ID的DIV . 在這裡,我們將通過JavaScript添加遊戲帆布.
讓我們在公共文件夾中創建一個文件,稱其為腳本.JS,首先定義我們之前談論的遊戲配置對象.
如您所見,除了指定畫布及其背景顏色的大小外,我們還指定了該畫布需要去的地方(由父母確定)以及我們希望參與其中的一部分場景遊戲.
Phaser使用“場景”的概念來組織遊戲的內容. 您可以將一個場景視為視覺上能夠在任何時間點看到的. 在玩遊戲時,如果遊戲切換到遊戲對象之間具有不同互動的不同背景,那麼它可能與您之前觀看的不同場景.
對於我們的遊戲,我們將有一個場景(通過GamesScene確定). 移相的場景是擴展移相器的課程.場景課. 讓我們為遊戲定義這個. 在引用GamesScene類時,在配置對像上方添加以下代碼.
如您所見,此類具有三個空的方法. 這些帶有移相器.場景課. 這些方法中的每一個具有不同的功能,如下所述
- preload()方法獲取我們可能需要的所有資源,無論它們在任何地方,都可以將它們加載並為它們添加到遊戲中時準備好這些資源.
- 遊戲首次運行時執行一次create()方法. 我們可以在此方法中添加所有可變初始化,動畫定義等.
- 只要遊戲打開,update()方法將在循環中連續執行,因此能夠根據遊戲邏輯不斷更新遊戲對象. 我們將在這種方法中更新化身,射擊子彈,移動船..
加載資產並創建動畫
讓我們繼續加載一些資產. 定義preload()方法如下
我最初在Glitch上託管了該遊戲,該遊戲將所有資產存儲在其存儲桶中,可通過CDN鏈接檢索. 您可以使用相同的方法,否則亞馬遜S3是另一個受歡迎的選擇.
我們添加了三種類型的化身,全部為白色和其他三種顏色. 除此之外,我們還為船,子彈,當然還有爆炸的資產,當玩家死亡時爆炸.
如您所見,我們在使用此功能中加載了一個Spritesheet資產.載入.SpriteSheet()並將其發送給三個參數:
- 標識符
- 實際文件的路徑
- 文件的尺寸(以像素為單位).
我們也可以稱其為圖像,但是我們將不久您會看到它的酷動畫.
p.s. 有一種更好的方法來實現頭像顏色. 我們可以簡單地在現有精靈中添加顏色色調,而不是以多種顏色與單獨資產加載相同的對象. 我還不知道如何,但是當我弄清楚時,我會更新此:)
如果您檢查“爆炸”精靈表,您會發現它是一堆彼此相鄰的不同圖像. 我們引起“動畫”的方式是以特定的速度瀏覽這些不同的圖像,這似乎是爆炸發生的透明視頻.
在create()方法中,我們將定義此爆炸的動畫:
我們已經使用了移動器.動畫.創建()創建動畫的方法. 此方法採用:
- 我們稍後將使用此動畫的鑰匙
- 使用我們要應用此動畫的資產的標識符生成幀的框架
- 構圖指定我們想播放此動畫的速度
- 重複說明動畫將運行多少次
- hideoncomplete指定動畫完成後,動畫的資產是否應消失
我們現在不會在update()方法中添加任何內容. 如果您注意到,我們實際上也沒有實例化遊戲,我們將在本文系列的後面部分做到這一點.
現在就是這樣. 我們將在第2部分中了解實時應用程序的網絡 – 評估實時應用程序的網絡協議
本系列中的所有文章:
- 第1部分:遊戲概念簡介和移動器庫
- 第2部分:評估實時應用程序的網絡協議
- 第3部分:實施服務器端代碼以使所有播放器保持同步
- 第4部分:完成客戶端代碼以渲染遊戲
如果您想檢查一下,請在GitHub上提供與本教程相關的單獨版本.
您也可以關注GitHub項目以獲取該項目的最新發展.
如果您有任何疑問,請隨時在Twitter @srushtika上與我聯繫. 我的DMS開放:)
類別:多人遊戲建築

Chimeraland是一個免費的PC(Windows)(Windows)和Mobile(Android/ios)的開放世界沙盒生存MMORPG(大量多人在線角色扮演遊戲),由Pixel Soft開發,並由Level Infinite發布. 該遊戲設置在一個史前,神話世界中[…]
![]()
![]()

Muck是一家免費的*單人遊戲和多人生存Roguelike PC(Windows),由受歡迎的挪威開發人員,藝術家和YouTuber Dani(他們也製作了Crab Game和Karlson). 穆克是一種較低的多聚,隨意但(非常)挑戰的生存融合(e.G. […]
![]()

沙箱是一種免費的遊戲,播放,分散和社區驅動的遊戲生態系統和PC的虛擬世界(Windows and Mac)(Open Alpha)(Open Alpha),並建立在以太坊區塊鏈(類似於分散的)上. 玩家可以建立,擁有,共享和[…]
![]()

Core是一個免費的遊戲集和遊戲製作平台,類似於Crayta和Roblox. 換句話說,核心是一個可以玩的免費遊戲和全球開發人員社區設計的世界的多元宇宙,您可以輕鬆地[…]
![]()

Crayta是一個免費的合作遊戲製作平台和多人街機遊戲系列,該遊戲構建了PC的Unreal Engine 4,類似於Core和Roblox. 玩家可以在雲中跳入並一起創建遊戲,而不管他們的編程經驗如何. 從 […]
![]()

Wild Terra Online是一個免費的MMORPG,帶有沙盒和生存功能,位於完全由玩家控制的中世紀幻想世界中. 您將不需要完成一系列任務並殺死一千個狼來創建設備. 一切都很多[…]
![]()
![]()

方舟:生存進化(移動)是一個免費的*移動動作行動冒險生存遊戲,由Studio通配符移動(Android,iOS),位於一個史前世界中恐龍和其他史前動物,自然危害,[…]
![]()

Unnating是在新興的MMO/多人啟示錄中的PC(Windows,Mac和Linux)中免費玩Zombie主題的沙盒生存近戰和射擊遊戲(Windows,MAC和Linux). 而不是專注於[…]
![]()
![]()

Totemori是一種有趣而創新的免費遊戲共享屏幕多人鬥士遊戲. Totemori具有本地與合作的多人遊戲,最多可容納4個玩家. 與您的朋友對抗或練習機器人,[…]
![]()
![]()

銀河垃圾聯盟是一個競爭性的免費比賽手工藝競技場 – 射手混合了幾乎無限的船建造可能性. 建造任何東西. 與任何人作戰. 在太空. 建立垃圾船以實際上形狀和大小,並與[…]的創造作鬥爭
![]()

Creativerse是一款令人愉快的免費遊戲和下一代MMO沙盒遊戲,介紹與您的朋友一起冒險,探索和創造力. 現在可以免費玩. 您被困在一個被兇猛的野獸和[…]所包圍的廣闊而神秘的世界中
![]()

槍支是FPS建築套件. 這是一款遊戲,讓您在抽水動作沙盒中發揮創造力而瘋狂! Gunscape通過提供基於每個人已經熟悉的塊插入界面來創建單人遊戲[…]的易於使用的工具來做到這一點。
![]()
![]()

Trove是免費的,開放式動作冒險素Voxel MMORPG,由Trion Worlds用於PC(Windows,Mac),Xbox One,PS4和Nintendo Switch. Trove的特徵是無數的領域,充滿了任務,箱子和敵人. 探索並創建自己的方式[…]
![]()
![]()
![]()
![]()

Roblox是一款大型多人遊戲在線視頻遊戲和遊戲創建平台(類似於Core and Crayta),允許用戶設計和共享自己的遊戲和級別,並播放其他用戶創建的所有類型的遊戲,來自[ …]]
