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