CASE STUDY · โครงงานจบการศึกษา (Senior Project)
My World in English — แอปเรียนคำศัพท์ผลไม้ด้วยสื่อสามมิติแบบโต้ตอบ
แอปพลิเคชันแอนดรอยด์ที่ออกแบบให้นักเรียนชั้นประถมศึกษาปีที่ 3 เรียนรู้คำศัพท์ภาษาอังกฤษหมวดผลไม้ 30 คำ ผ่านการสำรวจฉากจำลองตลาดน้ำดำเนินสะดวกแบบ 3 มิติ แทนการท่องจำจากตัวหนังสือ ครบวงจรตั้งแต่แบบทดสอบก่อนเรียน การเรียนรู้ในฉาก เกมทบทวน ไปจนถึงแบบทดสอบหลังเรียนและสรุปผล
*ยื่นเป็นโครงงานทีม 2 คนตามข้อกำหนดของหลักสูตร (ร่วมกับปวิตรา ศัตรูพินาศ) โดยผู้จัดทำหน้านี้รับผิดชอบการออกแบบและพัฒนาระบบทั้งหมดด้วยตนเอง
ภาพจริงจาก Unity Editor (Play Mode) — หน้า Home Screen
Problem
ภาษาอังกฤษเป็นภาษาสากลที่มีบทบาทสำคัญต่อการเข้าถึงองค์ความรู้และการสื่อสารในโลกยุคดิจิทัล แต่นักเรียนระดับประถมศึกษาในไทยจำนวนมากยังมีปัญหาในการเรียนรู้คำศัพท์ภาษาอังกฤษ เนื่องจากรูปแบบการเรียนที่เน้นการท่องจำเป็นหลัก ทำให้จดจำได้เพียงระยะสั้นและไม่สามารถนำไปใช้ได้จริง ขาดความเข้าใจในบริบทของคำศัพท์อย่างแท้จริง และขาดสื่อการเรียนรู้ที่น่าสนใจดึงดูดความสนใจของผู้เรียนวัยนี้
งานวิจัยที่เกี่ยวข้องสนับสนุนแนวทางแก้ปัญหานี้ด้วยสื่อโต้ตอบบนอุปกรณ์เคลื่อนที่: การศึกษาการใช้แอปพลิเคชัน Quizlet กับนักเรียนมัธยมศึกษาพบว่าคะแนนหลังเรียนสูงกว่าก่อนเรียนอย่างมีนัยสำคัญทางสถิติ (วิทวัส ขาวประเสริฐ และคณะ, 2565) และทฤษฎีการเรียนรู้ผ่านสื่อมัลติมีเดียของ Richard E. Mayer ชี้ว่าการออกแบบสื่อที่ผสานภาพ เสียง และสถานการณ์อย่างเหมาะสมช่วยลดภาระทางปัญญาและเพิ่มความเข้าใจเนื้อหา (เตวิช เสวตไอยราม และณัฐญา ห่านรัตนกุล, 2562)
โครงงานนี้จึงพัฒนาแอปพลิเคชันบนระบบปฏิบัติการแอนดรอยด์ ที่ใช้สื่อสามมิติแบบโต้ตอบในรูปแบบ "เรื่องราว" (Story-based 3D) จำลองบรรยากาศตลาดน้ำดำเนินสะดวก จังหวัดราชบุรี ให้ผู้เรียนได้เรียนรู้คำศัพท์ภาษาอังกฤษหมวดผลไม้ 30 คำ ผ่านการมีปฏิสัมพันธ์กับวัตถุสามมิติที่เชื่อมโยงกับสถานการณ์จริง แทนการท่องจำจากตัวหนังสือล้วนๆ
อ้างอิง: เล่มรายงานโครงงาน บทที่ 1-2 · วิทวัส ขาวประเสริฐ และคณะ (2565) · เตวิช เสวตไอยราม และณัฐญา ห่านรัตนกุล (2562)
กลุ่มเป้าหมาย
กลุ่มเป้าหมายหลักของระบบคือนักเรียนชั้นประถมศึกษาปีที่ 3 โรงเรียนเทศบาล 3 (ตำบลในเมือง) อำเภอเมืองบุรีรัมย์ จังหวัดบุรีรัมย์ จำนวนประมาณ 30 คน ซึ่งมีลักษณะการเรียนรู้ที่ตอบสนองต่อภาพ สี เสียง และการโต้ตอบได้ดีกว่าตัวหนังสือล้วน เนื่องจากอยู่ในวัยประมาณ 8-9 ปี ที่มีสมาธิจดจ่อได้ในระยะสั้น การออกแบบเนื้อหาจึงต้องกระชับ มีลักษณะเป็นเกมหรือเรื่องราวที่สร้างความเพลิดเพลินควบคู่ไปกับการเรียนรู้ ไม่ใช่การนำเสนอคำศัพท์แบบรายการตัวหนังสือทั่วไป
นอกจากผู้เรียนโดยตรงแล้ว ยังมีกลุ่มผู้ใช้งานทางอ้อมคือครูผู้สอน ซึ่งทำหน้าที่แนะนำวิธีใช้งานและติดตามความก้าวหน้าของนักเรียนอีกทางหนึ่ง
*ข้อมูลกลุ่มเป้าหมายนี้มาจากการวิเคราะห์ผู้ใช้งานจริงในขั้นตอน Analysis ของโครงงาน (ยังไม่ได้นำระบบไปทดลองใช้กับกลุ่มนี้จริง — อยู่ระหว่างรอขั้นตอนทดลองใช้)
Process
โครงงานนี้ดำเนินการตามกระบวนการ ADDIE Model (ทัศนวรรณ รามณรงค์, 2557) แบ่งเป็น 5 ขั้นตอน เริ่มจากวิเคราะห์ปัญหา กลุ่มผู้ใช้งาน และขอบเขตเนื้อหา ต่อด้วยออกแบบโครงสร้างระบบ เนื้อหาคำศัพท์ ฉากสามมิติ และสตอรี่บอร์ดโดยละเอียดทุกหน้าจอ ก่อนลงมือพัฒนาในโปรแกรมจริง ส่วนขั้นตอนนำไปใช้และประเมินผลยังไม่ได้ดำเนินการ เพราะยังไม่ได้นำระบบไปทดลองกับกลุ่มเป้าหมายจริง
30 คำศัพท์
คำศัพท์ผลไม้จากตลาดน้ำดำเนินสะดวก
10 ข้อ
แบบทดสอบก่อน-หลังเรียน (Pre/Post-test)
คนเดียวครบวงจร
โมเดล 3 มิติ + โค้ดเกม + เอกสารวิชาการ
ขั้นตอนตาม ADDIE Model
1. วิเคราะห์ (Analysis)
→
2. ออกแบบ (Design)
→
3. พัฒนา (Development)
→
4. นำไปใช้ (รอดำเนินการ)
→
5. ประเมินผล (รอดำเนินการ)
Solution
ออกแบบแอปพลิเคชันให้เป็นประสบการณ์การเรียนรู้แบบ "เรื่องราว" ที่ผู้เรียนสวมบทบาทเป็นนักสำรวจตลาดน้ำดำเนินสะดวก และเชื่อมทุกขั้นตอนเป็นวงจรการเรียนรู้ที่สมบูรณ์ ไม่ใช่ฉากเดโมแยกกัน
เปิดแอป
Home Screen & มาสคอตแนะนำตัว
ชื่อแอป "My World in English" เป็นตัวอักษร 3 มิติลอยกลางจอ กด "Get Started" พบ "น้องม่อน" มาสคอตที่โบกมือทักทายด้วยแอนิเมชันจริง
ก่อนเรียน
เมนูหลักและ Pre-test
เลือกเริ่มเรียนรู้ / ทบทวนคำศัพท์ / ดูคะแนนสะสม ก่อนเริ่มมีแบบทดสอบก่อนเรียน 10 ข้อวัดพื้นฐาน
เรียนรู้
สำรวจตลาดน้ำ 3 มิติ
ควบคุมอวาตาร์สำรวจฉาก Open World เก็บคำศัพท์ 30 จุดจากการ์ดที่หมุน/ขยายวัตถุ 3 มิติได้ พร้อมเสียงอ่านจาก Google AI Studio TTS
ทบทวน & วัดผล
เกมจับคู่ & Post-test
เกมลากจับคู่ทบทวนคำศัพท์ 10 คำสุดท้าย ล็อกปุ่มแบบทดสอบหลังเรียนไว้จนกว่าจะเล่นจบ ก่อนเข้าแบบทดสอบหลังเรียน 10 ข้อ
ภาพจริงจาก Unity Editor (Play Mode) — ฉาก MarketWorld พร้อมการ์ดคำศัพท์ที่ปรากฏขึ้นเมื่อเข้าใกล้เรือขายผลไม้
หลังทำแบบทดสอบหลังเรียน หน้า Result Screen จะแสดงคะแนนเทียบก่อน-หลังเรียน พร้อมข้อความให้กำลังใจจากน้องม่อนที่ปรับตามระดับคะแนน และบันทึกผลลง Cloud Firestore เพื่อติดตามความก้าวหน้าของผู้เรียนแต่ละคน นอกจากนี้ยังมีฉากทบทวนคำศัพท์แยกต่างหากที่เข้าถึงได้จากเมนูหลักโดยไม่ต้องรอทำแบบทดสอบ ผู้เรียนหมุนดูโมเดล 3 มิติได้อิสระด้วยตนเอง โดยโมเดลมีแอนิเมชันหมุนลอยอัตโนมัติเป็นค่าเริ่มต้น และจะหลบให้ทันทีเมื่อผู้เรียนเริ่มลากหมุนเอง เพื่อไม่ให้การควบคุมสองระบบขัดกัน
🔊 TTS Pronunciation
🔄 หมุนดูโมเดล 3 มิติ
🔒 ล็อกลำดับขั้นตอน
☁️ Cloud Firestore
ภาพจริงจาก Unity Editor (Play Mode) — หน้า Result Screen
การแก้ปัญหาเชิงเทคนิค
สองปัญหาที่ใช้เวลาแก้นานที่สุดระหว่างพัฒนา ทั้งคู่ต้องวินิจฉัยสาเหตุให้ถูกจุดก่อนจะแก้ได้จริง
ปัญหา #1
ตัวอักษรไทยแสดงผลเพี้ยน (บั๊กฟอนต์ TMP)
สาเหตุ: ปัญหาซ้อนกัน 2 ชั้น — atlas เต็มจน glyph ทับกันเองตอนรันไทม์ กับข้อความเพี้ยนที่ฝังอยู่ในไฟล์ฉากจากการพิมพ์ผิดในอดีต หน้าตาอาการคล้ายกันแต่คนละสาเหตุ
วิธีแก้: ไล่แยกทีละชั้นจนระบุได้ว่าอันไหนคืออันไหน แก้ผิดจุดจะดูเหมือนหายแต่จริงๆ ไม่หาย
ปัญหา #2
แอนิเมชันหมุนอัตโนมัติชนกับการลากหมุนของผู้เล่น
อาการ: โมเดลเด้งกลับตำแหน่งเดิมทุกครั้งที่ผู้เล่นปล่อยมือจากการลากหมุน
วิธีแก้: ให้ระบบหมุนอัตโนมัติหลบถาวรทันทีที่ผู้ใช้เริ่มควบคุมเอง แทนที่จะแย่งควบคุมกันตลอดเวลา
Reflection
สิ่งที่ภูมิใจที่สุดในโปรเจกต์นี้คือการที่ทุกฉากเชื่อมกันเป็นวงจรการเรียนรู้ที่สมบูรณ์จริง ไม่ใช่ฉากเดโมแยกกัน — เริ่มจาก pre-test วัดพื้นฐาน ให้ผู้เรียนสำรวจตลาดน้ำเก็บคำศัพท์ 30 คำพร้อมโมเดล 3 มิติ ตามด้วยเกมจับคู่ลากทบทวนคำศัพท์ 10 คำสุดท้าย ก่อนปลดล็อก post-test และจบด้วยหน้าผลคะแนนที่เทียบก่อน-หลังพร้อมข้อความให้กำลังใจตามระดับคะแนน ระบบมี logic ควบคุมลำดับที่สมเหตุสมผล เช่น ล็อกฉากทบทวนไว้จนกว่าจะทำ post-test เสร็จ ซึ่งสะท้อนว่าออกแบบเป็นระบบการเรียนรู้จริง ไม่ใช่แค่ของเล่น
ความท้าทายด้านเทคนิคที่หนักที่สุดคือบั๊กฟอนต์ TMP ที่ตัวอักษรไทยแสดงผลเพี้ยน ซึ่งยากตรงที่มีสาเหตุซ้อนกันสองชั้น ต้องไล่แยกทีละชั้นจึงจะแก้ตรงจุด อีกความท้าทายคือการทำให้แอนิเมชันหมุนลอยอัตโนมัติของโมเดลอยู่ร่วมกับการหมุนที่ผู้เล่นลากเองได้โดยไม่ขัดกัน โดยแก้ด้วยการให้ระบบอัตโนมัติหลบถาวรทันทีที่ผู้ใช้เริ่มควบคุมเอง ส่วนด้านการออกแบบ การพบว่าเอกสารสตอรี่บอร์ดกับแอปจริงไม่ตรงกันในบางจุด ทำให้ต้องตัดสินใจเชิง scope ว่าจะปรับฝั่งไหนให้ตรงกัน ไม่ใช่แค่ปัญหาทางเทคนิค
หากมีเวลามากกว่านี้ สิ่งที่สำคัญที่สุดที่ยังไม่ได้ทำคือการทดลองใช้งานกับกลุ่มเป้าหมายจริง (นักเรียน ป.3) เพราะการทดสอบทั้งหมดที่ผ่านมาทำในมุมมองผู้พัฒนาเป็นหลัก ยังไม่รู้ว่าเด็กจริงจะกดปุ่มถูกจุด เข้าใจคำแนะนำ หรือหมดความสนใจตรงไหน นอกจากนี้อยากเพิ่มไฟล์เสียงพูดคำศัพท์ให้ปุ่มลำโพงที่ยังไม่สมบูรณ์ และลูกเล่นความสนุก/ฟีดแบ็กเพิ่มเติม
สิ่งที่ได้เรียนรู้จากโปรเจกต์นี้คืองานสำหรับเด็กต้องตรวจสอบทั้งค่าที่โค้ดคำนวณและข้อความที่พิมพ์ตายตัวในหน้าจอแยกกัน เพราะสองอย่างนี้ไม่ผูกกันอัตโนมัติ เป็นจุดพลาดที่ตรวจสอบยากหากไม่ทดสอบจริง แอนิเมชันพื้นหลังต้องออกแบบให้ "หลบ" ให้ผู้ใช้ควบคุมได้ตั้งแต่ต้น ไม่งั้นพอเพิ่ม interactivity ทีหลังจะชนกันเสมอ เอกสารกับของจริงจะไหลห่างกันเรื่อยๆ เมื่อ scope เปลี่ยนกลางทาง การตัดสินใจอย่างมีสติว่าจะอัปเดตฝั่งไหนสำคัญพอๆ กับงานเทคนิคเอง และการทำคนเดียวครบวงจรทั้งโมเดล 3 มิติ โค้ดเกม และเอกสารวิชาการ ทำให้บทเรียนใหญ่ที่สุดมักไม่ใช่ทักษะเดี่ยวๆ แต่คือการทำให้ชิ้นส่วนต่างสายงานสอดคล้องกันตลอดเวลา
ลองเล่นด้วยตัวเองได้เลย
เล่นได้จริงในเบราว์เซอร์ ไม่ต้องติดตั้งอะไรเพิ่ม ลองสำรวจตลาดน้ำเก็บคำศัพท์ดูได้เลย
▶ เล่นตอนนี้ในเบราว์เซอร์