LV. 11
GP 47

【攻略】一起做遊戲吧!前端、後端技術分享~By【阿比頓:無盡之島】

樓主 SWALA tykook2002
GP177 BP-
大家好,我們是【阿比頓:無盡之島】的製作團隊,我們每月都會在這裡分享團隊的製作秘辛,內容有深有淺,希望可以幫助到正在努力獨自開發遊戲的你:)

主條目
一、[後端]架設PhotonServer  MmoDemo伺服器
二、[後端]如何精準計算傷害範圍?
三、[前端]快速製作簡易拱門
四、[前端]模型描邊效果
五、[前端]ICON製作流程
六、[前端]碰撞增生特效分享


※分享內容以Unity 3D表現為主


-----------------------------
一、架設PhotonServer  MmoDemo伺服器
前言:
【阿比頓:無盡之島】是由Photon Server的MmoDemo改製而成。
語言:C#,編譯後的執行語言是C++。

是否開源:否支援平台:僅Windows
是否收費:執行超過100(CCU)同時連線數開始收費,

MmoDemo已完成的處理:
一、興趣區域管理訂閱功能,在畫面內或近距離的物件才需要顯示,避免不必要的封包傳遞及效能損失
二、與Unity的基本連線及玩家移動處理
三、玩家基本狀態、物件架構
四、伺服器端地圖大小的配置(需要小修改才能由伺服器自主創建,Demo為客戶端首次登入者決定地圖大小)
五、世界管理:可以直接在伺服器創建不同的遊戲世界(地圖、副本等)
六、雷達功能:對所有物件或指定物件僅顯示座標在客戶端,可以直接看見未接近(訂閱)的物件動向,並自己決定更新頻率,運用層面比如打開地圖看不在視線內的隊友正在哪裡。
七、可以清楚的看見兩種封包型態在此專案內

Operation:客戶端要求伺服器執行某些事情,伺服器再回傳相對應執行內容(比如買入一件裝備進道具欄、跟NPC談話打開對話選項介面、創角等不需要讓別的玩家看到的一切),有時候伺服器不做回應只接收要求。

Event:一切需要讓別的玩家看見的項目,或稱廣播事件(比如移動、攻擊、登入等)
另外還有Message:伺服器自主做某件事時,針對某玩家發送的封包內容。

較為欠缺需要自己補完的功能:
一、驗證登入機制、帳號密碼機制,Photon台灣代理商珈特科技的Evangelist Steven Hu 表示,登入驗證機制應自行撰寫獨立伺服器而不使用Photon作為底層,以避免玩家資料外洩問題。
二、物理引擎或物理模擬機制(技能的碰撞檢測等),目前我們已撰寫自己的一套物理模擬機制,經壓力測試1000隻怪同時施放技能+一位玩家同畫面內CPU使用率5%以內(I5-7400)。
三、AI移動機制,我們採用A星 Pathfinding來作為NPC尋路處理。
四、資料庫連接機制,請自行決定使用哪種資料庫儲存遊戲內容、玩家內容,並找到相關。
五、NPC單位,需要自行創建NPC單位及相關AI處理方式,在Photon Server官方論壇已有相關討論串及教學。

以上僅針對RPG類型遊戲,若要做其它MMO類型遊戲請自行延伸需求功能,也歡迎各路高手提供,我們將在本篇補上。
未來將一步步教你如何由此改出一個你自己的MMO 遊戲伺服器,第一篇教你如何做基本Demo架設到可以上線玩,且多個客戶端互相看到對方。


教學開始:

首先來到SDK下載處:https://www.photonengine.com/en-us/sdks#server  點選Server
二、點選最新版本編號即下載(需註冊登入)

三、解壓後的資料夾結構
deploy - 伺服器執行程式在此,原始碼編譯後會成為dll,也是放在這裡加上一些設定後實質運行伺服器
doc - 一些英文手冊或設定教學
lib - 開新的專案時需要手動加入參考以引用Photon底層,平時無須理會

src-server - 伺服器端原始碼都在此
Deploy資料夾,bin_Win64 最為重要,是伺服器執行的主程式
另外請自行新建一個資料夾預備,本教學建立名為MmoServer
src-server -> Mmo資料夾內,會看到許多方案,接著我們可以用Visual Studio、Visual Studio Code或任何自己習慣的IDE開專案檔sln
Server最為重要,是遊戲邏輯的主要處理,這時右鍵→建置
編譯後要將Server.dll+Common.dll及必要引用各項底層dll整陀放到剛才創建的MmoServer→bin資料夾
Common方案,通常不特別建置,在編譯Unity3D或Server時會自動一併建置;伺服器和客戶端的通用層,主要存放封包溝通的操作代號及一些封包加解密、序列化處理。

UnityGrid:本DEMO的Unity專案原始檔,請直接使用Unity開啟本資料夾即可

Unity3D方案:編譯成Unity3D.dll檔案,同server一樣,編譯後bin資料夾內的所有dll丟到Unity客戶端Asset→Photon資料夾(必要儘dll檔,pdb作為除錯開發階段可以使用);主要玩家封包接收處理在此,同時有些資料為了不使玩家輕易更動,所以將客戶端需要處理的數據封存在此。

接下來教如何架設
架設前,詳細配置參數說明請參閱Photon Taiwan官方教學:連結在此
回到Photon主程式 deploy\bin_Win64 資料夾
並開啟檔案:PhotonServer.config清空所有內容

貼入內容下:
<?xml version="1.0" encoding="Windows-1252"?>
<!--
        (c) 2015 by Exit Games GmbH, http://www.exitgames.com
        Photon server configuration file.
        詳細資訊請見 photon-config.pdf.             
        
-->
<Configuration>
        <MmoServer
                MaxMessageSize="512000"
                MaxQueuedDataPerPeer="512000"
                PerPeerMaxReliableDataInTransit="51200"
                PerPeerTransmitRateLimitKBSec="256"
                PerPeerTransmitRatePeriodMilliseconds="200"
                MinimumTimeout="5000"
                MaximumTimeout="30000"
                >
                        
                        <!-- 0.0.0.0 opens listeners on all available IPs. Machines with multiple IPs should define the correct one here. -->
                        <!-- Port 5055 is Photon's default for UDP connections. -->
                        <UDPListeners>
                                <UDPListener
                                        IPAddress="0.0.0.0"
                                        Port="5055">
                                </UDPListener>
                        </UDPListeners>

                        <!-- Defines the Photon Runtime Assembly to use. -->
                        <Runtime
                                Assembly="PhotonHostRuntime, Culture=neutral"
                                Type="PhotonHostRuntime.PhotonDomainManager"
                                UnhandledExceptionPolicy="Ignore">
                        </Runtime>
                                        

                        <Applications Default="MmoServer">
                        
                                <!-- MMO 啟動區設定 -->
                                <Application
                                        Name="MmoServer"
                                        BaseDirectory="MmoServer"
                                        Assembly="Photon.MmoDemo.Server"
                                        Type="Photon.MmoDemo.Server.PhotonApplication"
                                        ForceAutoRestart="true"
                                        WatchFiles="dll;config"
                                        ExcludeFiles="log4net.config">
                                </Application>

                        </Applications>
        </MmoServer>

</Configuration>

完成存檔後開啟PhotonControl.exe螢幕右下角小圖示找到Photon伺服器,並選到MmoServer → Start as application

這時如果看見且沒有閃爍表示啟動成功。
最後一步:開啟多個遊戲+一個以Unity專案開啟來確認伺服器運作中

打開Unity以下列資料夾開啟
src-server\Mmo\Photon.MmoDemo.Client.UnityGrid
開啟Unity專案後選擇mmodemo場景,開始測試遊戲
只有孤單一個人? 那當然,再來請編譯WinGrid方案,編譯後到
src-server\Mmo\Photon.MmoDemo.Client.WinGrid\bin\Debug
打開Photon.MmoDemo.Client.WinGrid.exe
接下來就可以開始自己延伸,將自己的角色模型替換掉那個基礎的Capsule(Resources→PlayerPrefab→Capsule)

甚至在WASD移動操作處加上角色移動動畫
找到Script → itemBehaviour.cs    82行附近
else if (newPos != transform.position)

在此條件內看見
transform.position = Vector3.Lerp(transform.position, newPos, lerpT);

即為角色移動(包含自己和別人的)
所以在這句裡面加上角色動畫播放指令或任何你能發揮的作法即可。

下一節將帶領各位體驗封包傳遞的雲霄飛車之旅請自備並繫好安全帶準備出發,研究該章之前建議有Tcp/IP、計算機概論基礎,並先對Socket有基本認識者適用。

有遇到任何問題或說明錯誤指正歡迎上我們的Discord一同交流~
我的ID是Zan~





---------

二、後端如何精準計算傷害範圍?

前言:首先要學會畢氏定理


一個直角三角形 ABC,最長的邊平方會等於其他兩邊的平方和
如果在三角形各邊上加上一個正方形,那麼兩個小正方形的面積和就會等於大正方形的面積,這個公式可以往後都跟「距離」計算有相關。



教學開始:

1.指定技

需要使用"歐幾里得幾何"距離公式

距離公式是由畢氏定理變化來的,假設兩點 (2,3) 和 (5,5),求出兩點距離。

首先劃出直角三角形,
找到直角三角形的垂直和水平邊長,兩個藍點的距離為C,計算方式如下:

2.判定目標是否在圓內

需要參數有圓半徑、圓心,通過計算該點到圓心距離(歐幾里得幾何距離),如果距離小於圓半徑,那麼該點就會落在圓內。


3.指向技能


需要參數有:
  • 綠色大圓半徑
  • 口徑:兩條紅線的長度
  • 圓心座標
  • 旋轉角

判斷流程:
1.敵人座標與圓心判斷是否在綠色大圓半徑,敵人D不在範圍內
2.由圓心座標和旋轉角求出直線方程式(克拉瑪公式解)
3.敵人座標與直線方程式判斷距離是否為(口徑/2)內,敵人C不在距離內
4.此時的判斷會包含背後敵人,去掉背後座標,即為中彈





---------
三、快速製作簡易拱門

教學影片(記得開字幕)
(記得開字幕)
最後再加一點細節就完成了

可以放置在場景的任意出入口,
也可複製延伸增長走道,
做好一個雛形,後面再做出破舊感就很簡單了。





---------
四、LowPoly Outline模型描邊效果
Mesh硬邊的Outline效果,利用後製來呈現Outline選擇外框效果。

前言 :
如果3D模型是利用模型的vertex縮放或normal延伸的方式來呈現描邊效果,軟邊模型可以正常使用以上方法,但是硬邊模型就會出現分裂式的擠出效果,右邊軟邊模型呈現很適合卡通渲染的描邊效果。

呈現方法:
硬邊的外輪廓效果不能用模型擠出的方式來呈現,但可以利用後製效果來達成外輪廓效果原理是利用Camera來取得一張輪廓的TargetTexture,再從這圖案做擠出的動作。

插件介紹:
這個插件就能實現像選取角色呈現外輪廓的效果,使用方法也很簡單。
1.在Camera上加上OutlineEffect  Component 。
2.在裝有MeshRender的GameObject上加上Outline Component 並設定顯示顏色的int就會有基本的效果。
如果顏色不夠需要近腳本去修改顏色數量,但是因為效能問題建議大家要想清楚再增加顯示顏色數量。
插件網址:





---------
五、ICON製作流程
阿比頓的圖標製作不同於常態流程,
採用先有3D模型才畫圖標的原則,
基於UI風格而決定使圖標較可愛呈現,
參考模型結構外,
尚須處理陰影結構及描邊以避免與UI相近色時融為一體難以區別。
根據配色面的位置填補各處細節顏色,
在近似色中刻意加強亮或暗度使其更生動鮮明。





---------
六、碰撞增生特效分享

前言:
不囉嗦先看圖
這次要表現的是如何1顆碰撞變2顆,2顆變4顆,然後越變越多。

教學開始:
開啟你的Particle System,並製作一顆球,
讓球體下墜,並碰撞到地板,


(第一顆黃球的面板)
這是最重要的項目!!!

Collision是碰撞方式
Dampen是碰撞後是否馬上結束該顆粒子,值越大越快結束,若為1就是碰到直接消失
Bounce是碰撞後是否彈跳,值越大彈越高,若為1就是完全反彈
Max Kill Speed調為0,不然很多球球在彈跳過程會直接消失的無影無蹤

Sub Emitters是粒子在特殊狀態下會產生什麼反應
我們選擇Collosion,也就是碰撞後會產生什麼反應,
並把第二顆紅球(RedBall)的粒子抓進來
(Hierarchy面板的內容,Glow是爆開特效)
黃球產生紅球,紅球產生綠球,綠球產生藍球,
(紅球的面板,綠球、藍球以此類推)
(紅球的粒子發射數量,記得一定要用Bursts瞬間產生,用Rate over Time會什麼都生不出來,如果每種顏色都發射10顆,最後就會有10的N次方顆球,太多球很容易當機)

※地板也要加Collider,不然就啥都碰撞不了!

附上專案範例:


---------
接下來每個月都會固定分享一些資訊,
有時會是經驗分享,
有興趣的朋友記得關注【阿比頓:無盡之島】喔~
有什麼問題想問或是分享,歡迎直接到我們的Discord^^

177
-
未登入的勇者,要加入討論嗎?
板務人員:

220 筆精華,今天 更新
一個月內新增 4
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】