วันเสาร์ที่ 30 มกราคม พ.ศ. 2559

construct 2 : เกมจับคู่ภาพ ตอนที่ 4

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


และใช้คำสั่งในการจับเวลา ดังนี้


เมื่อทดสอบการทำงานของเกม จะได้เวลาในการเล่นแสดง ดังภาพ



ขั้นที่ 6 ตรวจสอบการจบเกม
เงื่อนไขของการจบเกม คือ การที่ผู้เล่นสามารถจับคู่ภาพครบทั้ง 9 คู่ หรือ 18 ภาพ ใช้คำสั่งในการตรวจสอบ ดังนี้

เมื่อจับคู่ภาพได้ทั้งหมด จะเปลี่ยนหน้าเกม ไปยัง layout endgame

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


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


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


construct 2 : เกมจับคู่ภาพ ตอนที่ 3

ขั้นที่ 3 การกำหนดคำสั่ง สำหรับการทำงานของเกม
การทำงานของเกม จะเปิดบัตรภาพ ทีละคู่ เพื่อหาภาพที่เหมือนกันจนครบทุกคู่
เพิ่มตัวแปร แบบ Global จำนวน 5 ตัว ดังภาพ


กำหนดเหตุการณ์สำหรับการคลิกเมาส์บนบัตรภาพ ดังนี้


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


อธิบายคำสั่ง จากภาพ โดยเพิ่มตัวแปร ชื่อ imageNumber เป็น Number มีค่าเริ่มต้นเป็น 0
ตรวจสอบเมื่อแสดง animation “Untap” จบ จะทำการสร้าง วัตถุ Sprite2 ขึ้นมาในตำแหน่งเดียวกับบัตรภาพ Sprite ที่ถูกคลิก
กำหนดหมายเลขบัตรภาพที่ถูกคลิก ให้กับตัวแปร imageNumber โดยคำนวณจากตำแหน่งของภาพที่ถูกคลิก
เล่นภาพเคลื่อนไหวของบัตรภาพหมายเลขที่ตรงกับค่าของภาพใน array Images
เพิ่มค่า cardsTapped (บอกจำนวนบัตรภาพที่ถูกเปิด) แล้วลบพื้นหลังบัตรภาพทิ้ง
ถ้า cardsTapped = 1 เก็บหมายเลขภาพไว้ที่ตัวแปร firstCard
ถ้า cardsTapped = 2 เก็บหมายเลขภาพไว้ที่ตัวแปร secondCard

เมื่อทดลองเล่นเกม จะสามารถเปิดบัตรภาพได้สองบัตร ดังนี้



ขั้นที่ 4 ตรวจสอบความถูกต้องของบัตรภาพที่เปิด
เมื่อเปิดภาพครบ 2 ภาพ จะต้องตรวจสอบว่าภาพทั้งสองที่เปิดมาเหมือนกันหรือไม่ โดยตรวจสอบเงื่อนไข ดังนี้


จากภาพ ตรวจสอบเมื่อ การเล่นภาพเคลื่อนไหวของ Sprite2 สิ้นสุดลง
ถ้าสถานะของตัวแปร destroy เป็น false
ตรวจสอบว่า ถ้า cardsTapped = 2 ให้ กำหนด cardsTapped = 0
ถ้าภาพที่เปิดเหมือนกัน firstCard = secondCard ให้ ทำลาย Sprite2 ทั้งหมด และเพิ่มค่าบัตรภาพที่ถูกทำลายลงในตัวแปร cardsDestroyed
ถ้าภาพที่เปิดไม่เหมือนกัน firstCard != secondCard ให้ ปิดบัตรภาพ Sprite2 ทั้งหมด และกำหนดค่า destroy เป็น True

ถ้าสถานะของตัวแปร destroy เป็น true ให้สร้างภาพฉากหลังของบัตรภาพขึ้นมาแทนภาพเดิม และทำลายบัตรภาพ และเล่นภาพเคลื่อนไหวในการพลิกบัตรภาพกลับคืน


construct 2 : เกมจับคู่ภาพ ตอนที่ 2


ขั้นที่ 2 การสร้างแผ่นบัตรภาพ
ที่ layout playgame สร้างบัตรภาพ ขนาด 77 x 102 pixel กำหนดชื่อเป็น Sprite


และสร้าง animation ขึ้นมา 2 ตัว สำหรับเปิดบัตรภาพ ชื่อ Untap และปิดบัตรภาพ ชื่อ Tap



กำหนดค่าการเคลื่อนไหวเป็น ดังนี้



กำหนดค่า Instance variables ของบัตรภาพ คือ selected เป็น Boolean มีค่าเริ่มต้นเป็น false


คัดลอกและวางบัตรภาพให้ครบทั้ง 18 แผ่น โดยกำหนด position ของแผ่นแรกเป็น 150 x 175 และแผ่นต่อไปในแถวแรก เพิ่มค่าแกน x ทีละ 100 เช่น แผ่นที่สอง จะได้  250 x 175  และเมื่อเพิ่มแถวใหม่ จะเพิ่มค่าแกน y ทีละ 125  เช่น บัตรภาพที่  3 แถวที่ 2 จะมีค่า position เป็น 350 x 300


สร้างชุดภาพ สำหรับใช้เมื่อมีการเปิดบัตรภาพ กำหนดชื่อเป็น Sprite2 กำหนดชุดภาพที่ใช้ในการจับคู่ในชุด Default ของ animations Sprite2 และสร้างชุด animations ชื่อ Untap จำนวน 9 ชุด 0 – 8 และ Tap จำนวน 9 ชุด 0 – 8 ดังภาพ


ชุดภาพใน Default เป็นภาพที่แสดงเวลาเปิดบัตรภาพออกมา


ภาพในชุด Untap0


ภาพในชุด Untap2 และชุดอื่นๆ จะเป็นลักษณะของการเปิดบัตรภาพ


ภาพในชุด Tap0


ภาพในชุด Tap2 และชุดอื่นๆ จะเป็นลักษณะของการปิดบัตรภาพ


เพิ่มวัตถุแบบ Mouse เข้ามาในเกม




construct 2 : เกมจับคู่ภาพ ตอนที่ 1

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

ตัวอย่างไฟล์เกม memory.capx

การออกแบบการสร้างเกมจะแบ่งออกเป็น 3 layout คือ startgame, playgame และ endgame


การทำงานของ Layout startgame
การทำงานของ layout นี้ จะเป็นหน้าแรกของเกม ที่จะรอให้ผู้เล่นเกมคลิกปุ่ม เพื่อเริ่มเล่นเกม การทำงานของ layout จะมีพื้นหลัง และปุ่มสำหรับการเริ่มเล่นเกม ดังรูป


กำหนดการทำงานของปุ่ม start game ใน Event sheet 1 ดังนี้



การทำงานของ Layout playgame
การทำงานหลักๆ ของเกมจะอยู่ที่การทำงานของ layout นี้ ผมจะขอนำเสนอเป็นขั้นตอน ดังนี้
ขั้นที่ 1 การเตรียมความพร้อมเริ่มต้นของเกม
1.1 สร้าง array สำหรับเก็บข้อมูลภาพ โดย insert array เข้ามาในเกม ตั้งชื่อเป็น Image กำหนดให้เป็นแบบ 1 มิติ ขนาด width = 18



1.2 กำหนดค่าหมายเลขของภาพที่คู่กันลงใน array Image
เพิ่มคำสั่งลงใน Event sheet 2 โดยเพิ่มเงื่อนไข System -> On start of layout และเพิ่มเหตุการณ์ย่อย เพื่อเพิ่มค่าใน array ดังนี้
- เพิ่มตัวแปร local ชื่อ CardsSet เป็นแบบ Number กำหนดค่าเริ่มต้นเป็น 0


- วนซ้ำเพื่อกำหนดค่าให้กับ array Image ให้มีค่าหมายเลขภาพที่คู่กัน คำสั่งกำหนดค่า คือ กำหนดค่าที่ตำแหน่ง array ที่เท่ากับ CardsSet ให้เท่ากับค่า floor(CardsSet/2) แล้วเพิ่มค่า CardsSet ขึ้นทีละ 1 จะได้คำสั่ง ดังนี้


เมื่อทดลองสั่งเกมให้ทำงาน ค่าใน array Image ควรเป็น ดังนี้


- ขั้นต่อไป ทำการสับเปลี่ยนหมายเลขของภาพ ให้อยู่ในตำแหน่งที่แตกต่างกัน โดยเพิ่มคำสั่งย่อย ดังนี้
กำหนดค่าตัวแปรแบบ local ชื่อ temp1 มีค่าเท่ากับ 0, temp2 มีค่าเท่ากับ 0, randomPos มีค่าเท่ากับ 0 และ currentPos มีค่าเท่ากับ 0
ทำการวนซ้ำค่าตัวแปร Shuffle ตั้งแต่ 0 ถึง 16 ด้วยการทำงาน ดังนี้
1. กำหนดให้ temp1 มีค่าเท่ากับหมายเลขภาพในตำแหน่ง array Image ที่ 0
2. สุ่มค่าตำแหน่งภาพที่จะสับเปลี่ยน อยู่ระหว่าง ตำแหน่งภาพปัจจุบัน +1 ถึง 17 มาเก็บไว้ที่ตัวแปร randomPos
3. กำหนดให้ temp2 มีค่าเท่ากับหมายเลขภาพในตำแหน่ง array Image ที่สุ่มได้
4. สลับค่าภาพตำแหน่ง array Image ที่ 0 กับตำแหน่งที่สุ่มได้
5. เพิ่มค่า currentPos ทีละ 1


เมื่อทดลองสั่งเกมให้ทำงาน และมีการสับเปลี่ยนค่าใน array Image ควรเป็น ดังนี้




วันศุกร์ที่ 29 มกราคม พ.ศ. 2559

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 ไปใช้ในการแสดงข้อมูลของเกมที่ให้แสดงบนหน้าจอเกมตลอดเวลาได้ ขอให้สนุกกับการสร้างเกมนะครับ

วันอังคารที่ 12 มกราคม พ.ศ. 2559

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





วันจันทร์ที่ 11 มกราคม พ.ศ. 2559

Construct 2 : ปืนคู่

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

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


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


กำหนดค่า มุมของเครื่องบินขับไล่ให้เป็น 270 เพื่อให้เครื่องบินมีทิศทางตั้งขึ้น


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


กำหนด behaviors ให้กับ bullet เป็นแบบ Bullet และ DestroyOutsideLayout


กำหนดคุณสมบัติ Behaviors ของกระสุน ให้มี speed เป็น 150


ขั้นตอนต่อไป insert mouse เข้ามาในเกม โดยการ insert new object แล้วเลือก mouse


กำหนด image points ของเครื่องบิน เพื่อเป็นจุดสำหรับสร้างกระสุนให้พุ่งออกไป โดย ดับเบิลคลิกที่เครื่องบินให้เปิดหน้าต่างแก้ไขภาพขึ้นมา เลือกเครื่องมือ set origin and image points
คลิกที่ เครื่องหมายบวก จะได้ Imagepoint1 ขึ้นมา แล้วนำเมาส์ไปคลิกที่ตำแหน่งปืนของเครื่องบิน สังเกตุจุดที่เป็นสี่เหลี่ยม


ทำลักษณะเดียวกันกับจุดของปืนหมายเลขสอง


กำหนดเหตุการณ์ เพื่อให้เครื่องบินยิงกระสุน เมื่อมีการคลิกเมาส์ โดย add event ขึ้นมา ดังนี้
คลิก add event แล้วเลือก mouse


เลือกเหตุการณ์ on click


เลือกการคลิกสำหรับปุ่มซ้ายของเมาส์


เพิ่ม add action เลือกวัตถุ Fighter แล้วคลิก Next


เลือกคำสั่ง Spawn another object แล้วคลิก Next


คลิกเลือก Object เป็น bullet  และกำหนด Image point เป็น 1 คือ ตำแหน่งของปืนกระบอกที่ 1


เพิ่ม add action อีกครั้งตามขั้นตอนเดิม แต่ให้เปลี่ยน Image point เป็น 2  คือ ตำแหน่งของปืนกระบอกที่ 2


จะได้คำสั่ง ดังนี้


เมื่อทดลองเล่นเกม จะพบว่า เมื่อคลิกปุ่มซ้ายของเมาส์ เครื่องบินจะยิงกระสุนออกไปจากปืนทั้งสองข้างของปีกเครื่องบิน



เพิ่มเติมอีกนิด สำหรับการหมุนเครื่องบินให้ยิงกระสุนไปตามทิศทางของการเคลื่อนเมาส์ สามารถกำหนดคำสั่งได้ดังนี้
เพิ่มเหตุการณ์ add event เลือก System และ Every tick
เพิ่มการทำงาน add action เลือกวัตถุ Fighter แล้วคลิก Next


เลือกคำสั่ง Set angle toward position


กำหนดค่าตำแหน่ง X และ Y เป็นตำแหน่ง XY ของเมาส์


จะได้คำสั่ง ดังนี้


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