3.คู่มือฝึกทำกิจกรรมการสร้างเกมด้วยโปรแกรม-Construct-2

กจิ กรรมท่ี 17 การให้เมฆลอยแบบสุ่มจากกิจกรรมที่ 12 เราไดฝ้ ึกทาํ ใหเ้ มฆลอยไดแ้ ลว้ แต่จะลอยไปเพียงคร้ังเดียวแลว้ หายไปเลย ในกิจกรรมน้ีจะพาทาํ ใหม้ ีเมฆลอยตลอดเวลาและสุ่มตาํ แหน่งการเคล่ือนท่ีดว้ ยข้นั ตอนที่ 1 สร้าง Sprite แลว้ วาดรูปกอ้ นเมฆข้นั ตอนท่ี 2 กาํ หนด Behaviors 2 อยา่ งคือ Bullet และ Destroy outside layoutและกาํ หนดความเร็ว(Speed)การเคล่ือนที่ใหช้ า้ ลงเหลือ 100ข้นั ตอนที่ 3 กาํ หนดใหท้ าํ งานทุกๆ 3 วนิ าทีมีการสร้างกอ้ นเมฆกอ้ นใหม่ข้นั ตอนท่ี 4 ทาํ การสุ่มตาํ แหน่งกอ้ นเมฆทุกคร้ังท่ีปรากฏ เม่ือพน้ นอกจอภาพแลว้ ใหล้ บกอ้ นเมฆน้นั ทิ้งไปเพอ่ื ไมใ่ หก้ ินหน่วยความจาํกดป่ ุม F5 ทดสอบการทาํ งาน 51

52

53

54

การปรับค่าแสดงผล Fullscreen ใน Browser สามารถปรับใหแ้ สดงผลไดห้ ลายแบบ เช่น Off,Crop, Scale inner, Scale outer, Letterbox scale และ Letterboxinteger scaleกจิ กรรมที่ 18 การทารูปลาโพงเพอื่ ปิ ด-เปิ ดเสียงในกิจกรรมน้ีเราจะมาควบคุมเสียง โดยการทาํ เป็ นรูปลาํ โพง 2 รูปวางซอ้ นกนั เม่ือคลิกใหป้ ิ ดเสียงและซ่อนลาํ โพงตวั ท่ีคลิก เพอ่ื ใหแ้ สดงรูปลาํ โพงท่ีปิ ดเสียง เม่ือคลิกอีกคร้ังกจ็ ะมีเสียงและแสดงรูปลาํ โพงเปิ ดเสียงลกั ษณะน้ีเรียกอีกอยา่ งวา่ Toggle นน่ั เองข้นั ตอนที่ 1 แทรกวตั ถุ Audio และ Mouseข้นั ตอนที่ 2 นาํ เสียงเขา้ มาในโฟลเดอร์ Soundข้นั ตอนที่ 3 สร้าง Sprite รูปลาํ โพงแบบเปิ ดเสียงข้นั ตอนที่ 4 สร้าง Sprite รูปลาํ โพงแบบปิ ดเสียงข้นั ตอนท่ี 5 วางรูปลาํ โพงท้งั 2 ใหซ้ อ้ นทบั กนั พอดีข้นั ตอนที่ 6 กาํ หนด Eventข้นั ตอนท่ี 7 กดป่ ุม F5 เพ่ือทดสอบการทาํ งาน 55

56

57

58

59

60

61

62

63

64

กิจกรรมที่ 19 การส่งออกไฟลแ์ บบ HTML5เม่ือเราทาํ งานเสร็จแลว้ กถ็ ึงเวลา Export งานซ่ึงสามารถส่งออกไดห้ ลายอยา่ ง แตใ่ นกิจกรรมน้ี จะส่งออกเป็น HTML5 มีข้นั ตอนง่ายๆ ดงั ภาพ 65

66

67

68

กจิ กรรมท่ี 20 การอพั ไฟล์ขนึ้ โฮสต์เพอื่ เผยแพร่ผลงานเมื่อเรา Export งานเป็น HTML5 เรียบร้อยแลว้ จะได้ Folder งานมา 1 โฟลเดอร์ ซ่ึงเราจะใช้ในการอพั โหลดข้ึนไปไวบ้ นโฮสต์ เช่น Dropbox หรือ Google Drive ก็ไดใ้ นกิจกรรมน้ีจะสอนการอพั โหลดข้ึน Google Drive นะครับ ลองทาํ ตามภาพไดเ้ ลยครับ 69

70

71

72

73

กจิ กรรมท่ี 21 เกมผงึ้ น้อยโบยบนิจากแนวคิดเกม Flappy Bird ท่ีนกบินไปเรื่อยๆ โดยท่ีผเู้ ล่นตอ้ งแตะหรือคลิกหนา้ จอไวไ้ ม่ใหเ้ จา้ นกตกลงพ้นื เราลองมาประยกุ ตค์ าํ สงั่ กนั ดูครับวา่ ทาํ อยา่ งไรกนั บา้ ง1.ใหส้ ร้าง Sprite เป็นรูปท่ีเราตอ้ งการ เช่น นก ผ้งึ หรือสตั วท์ ี่บินได้2. กาํ หนด Behaviors เป็นแบบ Platform และให้ Speed =03. สร้างพ้นื ใหเ้ ป็ นแบบ Tile backgroud กาํ หนดใหย้ าว 2 เท่าของจอ4. เพิ่ม Touch เขา้ มาในโปรเจกต์5.กาํ หนด Event ตามภาพ6. กดป่ ุม F5 ทดสอบการทาํ งาน โดยการคลิกท่ีหนา้ จอไวเ้ ป็นระยะ เพือ่ ไม่ให้นกตกลงพ้ืน 74

75

76

กจิ กรรมท่ี 22 การ Export งานและใช้ PhoneGap ทาเป็ นไฟล์ apkเมื่อเราสร้างเกมแลว้ (เวอร์ชน่ั ฟรี) นอกจากจะส่งงานไปแสดงบนเวบ็ แบบ HTML5 แลว้ เรายงั สามารถเอาไฟลไ์ ป Publish ใหเ้ ป็นไฟลแ์ บบ apk ไดด้ ว้ ย โดยอาศยั โปรแกรมท่ีเรียกวา่ PhoneGapและรวมไฟลง์ านท้งั หมดเขา้ ดว้ ยกนั โดยใชโ้ ปรแกรม Eclipse เพื่อ Export งานเป็น apk (ส่วนเวอร์ชนั่ ลิขสิทธ์ิเราจะส่งออกโดยใช้ Cordova และใช้ XDK ในการทาํ ไฟล์ apk ซ่ึงจะง่ายกวา่และดีกวา่ ครับ)ข้นั ตอนมีดงั น้ี...1. ใน Construct2 ใหใ้ ส่รายระเอียดโปรเจกตง์ านของเราใหเ้ รียบร้อยก่อน2. Export ไฟลเ์ ป็นแบบ HTML53. เปิ ดโปรแกรม Eclipse และสร้างโปรเจกตใ์ หม่4. ดาวน์โหลด PhoneGap และคดั ลอกไฟล์ cordova-2.8.1.jar5. นาํ ไฟลน์ ้ีไปวางในโฟลเดอร์ libs ที่อยใู่ นโปรแกรม Eclipse6. สร้างโฟลเดอร์ใหม่ชื่อ www ใส่ในโฟลเดอร์ asset ในโปรแกรม Eclipse7. คดั ลอกไฟลใ์ นโฟลเดอร์ที่ Export จากโปรแกรม Construct28. นาํ ไฟลท์ ้งั หมดไปวางลงในโฟลเดอร์ www9. ทาํ การแกไ้ ขไฟล์ MainActivity.java10. ทดสอบรันงานดูผลลพั ธ์11. ทาํ การ Export งานจาก Eclipse ใหเ้ ป็นไฟล์ apk12. นาํ ไฟล์ apk ไปติดต้งั ลงในสามาร์โฟนหรือแทปเล็ต 77

78

79

80

81

82

83

84

85

กจิ กรรมท่ี 23 การกาหนดเงอื่ นไขให้ทางานเพียงคร้ังเดยี วประโยชน์จากการกาํ หนดเง่ือนไขลกั ษณะน้ี เราสามารถประยกุ ตไ์ ปใชใ้ นงานไดห้ ลายอยา่ ง แตใ่ นกิจกรรมน้ีจะประยกุ ตก์ ารใชง้ านในการสร้างแบบทดสอบ โดยกาํ หนดเง่ือนไขคือ เมื่อมีการคลิกป่ ุมตวั เลือกคาํ ตอบแลว้ จะมีการประมวลผลและแสดงคะแนนเพียงคร้ังเดียว เม่ือคลิกซ้าํ ที่ป่ ุมเดิมอีกจะคลิกก่ีคร้ังกต็ าม ก็จะไม่มีการเพม่ิ คะแนนใหอ้ ีก ถึงแมว้ า่ ป่ ุมน้นั จะเป็ นตวั เลือกท่ีถูกตอ้ งก็ตาม1. ใหส้ ร้าง Layout หนา้ แบบทดสอบ มีตวั เลือก 4 ป่ ุม2. กาํ หนดป่ ุมตวั เลือกถูก ช่ือ btnTrue ป่ ุมตวั เลือกผดิ btnFalse3. คดั ลอกป่ ุมตวั เลือกผดิ เพ่มิ อีกรวมเป็น 3 ป่ ุม4. เพม่ิ Object Mouse เขา้ มาในงานของเรา5. กาํ หนด Event6. ทดสอบการทาํ งาน กดป่ ุม F5 ใหท้ ดลองคลิกขอ้ ถูกหลายๆคร้ัง คะแนนจะตอ้ งเพ่ิมแค่คร้ังเดียว เป็นอนั ถูกตอ้ ง 86

87

88

กจิ กรรมท่ี 24 การออกแบบงานในรูปแบบสไลด์นาเสนองาน(แบบที่ 1)เน่ืองจากในเวอร์ชน่ั เก่า ยงั ไมม่ ีออบเจกต์ Function จึงตอ้ งออกแบบงานท่ีตอ้ งใช้ Event sheetแต่ละไฟลค์ วบคุมแต่ละ Layout โดยอาศยั การฝังคาํ สงั่ ซ้าํ ๆลงไปในแตล่ ะ Event sheet ดว้ ยใช้คาํ ส่ัง Include 1. สร้างงาน Layout เท่าจาํ นวน ท่ีเราตอ้ งการ ต้งั ชื่อ p นาํ หนา้ ตามดว้ ยตวั เลข เช่น p0 p1 p2..... 2. สร้างป่ ุมคลิก ยอ้ นกลบั กบั ป่ ุมถดั ไป 3. สร้าง Event sheet เท่ากบั จาํ นวน Layout ต้งั ชื่อใหส้ อดคลอ้ งกนั กบั ช่ือ Layout เช่น Event p0,Event p1 ........ 4. ใหเ้ พ่ิม Event sheet เกินมา 1 ชีต ต้งั ช่ือวา่ navigation เพอ่ื ใชค้ วบคุมการเล่ือน หนา้ ไปมา และ Include ไฟลน์ ้ีในทุกๆ Event sheet 5. กาํ หนดตวั แปรแบบ Global ชื่อวา่ number = 0 6. ทุกคร้ังท่ีคลิกป่ ุม ใหเ้ พิม่ หรือลดคา่ number 7. กดป่ ุม F5 ทดสอบการทาํ งาน 89

90

กจิ กรรมที่ 25 การออกแบบงานในรูปแบบสไลด์นาเสนองาน(แบบท่ี 2)เป็นความสามารถของโปรแกรม Construc2 ในเวอร์ชน่ั ใหม่ๆ ที่มี Object เพิ่มข้ึนหลายๆตวั ทาํใหเ้ ราทาํ งานง่ายและสะดวกมากๆ เลย ในตวั อยา่ งน้ี เราจะใชแ้ ค่ Event sheet เดียวเท่าน้นั ในการควบคุมการทาํ งาน โดยการเขียนเป็น Function โดยงานเราจะมีกี่หนา้ กี่ Layout ก็ใชค้ าํ สงั่ เพียงไมก่ ี่บรรทดั เอง\ 91

92

กจิ กรรมท่ี 26 การทานับเวลาถอยหลงั แบบแถบเวลาในการใหเ้ ล่นเกม หรือทาํ กิจกรรมที่ตอ้ งการจบั เวลา เราอาจจะใชต้ วั เลขหรือใชแ้ ถบเวลาแสดงแทนไดง้ ่ายๆดงั น้ี1. สร้างแถบเวลา2. กาํ หนดจุด Registration ไวต้ าํ แหน่งซา้ ย Left3. กาํ หนดตวั แปรแบบ Instance Name 3 ค่า4. สร้าง Text สาํ หรับแสดงเวลาท่ีเป็นตวั เลขกาํ กบั ดว้ ย5. กาํ หนดคาํ ส่งั ใน Event sheet โดยสามารถคดั ลอกคาํ สัง่ ไปวางตามบรรทดั หมายเลขท่ีทาํ กาํ กบัไวป้ ระกอบอธิบายในภาพ ดงั น้ีบรรทดั หมายเลข 1) Timebar.Widthบรรทดั หมายเลข 2) \"Time : \" & ceil(TimeBar.Time)บรรทดั หมายเลข 3) Self.InitialWidth + (TimeBar.Time-TimeBar.MaxTime)*(TimeBar.InitialWidth/TimeBar.MaxTime)บรรทดั หมายเลข 4) dtบรรทดั หมายเลข 5) 0บรรทดั หมายเลข 6) \"Time : 0\" 93

กจิ กรรมท่ี 27 เกมจับคู่(ง่ายๆ โค๊ดแค่ 3 บรรทดั )สามารถจะจบั ภาพกี่คู่กไ็ ด้ ไม่เก่ียวกบั จาํ นวนภาพ แตใ่ ชโ้ คด๊ แค่ 3 บรรทดั เทา่ เดิม มาเริ่มทาํ กนั เลยครับ1. สร้าง Sprite ภาพแบบ Animation2. กาํ หนด Speed =0 และ Loop = No3. คดั ลอกภาพออกมาเทา่ จาํ นวนท่ีตอ้ งการจบั คูแ่ ละกาํ หนดการแสดงเฟรมในช่อง Initial frame4. กาํ หนดตวั แปรแบบ Instance Variable เพือ่ เช็คคาํ ตอบ5. กาํ หนดตวั แปรพกิ ดั x y correct ของวตั ถุที่ลาก เมื่อตรวจคาํ ตอบผดิ แลว้ ให้เดง้ กลบั ตาํ แหน่งเดิม6. เขียนโคด๊ ใน Event sheet7. กดป่ ุม F5 ทดสอบการทาํ งาน 94

95

96

97

98

99

100