construct 2 : แสดงคะแนนเกม

จากคำถามของคุณ TOOMTAM TV.  ที่อยากทราบว่า "วิธีทำให้คะแนนอยู่กับหน้าจอตลอดทำยังไงครับผมทำให้มีคะแนนแล้ว แต่เวลาเล่นผลสกอ มันไม่ติดอยู่กับหน้าจอ"  ผมขอตอบคำถามในลักษณะของการสร้างเกมและต้องการให้วัตถุบางตัวแสดงตลอดเวลา แม้จะมีการเคลื่อนหน้าจอของเกม วิธีการสามารถทำได้หลายวิธี แต่ขอแนะนำ เพียง 2 วิธี

วิธีที่ 1 คือการกำหนดค่า parallax ให้กับ layout ให้มีค่าเป็น 0  จะทำให้ layout นั้น ไม่เคลื่อนที่ไปกับตำแหน่งของวัตถุในเกม ผมได้นำเสนอไปแล้วในบทความ Parallax effect
ซึ่งการคงตำแหน่งของ layout มีข้อดี คือ วัตถุต่าง ๆ ใน layout จะไม่เคลื่อนที่ไปด้วย เมื่อเราเพิ่มวัตถุใหม่เข้ามาใน layout ก็จำเป็นต้องกำหนดวัตถุให้ตรึงตำแหน่งเดิม เพราะ layout กำหนดไว้ให้แล้ว

วิธีที่ 2 คือการใช้คุณสมบัติของ Anchor Behaviors การใช้วิธีนี้ จะกำหนดให้กับวัตถุที่เราต้องการตรึงตำแหน่งเท่านั้น เมื่อหน้าจอเกมเคลื่อนที่ไป ตำแหน่งของวัตถุที่เราตรึงไว้ก็จะไม่เคลื่อนที่ตาม ทำให้แสดงบนจอภาพตลอดเวลา

เมื่อเลือกวัตถุที่ต้องการตรึงตำแหน่งแล้ว  คลิกที่ Add/edit Behaviors  จะปรากฏหน้าต่าง Behaviors
คลิกที่เครื่องหมายบวก  แล้วเลือก Anchor  หลังจากนั้นคลิกปุ่ม  Add จะได้ Anchor Behaviors สำหรับวัตถุที่เราต้องการ เมื่อสั่งให้เกมทำงาน ตำแหน่งของวัตถุจะถูกตรึงตำแหน่งเอาไว้

ทดลองใช้งาน และเลือกให้เหมาะสมกับเกมที่สร้างนะครับ จะใช้วิธีไหน ไม่มีข้อบังคับที่แน่นอน ขอให้สนุกกับการสร้างเกม

construct 2 : Parallax effect ตอนที่ 3

กำหนดค่าคุณสมบัติของ parallax ของแต่ละ layer ดังนี้
Background1  กำหนดเป็น 0,0
Background2  กำหนดเป็น 15,15
Background3  กำหนดเป็น 100,100

และกำหนดค่า transparent ของ layer ที่อยู่ด้านบนให้เป็น yes เพื่อให้มองทะลุผ่านไปยัง layer ด้านล่างได้
Background1

Background2

Background3

ทดสอบการทำงาน

    เพื่อให้เห็นการเปลี่ยนแปลงของพื้นหลังตามคุณสมบัติของ parallax จำเป็นต้องเพิ่มตัวละครที่มีการเคลื่อนไหวเข้ามาในเกม โดยเพิ่ม layer ใหม่ที่อยู่บนสุด และแทรก sprite ที่เป็นทางวิ่งของตัวละคร ในระดับเดียวกับ BG3 และกำหนดให้ initial visibility เป็น Invisible

และกำหนด Behaviors เป็นแบบ Solid

แทรกวัตถุใหม่เข้ามา เช่น รถ หรือตัวละครที่จะให้เคลื่อนที่

กำหนด Behaviors เป็นแบบ Platform และ ScrollTo

สั่งให้ Run เกม จะพบว่า เมื่อรถเคลื่อนที่ไปข้างหน้า ฉากพื้นหลังจะเคลื่อนที่ไปด้วยความเร็วที่ไม่เท่ากัน เหมือนการมองภาพจากหน้าต่างของรถนั่นเอง สามารถนำหลักการของ parallax ไปใช้ในการแสดงข้อมูลของเกมที่ให้แสดงบนหน้าจอเกมตลอดเวลาได้ ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : Parallax effect ตอนที่ 2

เพิ่ม layer ขึ้นมาใหม่ 3 ตัว เพื่อใช้ทำเป็นพื้นหลังของเกม คือ

ภาพพื้นหลังที่ใช้ ขอยกตัวอย่างจากเว็บ www.scirra.com สามารถ download ได้จาก http://dl.dropbox.com/u/6188140/BGImages.rar จะประกอบด้วยภาพพื้นหลัง 3 ภาพ
เพิ่มพื้นหลังเข้ามาที่ layout แต่ละตัว ดังนี้
ที่ layer Background1 ด้วยการ Insert new object แบบ sprite ด้วยภาพ BG1.png

ที่ layer Background2 ด้วยการ Insert new object แบบ sprite ด้วยภาพ BG2.png

ที่ layer Background3 ด้วยการ Insert new object แบบ sprite ด้วยภาพ BG3.png

ลำดับการเรียงของพื้นหลังจะเป็นลักษณะดังนี้

construct 2 : Parallax effect ตอนที่ 1

Parallax คืออะไร 

หลายคนคงจะสงสัย จะขออธิบายด้วยภาษาง่ายๆ ก่อน ผู้อ่านคงจะเคยนั่งรถไปยังที่ต่าง ๆ เวลาที่เรามองออกไปที่นอกหน้าต่าง จะเห็นต้นไม้ หรือเสาไฟฟ้าที่อยู่ใกล้ๆ เคลื่อนที่เร็วมาก แต่ต้นไม้ หรือวัตถุที่อยู่ไกลออกไปจะเคลื่อนที่ช้าลง และท้องฟ้า ภูเขา หรือดวงจันทร์ ที่อยู่ไกลมากๆ แทบจะไม่เคลื่อนที่เลย นี่คือลักษณะของเหตุการณ์ที่เรียกว่า parallax

Parallax ตามความหมายทางวิทยาศาสตร์ คือ ความแตกต่างของภาพ เมื่อมองจากตำแหน่งที่ต่างกันในเส้นแนวสายตา ทำให้เกิดการแทนที่ของวัตถุหรือระยะห่างของวัตถุที่มองเห็นแตกต่างกันออกไป วัตถุที่อยู่บริเวณใกล้เคียงจะมีค่า parallax ที่กว้างกว่าวัตถุที่อยู่ไกลออกไป เมื่อสังเกตจากตำแหน่งที่แตกต่างกัน

 

ที่มา : https://en.wikipedia.org/wiki/Parallax

จากภาพเมื่อมองจากตำแหน่ง Viewpoint A ในแนวเส้นสายตา จะเห็นภาพดาวซ้อนทับกับกล่องสีน้ำเงิน แต่เมื่อเปลี่ยนตำแหน่งการมองมาที่ Viewpoint B ภาพดาวจะเปลี่ยนมาทับซ้อนกับกล่องสีแดงแทน ลักษณะภาพที่เปลี่ยนไป เรียกว่า parallax

Parallax เกี่ยวกับ construct 2 อย่างไร

    การนำหลักการของ parallax มาใช้ในการสร้างเกม จะทำให้เกิดความสมจริงของเกมที่มีการเคลื่อนที่ เช่น แข่งรถ หรือการวิ่งเก็บสิ่งของ ตัวอย่างเกม เช่น angry birds, Jetpack Joyride, Subway Surfers เป็นต้น

ทดลองสร้างเกม

    สร้างโปรเจคใหม่ แล้วกำหนดขนาดของ Window เป็น 800 x 600 และขนาด layout เป็น 6000x6000  ดังนี้
ขนาดของ Window

ขนาด layout