Construct 2 : การแบ่งหน้าจอ 2 ช่องหรือมากกว่า ด้วย Plugin Canvas

ในบทความนี้จะแนะนำการแบ่งหน้าจอ การเล่นเกมออฟไลน์แบบ 2 ผู้เล่น ให้ดูสมจริงมีมุมมองเหมือนกับการแข่งขันกันจริงๆ โดยใช้ plugin Canvas เป็นผู้ช่วย สำหรับท่านที่ยังไม่มี plugin ตัวนี้ ให้ไปดาวน์โหลดมาติดตั้งเสียก่อน [ดาวน์โหลดที่นี่] เมื่อพร้อมแล้วก็ลงมือทำกันได้เลยครับ

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

 

2.  เพิ่มเลเยอร์ canvasScreen ไว้บนสุดดังนี้

3.  ที่เลเยอร์ canvasScreen เพิ่มออปเจค Canvas  ตั้งชื่อ screen1 ตั้งค่าคุณสมบัติดังนี้

4.  ที่เลเยอร์ canvasScreen เพิ่มออปเจค Canvas  ตั้งชื่อ screen2 ตั้งค่าคุณสมบัติดังนี้

5.  ที่เลเยอร์ canvasScreen เพิ่มออปเจค Sprite  ตั้งชื่อ checking ตั้งค่าคุณสมบัติดังนี้

  • ตำแหน่ง X  เท่ากับ ความกว้างของวินโดว์ หาร 2
  • ตำแหน่ง Y เท่ากับ ความสูงของวินโดว์
  • ขนาดความกว้าง  เท่ากับ ความกว้างของวินโดว์ หาร 2
  • ขนาดความสูง  เท่ากับ ความสูงของวินโดว์

5.  เปิด Event Sheet เพิ่ม Event และ Action ดังนี้

5.1 อีเวนต์ 3 และ อีเวนต์ 6 การเคลื่อนที่ของ screen1 และ screen2 ตามการเคลื่อนที่ของ player ด้วยคำสั่ง clamp(x, lower, upper)

  • อีเวนต์ 3   แอคชั่นการกำหนดตำแหน่ง X, Y ของ screen1 (Set position) เปลี่ยนแปลงตามตำแหน่ง X,Y  Player1

กำหนดค่า X

clamp(Player1.X,self.Width/2,LayoutWidth-self.Width/2)

กำหนดค่า Y

clamp(Player1.Y,self.Height/2,LayoutHeight-self.Height/2)
  • อีเวนต์ 6 แอคชั่นการกำหนดตำแหน่ง X, Y ของ screen2 (Set position) เปลี่ยนแปลงตามตำแหน่ง X,Y Player2

กำหนดค่า X

clamp(Player2.X,self.Width/2,LayoutWidth-self.Width/2)

กำหนดค่า Y

clamp(Player2.Y,self.Height/2,LayoutHeight-self.Height/2)

5.2 อีเวนต์ 4 และ อีเวนต์ 7  ตึงพิกัดของ screen1 และ sceen2 ไว้ด้วยกรอบของ checking ด้วยคำสั่ง   BBoxLeft  BBoxRight  BBoxTop

  • อีเวนต์ 4   แอคชั่นการกำหนดตำแหน่ง X, Y ของ screen1 (Set position) ไว้ที่กรอบมุมบนซ้ายของ  checking

กำหนดค่า X

checking.BBoxLeft

กำหนดค่า Y

checking.BBoxTop
  • อีเวนต์ 7 แอคชั่นการกำหนดตำแหน่ง X, Y ของ screen2 (Set position) ไว้ที่กรอบมุมบนขวาของ  checking

กำหนดค่า X

checking.BBoxRight

กำหนดค่า Y

checking.BBoxTop

5.3 คำสั่งวาง Layer ลงบน Canvas

  • หน้าจอ 1

  • หน้าจอ 2

5.4 คำสั่งวาดเส้นแบ่งเขตหน้าจอ

  • วาดเส้นแนวตั้งด้านขวาของหน้าจอ 1
  • วาดเส้นแนวตั้งด้านซ้ายของหน้าจอ 2

ขอให้สนุกกับการสร้างงานนะครับ แล้วพบกันใหม่

ดาวน์โหลดไฟล์ตัวอย่าง

ทดสอบผลงานที่ได้ https://semicon.github.io/splitscreen/