เกมเปายิงฉุบ : construct2

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

แก้สมการคณิตศาสตร์ ด้วย construct 2

มีคำถามที่น่าสนใจมากเกี่ยวกับการทำแบบทดสอบในการเขียนประโยคสัญลักษณ์ทางคณิตศาสตร์ แล้วให้โปรแกรม construct2 แยกลำดับการคำนวณออกมา หลักการทำงานในลักษณะนี้ จะต้องพิจารณาความสำคัญของตัวดำเนินการทางคณิตศาสตร์ คือ ลำดับความสำคัญ เช่น () มีความสำคัญมากกว่า * หรือ / และ + หรือ - ตามลำดับ


ลักษณะหน้าจอของโปรแกรม คือ มีช่องสำหรับกรอกสมการ มีปุ่มสำหรับกด เมื่อต้องการคำนวณคำตอบ และช่องสำหรับแสดงวิธีหาคำตอบ เป็นดังนี้ครับ (สามารถ download ไฟล์โปรแกรมได้จาก link นี้)

กำหนดชื่อของ Textbox ตามตัวอักษรสีแดง

เพิ่ม Array จำนวน 3 ตัว ดังนี้ str_arr , digit_arr และ operator_arr

กำหนดคำสั่งในการประมวลผล โดยกำหนดค่าตัวแปรที่ใช้ในโปรแกรม construct2 ก่อน ดังภาพ

eq_str  เก็บข้อความสมการ
eq_txt1  เก็บตัวเลขตัวที่ 1
eq_txt2  เก็บตัวเลขตัวที่ 2
eq_txt3  เก็บตัวเลขตัวที่ 3
operator1 เก็บเครื่องหมายตัวดำเนินการที่ 1
operator2 เก็บเครื่องหมายตัวดำเนินการที่ 2
cstr  เก็บตัวอักษรในสมการ
arr_len เก็บความยาวของ array สมการ
bracket_ind เก็บตำแหน่งของ (

สร้าง Array สำหรับรายการตัวเลข และเครื่องหมาย สำหรับใช้เทียบกับสมการ ชื่อ digit_arr  และ operator_arr

ผมขออธิบายลักษณะสมการที่จะเป็นไปได้สำหรับโปรแกรมที่สร้างขึ้น มีอยู่ 3 ลักษณะ คือ
1. สมการที่เขียนต่อเนื่อง ไม่มีวงเล็บ  เช่น 150+40-30  สมการลักษณะนี้ จะอาศัยการพิจารณาลำดับความสำคัญของเครื่องหมายตัวดำเนินการทางคณิตศาสตร์
2. สมการที่มีวงเล็บเป็นกลุ่มแรก เช่น (150+40)-30  สมการลักษณะนี้ จะทำการคำนวณในวงเล็บเพื่อให้ได้คำตอบก่อนแล้วค่อยนำคำตอบมาคำนวณกับเลขตัวที่ 3
3. สมการที่มีวงเล็บเป็นกลุ่มหลัง เช่น 150+(40-30) สมการลักษณะนี้จะคำนวณกลุ่มหลังก่อน แล้วค่อยเอาคำตอบมาคำนวณกับเลขตัวที่ 1


หลังจากนั้น สร้างเหตุการณ์ เมื่อมีการกดปุ่ม Calculate เพื่อแสดงการคำนวณสมการที่พิมพ์ไว้แล้ว

1. อ่านค่าสมการจาก eq_txt ซึ่งเป็น textbox ที่เราพิมพ์สมการ มาเก็บไว้ที่ตัวแปร eq_str
2. กำหนดขนาดของ Array ชื่อ str_arr ให้เท่ากับความยาวของสมการ
3. เปลี่ยนข้อความสมการ ให้เป็นรูปแบบ Array เก็บไว้ที่ str_arr

โดยจะไม่เก็บค่าช่องว่างในสมการ และเครื่องหมาย () เข้าไปใน Array และเก็บตำแหน่งที่เจอ ( ด้วย เพื่อใช้เทียบลักษณะของสมการ ถ้าไม่เจอ ( ตำแหน่งของ ( จะมีค่าเป็น -1
เก็บความยาวของ array ไว้ที่ตัวแปร arr_len

4. แยกสมการไปเก็บไว้ที่ตัวแปรสำหรับเก็บค่าตัวเลขและเครื่องหมาย

บรรทัดที่ 7 จะวนซ้ำเรื่อยๆ ถ้าค่าใน array str_arr เป็นตัวเลข 0-9 โดยเทียบกับ digit_arr แล้วเก็บเลขแต่ละตัวไว้ที่ nstr แต่ถ้าไม่ใช่ตัวเลข ให้หยุดการวนซ้ำ
บรรทัดที่ 11 จะเก็บค่าเครื่องหมายทางคณิตศาสตร์ตัวที่ 1 ที่อยู่ถัดจากตัวเลขตัวที่ 1

ดำเนินการเช่นเดียวกันสำหรับการเก็บค่าตัวเลขตัวที่ 2 และ 3

5. สร้างฟังก์ชัน สำหรับหาค่าลำดับความสำคัญของเครื่องหมาย ดังนี้

โดย * และ /  จะมีความสำคัญมากกว่า + และ -

6. สร้างฟังก์ชันสำหรับใช้คำนวณคำตอบ โดยการส่งค่าเครื่องหมายและตัวเลขมาให้ฟังก์ชัน ชื่อ Calc

7. เปรียบเทียบตำแหน่งของวงเล็บ เพื่อหารูปแบบสมการ
ถ้าตำแหน่งวงเล็บ เท่ากับ -1 แสดงว่าไม่มีวงเล็บในสมการ ต้องคำนวณจากลำดับความสำคัญ

การเรียกใช้ function ในโปรแกรม construct2 จะใช้คำสั่ง Call ชื่อฟังก์ชัน (ค่าพารามิเตอร์)
จากบรรทัดที่ 22 จะเป็นการเรียกฟังก์ชัน priority แล้วส่งค่าเครื่องหมายไปให้ ฟังก์ชันจะคืนค่าลำดับความสำคัญมาเก็บไว้ที่ตัวแปร priority1 และ priority2

บรรทัดที่ 23 เปรียบเทียบถ้า priority2 มากกว่า priority1 ให้คำนวณจากกลุ่มด้านหลังก่อน จึงกำหนดค่าในช่อง Textbox ให้เอาตัวเลขที่ 2 และ 3 มาคำนวณ แล้วจึงไปคำนวณกับตัวเลขที่ 1 โดยการเรียกฟังก์ชัน Calc โดยส่งค่า operator และค่าตัวเลขจาก  operand_1.text และ operand_2.txt นำคำตอบที่ได้ไปเก็บไว้ที่ textbox ชื่อ answer_1 และ operand_4 แล้วเรียกฟังก์ชัน Calc เพื่อคำนวณอีกครั้ง

บรรทัดที่ 24 เปรียบเทียบถ้า priority1 น้อยกว่าหรือเท่ากับ priority2 ให้คำนวณจากซ้ายไปขวา จึงกำหนดค่าในช่อง Textbox ให้เอาตัวเลขที่ 1 และ 2 มาคำนวณ แล้วจึงไปคำนวณกับตัวเลขที่ 3 โดยการเรียกฟังก์ชัน Calc โดยส่งค่า operator และค่าตัวเลขจาก  operand_1.text และ operand_2.txt นำคำตอบที่ได้ไปเก็บไว้ที่ textbox ชื่อ answer_1 และ operand_3 แล้วเรียกฟังก์ชัน Calc เพื่อคำนวณอีกครั้ง

ถ้าตำแหน่งวงเล็บ อยู่ตำแหน่งแรก ให้คำนวณค่าตามลำดับจากซ้ายไปขวา

ถ้าตำแหน่งวงเล็บ อยู่ในกลุ่มหลัง ให้คำนวณค่าในวงเล็บหลังก่อน ค่อยนำค่าตัวเลขที่ 1 ไปคำนวณกับคำตอบที่ได้

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

สมการ 150 - 8 * 5

สมการ (150 - 8) * 5

สมการ 150 - (8 * 5)

บทความนี้อาจจะยาวหน่อย แต่คิดว่าเป็นประโยชน์สำหรับผู้ที่จะนำไปประยุกต์ใช้ในการทำสื่อการสอน หรือเกมต่างๆ ด้วยโปรแกรม Construct2 นะครับ หากเกิดประโยชน์ยังไงก็ช่วยเผยแพร่ต่อไปด้วยนะครับ

ส่งค่าผ่าน ajax แบบ get และ post ทำอย่างไร

บทความนี้ ผมจะกล่าวถึงวิธีการส่งค่า จากเกม ที่สร้างด้วยโปรแกรม constuct 2 ไปยังเว็บไซต์ที่กำหนด เพื่อแลกเปลี่ยนข้อมูลหรือปรับปรุงข้อมูลของเกม โดยอาศัยความสามารถของ ajax เป็นตัวช่วย

การส่งผ่านค่าระหว่างไฟล์ของเว็บต่างๆ ผู้อ่านบทความคงพอจะทราบอยู่แล้วว่า มีการส่งผ่านได้สองแบบ คือ แบบ get และแบบ post แต่ถ้าหากยังไม่ทราบ อันนี้ขอให้ได้ศึกษาหาความรู้เพิ่มเติมอีกเล็กน้อย

การส่งค่าแบบ  get คือการส่งข้อมูลไปกับที่อยู่ของเว็บ (URL) การส่งข้อมูลแบบนี้ผู้ใช้งานเว็บก็จะมองเป็นข้อมูลที่ส่งไป  เช่น ส่งค่า username ไปยังเว็บเพจ login ก็จะมองเห็นเป็นลักษณะนี้

http://www.youdoman.com/login.html?username=witoon

การส่งค่าแบบ post คือการส่งข้อมูลแบบปกปิด ผู้ใช้งานเว็บ จะไม่สามารถมองเห็นข้อมูลที่ส่งไปได้ ทำให้เกิดความปลอดภัยในการส่งข้อมูล และไม่จำกัดขนาดของข้อมูลที่ส่งไปอีกด้วย

การส่งค่าผ่าน ajax ใน construct 2

การส่งค่าระหว่างเกมที่สร้างด้วยโปรแกรม construct 2 กับเว็บไซต์  จะอาศัยคุณสมบัติของ ajax มาช่วยในการส่งข้อมูล ซึ่งการส่งข้อมูลจะมีสองลักษณะ คือ get  และ post โดยผมจะขอยกตัวอย่าง การส่งข้อมูล ชื่อผู้ใช้ และรหัสผ่าน ไปยังเว็บไซต์ เพื่อดึงข้อมูลการลงทะเบียนเกมจากเว็บไซต์
หน้าตาของเกม ที่ออกแบบไว้ ให้มี Text Box สองตัว คือ txt_username และ txt_password

เมื่อผู้เล่น คลิกที่ปุ่ม ลงทะเบียน ตัวเกมจะส่งข้อมูลไปตรวจสอบการลงทะเบียนกับเว็บไซต์ของเกม ซึ่งสามารถส่งค่าไปได้ สองวิธี คือ

1. การส่งค่าแบบ get

เพิ่ม event สำหรับปุ่ม ลงทะเบียน แล้วกำหนด action เป็น ajax => Posts to URL

กำหนดค่า Tag เพื่อเป็นชื่อสำหรับใช้ตรวจสอบการทำงาน

กำหนด URL เพื่อส่งค่าข้อมูล

"http://www.youdomain.com/register.php?username="&txt_username.Text&"&password="&txt_password.Text

การส่งค่าแบบ get จะเขียนข้อมูลต่อท้ายกับ URL และส่งไปพร้อมกัน

ค่า Data ไม่ต้องกำหนด

ค่า Method กำหนดให้เป็นการส่งแบบ GET

2. การส่งค่าแบบ post

เพิ่ม event สำหรับปุ่ม ลงทะเบียน แล้วกำหนด action เป็น ajax => Posts to URL

กำหนดค่า Tag เพื่อเป็นชื่อสำหรับใช้ตรวจสอบการทำงาน

กำหนด URL เพื่อส่งค่าข้อมูล http://www.youdomain.com/register.php

ค่า Data จะกำหนดข้อมูลที่จะส่งไปยัง URL ที่กำหนดไว้
"username="&txt_username.Text&"&password="&txt_password.Text

โดยย้ายจากวิธีการส่งแบบ get ที่ ต่อท้าย URL มาใส่ไว้ในช่อง Data แทนนั้นเอง

ค่า Method กำหนดให้เป็นการส่งแบบ POST

การรับค่าที่ส่งมาจาก construct 2

ในการรับค่าข้อมูลที่ส่งมาจากโปรแกรม construct 2 เพื่อนำไปใช้งานต่อไปนั้น ในส่วนนี้ ผมกล่าวถึงไฟล์ php ที่จะทำงานบนเว็บไซต์ของเกมนะครับ ไม่ได้พูดถึง event sheets ที่อยู่ใน construct 2 หลักสำคัญที่ต้องเพิ่มเติมจากการรับค่าระหว่างเว็บทั่วไป คือ ต้องเพิ่ม header เข้ามาอีก 1 ตัว คือ

    header('Access-Control-Allow-Origin: *');

ถ้าผู้เขียนส่งค่ามาด้วยวิธีการ get จะต้องรับค่าด้วย $_GET ดังนี้

$username = $_GET["username"];
$password = $_GET["password"];

ถ้าผู้เขียนส่งค่ามาด้วยวิธีการ post จะต้องรับค่าด้วย $_POST ดังนี้

$username = $_POST["username"];
$password = $_POST["password"];


จากเนื้อหาที่กล่าวมาข้างต้น เป็นเพียงหลักการทำงานของ ajax ในการส่งค่าระหว่างตัวเกม construct 2 กับเว็บไซต์ ในการนำไปใช้งานจริงนั้น ผู้เขียนเกมควรศึกษาวิธีการเขียนเว็บด้วยภาษา php ศึกษาหลักการทำงานของเว็บไซต์ เพื่อให้สามารถนำไปประยุกต์ใช้งานให้เกิดประโยชน์ได้อย่างแท้จริง เพราะผมเชื่อว่า คงมีหลายคนที่อ่านบทความนี้จบแล้ว จะพูดว่า ไม่เห็นจะเข้าใจเลย แต่ผมหวังว่าจะมีสักคนที่เข้าใจและนำไปใช้ได้ ขอให้สนุกกับการสร้างเกม ด้วย construct 2 นะครับ

Construct 2 : ปุ่มเดียว เสียวทุกเมนู

วันนี้มาในแนวเสียวๆ ครับ ไม่ใช่อะไรหรอกครับ ไปเจอน้องคนหนึ่ง เขาเอาโปรแกรม Construct 2 ที่สร้างเกมมาให้ดู บอกว่า ตัวอย่างเขาทำปุ่มเป็น family แต่อยากเลียนแบบบ้าง แต่ของเรามันของฟรี จะไปทำอะไรเสียวๆ แบบเขาก็ไม่ได้ ผมก็เลยขำก๊ากเลยทีเดียว ที่แท้ก็อยากทำเสียวแบบเขานั่นเอง เลยเป็นที่มาของชื่อบทความในวันนี้

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

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

สิ่งที่ต้องรู้ก่อนที่จะทำตามเนื้อหาในบทความนี้
1. การทำ sprite แบบ animation คลิกกลับไปอ่านบทความ
2. การใช้งาน function ในโปรแกรม Construct 2  (ค้นหาอ่านจาก google ก่อนนะครับ ยังไม่ได้เขียน)

ลงมือกันเลย
ขั้นแรก ให้รวมเมนูต่าง ๆ เข้าเป็นปุ่มเดียวในลักษณะของ animation ก่อนนะครับ กำหนด speed ของ animation เป็น 0 เพื่อไม่ใช้ animation ของปุ่มทำงาน

นำปุ่มมาวางในหน้าเกม ตามจำนวนปุ่มหรือเมนูที่ต้องการ  และกำหนด instance variable ให้กับปุ่ม เพื่อใช้แสดงภาพ frame ปุ่มตามค่าของ buttonID เปลี่ยนค่าไปเรื่อยๆ ตามหมายเลขของภาพใน frame ของ animation

กำหนดค่าให้แสดงปุ่ม เมื่อเริ่มทำงานทุกครั้งที่ load layout

เมื่อทดสอบการทำงานของปุ่มที่วางไว้ แสดงผลถูกต้องตามต้องการ ขั้นต่อไป ต้องเพิ่ม instance variable อีกหนึ่งตัว เพื่อใช้เก็บค่าชื่อ function ที่จะถูกเรียกใช้เมื่อปุ่มถูกคลิกให้ทำงาน

เปลี่ยนค่าของ instance variable ให้เป็นชื่อ function ที่ต้องการเรียกใช้ ตรงตามปุ่มแต่ละปุ่ม

กำหนดคำสั่งสำหรับการทำงาน เมื่อคลิกที่ปุ่มต่าง ๆ ที่เราได้วางไว้ในเกมแล้ว โดยอาศัยการทำงานคุณสมบัติของ Function คือ Function.Call  โดยอาศัยชื่อ function ที่ส่งมาจากค่า instance variable ที่ชื่อ callback

ถ้าปุ่มที่กด เป็นค่า playback การทำงานของ function "callback"  จะไปเรียกใช้งาน function "playback" อีกต่อหนึ่ง

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

เปลี่ยนหน้าเกม ตามเวลาที่กำหนด

ในการสร้างเกม บางครั้ง ผู้สร้างเกมก็ต้องการให้แสดงหน้าเกมบางหน้าในเวลาชั่วขณะหนึ่ง แล้วเปลี่ยนหน้าเกมไปอีกหน้าโดยอัตโนมัติ ลักษณะแบบนี้ ส่วนใหญ่จะใช้ทำหน้า loading screens แต่สำหรับโปรแกรม construct 2 มี loading screens เตรียมไว้ให้สำหรับเกมอยู่แล้ว หากไม่ใช่เวอร์ชันฟรี จะสามารถเปลี่ยนแปลงได้  แต่สำหรับคนที่อยากพัฒนาเกมเล่นๆ ไม่ได้จำเป็นต้องซื้อเวอร์ชันเสียตังมาใช้งาน แต่อยากทำหน้า loading screens หรือกำหนดให้หน้าเกมเปลี่ยนแปลงได้อัตโนมัติ

การเปลี่ยนหน้าเกม จะสามารถใช้คุณสมบัติของ Time เพื่อกำหนดเหตุการณ์ในการเปลี่ยนหน้าเกม คุณสมบัติดังกล่าวจะอยู่ในเหตุการณ์ System -> Time และใช้เงื่อนไข Compare time

Compare time  เป็นเงื่อนไขที่ใช้ตรวจสอบเวลา  เปรียบเทียบเวลาที่ต้องการกับเวลาตั้งแต่เริ่มเกม ยกตัวอย่างเช่น เหตุการณ์ที่เกิดขึ้นสามารถตั้งค่าให้ทำงานเมื่อเวลาตั้งแต่เริ่มเกม มาถึง 10 วินาที
หรือใช้เปรียบเทียบการทำงานตามช่วงเวลา โดยอาศัยตัวแปรของ system time

ทดลองสร้างเกมด้วย construct 2 โดยกำหนดให้มีอย่างน้อย 2 layout  โดย layout แรกให้เป็นหน้า loading screens

กำหนดค่าใน Event sheet ดังนี้
System -> Compare time  กำหนดค่าให้ทำงาน เมื่อเวลาผ่านไป 10 วินาที

กำหนดการทำงานเมื่อเวลาผ่านไป 10 วินาที ให้ระบบทำการเปลี่ยนไปยัง layout ต่อไป

เมื่อทดสอบการทำงานของเกม ตัวเกมจะแสดงหน้า layout แรก เป็นเวลา 10 วินาที แล้วจะเปลี่ยนไปยัง layout ถัดไป

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

ลองประยุกต์ใช้งานในหลายๆ แบบ จะทำให้เกมของเรามีความน่าสนใจมากยิ่งขึ้น  ขอให้สนุกกับการสร้างเกมนะครับ

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 : local storage

บันทึกข้อมูลด้วย local storage

local storage เป็นส่วนเสริม ที่ช่วยให้โปรแกมบันทึกข้อมูลลงในอุปกรณ์ของผู้เล่นได้ เช่น เก็บคะแนนสูงสุดของผู้เล่น เก็บระดับการเล่น เป็นต้น การเก็บข้อมูลของ local storage จะเป็นลักษณะของการทำงานออฟไลน์ การจัดเก็บจะแยกเป็นอิสระของอุปกรณ์แต่ละตัว  และการเปิดใช้งานโปรแกรมจาก Browser ที่ต่างกัน ก็จะจัดเก็บข้อมูลที่แตกต่างกันด้วย ข้อมูลที่จัดเก็บไม่สามารถใช้งานร่วมกันได้ แม้ว่าจะอยู่บนคอมพิวเตอร์เครื่องเดียวกันก็ตาม ข้อมูลจะคงอยู่จนกระทั่งผู้ใช้ทำการล้างข้อมูล และการจัดเก็บข้อมูลจะแยกย่อยให้มีความจำเพาะเจาะจงกับโปรแกรมแต่ละโปรแกรมที่ทำงาน เช่น game1 และ game2 มีการบันทึกข้อมูลลง local storage บนเครื่องคอมพิวเตอร์เดียวกัน แต่ทั้ง game1 และ game2 จะไม่สามารถใช้งานข้อมูลร่วมกันได้ ซึ่งเป็นการรักษาความปลอดภัยของข้อมูลในระดับหนึ่งด้วย

รูปแบบการบันทึก local storage

การบันทึกข้อมูลใน local storage จะมีรูปแบบคล้ายกับการบันทึกข้อมูลลงในตาราง ที่มีสองคอลัมน์ คือ Key และ Value

ค่าในคอลัมน์ Key  เป็นค่าที่ใช้จำแนกความแตกต่างของข้อมูลที่บันทึกไว้ใน local storage ที่สำคัญค่าที่กำหนดให้เป็น key จะต้องไม่ซ้ำกัน เป็นค่าที่มีความจำเพาะ  เช่น HighScore Level เป็นต้น ค่าเหล่านี้จะใช้ในการอ้างอิงถึงข้อมูลที่เก็บอยู่ภายใน

ค่าในคอลัมน์ Value  เป็นค่าข้อมูลที่สัมพันธ์กับ key จะเป็นตัวเลข ข้อความ หรือค่าใน array ก็ได้ ทำให้สามารถจัดเก็บข้อมูลขนาดใหญ่ ลงใน key เพียงตัวเดียวได้

Local Storage is asynchronous.

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

ยกตัวอย่าง การอ่านข้อมูล score จาก local storage จะมีขั้นตอนดังนี้
1. ใช้คำสั่ง action Get เพื่อขออ่านจาก key "score"
2. สร้างเหตุการณ์ on item "score" get
3. สร้างคำสั่งเพื่อรับค่า จาก ItemValue


Local Storage conditions

On any item get  จะทำงานเหตุการณ์นี้ เมื่อการอ่านข้อมูลทั้งหมดเสร็จสิ้น

On any item removed  จะทำงานเหตุการณ์นี้ หลังจากที่ลบข้อมูลเสร็จสิ้น

On any item set  จะทำงานเหตุการณ์นี้ หลังจากที่บันทึกข้อมูลเสร็จสิ้น

On item exists  จะทำงานเหตุการณ์นี้ หลังจากการตรวจสอบค่า key ที่เก็บใน local storage เสร็จสิ้น ถ้าไม่พบ key ที่ค้นหา จะไม่มีการทำงานใดๆ แต่ถ้าพบ key ต้องใช้คำสั่ง Get เพื่ออ่านข้อมูลมาเก็บที่ItemValue

On item get  จะทำงานเหตุการณ์นี้ หลังจากที่อ่านข้อมูลจาก key ที่กำหนดสำเร็จ ข้อมูลของ key จะถูกมาเก็บที่ ItemValue

On item missing  จะทำงานเหตุการณ์นี้ หลังจากการตรวจสอบค่า key ที่เก็บใน local storage เสร็จสิ้น แล้วไม่พบ key ที่ค้นหา

On item removed  จะทำงานเหตุการณ์นี้ หลังจากลบค่า key ที่เก็บใน local storage เสร็จสิ้น

On item set  จะทำงานเหตุการณ์นี้ หลังจากที่บันทึกข้อมูลสำหรับ key ที่กำหนดสำเร็จ ข้อมูลใหม่จะถูกบันทึกลงหน่วยความจำ

Compare key  ใช้สำหรับเปรียบเทียบค่าที่เก็บไว้ใน Key กับค่า key ปัจจุบัน

Compare value  ใช้สำหรับเปรียบเทียบค่าปัจจุบันของ ItemValue ที่ได้จากการอ่านค่าข้อมูล

On all key names loaded  จะทำงานเหตุการณ์นี้ หลังจากที่อ่านข้อมูลจาก key ที่กำหนดสำเร็จ โดยจะได้ชื่อ key ในรูปแบบของแถวลำดับ อ้างอิงด้วย KeyCount และ KeyAt

On error จะทำงานเหตุการณ์นี้ เมื่อเกิดข้อผิดพลาดในการใช้ local storage เช่น เขียนข้อมูลไม่สำเร็จ หรือ พื้นที่ในการจัดเก็บข้อมูลเต็ม โดยข้อผิดพลาดจะถูกเก็บไว้ที่ ErrorMessage

On storage cleared  จะทำงานเหตุการณ์นี้ หลังจากที่ล้างข้อมูลในหน่วยความจำ และหน่วยความจำว่าง

Is processing gets  คืนค่าสถานะของการอ่านข้อมูลเป็น True  เมื่ออยู่ในระหว่างการอ่านข้อมูล

Is processing sets  คืนค่าสถานะของการบันทึกข้อมูลเป็น True  เมื่ออยู่ในระหว่างการบันทึกข้อมูล

On all gets complete  จะทำงานเหตุการณ์นี้ เมื่อการอ่านข้อมูลทั้งหมดเสร็จสิ้น เช่น มีการอ่านข้อมูล 10 ตัว ที่เกิดขึ้นในขณะเดียวกัน เหตุการณ์นี้จะทำงาน เมื่อการอ่านข้อมูลทั้ง 10 ตัว เสร็จสิ้น

On all sets complete  จะทำงานเหตุการณ์นี้ เมื่อการบันทึกข้อมูลทั้งหมดเสร็จสิ้น เช่น มีการบันทึกข้อมูล 10 ตัว ที่เกิดขึ้นในขณะเดียวกัน เหตุการณ์นี้จะทำงาน เมื่อการบันทึกข้อมูลทั้ง 10 ตัว เสร็จสิ้น


Local Storage actions

Check item exists เป็นคำสั่งสำหรับตรวจสอบ Key ที่ถูกเก็บอยู่ใน local storage ถ้าพบ key ที่ต้องการ จะตอบสนองต่อเหตุการณ์ On item exists  แต่ถ้าไม่พบ จะตอบสนองกับเหตุการณ์ On item missing

Get item  เป็นคำสั่งอ่านค่าข้อมูลของ key จากหน่วยความจำ จะตอบสนองกับเหตุการณ์ On item get และค่าที่ได้จะถูกเก็บไว้ที่ ItemValue

Remove item  เป็นคำสั่งในการลบ key ออกจากหน่วยความจำ จะตอบสนองกับเหตุการณ์ On item removed

Set item เป็นคำสั่งบันทึกข้อมูลลงใน local storage จะตอบสนองกับเหตุการณ์ On item set

Clear storage  เป็นคำสั่งล้างข้อมูลจาก local storage ให้เป็นค่าว่าง จะตอบสนองกับเหตุการณ์ On storage cleared

Get all key names  เป็นคำสั่งอ่านค่า key ทั้งหมดที่เก็บใน local storage โดยจะทำงานกับเหตุการณ์ On all key names loaded ผลการทำงานจะได้แถวลำดับของชื่อ key และอ้างถึงด้วย KeyCount และ KeyAt


การใช้งาน local storage นั้น มีประโยชน์สำหรับการสร้างเกม หรือสื่อการสอนที่ต้องเก็บข้อมูลการทำงานเดิมไว้ ในบทความต่อไป ผมจะนำเสนอตัวอย่างการใช้งาน local storage ในการเก็บข้อมูลคะแนนสูงสุดของเกม อย่าลืมติดตามนะครับ ขอให้สนุกกับการสร้างเกม

Random ค่าใน array ไม่ให้ซ้ำกัน

มีเพื่อนๆ น้องๆ หลายคนมาก สอบถามเรื่องของการอ่านค่าที่เก็บไว้ใน array ของโปรแกรม construct 2 ออกมาใช้งาน หรือมาแสดง ให้เปลี่ยนลำดับไปทุกครั้งที่ทำงาน แรกๆ ก็พอตอบคำถามได้ แต่หลังๆ มา เริ่มมีมากขึ้น ผมก็งานเยอะ ไม่ค่อยได้ตอบ วันนี้เลยพักงานตัวเอง มาเขียนเนื้อหาเกี่ยวกับ array เอาไว้ ให้ได้อ่านศึกษากันก่อน
การสุ่ม (Random) ตำแหน่งที่จะแสดงค่าใน array นั้น มีการนำไปใช้ประโยชน์อย่างกว้างขวาง ในการสร้างเกม การเปลี่ยนตำแหน่ง Sprite หรือประยุกต์ใช้กับการสร้างสื่อการสอน การทำแบบทดสอบที่มีการสลับตัวเลือก
ผมไม่กล่าวถึงการสร้าง array นะครับ ถ้ายังไม่เข้าใจ อ่านเพิ่มเติมตรงนี้ก่อน (construct 2 : array)

ในบทความนี้ ผมมี array ชื่อ myArray ที่เก็บชื่อผลไม้ 5 ชนิด ดังนี้

หลักการสุ่มค่าใน array แบบไม่ให้ซ้ำ มีหลักการง่ายๆ คือ ถ้าสุ่มได้แล้วลบทิ้ง จึงไม่มีโอกาสจะสุ่มได้ค่าเดิมอีกครั้ง
ขั้นตอนการทำงาน
1. ทำซ้ำตามจำนวนรอบที่ต้องการ แต่ต้องไม่เกินขนาดของ array ที่มี
2.  สุ่มค่าตำแหน่ง array  ระหว่าง 0 ถึง ขนาดของ array เก็บที่ตัวแปร pos_x
3.  แสดงค่าหรือนำค่าที่เก็บใน array ที่ตำแหน่ง pos_x ไปใช้งาน
4.  ลบค่าจาก array ในตำแหน่ง pos_x

ตัวอย่างคำสั่งใน event sheet

ผลการทำงาน จะได้ ชื่อผลไม้ที่แสดงสลับตำแหน่ง ไม่ซ้ำกัน

จากเนื้อหาที่กล่าวไปข้างต้น สามารถนำไปประยุกต์ให้เข้ากับงานที่ต้องการได้ เช่น สลับตำแหน่งของ sprite ที่สร้างขึ้น โดยการเก็บตำแหน่งไว้ใน array ก่อน แล้วสุ่มตำแหน่งที่จะ create object จาก array มาใช้ในขั้นตอนการ create object เป็นต้น  ขอให้สนุกกับการใช้งาน array นะครับ

Action RPG ตอน 1

มีเพื่อน สอบถามเข้ามาว่า เราจะมีแนวทางสร้างเกมแบบคลาสสิก ประเภทสวมบทบาท และออกต่อสู้ ตีให้ตาย ได้ค่าประสบการณ์ มีของหล่น เก็บเอาไปขาย หรือตีแล้วได้พลังงานชีวิต ได้พลังฟื้นฟู เกมแนวนี้สมัยก่อนมีเยอะมากครับ เกม diablo สมัยก่อน (รุ่นเก๋า ตีกันทั้งคืน)  พอมายุคนี้อยากจะลองทำด้วย construct 2 ดูบ้าง ก็ไม่ยากครับ แต่จะขอแนะนำแนวทางการออกแบบเกมและการสร้างเกมบางส่วน

ที่มา : https://en.wikipedia.org/wiki/File:Diabloscreen.jpg

ในตอนที่ 1 นี้ เรามาออกแบบคุณลักษณะของตัวละครของเราก่อนนะครับ การออกแบบตัวละครในเกม construct 2 นี้ ต้องคิด วางแผน ให้ครบถ้วน ว่าตัวละครของเราทำอะไรได้บ้าง เขียนรวมๆ เอาไว้ จะช่วยสร้างกรอบความคิดของเราได้ดี ตัวละครที่ผมจะสร้างนี้ต้องทำสิ่งเหล่านี้ได้

1.  มีพลังชีวิต หรือที่เราเรียกว่า Health  มีพลังชีวิตแสดงว่าอะไร แสดงว่าโดนตีแล้วตายได้ครับ แบบนี้เล่นเกมไม่ระวัง ตายได้ (นี่แหละความสนุกของเกมแนวต่อสู้ มันเหมือนชีวิตจริงเสียนี่กระไร) พลังชีวิต หรือ Health จะลดลง เมื่อถูกทำร้าย และสามารถเพิ่มได้เมื่อเราเก็บขวดพลังชีวิตมาใช้  

2.  มีกำลังที่จะช่วยให้ต่อสู้ได้ยืนนาน หรือ stamina  พูดง่ายๆ แบบบ้านๆ คือ ค่าความอดทนนั่นเองครับ ตัวละครตัวไหนมีเยอะ ก็จะตีได้ต่อเนื่อง ไม่เหนื่อยง่าย ถือของหนักๆ ได้ ดาบเล่มใหญ่ๆ วิ่งได้นานๆ ตัวละครตัวไหนมีน้อย วิ่งไปก็เหนื่อย ต้องหยุดพัก แวะดื่มน้ำกันบ่อยๆ ตีศัตรูไม่ทันไหร่ก็เหนื่อย ต้องวิ่งออกมาพัก

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

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

5. มีประสบการณ์ หรือ Experience แน่นอนครับ เมื่อออกทำภารกิจบ่อยๆ ย่อมจะมีประสบการณ์ในการต่อสู้ พอสู้ไปเยอะๆ ก็ต้องเก่งขึ้นเรื่อยๆ และพอเก่งก็ต้องเพิ่ม ระดับ เหมือนเลื่อนขั้นให้มี level  สูงขึ้นเรื่อยๆ ครับ

6. พลังโจมตีและการป้องกัน ตัวละครของเราเวลาต่อสู้กับศัตรู จะโจมตีให้พลังชีวิตของศัตรูลดลงได้ทีละเท่าไร และเมื่อโดนตีกลับ จะสามารถป้องกันการโจมตีได้เท่าไร เช่น เขาตีมา 500 เกราะเรากันได้ 300 เราก็โดนตีแค่ 200 เป็นลักษณะแบบนี้ครับ

เมื่อเราสร้างตัวละครในใจของเราขึ้นมาแล้ว เราต้องมาสร้างให้เป็นจริงกันใน construct 2 กันเลยครับ  การกำหนดคุณลักษณะของตัวละครให้ จะอาศัย Instance value ซึ่งเป็นค่าตัวแปรเฉพาะของวัตถุ วัตถุแต่ละตัวก็จะมีค่าที่แตกต่างกันออกไป ถ้าสงสัยว่า Instance value คืออะไร ย้อนกลับไปศึกษาก่อนก็ได้นะครับ

ผมเพิ่ม instance value จำนวน 8 ตัว คือ
Health เป็นค่าพลังชีวิต เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 500
Stamina         เป็นค่าความอดทน เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 500
Bagsize เป็นขนาดของเป้ใส่ของ เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 10
WeaponID เป็นรหัสของอาวุธที่ถือ มีค่าเริ่มต้นเท่ากับ 1
Experience เป็นค่าประสบการณ์ของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 0
Level เป็นระดับของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 0
Damage เป็นพลังในการโจมตีของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 250
Defense เป็นพลังในการป้องกันการโจมตีของตัวละคร เป็นชนิด Number  มีค่าเริ่มต้นเท่ากับ 100

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

construct 2 : sprite font

sprite font คือ วิธีการหนึ่งในการใช้งาน text แต่มีข้อแตกต่างจากการใช้ตัวอักษรทั่วไป คือการใช้ภาพแทนตัวอักษร ตัวอักษรแต่ละตัวจะแทนด้วยส่วนย่อยของภาพ 1 ส่วน ตัวอักษรแต่ละตัว จะถูกออกแบบและตกแต่งให้มีลักษณะเฉพาะ และเข้ากับเกมที่สร้างขึ้น

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

การใช้ตัวอักษร จะสามารถเปลี่ยนแปลงสีได้เพียงสีเดียว แต่ถ้าหากใช้ spritefont สามารถจะตกแต่งด้วยสีได้ตามต้องการ ตกแต่งได้หลากหลายสี ทำให้เกมที่สร้างขึ้นมานั้นน่าสนใจมากยิ่งขึ้น

เราควรเลือกใช้ sprite font เมื่อ
1. เมื่อต้องการให้การแสดงผลตัวอักษร การจัดแนว เหมือนกันในทุก browser ที่เรียกใช้งาน
2. เมื่อต้องการใช้กราฟิคกับตัวอักษร เช่น fades, outline, drop shadows
3. ใช้ sprite font เมื่อเกิดปัญหาในการส่งออกเกม แล้วไม่สามารถส่งออกแบบอักษรที่ใช้ไปด้วยได้

ควรระวังการใช้งาน sprite font เมื่อ
1. ไม่ควรใช้ sprite font เมื่อมีการเปลี่ยนขนาดของตัวอักษร หรือการจัดรูปแบบที่แตกต่างกันบ่อยๆ เช่น ตัวหนา ตัวเอียง เพราะจะต้องสร้าง sprite font ที่แตกต่างกันจำนวนมาก
2. ไม่ควรใช้ sprite font สำหรับการแสดงข้อความจำนวนมาก เช่น รายละเอียดของเกม หรือเนื้อหา เรื่องราว เนื้อเรื่อง หรือ คำอธิบายเกม การแสดงผลลักษณะนี้ ควรใช้ข้อความที่เป็นตัวอักษรทั่วไปจะเหมาะสมกว่า

หวังว่าหลักการใช้งาน sprite font จะเป็นประโยชน์กับผู้อ่านนะครับ แล้วบทความต่อไป ผมจะนำเสนอวิธีการใช้งาน sprite font และแหล่งข้อมูลในการหา sprite font สวยๆ มาใช้งาน ขอให้สนุกกับการสร้างเกมนะครับ

construct 2 : Sprite เดินเอง ตอน 2

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

ขั้นแรกต้องสร้างทางเดินของตัว sprite โดยกำหนดพฤติกรรมเป็นแบบ solid ดังนี้

สร้าง sprite ขึ้นมา เพื่อเป็นตัวละครของเกม กำหนดพฤติกรรมเป็นแบบ platform

เพิ่ม instance variable จากแถบ Properties ของตัวละคร ชื่อ moveRight เป็นชนิด Boolean มีค่าเริ่มต้นเป็น true

การตรวจสอบการเดินของ sprite จะตรวจสอบจาก offset ของพื้น โดยปกติ ถ้าไม่ได้กำหนดเป็นอย่างอื่น ถ้าเคลื่อนที่ไปทางด้านขวา ค่าในแกน x จะเป็นลบ แต่เมื่อเคลื่อนที่ไปทางซ้าย ระยะแกน x จะเป็นบวก

การคำนวณ ระยะที่ต้องหมุนกลับ เมื่อเดินไปทางด้านขวา ค่า offset แกน x จะคำนวณดังนี้
- (ความกว้างของพื้น)  เช่น  -(wall.Width)

การคำนวณ ระยะที่ต้องหมุนกลับ เมื่อเดินไปทางด้านซ้าย ค่า offset แกน x จะคำนวณดังนี้
ความกว้างของพื้น เช่น  wall.Width


เพิ่มคำสั่งใน event sheet ดังนี้

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

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

construct 2 : Sprite เดินเอง ตอน 1

สำหรับมือใหม่หัดสร้างเกม หลายคนคงจะเคยสร้าง sprite ที่ไว้ให้ hero ของเราเดินชน กระโดดเหยียบ แบบที่วางไว้ตรงไหนก็อยู่ตรงนั้น แต่บทความนี้ ผมจะนำเสนอวิธีการที่ทำให้ sprite ของเกมที่เราสร้างดูฉลาดขึ้นมาหน่อย คือ เคลื่อนที่ไป-มา ได้โดยอัตโนมัติ

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

สร้าง sprite ขึ้นมา เพื่อเป็นตัวละครของเกม กำหนดพฤติกรรมเป็นแบบ platform

เพิ่ม instance variable จากแถบ Properties ของตัวละคร ชื่อ moveRight เป็นชนิด Boolean มีค่าเริ่มต้นเป็น true

เพิ่มคำสั่งใน event sheet ดังนี้

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

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