construct 2 : วาดเส้นอิสระ

หลังจากที่ผมได้นำเสนอวิธีการวาดเส้นตรงด้วย Construct 2 ไปแล้ว บทความนี้ผมจะนำเสนอวิธีการวาดเส้นอิสระ โดยใช้ mouse กดลากให้เกิดรูปตามต้องการ  หลายคนคงอาจจะเคยใช้วิธีการให้สร้างวัตถุใหม่ขึ้นมาเรื่อยๆ ในขณะที่ mouse เคลื่อนที่ แต่วิธีการดังกล่าวนั้นจะมีปัญหา คือ เมื่อเราลาก  mouse ไปอย่างรวดเร็ว เส้นที่เกิดจะขาดเป็นช่วง ไม่ต่อเนื่องกัน และถ้าวาดเยอะมาก จะเกิดการค้างของโปรแกรมได้
การแก้ปัญหาของผมที่จะนำเสนอคือ การใช้หลักการของการวาดเส้นตรงระหว่างจุดสองจุด โดยอาศัยตัวแปรชั่วคราว 2 ตัว เพื่อเก็บตำแหน่งจุดเริ่มต้น x และ y  และอีก 2 ตัว เพื่อเก็บตำแหน่งจุดสิ้นสุด x และ y ใช้ฟังก์ชันทางคณิตศาสตร์ ที่ชื่อว่า distance โดยมีรูปแบบคำสั่ง คือ distance(X1,Y1,X2,Y2)

ขั้นตอนแรก สร้าง sprite ที่จะใช้สำหรับสร้างเส้นตรง ตั้งชื่อว่า line1 และกำหนด Image points Origin ให้ค่า X = 0 เพื่อเป็นจุดเริ่มต้นของการขยายภาพ (ปกติค่า X จะถูกกำหนดไว้กึ่งกลางภาพ เวลาขยายภาพ จะขยายออกจากกึ่งกลางภาพ ทำให้เส้นตรงที่ได้ มีจุดเริ่มต้นไม่ตรงตามที่เราต้องการ)

สร้างตัวแปร จำนวน 4 ตัว คือ x1, y1, x2, y2 เป็นชนิด Number มีค่าเริ่มต้นเป็น 0

เพิ่มวัตถุ Mouse เข้ามาในเกม และเพิ่มคำสั่งใน event sheet ดังนี้

เมื่อทดลองวาดเส้นตรง จะเกิดเส้นตรงที่ต่อเนื่อง และไม่ขาดช่วง สามารถวาดเป็นภาพ หรือเขียนตัวหนังสือต่าง ๆ ได้

ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : วาดเส้นตรง

บทความนี้จะขอกล่าวถึงการวาดเส้นตรงในเกม โดยเกมส่วนมากจะใช้การวาดเส้นตรงในการวัดระยะหรือกำหนดขอบเขตของเกม หรือใช้แสดงเส้นแบ่งของการโจมตี เช่น เกม “fruit ninja” หรือใช้ในการเชื่อมความสัมพันธ์ของสิ่งของต่าง ๆ เช่น เกมจับคู่  หรือจะใช้ในการวาดภาพก็ได้เช่นเดียวกันครับ

หลักการวาดเส้นตรงที่ผมจะแนะนำ จะใช้หลักของการขยายภาพ โดยที่เรามีภาพที่เป็นสี่เหลี่ยมกำหนดไว้แล้ว หลังจากนั้นก็ขยายความยาวไปตามระยะทางที่ mouse เคลื่อนที่ไป การกำหนดความยาวนั้น จะใช้ฟังก์ทางคณิตศาสตร์ ที่ชื่อว่า distance โดยมีรูปแบบคำสั่ง คือ distance(X1,Y1,X2,Y2)

ขั้นตอนแรก สร้าง sprite ที่จะใช้สำหรับสร้างเส้นตรง ตั้งชื่อว่า line1 และกำหนด Image points Origin ให้ค่า X = 0 เพื่อเป็นจุดเริ่มต้นของการขยายภาพ (ปกติค่า X จะถูกกำหนดไว้กึ่งกลางภาพ เวลาขยายภาพ จะขยายออกจากกึ่งกลางภาพ ทำให้เส้นตรงที่ได้ มีจุดเริ่มต้นไม่ตรงตามที่เราต้องการ)

กำหนดค่าตัวแปร Instance variable ชื่อ drawing  ชนิดข้อมูลแบบ Boolean  กำหนดค่าเริ่มต้นเป็น false

เพิ่มวัตถุ Mouse เข้ามาในเกม และเพิ่มคำสั่งใน event sheet ดังนี้

เมื่อทดลองการทำงานของเกม เมื่อเราคลิก mouse แล้วลากออกไป จะเกิดเส้นตรงจากจุดเริ่มต้นและยาวไปถึงตำแหน่งของ mouse ที่เคลื่อนที่ไป

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