ทำเกม Multiplayer ด้วย Node js และ Socket.io ตอนที่ 5

บทความ, การใช้งาน Unity

สวัสดีครับ กลับมาพบกับการ ทำเกม Multiplayer ด้วย Node js และ Socket.io ตอนที่ 5 กันต่อนะครับ จากตอนที่แล้วที่เราได้เตรียม Server side ไว้เรียบร้อยแล้ว วันนี้เราจะมาต่อกันที่ฝั่ง Client กันครับ

เริ่มจากการเพิ่มตัวแปรให้กับ Class NetworkClient ก่อนครับ โดยผมจะเพิ่มตัวแปล ClientId แบบ Static เพื่อให้ทุกๆที่สามารถเข้าถึงตัวแปรนี้ได้ง่ายๆ เพราะเราจะต้องใช้อีกหลายครั้ง โดยมีวิธีเขียนดังนี้

และเราต้องไปแก้ค่าที่เราเซตไว้ตอน Register ให้เอาค่ามาใส่ในตัวแปรใหม่ของเราด้วยครับ

ถัดมาเราจะสร้าง Class ที่ชื่อว่า NetworkIdentity โดย Class นี้จะเป็นตัวบอกว่าเราสามารถควบคุม GameObject ชิ้นไหนได้หรือไม่ได้ รวมไปถึงเก็บ Id ของ Player แต่ละคนด้วยครับ

เพิ่มตัวแปรไว้เก็บ  SocketIO เพื่อให้ง่ายต่อการรับส่ง Event  ซึ่งต้อง using SocketIO ด้วยนะครับ

สร้างฟังชั่นก์เพื่อตั้งค่าให้กับ Socket ของเรา

ตั้งค่าเริ่มต้นให้ isControlling เป็น false ใน Awake ฟังชั่นก์ เราจะตั้งค่าให้สามารถควบคุมได้แค่ตัวเดียวครับ

สร้างฟังชั่นก์สำหรับรับค่า ID และค่า isControlling

สร้างฟังชั่นก์สำหรับ return ค่า id

สร้างฟังชั่นก์สำหรับ return ค่า isControlling

สร้างฟังชั่นก์สำหรับ return ค่า socket

เท่านี้เราก็เตรียม Class NetworkIdentity พร้อมแล้วครับ

ต่อมาเราจะสร้าง Class NetworkTransform เพื่อใช้ระบุตำแหน่งของ Player แต่ละตัวนั่นเอง

สร้างตัวแปรมาเพื่อเก็บตำแหน่งเดิมของเราเอาไว้ครับ เพื่อที่จะเอาไว้เช็คว่าผู้เล่นอยู่ที่ตำแหน่งเดิมรึเปล่า ซึ่งเราจะใช้ Vector3 เลยเพื่อที่จะอ้างอิงกับ transform.postion ได้โดยไม่ต้องแปลงค่าครับ

สร้างตัวแปรแบบ Player เพื่อใช้เก็บ id และตำแหน่ง แต่ตอนนี้เรายังไม่มีคลาสนี้เดี๋ยวเราจะสร้างกันครับ ตอนนี้ประกาศเอาไว้ก่อน

สร้างตัวแปรไว้สำหรับเช็คว่าผู้เล่นอยู่ในตำแหน่งเดิมรึเปล่า ซึ่งเราจะส่งข้อมูลไปก็ต่อเมื่อยืนอยู่ที่เดิมเกินช่วงเวลาที่เรากำหนด

สร้างตัวแปรไว้เพื่อ Reference หา Class NetworkIdentity ด้วยครับ

และเมื่อเข้าฟังชั่นก์ Start หรือเมื่อ Object ตัวนี้ถูกสร้างขึ้นมา Class นี้ก็จะทำการ Referenece หา NetworkIdentity ที่อยู่ใน GameObject ตัวเดียวกัน ตั้งค่า oldPosition และสร้าง Class Player ขึ้นมาใหม่ ( ซึ่งตอนนี้ยังไม่มี )

เราจะสร้าง Player class เอาไว้เก็บ id และ ตำแหน่ง โดยเราจะสร้างแยก Class ใหม่ก็ได้หรือจะสร้างไว้ใน Class อื่นๆที่มีอยู่แล้วก็ได้เช่นกันนะครับ โดยในที่นี้ผมจะสร้างไว้ใน Class NetworkContainer  เพื่อให้ง่ายครับ ซึ่งเราจะต้องใส่ [Serializable] ไว้ด้วยครับ

จะเห็นว่าเรายังไม่มี Class Position ก็สร้างต่อกันเลยครับ

จากนั้นกลับไปที่ NetworkTransform กันต่อครับ โดยเราจะเซตค่าเริ่มต้นให้กับ Player class ที่เรา new ขึ้นมานั่นเอง

เช็คว่าถ้าออบเจคชิ้นนี้ไม่ได้เป็นของเรา ให้ปิด Component นี้ไปเพื่อไม่ให้เซตค่าได้ครับ

จากนั้นในฟังชั่นก์ Update เราจะทำการส่งข้อมูล Transform ไปยัง Server รวมถึงเช็คว่าตัวละครเราย้ายที่หรือไม่ หากย้ายที่ก็จะส่งข้อมูลไป Update ที่ Server แต่หากอยู่นิ่งๆซักพักนึง ซึงในตัวอย่างนี้รอ 1 วินาทีครับ แล้วเราก็จะส่งข้อมูลไป Update ที่ Server เหมือนกันครับ ซึ่งเราจะส่งไปก็ต่อเมื่อเราสามารถควบคุมออบเจคชิ้นนี้ได้นั่นเองครับ

จากนั้นเราก็จะมาสร้างฟังชั่นก์ SendData กันครับ โดยค่าที่ส่งไปเราจะทำการปัดเศษให้เหลือ 3 ทศนิยมก่อนเพื่อไม่ให้ส่งค่าแปลกๆไปยัง Server ซึ่งตรงนี้เราจะต้อง emit ให้ตรงกับชื่อฟังชั่นก์ที่เราเขียนไว้ใน index.js ของเรา และถ้าเราจำได้ ฟังชั่นก์ที่เราเขียนไว้ต้องการรับค่าเป็นค่าตำแหน่ง x และ เหมือนกันกับ Class Player ที่เราเพิ่งสร้างเลย ดังนั้นเราจะแปลง player เป็น JSON ส่งไปครับ ซึ่ง Unity มี Utility class ที่ช่วยแปลง JSON ให้เรา ก็จะทำให้ง่ายขึ้นครับ มาลองดูกันเลย

ต่อมาเราจะมาทำการเตรียมตัวแปรไว้สำหรับอ้างอิงตัว Game Object ที่เราจะ Spawn ออกมาครับ ซึ่งก็เป็นแค่ตัวแปรแบบ GameObject ธรรมดาที่เราจะลาก Prefab เอามาใส่นั่นเอง

และจาก Dictionary ที่แก็บตัวแปรแบบ String และ GameObject ไว้สำหรับ Player object จริงๆเราไม่ต้องเก็บเป็น GameObject ก็ได้ครับ เพราะเราต้องการแค่ ID และ ตำแหน่ง เพราะฉะนั้นเราจะเปลี่ยน Dictionary เป็นการเก็บ String คู่กับ NetworkIdentity ครับ และเปลี่ยนการ Spawn Object เป็นการ Instantiate จาก Prefab ของเรากันนั่นเองครับ

และต้องแก้การทำลายในฟังชั่นก์ OnDisconnected ด้วยครับ

ตอนนี้เรายังขาดการรับฟังชั่น OnupdatePosition จาก Server นะครับ มาทำกันเลยครับ ซึ่งการแปลง JSON กลับมาเป็นค่าใน Unity จะใช้คำสั่งแบบนี้ครับ

อย่าลืมแก้ฟังชั่นก์ Initialize ให้ใช้ NetworkIdentity ใน Dictionary ด้วยนะครับ

ถัดมาเราจะไปสร้าง PlayerPrefab กันครับ ซึ่งเราจะใส่ Component  ลงไป 2 ตัวคือ NetworkIdentity และ NetworkTransform ครับ

อย่าลืมลากไปใส่ในช่องที่เราเตรียมไว้ใน Network Client ด้วยนะครับ

ตอนนี้หากเรากด Play ตัว Player Prefab จะถูก Instantiate ออกมาแล้ว แต่ว่าเรามองใน Game view จะยังไม่มีอะไรมาแสดงผลให้เห็นชัดเจน ดังนั้นเราจะใส่ Sprite เป็นตัวลูกเพื่อให้แสดงผลออกมาครับ

ต่อมาเราจะสร้าง Class ใหม่ที่ชื่อว่า PlayerManager เพื่อให้เราสามารถควบคุมตัว Player ได้กันนะครับ โดย Class นี้เราจะมีตัวแปร 2 ตัว คือ Speed และ NetworkIdentity เพื่อบอกให้รู้ว่า Object ชิ้นนี้สามารถควบคุมได้รึเปล่านั่นเองครับ

เท่านี้พอเรากด Play เราก็จะสามารถควบคุมตัว Player ของเราและ Update ขึ้นไปยัง Server ได้แล้วครับ

ถ้าเราลอง build ออกมาเป็น exe เราจะสามารถเห็นตัว Player ของเราและของตัวที่ Build มาสามารถบังคับและมองเห็นได้แบบ Real time แล้วล่ะครับ

เท่านี้เราก้สามารถที่จะ Update ตำแหน่งของตัว Player สำหรับทั้ง Client และ Server ได้แล้วล่ะครับ สำหรับตอนหน้าเราจะมาทำ Event รับการหมุนบน Server กันต่อนะครับ

, ,

บทความที่เกี่ยวข้อง

Menu