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

Construct 2 : Animations ตอนที่ 2

การสร้างภาพเคลื่อนไหวท่าเดิน

ในการสร้างภาพเคลื่อนไหวนั่น นิยมสร้างเป็นท่าทางต่าง ๆ ของตัวละคร ผมจะขอแนะนำการสร้างท่าเดินของตัวละครก่อนนะครับ
ขั้นแรก เตรียมภาพ ตัวละครที่มีท่าทางในการเดิน ประมาณ 4 ภาพ

เพิ่มภาพเคลื่อนไหวใหม่ ตั้งชื่อเป็น walk

ทำการเพิ่มไฟล์ภาพเข้ามาที่ Animation frames ด้วยการคลิกขวา เลือกคำสั่ง Import frames และ Form files

เลือกภาพที่จะใช้เป็นท่าทางการเคลื่อนไหวของการเดิน การเลือกหลายไฟล์ ทำได้โดยการกดปุ่ม Ctrl ค้างไว้ในขณะที่เลือกภาพ เมื่อเลือกภาพครบแล้ว คลิกปุ่ม Open

ลบเฟรมภาพที่ 0 ทิ้งไป เพราะที่เฟรมดังกล่าวเราไม่ได้กำหนดภาพที่ใช้ในการเคลื่อนไหวเอาไว้

จะได้ลำดับของภาพเคลื่อนไหว ดังนี้

เมื่อเลือกคำสั่ง preview จะได้ท่าทางการเดินของตัวละคร

Construct 2 : Game Layouts

Construct 2 : Game Layouts
ในการสร้างเกมองค์ประกอบที่สำคัญอีกอย่างหนึ่งคือ ฉากของเกม (Scene) เช่น หน้าแรกของเกม ฉากจบ (game over) เป็นต้น ตัวโปรแกรม Construct 2 จะใช้คุณสมบัติของ Layouts ในการกำหนดฉากต่างๆ ของเกม ในบทความที่ผ่านมา ผมได้แนะนำการสร้างเกม สร้างตัวละคร การชนวัตถุ และการเก็บคะแนน ในบทความนี้ผมจะนำมารวมและสร้างเป็นฉากของเกมที่สมบูรณ์

ขั้นตอนแรก ต้องสร้าง Layouts ของหน้าแรกของเกม และหน้าสิ้นสุดของเกมเพิ่มขึ้นมา  ขั้นตอนในการสร้าง Layouts ใหม่ สามารถทำได้โดย ไปที่พาเลท Projects คลิกขวาที่แถบ Layouts แล้วเลือกคำสั่ง Add layout

จะปรากฏหน้าต่าง เพื่อให้เลือกว่าจะสร้าง event sheet ที่คู่กับ Layout ที่สร้างใหม่หรือไม่ ในกรณีนี้ให้เลือก Add event sheet เพราะเราต้องเพิ่มการควบคุมใน Layout ใหม่ที่สร้างขึ้นมาด้วย

เปลี่ยนชื่อ Layout ใหม่เป็น Titlegame  เพื่อใช้สร้างเป็นหน้าแรกของเกม ในตอนนี้เราก็มี 2 layout แล้ว ส่วน Layout1 นั้น คือ ส่วนตัวเกมที่ได้สร้างไว้ก่อนแล้ว (ศึกษาได้จากบทความก่อนหน้า)

สร้างฉากหน้าแรกของเกมที่ layout ชื่อ Titlegame อันนี้ผมสร้างไว้ด้วยโปรแกรม Photoshop ทำการเพิ่มวัตถุ โดยใช้คำสั่ง Insert new object ในรูปแบบ spite แล้วเลือกภาพพื้นหลังที่ได้ออกแบบไว้

คลิกปิดกลับมาที่หน้าออกแบบเกม  ปรับตำแหน่งของฉากให้เหมาะสม

ต่อไปเพิ่ม Spite อีกสองตัว คือภาพที่จะใช้เป็นปุ่มเริ่มเกม และปุ่มสำหรับออกจากเกม

ต่อไปต้องเพิ่มวัตถุ Mouse โดยการเลือก Insert New Object แล้วเลือกหมวด Input และเลือก Mouse แล้วคลิกปุ่ม Insert วัตถุ Mouse จะใช้รับค่าเหตุการณ์ต่างๆ ที่ส่งเข้ามาจาก Mouse ทำให้สามารถใช้งานในเกมได้

ขั้นต่อไป ทำการเพิ่มเหตุการณ์เมื่อมีการกดปุ่มของ Mouse โดยไปที่ event sheet2 ซึ่งคู่กับ Layout Titlegame ที่เป็นหน้าแรกของเกม คลิกที่ Add event  แล้วเลือกวัตถุ Mouse  และคลิกปุ่ม Next

เลือกเหตุการณ์ On object clicked ที่อยู่ในหมวด Mouse แล้วคลิกปุ่ม Next

เลือกการคลิก Mouse button เป็น Left คือ เมื่อมีการคลิกปุ่มซ้ายของ Mouse
ลักษณะ Click type  เลือกเป็น Clicked
วัตถุที่มีเหตุการณ์เกิด Object clicked เลือกตัว Spite ที่เป็นข้อความ Start สำหรับเริ่มเกม

เมื่อกดปุ่ม Done จะกลับมาที่หน้า event sheet ทำการเพิ่ม action สำหรับการคลิกที่วัตถุ Start

เลือกวัตถุแบบ System  แล้วคลิกปุ่ม Next

ต่อไปทำการเลือกคำสั่งในหมวด General คือ Go to layout เพื่อให้เปลี่ยนไปยัง layout ของเกม คลิกปุ่ม Next

เลือก Layout ที่จะให้เกมเปลี่ยนไปทำงาน ในที่นี้คือ Layout ของเกมที่เคยได้สร้างเอาไว้แล้ว ชื่อ Layout 1

ที่หน้า event sheet จะได้เหตุการณ์เมื่อคลิกที่ตัววัตถุ Start

ต่อไปกำหนด Layout Titlegame เป็น Layout แรกที่ทำงาน เมื่อเริ่มเกม โดยไปที่ Properties ของ Project ตรงคำสั่ง First layout  เลือกเป็น Titlegame

ทดสอบเล่นเกม ตัวเกมจะแสดงหน้าแรกของเกมขึ้นมา  เมื่อคลิก mouse ที่ภาพ Start ก็จะเปลี่ยนไปยังหน้าเกม ที่ได้สร้างไว้

Construct 2 : การสร้างทางเดิน

เมื่อเราได้ออกแบบฉากพื้นหลังกันแล้ว ต่อไปจะต้องสร้างทางเดินสำหรับตัวละครของเรา ไม่ว่าจะเป็นฮีโร่ หรือสัตว์ประหลาดต่าง ๆ ที่จะค่อยเป็นอุปสรรคในการเล่นเกมของเรา ในการสร้างทางเดินภายในเกม มีหลายวิธี แต่ในบทความนี้ผมจะขอกล่าวถึงเกมประเภทเดิน กระโดด เก็บของ กระโดดทับตัวประหลาด ซึ่งเป็นแนวเกมแบบคลาสสิค อย่างเกมมาริโอ ส่วนการสร้างทางเดินแบบอื่นๆ จะขอเก็บเอาไว้ตอนที่นำเสนอตัวอย่างเกมแต่ละแบบก็แล้วกันนะครับ เดี๋ยวคนมือใหม่จะสับสนและท้อใจไปก่อน
ในบทความนี้จะไม่พูดถึงการเปิดโปรแกรม หรือสร้าง project อย่างไร ถ้าสงสัยให้กลับไปอ่านบทความย้อนหลังดูเอาเองนะครับ ผมจะสมมุติว่าเราได้ออกแบบพื้นหลังเป็นที่เรียบร้อยแล้ว ดังภาพ

การสร้างทางเดิน ในตัวอย่างนี้จะเป็นการสร้างชั้นหินของน้ำตก  เริ่มด้วยการคลิกขวาที่บริเวณการสร้างเกม จะปรากฏหน้าต่างคำสั่งขึ้นมา เลือก Insert new object

จะได้หน้าต่าง Insert new object ซึ่งมีวัตถุแบบต่าง ๆ ที่เราจำเป็นต้องใช้ในการสร้างเกม

เลื่อนลงมาจนเจอแถบ General เลือกวัตถุแบบ Sprite คือ การสร้างตัวละคร  หลังจากนั้น คลิกที่ปุ่ม Insert โปรแกรมจะเปลี่ยนกลับมาที่หน้าต่างออกแบบเกมเหมือนเดิม หลังจากนั้นคลิกตรงตำแหน่งที่เราจะแทรกวัตถุ จะปรากฏหน้าต่าง  Edit image : Sprite ขึ้นมา

ต่อไปก็เป็นการแสดงฝีมือในการวาดภาพ แล้วแต่ใครจะออกแบบครับ ถามว่าไม่วาดเองได้ไหม ตอบว่าได้ครับ คลิกเพื่อเปิดเอาภาพจากคอมพิวเตอร์ของเราก็ได้ เหมือนกับการสร้างภาพพื้นหลังเกมครับ  แต่ในตัวอย่างนี้ผมขอวาดเองนะครับ เอาแบบง่าย ๆ มีชั้นหินและหญ้า ประมาณนี้ครับ

หลังจากนั้นกดปิดหน้าต่าง Edit image ก็จะได้ภาพที่เราวาดปรากฏบนหน้าเกมของเราครับ แต่ตอนนี้ขนาดจะใหญ่เกินกว่าที่เราต้องการ ต้องปรับลดขนาดให้เล็กลง

เมื่อปรับขนาดจนเป็นที่พอใจแล้ว ทำการคัดลอกและวางเรียงต่อกัน จนเป็นทางเดินในเกมตามที่เราต้องการ

ในขั้นตอนต่อไป จะต้องกำหนดคุณสมบัติให้กับทางเดินทางเราเสียก่อน ไม่อย่างนั้นตัวละครต่าง ๆ ในเกมของเราจะไม่สามารถยืนบนทางเดินได้ จะหล่นลงไปด้านล่าง  การกำหนดคุณสมบัติสามารถทำได้โดย คลิกที่ sprite ที่เป็นภาพทางเดินของเกมตัวใดตัวหนึ่ง หลังจากนั้นให้ไปที่แถบ properties หาคำสั่งในกลุ่ม Behaviors แล้วคลิกที่ Add/edit Behaviors

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

ในหน้าต่าง Add behavior ในกลุ่ม Attributes เลือกพฤติกรรมแบบ Solid คือทำวัตถุของเราให้เป็นของแข็ง ตัวละครจะไม่สามารถทะลุผ่านได้ ทำให้ตัวละครของเรายืนบนทางเดินที่เราสร้างขึ้นได้นั่นเอง  แล้วคลิกที่ปุ่ม Add

ในหน้าต่าง Behaviors ก็จะปรากฏพฤติกรรมของวัตถุ แบบ Solid ให้สำหรับวัตถุทางเดินทางเรา ปิดแล้วกลับไปที่เกมของเรา

ในการกำหนดพฤติกรรมให้กับวัตถุแบบ sprite นั้น ถ้าเราใช้วิธีการคัดลอกแล้ววาง วัตถุใหม่ที่เราวางจะมีคุณสมบัติเช่นเดียวกับตัวต้นแบบ ดังนั้น เราจึงกำหนดคุณสมบัติแบบ solid ให้กับวัตถุตัวใดตัวหนึ่ง ตัวอื่นๆ ก็จะมีคุณสมบัติเช่นเดียวกันทั้งหมด ในครั้งต่อไปผมจะแนะนำการสร้างตัวละคร และนำมาเดินบนฉากและทางเดินที่เราสร้างขึ้นต่อไป