48 รูปที่ 101 เลือก Add to รูปที่ 102 เลือก score กำหนดค่าที่เพิ่มเป็น 1 รูปที่ 103 เมื่อเพิ่มเหตุการณ์เสร็จ
49 7.10 นำค่าจากตัวแปร score ไปแสดงบนวัตถุScore บน layout โดย Add event -> Score -> Set text -> เลือกเป็นตัวแปร score รูปที่ 104 เลือก Score รูปที่ 105 เลือก Set text
50 รูปที่ 106 เลือกเป็นตัวแปร score 7.11 ลองรันเพื่อดูผลลัพธ์ รูปที่ 107 ผลรันหลังจากเพิ่มส่วนแสดงเป้าหมายและคะแนน 7.12 เพิ่มเหตุการณ์สุดท้ายใน Event sheet เพื่อเป็นการจบเกม ให้เพิ่มการตรวจสอบคะแนน เมื่อเก็บครบ 10 เหรียญหรือ 10 คะแนน ให้ผู้เล่นชนะเกม โดยเปลี่ยนข้อความที่ เป้าหมาย เป็น คุณชนะแล้ว! โดยเลือก Add event -> System -> Compare variable -> เลือกเป็นตัวแปร score และเลือก = equal to ค่า 10
51 รูปที่ 108 เลือก System รูปที่ 109 เลือก Compare variable
52 รูปที่ 110 เลือกเป็นตัวแปร score และเลือก = equal to ค่า 10 7.13 ใส่การทำงานให้เหตุการณ์เมื่อคะแนนครบ 10 ให้ไป Set text ของวัตถุObjective ให้มีข้อความว่า “คุณชนะ!” รูปที่ 111 กำหนดการทำงานเป็นการ Set text ให้Objective รูปที่ 112 ผลการเพิ่มเหตุการณ์และการทำงานเมื่อคะแนนครบ 10 คะแนน
53 7.14 ลองรันดูผลลัพธ์ รูปที่ 113 ผลการทดลองเล่นเกม และเก็บเหรียญให้ครบ 10 เหรียญ
54 ส่วนที่ 4 การสร้างเกมเพื่อการศึกษา 1. ลักษณะของเกม เกมเพื่อการศึกษามีเป้าหมายเพื่อทบทวนความรู้หรือความเข้าใจในเนื้อหาของบทเรียน อาจจะอยู่ในรูปของแบบฝึกหัด หรือคำถามท้ายบทเรียน สำหรับเกมจะอยู่ในรูปแบบของเกมตอบคำถาม 2. การออกแบบชุดคำถาม การออกแบบชุดคำถามต้องออกแบบตัวเลือก อย่างน้อย 2 ถึง 4 ตัวเลือก ต่อคำถาม 1 ข้อ พร้อมทั้งกำหนดคำตอบที่ ถูกต้องไว้ด้วย ตัวอย่างเช่น คำถามข้อที่1 ถ้า 2 + X = 5 แล้ว X มีค่าเท่ากับข้อใด 1) 2 2) 3 3) 4 4) 5 คำตอบคือ ข้อ 2) 3 การเตรียมคำถามเพื่อนำไปใช้ในโปรแกรม Construct 2 จะใช้ไฟล์นามสกุล .XML ซึ่งผู้พัฒนาสามารถใช้text editor ตัวไหนก็ได้ในการสร้างไฟล์นามสกุล .XML ขึ้นมา โดยไฟล์XML มีรูปแบบแสดงดังรูปที่ 114 <quiz> <question1> <question>คำถามข้อที่ 1</question> <choice1>ตัวเลือกข้อที่ 1</choice1> <choice2>ตัวเลือกข้อที่ 2</choice2> <choice3>ตัวเลือกข้อที่ 3</choice3> <choice4>ตัวเลือกข้อที่ 4</choice4> <answer>เฉลยของคำถามข้อที่ 1</answer> </question1> <question2> ... ... </question2> </quiz> รูปที่ 114 รูปแบบไฟล์XML ของคำถามที่จะนำไปใช้ในโปรแกรม Construct 2 รูปแบบของภาษา XML จะเก็บข้อมูลโดยซ้อนกันเป็นชั้น ๆ โดยมีsyntax ง่าย ๆ คือ ถ้ามีแท็กเปิด ต้องมีแท็กปิด เช่น จากรูปที่ 114 ในบรรทัดแรกมีแท็กเปิด คือ <quiz> จะต้องมีแท็กปิดคือ </quiz> และในบรรทัดที่ 2 มีแท็กเปิดคือ <question>
55 จะต้องมีแท็กปิดคือ </question> โดยในแต่ละแท็กจะประกอบไปด้วย 2 ส่วน ชื่อแท็ก และข้อมูลที่เก็บอยู่ในแท็ก โดยใน 1 แท็ก อาจจะมีแท็กภายในมากกว่า 1 แท็ก ในรูปที่ 115 แสดงให้เห็นถึงตัวอย่างของไฟล์XML ที่จะในไปใช้ในโปรแกรม Construct 2 ซึ่งประกอบไปด้วยคำถามทั้งหมด 5 ข้อ ในแต้ละข้อประกอบไปด้วย คำถาม 1 แท็ก คำตอบ 4 แท็ก และเฉลย 1 แท็ก <?xml version="1.0"?> <quiz> <question1> <question>2 + X = 5 แล้ว X มีค่าเท่ากับข้อใด</question> <choice1>2</choice1> <choice2>3</choice2> <choice3>4</choice3> <choice4>5</choice4> <answer>3</answer> </question1> <question2> <question>มีส้มอยู่ 3 กอง และมะม่วงอยู่ 4 กองนำมารวมกันได้กี่กอง?</question> <choice1>7</choice1> <choice2>12</choice2> <choice3>1</choice3> <choice4>0</choice4> <answer>1</answer> </question2> <question3> <question>ปีอะไรมีหลายสี?</question> <choice1>ปีโป้</choice1> <choice2>ปีจอ</choice2> <choice3>ปี 2562</choice3> <choice4>ปีนี้</choice4> <answer>ปีโป้</answer> </question3> <question4> <question>โคอะไรมีแต่หนังไม่มีเนื้อ?</question> <choice1>โคผอม</choice1> <choice2>โคขุน</choice2>
56 <choice3>โคหิว</choice3> <choice4>โคลัมเบีย พิกเจอร์</choice4> <answer>โคลัมเบีย พิกเจอร์</answer> </question4> <question5> <question>1+1=2 แล้ว 2+2=?</question> <choice1>2</choice1> <choice2>4</choice2> <choice3>6</choice3> <choice4>8</choice4> <answer>4</answer> </question5> </quiz> รูปที่ 115 ตัวอย่างไฟล์XML ของคำถามที่จะนำไปใช้ในโปรแกรม Construct 2 3. การสร้างโปรเจคเกม 3.1 เลือก File -> New จากนั้นเลือกเทมเพลตแบบ HD landscape 720p กด Open รูปที่116 เทมเพลตสำหรับการสร้างโปรเจคใหม่
57 3.2 เปลี่ยนชื่อโปรเจคโดยไปที่แถบ Properties ตั้งชื่อใหม่เป็น Quiz Game รูปที่117 การตั้งชื่อโปรเจคใหม่ 4. ฉากและพื้นหลัง 4.1 เกมตอบคำถามใช้พื้นที่หน้าจอแบบคงที่ ไม่เคลื่อนย้ายไปไหน ผู้พัฒนาสามารถกำหนดขนาด Layout size ให้มีค่าเท่ากับ Window size รูปที่ 118 การตั้งค่า Layout size ให้มีขนาดเท่ากับ Windows size 4.2 ฉาก และพื้นหลังผู้พัฒนาสามารถเลือกใช้สีหรือรูปภาพได้ตามใจชอบ โดยสามารถออกแบบให้มีลักษณะใกล้เคียงกับรูปที่ 119 ซึ่งเป็นรูปแบบของเกมตอบคำถามโดยทั่วๆ ไป ประกอบไปด้วย 2 ส่วนหลัก ๆ คือ ส่วนของคำถาม และส่วนของตัวเลือกคำตอบ โดยคำถามจะมี 1 ช่อง ส่วนตัวเลือกคำตอบจะมี 4 ช่อง
58 รูปที่ 119 ตัวอย่างเกม Millionaire Quiz 2019 (ที่มา : https://www.microsoft.com/en-us/p/millionaire-quiz-2019/9nvm838n088x?activetab=pivot:overviewtab) 4.3 สร้าง Layer เพิ่มและเปลี่ยนชื่อให้ครบ 3 layer รูปที่120 การสร้าง Layer เพิ่ม
59 4.4 เลือก layer background และเพิ่ม Sprite เข้ามา 1 อัน ตั้งชื่อว่า bg รูปที่ 121 การสร้าง Sprite ตั้งชื่อว่า bg 4.5 สร้าง Sprite ขึ้นมา 5 อัน ในเลเยอร์background ปรับขนาด และสีให้เหมาะสมเพื่อปิดคำถาม และตัวเลือกคำตอบไว้ รูปที่ 122 การสร้าง Sprite 5 อัน เพื่อปิดคำถาม และตัวเลือกคำตอบ 4.6 สร้าง Text ขึ้นมา 5 อัน ในเลเยอร์game ปรับขนาดให้เหมาะสม นำไปวางไว้ในช่องคำถาม และช่องตัวเลือกคำตอบให้ครบ โดยในช่องคำถามตั้งชื่อ Text ว่า TxtQuestion ส่วนตัวเลือกคำตอบตั้งชื่อว่า TxtAnswer1, TxtAnswer2, TxtAnswer3 และ TxtAnswer4 ตามลำดับ
60 รูปที่ 123 การสร้าง Text 5 อัน เพื่อใช้แสดงคำถาม และตัวเลือกคำตอบ 5. ส่วนแสดงข้อมูลต่าง ๆ ของเกม (HUD) 5.1 สร้าง Text เพิ่ม 1 อัน ในเลเยอร์hud ตัวชื่อว่า TxtScore ปรับขนาดตัวอักษรและสีให้เหมาะสม เปลี่ยนข้อความใน Text เป็น Score : 0 รูปที่ 124 การสร้าง Text 1 อัน เพื่อใช้แสดงคะแนน
61 6. การเพิ่มตรรกะต่าง ๆ ให้เกม (game logic) 6.1 การโหลดคำถามจากไฟล์.XML มาแสดง 6.1.1 นำไฟล์ .XML เข้ามาในโปรเจค ให้เปิด Project panel ขึ้นมา คลิกขวาที่โฟลเดอร์Files เลือก Import files จากนั้นให้ เลือกไฟล์คำถามที่เตรียมไว้ รูปที่ 125 การเพิ่มไฟล์คำถามเข้ามาในโปรเจค รูปที่ 126 ไฟล์คำถามที่เพิ่มเข้ามาในโปรเจคแล้ว
62 6.1.2 ให้เพิ่มวัตถุ 4 ชนิดเข้ามาในโปรเจค คือ XML, Function, AJAX และ MOUSE รูปที่ 127 การเพิ่มวัตถุเข้าไปในโปรเจค 6.1.3 ในไฟล์Event sheet 1 ให้เพิ่มตัวแปรแบบ global 3 ตัว คือ 1) index ชนิดเป็น number กำหนดค่าเริ่มต้นเป็น 1 2) score ชนิดเป็น number กำหนดค่าเริ่มต้นเป็น 0 3) answer ชนิดเป็น text กำหนดค่าเริ่มต้นเป็น “”
63 รูปที่ 128 การเพิ่มตัวแปรแบบ global เข้าไปในโปรเจค 6.1.4 เพิ่มเหตุการณ์On start of layout และกำหนด action ดังนี้ 1) เซ็ตค่าตัวแปร index เป็น 1 2) เซ็นค่าตัวแปร score เป็น 0 รูปที่ 129 การเพิ่มเหตุการณ์On start of layout
64 3) ใช้AJAX ไป request project file ไฟล์quiz.xml โดยกำหนด tag เป็น “loadfile” รูปที่130 การใช้AJAX ไปโหลดไฟล์quiz.xml รูปที่ 131 action ทั้งหมดของเหตุการณ์On start of layout 6.1.5 เพิ่มเหตุการณ์On completed ใส่ tag เป็น loadfile รูปที่132 การเพิ่มเหตุการณ์On completed ของ AJAX
65 รูปที่133 กำหนดพารามิเตอร์ให้เหตุการณ์On competed 6.1.6 เพิ่ม action ให้เหตุการณ์On completed โดยให้XML ไป Load กำหนดเป็น “AJAX.LastData” รูปที่ 134 การเพิ่ม action ให้XML ไปเอาข้อมูลจาก AJAX มาเก็บไว้ รูปที่135 action ทั้งหมดของเหตุการณ์On completed
66 6.1.7 ให้Add blank sub-event ให้เหตุการณ์On completed และเพิ่ม action เป็น Function ให้On function กำหนด เป็น “loadquestion” รูปที่136 การเพิ่ม action ของเหตุการณ์ย่อยของเหตุการณ์On completed รูปที่137 action ทั้งหมดของเหตุการณ์ย่อยของเหตุการณ์On completed
67 6.1.8 เพิ่มเหตุการณ์ให้Function ไป On function กำหนดเป็น “loadquestion” รูปที่138 การเพิ่มเหตุการณ์On function ของ Function 6.1.9 ให้เพิ่ม sub-event ให้เหตุการณ์ด้านบน โดยเหตุการณ์ณ์คือให้system ตรวจสอบค่า index ว่าน้อยกว่าหรือเท่ากับ 5 หรือไม่ถ้าเป็นจริงให้เพิ่ม action ดังนี้ 1) กำหนดให้TxtQuestion ใช้method set text โดยกำหน้าค่าเป็น XML.StringValue(“/quiz/question” & index & “/question”) 2) กำหนดให้TxtAnswer1 ใช้method set text โดยกำหน้าค่าเป็น XML.StringValue(“/quiz/question” & index & “/choice1”) 3) กำหนดให้TxtAnswer1 ใช้method set text โดยกำหน้าค่าเป็น XML.StringValue(“/quiz/question” & index & “/choice2”) 4) กำหนดให้TxtAnswer1 ใช้method set text โดยกำหน้าค่าเป็น XML.StringValue(“/quiz/question” & index & “/choice3”) 5) กำหนดให้TxtAnswer1 ใช้method set text โดยกำหน้าค่าเป็น XML.StringValue(“/quiz/question” & index & “/choice4”) 6) กำหนดให้ตัวแปร answer เก็บค่า XML.StringValue(“/quiz/question” & index & “/answer”) 7) เพิ่มค่าตัวแปร index ไป 1
68 รูปที่139 การเพิ่มเหตุการณ์ย่อยของเหตุการณ์On function 6.2 การตรวจสอบคำตอบ การเปลี่ยนคำถาม และการเพิ่มคะแนน 6.2.1 เมื่อผู้เล่นคลิกที่คำตอบที่ต้องการ เกมจะนำคำตอบที่ผู้เล่นคลิก มาตรวจสอบว่าตรงกับเฉลยหรือไม่ถ้าตรง จะบวก score ขึ้น 1 และเปลี่ยนไปคำถามถัดไป ถ้าไม่ตรงจะไม่บวก score เพิ่ม แต่จะเปลี่ยนไปคำถามถัดไป 6.2.2 ให้เพิ่มเหตุการณ์เมาส์คลิกที่TxtAnswer1 (On object clicked) รูปที่140 การเพิ่มเหตุการณ์On object clicked เพิ่ม sub-event เป็นการตรวจสอบว่า ข้อความที่อยู่บน TxtAnswer1 ตรวจกับตัวแปร answer ที่โหลดไว้หรือไม่ (Compare two values) ถ้าตรงให้ไปทำ action ดังนี้
69 รูปที่141 การเพิ่มเหตุการณ์ย่อยของเหตุการณ์On object clicked เพื่อตรวจสอบคำตอบ 1) เพิ่มค่าตัวแปร score ไป 1 2) ให้เอาค่าจากตัวแปร score ไปแสดงผลใน TxtScore 3) ให้system รอ 2 วินาที 4) ให้Function ไปเรียก Call function กำหนดเป็น “loadquestion” (คือการโหลดคำถามข้อต่อไป) รูปที่142 action ทั้งหมดของเหตุการณ์ย่อยของเหตุการณ์On object clicked จากนั้นให้เพิ่ม Else ให้เหตุการณ์ตรวจสอบคำตอบด้านบน โดยให้กดที่ เหตุการณ์ด้านบน และคลิกขวา เลือก Add Else และเพิ่ม action เป็นให้Function ไปเรียก Call function กำหนดเป็น “loadquestion” (คือการโหลดคำถามข้อต่อไป)
70 รูปที่143 การเพิ่ม Else ให้เหตุการณ์ย่อยของเหตุการณ์On object clicked รูปที่144 action ทั้งหมดของ Else
71 6.2.3 ทำแบบนี้จนครบคำตอบทั้ง 4 ตัวเลือก รูปที่ 145 เหตุการณ์สำหรับการตรวจสอบคำตอบจาก TextAnswer ทั้ง 4
72 6.2.4 ทดสอบรันดูผลลัพธ์ รูปที่146 ผลลัพธ์ที่ได้จาก Quiz game 7. วิธีการชนะเกม เมื่อตอบคำถามครบทุกข้อ เกมจะจบลงทันทีผู้พัฒนาอาจจะเพิ่มหน้าแสดงคะแนนที่ได้พร้อมปุ่มเริ่มเกมใหม่
73 ส่วนที่ 5 การสร้างสื่อแบบโต้ตอบ 1. ลักษณะของสื่อแบบโต้ตอบ สื่อแบบโต้ตอบมีเป้าหมายเพื่อนำเสนอข้อมูลหรือความรู้ในรูปแบบที่ผู้ใช้สามารถมีส่วนร่วม หรือการปฏิสัมพันธ์กับสื่อได้ อาจจะอยู่ในรูปแบบของเกม วีดีโอ หรือเทคโนโลยีอื่น ๆ 2. การออกแบบสื่อแบบโต้ตอบ วิเคราะห์จากข้อมูลหรือความรู้ที ่ต้องการนำเสนอ ว ่าจะออกแบบสื ่อเพื ่อนำเสนอข้อมูลหรือความรู้ในรูปแบบใด ยกตัวอย่างเช่น การให้ความรู้เกี่ยวกับตัวต้านทาน (Resistor) นอกจากการนำเสนอข้อมูลทั่ว ๆ ไปแล้ว สามารถนำเสนอสื่อที่ สามารถคำนวณความต้านทานโดยให้ผู้ใช้เป็นคนเลือกสีได้เป็นต้น 3. การสร้างโปรเจคการคำนวณความต้านทานจากแถบสี 3.1 เลือก File -> New จากนั้นเลือกเทมเพลตแบบ HD landscape 720p กด Open รูปที่ 147 เทมเพลตสำหรับการสร้างโปรเจคใหม่
74 3.2 เปลี่ยนชื่อโปรเจคโดยไปที่แถบ Properties ตั้งชื่อใหม่เป็น Resistor Color Code Calculator รูปที่ 148 การตั้งชื่อโปรเจคใหม่ 4. ฉากและพื้นหลัง 4.1 สื่อคำนวณความต้านทานใช้พื้นที่หน้าจอแบบคงที่ ไม่เคลื่อนย้ายไปไหน ผู้พัฒนาสามารถกำหนดขนาด Layout size ให้มีค่า เท่ากับ Window size รูปที่ 149 การตั้งค่า Layout size ให้มีขนาดเท่ากับ Windows size 4.2 ฉาก และพื้นหลังผู้พัฒนาสามารถเลือกใช้สีหรือรูปภาพได้ตามใจชอบ โดยสามารถออกแบบให้มีลักษณะใกล้เคียงกับรูปที่ 150 ซึ่งเป็นรูปแบบของเกมตอบคำถามโดยทั่วๆ ไป ประกอบไปด้วย 2 ส่วนหลัก ๆ คือ ส่วนของคำถาม และส่วนของตัวเลือกคำตอบ โดยคำถามจะมี 1 ช่อง ส่วนตัวเลือกคำตอบจะมี 4 ช่อง
75 รูปที่ 150 การอ่านค่าความต้านทานจากสี (ที่มา : http://www.thaigoodview.com/node/51604) 4.3 สร้าง Layer เพิ่มและเปลี่ยนชื่อให้ครบ 3 layer รูปที่ 151 การสร้าง Layer เพิ่ม
76 4.4 เลือก layer background และเพิ่ม Sprite เข้ามา 1 อัน ตั้งชื่อว่า bg รูปที่ 152 การสร้าง Sprite ตั้งชื่อว่า bg 4.5 เราจะทำการสร้าง Sprite มาครอบแถบสีใน digit ที่ 1 ให้ครบทั้ง 10 สีเริ่มจากสร้าง Sprite ขึ้นมา 1 อัน ในเลเยอร์game โดยไม่ต้องเติมสีปรับขนาดให้พอดีกับตำแหน่งของแถบสี รูปที่ 153 การสร้าง Sprite ตั้งชื่อว่า bt1digit
77 รูปที่ 154 การปรับขนาดและจัดวาง Sprite ในตำแหน่งของ digit ที่ 1 4.6 ทำการ duplicate (การ duplicate คือการคัดลอกตัว object สามารถทำได้โดยการเลือกที่object ที่ต้องการ duplicate จากนั้นกดปุ่ม Ctrl ค้าง และใช้เมาส์ลาก object ออกมา) ตัว sprite ที่สร้างไว้ก่อนหน้าอีก 9 ตัว จัดวางให้ตรงตำแหน่งของ digit ที่ 1 ให้ครบทุกแถบสี (ข้อสังเกต ค่า UID จะเพิ่มขึ้นทีละ 1 ไปจนถึง 10) รูปที่ 155 การปรับขนาดและจัดวาง Sprite ในตำแหน่งของ digit ที่ 1 ให้ครบทั้ง 10 ตัว 4.6 สร้าง Sprite เพิ่มสำหรับ digit ที่ 2 สามารถทำได้โดยการ clone object type (คลิกขวาที่object ที่ต้องการ clone เลือก คำสั่ง Clone object type โดยจะได้ชื่อเป็น bt1digit2) ปรับขนาดและปรับตำแหน่งให้เหมาะสมกับ digit ที่ 2
78 รูปที่ 156 การ clone object type เพื่อสร้างเป็นวัตถุชื่อ bt1digit2 รูปที่ 157 การปรับขนาดและจัดวาง Sprite ในตำแหน่งของ digit ที่2 4.7 ทำการ duplicate ตัว sprite ที่สร้างไว้ก่อนหน้าอีก 9 ตัว จัดวางให้ตรงตำแหน่งของ digit ที่ 2 ให้ครบทุกแถบสี (ข้อสังเกต ค่า UID จะเพิ่มขึ้นทีละ 1 โดย digit ที่ 2 จะเริ่มจาก 11 ไปจนถึง 20)
79 รูปที่ 158 การปรับขนาดและจัดวาง Sprite ในตำแหน่งของ digit ที่ 2 ให้ครบทั้ง 10 ตัว 4.8 สร้าง Sprite เพิ่มสำหรับ Multiplier สามารถทำได้โดยการ clone object type โดยจะได้ชื่อเป็น bt1digit3 ปรับขนาดและ ปรับตำแหน่งให้เหมาะสมกับ Multiplier รูปที่ 159 การ clone object type เพื่อสร้างเป็นวัตถุชื่อ bt1digit3 4.9 ทำการ duplicate ตัว sprite ที่สร้างไว้ก่อนหน้าอีก 9 ตัว จัดวางให้ตรงตำแหน่งของ Multiplier ให้ครบทุกแถบสี (ข้อสังเกต ค่า UID จะเพิ่มขึ้นทีละ 1 โดย Multiplier จะเริ่มจาก 21 ไปจนถึง 30)
80 รูปที่ 160 การปรับขนาดและจัดวาง Sprite ในตำแหน่งของ Multiplier ให้ครบทั้ง 10 ตัว 4.10 สร้าง Sprite เพิ่มสำหรับ Tolerance สามารถทำได้โดยการ clone object type โดยจะได้ชื่อเป็น bt1digit4 ปรับขนาด และปรับตำแหน่งให้เหมาะสมกับ Tolerance รูปที่ 161 การ clone object type เพื่อสร้างเป็นวัตถุชื่อ bt1digit4 4.11 ทำการ duplicate ตัว sprite ที่สร้างไว้ก่อนหน้าอีก 1 ตัว จัดวางให้ตรงตำแหน่งของ Tolerance ให้ครบทุกแถบสี (ข้อสังเกต ค่า UID จะเพิ่มขึ้นทีละ 1 โดย Tolerance จะเริ่มจาก 31 ไปจนถึง 32)
81 รูปที่ 162 การปรับขนาดและจัดวาง Sprite ในตำแหน่งของ Tolerance ให้ครบทั้ง 2 ตัว 5. ส่วนแสดงข้อมูลผลลัพธ์(HUD) 5.1 สร้างส่วนแสดงผลลัพธ์ที่ได้จากการเลือกแถบสี 5.1.1 สร้าง Text เพิ่ม 1 อัน ในเลเยอร์hud ตัวชื่อว่า TxtResult รูปที่ 163 การสร้าง Text 1 อัน เพื่อใช้แสดงค่าความต้านทาน
82 5.1.2 ปรับขนาดตัวอักษรและสีให้เหมาะสม เปลี่ยนข้อความใน Text เป็น 0 ohm รูปที่ 164 จัดวาง Text ไว้ในตำแหน่งที่เหมาะสม 5.2 สร้างส่วนแสดงผลแถบสีที่ผู้ใช้เลือกสำหรับ digit ที่ 1 5.2.1 สร้าง Sprite เพิ่มอีก 1 อัน เพื่อใช้ในการแสดงแถบสีที่ผู้ใช้เลือกจากกลุ่มของ digit ที่ 1 ตั้งชื่อว่า SelectDigit1 และใส่สีดำ รูปที่ 165 การสร้าง Sprite ชื่อ SelectDigit1 เพื่อแสดงผลสีที่ผู้ใช้กดเลือก
83 5.2.2 เทสีดำใส่ลงใน Sprite รูปที่ 166 การเทสีดำใส่ลงใน Sprite 5.2.3 เพิ่ม animation frame อีก 9 เฟรม เพื่อใช้ในการแสดงผลแถบสีทั้ง 10 กำหนดสีให้เรียงลำดับตามแถบสีที่ปรากฏใน background รูปที่ 167 การสร้าง animation frame ให้ครบทุกแถบสี
84 5.2.4 ปรับ Animation Speed เป็น 0 รูปที่ 168 การปรับค่า Speed ของ Animation ให้เป็น 0 5.2.5 ปรับขนาดและจัดวางให้อยู่ในตำแหน่งแถบสีที่ 1 รูปที่ 169 การปรับขนาดและจัดวาง SelectDigit1 5.3 สร้างส่วนแสดงผลแถบสีที่ผู้ใช้เลือกสำหรับ digit ที่ 2 5.3.1 สร้าง Sprite เพิ่มอีก 1 อัน โดยใช้วิธีการ Clone object type จากวัตถุ SelectDigit1 (จะได้วัตถุใหม่ที่ชื่อว่า SelectDigit2) ปรับขนาดและจัดตำแหน่งให้อยู่ตรงตำแหน่งแถบสีที่ 2
85 รูปที่ 170 การ clone object type ปรับขนาดและจัดวาง SelectDigit2 5.4 สร้างส่วนแสดงผลแถบสีที่ผู้ใช้เลือกสำหรับ Multiplier 5.4.1 สร้าง Sprite เพิ่มอีก 1 อัน โดยใช้วิธีการ Clone object type จากวัตถุ SelectDigit2 (จะได้วัตถุใหม่ที่ชื่อว่า SelectDigit3) ปรับขนาดและจัดตำแหน่งให้อยู่ตรงตำแหน่งแถบสีที่ 3 รูปที่ 171 การ clone object type ปรับขนาดและจัดวาง SelectDigit3 5.4.2 ย้าย animation frame ที่ 8 และ 9 ไปไว้ตำแหน่งที่ 0 และ 1 ทำการปรับสีให้ตรงกับแถบที่ 0 และ 1 ในกลุ่ม Multiplier ของ background
86 รูปที่ 172 การแก้ไข animation frame ให้ตรงกับแถบสีในกลุ่ม Multiplier 5.5 สร้างส่วนแสดงผลแถบสีที่ผู้ใช้เลือกสำหรับ Tolerance 5.5.1 สร้าง Sprite เพิ่มอีก 1 อัน โดยใช้วิธีการ Clone object type จากวัตถุ SelectDigit3 (จะได้วัตถุใหม่ที่ชื่อว่า SelectDigit4) ปรับขนาดและจัดตำแหน่งให้อยู่ตรงตำแหน่งแถบสีที่ 4 รูปที่ 173 การ clone object type ปรับขนาดและจัดวาง SelectDigit4
87 5.5.2 ลบ animation frame ที่ 2 ถึง 9 ทิ้ง รูปที่ 174 การแก้ไข animation frame ให้ตรงกับแถบสีในกลุ่ม Tolerance 6. การเพิ่มตรรกะต่าง ๆ ให้สื่อ (logic) 6.1 การแสดงแถบสีที่ผู้ใช้เลือก 6.1.1 เพิ่มวัตถุMouse เข้ามาในโปรเจค รูปที่ 175 การเพิ่มวัตถุMouse
88 6.1.2 ไปที่ไฟล์Event sheet และเพิ่มเหตุการณ์การคลิกเมาส์ไปที่วัตถุ bt1digit โดยเลือก Mouse -> on object clicked รูปที่ 176 การเพิ่มเหตุการณ์คลิกที่ bt1digit โดยใช้เมาส์
89 รูปที่ 177 เหตุการณ์คลิกเมาส์สำหรับ bt1digit 6.1.3 เพิ่ม action ในการจัดการเปลี่ยนสีของแถบสีSelectDigit1 -> Set frame -> กรอกเป็น bt1digit.UID - 1 รูปที่ 178 การเพิ่ม action สำหรับเหตุการณ์คลิกเมาส์ รูปที่ 179 การใช้คุณสมบัติUID ในการกำหนด frame ให้Sprite
90 6.1.4 เพิ่มเหตุการณ์การคลิกเมาส์และกำหนด action ให้กลุ่มของแถบสีที่เหลือ ดังนี้ รูปที่ 180 การเพิ่มเหตุการณ์คลิกเมาส์ครบทั้ง 4 กลุ่มแถบสี 6.2 การคำนวณค่าความต้านทานจากแถบสีที่ผู้ใช้เลือก 6.2.1 ในไฟล์Event sheet 1 ให้เพิ่มตัวแปรแบบ global 4 ตัว คือ 1) c1 ชนิดเป็น Text กำหนดค่าเริ่มต้นเป็น ‘0’ 2) c2 ชนิดเป็น Text กำหนดค่าเริ่มต้นเป็น ‘0’ 3) c3 ชนิดเป็น Text กำหนดค่าเริ่มต้นเป็น ‘0’ 4) c4 ชนิดเป็น Text กำหนดค่าเริ่มต้นเป็น ‘0’ รูปที่ 181 การเพิ่มตัวแปรแบบ global 4 ตัว 6.2.2 ให้เพิ่ม action ให้ทุกการคลิกเมาส์เพื่อเก็บค่าที่กดลงในตัวแปร c1, c2, c3 หรือ c4 โดยกำหนดให้ 1) แถบสีที่ 1 เก็บค่าลงตัวแปร c1 2) แถบสีที่ 2 เก็บค่าลงตัวแปร c2
91 3) แถบสีที่ 3 เก็บค่าลงตัวแปร c3 4) แถบสีที่ 4 เก็บค่าลงตัวแปร c4 6.2.3 เพิ่ม action สำหรับแถบสีที่ 1 เพื่อเก็บค่าลงตัวแปร c1 รูปที่182 การเพิ่ม action เพื่อเก็บผลลัพธ์จากการกดแถบสีลงในตัวแปร c1 รูปที่ 183 action สำหรับเหตุการณ์มีการคลิกเมาส์ที่กลุ่มของแถบสีที่ 1 6.2.4 เพิ่ม action สำหรับแถบสีที่2 เพื่อเก็บค่าลงตัวแปร c2 รูปที่ 184 การเพิ่ม action เพื่อเก็บผลลัพธ์จากการกดแถบสีลงในตัวแปร c2 รูปที่ 185 action สำหรับเหตุการณ์มีการคลิกเมาส์ที่กลุ่มของแถบสีที่ 2
92 6.2.5 สำหรับแถบสีที่ 3 เพิ่ม sub-event เพื่อเป็นการตรวจสอบว่า ผู้ใช้คลิกเลือกสีใด และจะเก็บผลลัพธ์ที่ได้ลงในตัวแปร c3 รูปที่186 การเพิ่มเหตุการณ์ย่อยของเหตุการณ์On object clicked เพื่อตรวจสอบว่าคลิกสีใด สำหรับกลุ่มแถบสีMultiplier 6.2.6 สำหรับแถบสีที่ 4 เพิ่ม sub-event เพื่อเป็นการตรวจสอบว่า ผู้ใช้คลิกเลือกสีใด และจะเก็บผลลัพธ์ที่ได้ลงในตัวแปร c4 รูปที่187 การเพิ่มเหตุการณ์ย่อยของเหตุการณ์On object clicked เพื่อตรวจสอบว่าคลิกสีใด สำหรับกลุ่มแถบสีTolerance
93 6.2.7 เพิ่มเหตุการณ์timer เพื่อแสดงผลค่าความต้านทานที่ผู้ใช้คลิก System -> Every X seconds -> ใส่ค่าเป็น 1.0 รูปที่ 188 เพิ่มเหตุการณ์Every X seconds และ กำหนดค่าเป็น 1 6.2.8 เพิ่ม action ในการอัปเดตค่าความต้านทานโดยใช้คำสั่ง Set text ในวัตถุTxtResult กำหนดค่าเป็น c1&c2&c3&c4 รูปที่ 189 การเพิ่ม action ให้เหตุการณ์Every X seconds รูปที่ 190 action ของเหตุการณ์Every X seconds
94 6.2.4 ทดสอบรันดูผลลัพธ์เมื่อผู้ใช้เลือกแถบสีสื่อจะคำนวณค่าความต้านทานให้โดยอัตโนมัติ รูปที่191 ผลลัพธ์ที่ได้จาก Resistor Color Code Calculator