วันจันทร์ที่ 31 สิงหาคม พ.ศ. 2558

[Unity 2D] สร้างเกมง่ายๆ Tappy Plane ตอนที่ 8 : สร้าง Prefab ฉากพื้นหลัง

สร้างพื้นหลัง

คลิกขวาใน Hierarchy จากนั้นเลือก 2D Object -> Sprite จะได้ Game Object ที่มี Component Sprite Renderer ในที่นี้จะตั้งชื่อว่า Background
จากนั้นใส่ Asset ภาพ background ให้กับ Component Sprite Renderer
ดูที่หน้าต่างซีนและ Camera Preview จะเห็นว่าภาพพื้นหลังของเราเล็กกว่ากล้องมาก
ดังนั้นจะมาทำการปรับขนาดของภาพพื้นหลังกัน ดังนี้

คลิกที่เกมออบเจ็ค Background ไปที่หน้าต่าง Inspector ที่ Component Transform จะเห็นค่า Scale ให้ปรับค่า Scale X และ Scale Y เล่นดู จะเห็นว่า Scale X คือความกว้าง และ Y คือความสูงนั่นเอง
ในที่นี้จะปรับ Scale X และ Scale Y เป็น 2.1เนื่องจากอิงแนวตั้งเป็นหลัก จะเห็นว่าใน Camera Preview ฝั่งแนวนอนยังเหลือพื้นที่ว่าง แต่ไม่ต้องกังวลเพราะเดี๋ยวเราจะทำการเพิ่มฉากพื้นหลังทางด้านซ้ายและขวา เพราะเดี๋ยวเราจะมาเขียนโปรแกรมให้ฉากวนลูปกัน
แต่ก่อนที่เราจะทำการเพิ่มฉากพื้นหลังทางด้านซ้ายและขวา เราจะทำการเตรียมตัวฉากหลังให้เรียบร้อยก่อนเพื่อที่เราจะได้ก๊อปปี้ทีเดียว เนื่องจากตอนนี้เรายังไม่สามารถทราบขนาดของฉากหลังที่เราสร้างได้จะเห็นว่าใน Component Transform จะมีแค่ตำแหน่ง การหมุน และสเกล แต่เราอยากทราบขนาดของภาพฉากหลังเพื่อที่จะนำมาคำนวณในการเขียนโค้ดการวนลูปฉาก ดังนั้นเราจะมาทำการใส่ BoxCollider2D ใก้กับฉากหลังกัน

อะไรคือ BoxCollider2D

BoxCollider2D เป็นตัวตรวจสอบการชนกันของวัตถุโดยใช้หลักฟิสิกส์ โดย BoxCollider2D จะมีรูปร่างเป็นสี่เหลี่ยมพื้นผ้า

ให้ทำการใส่ BoxCollider2D ให้กับเกมออบเจ็ค Background โดยคลิกที่เกมออบเจ็ค Background ไปที่หน้าต่าง Inspecter คลิก Add component -> Physics 2D -> Box Collider 2D
 จากนั้นจะสังเกตได้ว่าใน Component จะมีความกว้างและความสูงให้ปรับที่ Size X และ Y นั่นเอง
หลังจากเราเตรียมฉากพื้นหลังเรียบร้อยแล้วเราะจะมาก๊อปปี้ฉากหลังกัน แต่เราจะไม่ก๊อปปี้ธรรมดา เราจะสร้างเก็บเป็น Prefabs

ทำความรู้จักกับ Prefab

การที่เราจะก๊อปปี้เกมออบเจ็ค เราก็แค่คลิกที่เกมออบเจ็คนั้นๆ จากนั้นกด Ctrl + D เราก็จะได้เกมออบเจ็คนั้นๆมาแล้ว ถ้าก๊อปปี้มาสัก 10 อัน แล้วเกิดต้องการแก้ไข Property อะไรสักอย่างละ อย่างนี้เราก็ต้องมานั่งแก้ทั้ง 10 อันใช่หรือไม่

Prefeb ใน Unity จะช่วยแก้ปัญหาเรื่องนี้มาก เนื่องจากการสร้าง Prefab คือการสร้างแม่แบบ เมื่อเรามีการแก้ไขแม่แบบทุกๆเกมออบเจ็คที่เป็น Prefab ชนิดเดียวกันจะถูกแก้ไขตามไปด้วย สร้างความยืดหยุ่นให้กับเกมออบเจ็คที่มีการ Reuse หลายๆที่

วิธีการสร้าง Prefab ทำได้ง่ายๆโดยการลากเกมออบเจคที่จะสร้าง Prefab ไปไว้ในโฟลเดอร์ที่ต้องการจัดเก็บ ดังภาพจะได้กล่องสีเหลี่ยมสีฟ้าๆชื่อว่า Background
ลาก Prefeb พื้นหลังที่เราทำการสร้างเมื่อสักครู่มาใส่ใน Hierarchy 2 อัน จากนั้นตั้งชื่อให้ใหม่เป็น Background1 Background2 และ Background3

การเปลี่ยนชื่อเกมออบเจ็คทำได้ที่บนสุดของหน้าต่าง Inspector
เราจะให้ Background2 เป็นฉากหลังที่อยู่ตรงกลางคือมี Position X เริ่มต้นที่ 0 และจะให้ Background1 เป็นฉากหลังทางซ้าย ส่วน Background3 เป็นฉากหลังที่อยู่ฝั่งขวา

คำนวนตำแหน่งของพื้นหลัง

จากภาพจะเห็นว่าที่ BoxCollider2D มี Size X หรือความกว้างเท่ากับ 8 แต่มี Scale X เท่ากับ 2.1 ดังนั้นตำแหน่งของพื้นหลังจะเท่ากับ 2.1*8 = 16.8
ดังนั้นตำแหน่งของฉากหลังทางซ้ายหรือ Background1 จะเท่ากับ -16.8 ส่วนตำแหน่งของฉากหลังทางขวาหรือ Background3 จะเท่ากับ 16.8

ไม่มีความคิดเห็น:

แสดงความคิดเห็น