หน่วยที่ 2 EP.3: ท่องโลก Scratch & แอนิเมชันโต้ตอบ
  • By Admin
  • 1
  • 14 เม.ย. 2569

หน่วยที่ 2 EP.3: ท่องโลก Scratch & แอนิเมชันโต้ตอบ

ก้าวสู่การเป็นนักสร้างเกม! ทำความรู้จักโปรแกรม Scratch เรียนรู้วิธีเขียนสคริปต์ควบคุมตัวละครให้โต้ตอบกับคีย์บอร์ด (เดินหน้า 10 ก้าว, ถอยหลัง -10 ก้าว) และเทคนิคการสร้าง "แอนิเมชัน" ให้ตัวละครขยับได้อย่างเป็นธรรมชาติด้วยบล็อกคำสั่งรูปลักษณ์ (ชุดถัดไป) และบล็อกควบคุม (หน่วงเวลา)

🐱 หน่วยที่ 2 EP.3: ท่องโลก Scratch

สร้างแอนิเมชัน บังคับแมวด้วยคีย์บอร์ด!

หลังจากฝึกกระบวนการคิดมาแล้ว วันนี้เราจะมาปลดปล่อยจินตนาการในโปรแกรม Scratch (สแครตช์) ครับ! โปรแกรมนี้จะให้เราต่อบล็อกคำสั่งเหมือนต่อเลโก้ เพื่อสร้างนิทาน แอนิเมชัน หรือเกมโต้ตอบสุดมันส์ได้ด้วยตัวเองเลย!

🎮 1. บังคับตัวละครด้วย "คีย์บอร์ด"

เราจะเปลี่ยนจากการกด "ธงเขียว" มาเป็นการใช้คีย์บอร์ดเพื่อสร้าง "โปรแกรมโต้ตอบ (Interactive)" ครับ โดยใช้บล็อกสีเหลืองจากกลุ่มคำสั่งเหตุการณ์ (Events)

➡️ เดินหน้า (ไปทางขวา)

ใช้บล็อก เมื่อกดปุ่ม [ลูกศรขวา] ต่อด้วยคำสั่ง เคลื่อนที่ (10) ก้าว ตัวละครจะเดินไปข้างหน้าครับ

⬅️ ถอยหลัง (ไปทางซ้าย)

ใช้บล็อก เมื่อกดปุ่ม [ลูกศรซ้าย] ต่อด้วยคำสั่ง เคลื่อนที่ (-10) ก้าว (ต้องใส่เครื่องหมายลบเสมอ เพื่อให้เดินถอยหลังครับ!)

🏃‍♂️ 2. สร้างแอนิเมชันให้เดินสลับขา

ถ้านักเรียนสั่งให้เดินเฉยๆ ตัวละครจะไถลไปกับพื้นเหมือนผีหลอกเลยครับ! การจะทำให้ดูเหมือนเดินจริงๆ ต้องใช้เทคนิค "เปลี่ยนคอสตูม" ครับ

สูตรลับสร้างภาพเคลื่อนไหว (ใส่ไว้ในบล็อกวนซ้ำ):

  1. สั่งให้ เคลื่อนที่ (เช่น 10 ก้าว)
  2. ใช้บล็อกสีม่วง ชุดถัดไป (Next Costume) เพื่อเปลี่ยนท่าทางขยับขา
  3. ใช้บล็อกสีส้ม รอ (0.5) วินาที เพื่อหน่วงเวลา ไม่ให้ภาพสลับเร็วเกินไปจนมองไม่ทัน

🖼️ 3. เนรมิตฉากหลัง (Backdrop)

เวทีสีขาวมันดูเหงาๆ ใช่ไหมครับ? นักเรียนสามารถพาน้องแมวไปเดินเล่นที่ชายหาด หรือในห้องนอนได้ง่ายๆ เพียงแค่มองไปที่ มุมขวาล่างสุดของจอ คลิกที่ไอคอน "เลือกฉากหลัง (Choose a Backdrop)" แล้วเลือกภาพสวยๆ มาใส่ได้เลยครับ!

🧩 มินิควิซ ทบทวนความรู้ EP.3

ทดสอบวิชานักสร้างแอนิเมชัน!

ข้อที่ 1: ในการทำให้ตัวละครในโปรแกรม Scratch ขยับเดินดูเป็นธรรมชาติ (แอนิเมชัน) ต้องใช้บล็อกคำสั่งใดเป็นหลัก?

ข้อที่ 2: หากต้องการกดปุ่ม [ลูกศรชี้ซ้าย] เพื่อให้ตัวละคร "ถอยหลัง" ต้องกำหนดค่าการเคลื่อนที่อย่างไร?

ข้อที่ 3: ทำไมเราจึงต้องใส่บล็อก "รอ (Wait) 0.5 วินาที" แทรกไว้ระหว่างการเคลื่อนที่และเปลี่ยนชุดคอสตูม?


แชร์ :

บทเรียนอื่น ๆ