วันอาทิตย์ที่ 27 ธันวาคม พ.ศ. 2558

Construct 2 : Manipulating the array

บทความตอนนี้ ผมได้เรียบเรียงมาจากบทความต้นฉบับของ ramones (Arrays for Beginners)
เพื่อเป็นบทเรียนสำหรับนักเรียนและผู้ที่สนใจ เรื่องเกี่ยวกับ array และการนำ array ไปประยุกต์ใช้ในการสร้างเกม

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


การดำเนินการเกี่ยวกับ array มีคำสั่ง ดังนี้



Insert 

คือ การเพิ่มข้อมูลเข้าไปใน array โดยจะต้องกำหนดว่าจะแทรกเข้าไปก่อน index ใดใน array การเพิ่มข้อมูล จะทำให้ขนาดของ array เพิ่มขึ้นด้วย



จากตัวอย่าง จะเพิ่มค่า “ฟักแฟง” ไว้ก่อนตำแหน่งของ “มะนาว” ค่าใน array จะถูกเพิ่ม ดังนี้



Delete 

คือ การลบข้อมูลจาก array ตามค่าหรือ index ที่กำหนด เมื่อลบแล้ว ขนาดของ array จะลดลงด้วยเช่นกัน
จากตัวอย่าง จะลบค่า “ฟักแฟง” ออกจาก array





Push 

คือ การเพิ่มข้อมูลเข้าไปที่ด้านหน้า หรือด้านหลังของ array เหมือนการนำตู้รถไฟมาต่อกับขบวนรถไฟ จากตัวอย่างจะนำ “ฟักแฟง” มาเพิ่มที่ด้านหน้าของ array



ข้อมูลที่ได้ จะเป็นดังนี้



Pop 

คือ การลบข้อมูลออกจาก array ด้านหน้าหรือด้านหลัง ครั้งละ 1 ข้อมูล จากตัวอย่างจะทำการลบข้อมูลออกจากด้านหลังของ array



ข้อมูลที่ได้ จะเป็นดังนี้



Sort 

คือ การเรียงลำดับข้อมูลภายใน array จะเรียงในรูปแบบของตัวเลข หรือตัวอักษร ขึ้นอยู่กับข้อมูลใน array



reverse 

คือ เป็นการกลับลำดับข้อมูลใน array จากตัวแรกเป็นตัวสุดท้าย



การทำงานที่เกี่ยวกับ array ที่ได้แนะนำไปแล้วนั่น สามารถนำไปประยุกต์ใช้ให้เหมาะสมกับขั้นตอนวิธีในการพัฒนาเกม หวังว่าจะมีความสุขกับการสร้างเกมนะครับ

วันเสาร์ที่ 26 ธันวาคม พ.ศ. 2558

Construct 2 : Array

บทความตอนนี้ ผมได้เรียบเรียงมาจากบทความต้นฉบับของ ramones (Arrays for Beginners)
เพื่อเป็นบทเรียนสำหรับนักเรียนและผู้ที่สนใจ เรื่องเกี่ยวกับ array และการนำ array ไปประยุกต์ใช้ในการสร้างเกม

โดยพื้นฐานแล้วนั้น array คือ ช่องสำหรับเก็บข้อมูลที่เรียงต่อกัน ขนาดของแต่ช่องจะเท่ากับขนาดของข้อมูลที่เก็บอยู่ภายใน และบางครั้งช่องข้อมูลอาจแบ่งย่อยไปอีก ในแนวกว้าง แนวยาว และแนวลึก เป็น 3 มิติ ในแนวแกน x, y และ z ในโปรแกรม construct 2 จะเรียกว่า  width, height และ depth

Array 1 มิติ
การสร้าง array สามารถสร้างได้โดยการ Insert new object ในหมวดของ data & storage เลือก Array กำหนดชื่อเป็น myarray


 คุณสมบัติที่สำคัญของ array คือ การกำหนดมิติของ array มิติที่ 1 คือ Width มิติที่ 2 คือ Height และมิติที่ 3 คือ Depth


ขนาดเริ่มต้นของ array คือ Width: 10, Height: 1, Depth: 1 ในกรณีตัวอย่างนี้ กำหนดให้มีขนาด 5 ช่อง จึงเปลี่ยนค่า Width เป็น 5
ค่าเริ่มต้นที่เก็บใน array แต่ละช่องจะเท่ากับ 0 สำหรับ array 1 มิตินั้น สามารถจำลองให้เห็นภาพได้ดังนี้


Index ของ array จะเริ่มจาก 0 ไปจนถึง width -1 ตามตัวอย่าง คือ 0 ถึง 4

กำหนดค่าของ array
การกำหนดค่า จะใช้คำสั่ง Set at ทดลองกำหนดค่าโดยการเพิ่มเหตุการณ์ System และคำสั่ง On start of layout แล้วเพิ่ม action สำหรับวัตถุ array


กำหนดค่าสำหรับ array 1 มิติ เลือกคำสั่ง Set at X


กำหนดค่าสำหรับ array ตำแหน่งที่ 1 คือ index 0 เป็น มะม่วง


คำสั่งที่ได้ควรเป็น ดังนี้


สามารถทดลองเพิ่มค่าในตำแหน่งต่าง ๆ ของ array เช่น


ค่าที่เก็บภายใน array จะมีลักษณะแบบนี้


หรือจะให้โปรแกรมแสดงค่าใน debug mode จะได้ค่าดังนี้



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



การหาค่าตำแหน่ง index ของ array ที่เราทราบค่าแล้ว โดยการใส่ค่าในคำสั่ง Array.IndexOf(“value”)
เช่น ถ้าต้องการค่าข้อมูลในตำแหน่งที่อยู่ก่อนหน้า “มะนาว” สามารถใช้คำสั่ง ดังนี้
myarray.At(myarray.IndexOf("มะนาว") - 1)




การวนซ้ำใน array
การวนอ่านค่าที่อยู่ภายใน array สามารถใช้คำสั่งวนซ้ำ For each elements และการตรวจสอบค่า Compare current value  และในการวนซ้ำ จะมีค่าข้อมูลที่สำคัญ คือ
Array.CurValue        คือ ค่าของ array ตำแหน่งัจจุบัน
Array.CurX             คือ ค่า index ปัจจุบันของ array มิติที่ 1 (X)
Array.CurY             คือ ค่า index ปัจจุบันของ array มิติที่ 2 (Y)
Array.CurZ             คือ ค่า index ปัจจุบันของ array มิติที่ 3 (Z)

สามารถใช้คำสั่งได้ตามตัวอย่าง ต่อไปนี้


หรือสามารถวนซ้ำเพิ่มค้นหาค่าใน array แล้วดำเนินการกับค่าดังกล่าวได้ เช่น เปลี่ยนข้อมูล หรือ คำนวณค่า


ทดลองและฝึกฝนให้มาก การจัดเก็บข้อมูลแบบ array จะเป็นประโยชน์ในการพัฒนาเกมที่มีประสิทธิภาพมาก


วันพฤหัสบดีที่ 24 ธันวาคม พ.ศ. 2558

Construct 2 : Pin behavior ตอนที่ 2

หากยังไม่ได้ศึกษาบทความ Pin behavior ตอนที่ 1 ขอให้กลับไปศึกษาก่อน เพื่อความเข้าใจ
กำหนดค่าของเหตุการณ์ใน Event sheet โดยกำหนดค่าดังนี้
- Add event -> system -> on start of layout
- Add blank sub-event
- Add local variable   -> name uid1
- Add local variable   -> name uid2
ซึ่งควรจะได้คำสั่งดังนี้

กำหนดการกระทำ สำหรับเหตุการณ์ on start of layout ดังนี้
- add action -> tailpiece -> Pin to object -> snake, ROPE STYLE


- add action -> system -> set variable -> uid1 to tailpiece.UID


ซึ่งควรจะได้คำสั่งดังนี้


ตัวแปร uid1 จะใช้เก็บค่า unique identifier ของหัวงู เพื่อให้หางงูสามารถมาต่อเพิ่มได้เรื่อยๆ

ในขั้นตอนต่อไปจะเป็นการสร้างวัตถุที่หางของงู โดยเพิ่ม sub-event ใหม่ภายใต้ On start of layout โดยกำหนดเป็นการวนซ้ำแบบ For กำหนดจำนวนรอบ ตามจำนวนของวัตถุหางที่ต้องการจะสร้าง ตัวอย่างกำหนดไว้ 18


กำหนดการทำงาน ดังนี้
- add action -> System -> Create object -> tail, layer: 0, X: tail.X - (16 * loopindex), Y: tail.Y


- add action -> System -> set variable -> uid2 to tail.UID
ซึ่งควรจะได้คำสั่งดังนี้


เมื่อทำสอบการทำงานของเกม จะต้องได้หางของงูเพิ่มต่อมาจากหัวงู



ขั้นต่อไป จะทำการ Pin หางของงูต่อเข้าด้วยกัน ด้วยคำสั่งต่อไปนี้
เพิ่มเหตุการณ์ย่อยภายใต้คำสั่ง For ดังนี้
System -> Pick all tailpiece
tailpiece -> pick instance with UID uid1
tailpiece -> pick instance with UID uid2
และเพิ่มการกระทำสำหรับเหตุการณ์ย่อย ดังนี้
tailpiece -> Pin to tail ROPE STYLE!
System -> Set variable -> uid1 to uid2


การทำงานในทุกรอบของการวนซ้ำ จะทำการ pin หางของงูต่อจากหางเดิมไปเรื่อย ๆ



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

Construct 2 : Pin behavior ตอนที่ 1

Pin behavior คือพฤติกรรมของวัตถุที่มีความสัมพันธ์ของระยะทางและมุมกับวัตถุอื่น เสมือนว่า เอาเข็มไปตรึงวัตถุเอาไว้กับวัตถุที่ต้องการ หรือมีคนสองคนที่คนหนึ่งทำท่าทางเลียนแบบอีกคนหนึ่งนั่นเอง
การกำหนดการทำงานของพฤติกรรมแบบ Pin มีดังนี้
Position & angle จะถูกตั้งเป็นค่าเริ่มต้น โดยจะเก็บความสัมพันธ์ของระยะทางและมุมของวัตถุที่เชื่อมต่อ จะรักษาตำแหน่งในการเคลื่อนที่และมุมที่หมุนไปกับวัตถุที่เชื่อมต่อ
Position only การเชื่อมแบบนี้ มุมของวัตถุจะไม่เปลี่ยนไปตามวัตถุที่เชื่อม จะเปลี่ยนเฉพาะตำแหน่งของวัตถุเท่านั้น
Angle only การเชื่อมต่อแบบนี้ มุมของวัตถุจะเปลี่ยนไปตามวัตถุที่เชื่อ แต่ตำแหน่งจะไม่เปลี่ยนแปลง
Rope style การเชื่อมต่อแบบนี้ วัตถุจะไม่หมุนตาม แต่จะรักษาระยะห่างไม่เกินค่าสูงสุดของระยะห่างที่กำหนด
Bar style การเชื่อมต่อแบบนี้ วัตถุจะไม่หมุนตาม แต่จะรักษาระยะห่างระหว่างวัตถุคงที่เสมอ

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

สร้างโปรเจคใหม่ แล้วบันทึกชื่อว่า snake


สร้างตัวละครขึ้นมาใหม่ ชื่อ snake


วาดภาพตัวละครเป็นลักษณะของหัวงู


กำหนดพฤติกรรมเป็นแบบ 8 Direction


สร้างตัวละครเพิ่มอีกตัว ตั้งชื่อว่า Enemy และวางไว้ในเกม


สร้างตัวละครสำหรับเป็นหางของงู ชื่อ tail


วางวัตถุต่อจากหัวของงู ในลักษณะของหาง
ทำการ add family กำหนดชื่อเป็น tailpiece


แล้วเพิ่ม tail เข้าไป


กำหนดพฤติกรรมให้กับ family tailpiece เป็นแบบ pin



การกำหนดเหตุการณ์สำหรับการเชื่อมต่อหางของงู จะกล่าวถึงในตอนที่ 2  Pin behavior ตอนที่ 2