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

โปรแกรม Scratch ถูกออกแบบโดย MIT Media Lab ออกแบบมาสำหรับน้องๆ อายุ 8-16 ปี แต่อายุอื่นๆ ก็สามารถเรียนรู้ได้เช่นกัน ถ้าใครสนใจอยากหัดเขียนโปรแกรมเบื้องต้น ที่เหมือนกับการเล่นต่อ Lego โปรแกรม Scratch คือคำตอบ ซึ่งน้องๆ ที่สนใจสามารถเข้าไปที่เว็บไซต์ของ Scratch ที่ https://scratch.mit.edu/  ทำการสมัครสมาชิก แล้วเริ่มได้เลย

Scratch Editor

หลังจากที่ได้สมัครสมาชิกแล้ว น้องๆ สามารถกดที่ เมนูสร้าง (Create) เพื่อเริ่มการเขียนโปรแกรม ซึ่งน้องๆ ก็จะเห็น Scratch Editor ตามรูปด้านล่างนี้  ในการเขียนโค้ด ไม่ว่าจะเป็นเทคโนโลยีไหน ก็จะต้องมี Tool หรือ Editor ที่ใช้ในการเขียนโค้ดและช่วยประมวลผลของโค้ดออกมาเป็นผลลัพธ์ที่ต้องการ

scratch editor

Scratch ก็มี Editor ที่ออกแบบมาให้ใช้งานได้ง่าย โดยแบ่งออกเป็น 4 ส่วนหลักๆ คือ

  • ส่วนด้านซ้าย จะแบ่งออกเป็น 3 แถบ คือ
    • แถบโค้ด เป็นส่วนของโค้ดต่างๆ ที่ทางโปรแกรม Scratch เตรียมไว้ให้ เพื่อใช้เขียนโค้ดคำสั่งสำหรับวัตถุที่เราเลือก (ตอนนี้คือวัตถุแมว)
    • แถบคอสตูม ส่วนจัดการรูปต่างๆ ของวัตถุที่เราเลือก (1 วัตถุ มีได้หลายรูป ซึ่งมีประโยชน์ในการเขียนโปรแกรม เช่น ทำให้วัตถุมีการเคลื่อนไหว หรือ เปลี่ยนสถานะ เช่นจาก ปกติ เป็นมีพลังพิเศษ เป็นต้น)
    • แถบเสียง ส่วนจัดการเสียงของวัตถุที่เราเลือก
  • ส่วนตรงกลาง จะเป็นส่วนที่ไว้ใช้เขียนโค้ดให้กับวัตถุที่เราเลือก
  • ส่วนขวาบนจะเป็นส่วนแสดงผล โดยมีธงเขียวเพื่อใช้เริ่มการประมวลผลของโค้ด และปุ่มสีแดงเพื่อหยุดการประมวลผลของโค้ด
  • ส่วนขวาล่างจะเป็นรายการวัตถุที่เรามีในโปรแกรม ในตอนนี้คือมีแมวอยู่ 1 ตัว โดยมีชื่อว่า แมว ซึ่งเมื่อเราเลือกแมว (ตอนนี้เราเลือกแมวอยู่) เราจะเห็นคุณสมบัติต่างๆ ของแมว ซึ่งเราสามารถตั้งค่าได้ เช่น ชื่อ ตำแหน่ง ขนาด เป็นต้น

Sprite

ในโปรแกรม Scratch แต่ละ object เราจะเรียกว่า Sprite  เช่น แมวตัวนี้ในรูป ก็คือ 1 Sprite แต่ละ Sprite จะมีคุณสมบัติต่างๆ เช่น ชื่อ ตำแหน่งแนวแกน x ตำแหน่งแนวแกน y ขนาด ทิศทาง (หมุนเป็นองศา) และการเซทให้มองเห็นหรือมองไม่เห็นในส่วนแสดงผล

scratch sprite

จากตัวอย่าง Sprite แมวของเรา มีชื่อว่า น้องส้ม อยู่ที่ตำแหน่ง x = 0 และ y = 0 ซึ่งแสดงอยู่ในส่วนแสดงผลด้านบนขวา มีขนาด = 100 และเซททิศทางไว้ที่ 90 องศา หรือแมวมองไปทางขวามือดังรูป

เมื่อเรากดเลือก Sprite ที่แถบด้านซ้ายกดที่แถบ คอสตูม จะเห็นว่าตอนนี้ แมวมี 2 คอสตูม ซึ่งแต่ละคอสตูมก็ค่าท่าทางต่างๆ ของแมว ในตัวอย่างคือ แมวมี 2 คอสตูมนั่นเอง และถ้าเรากดไปที่แถบเสียง ก็จะมีเสียงของ Sprite แมวตัวนี้อยู่เช่นกัน

ในตอนนี้ อยากให้น้องๆ ลองกดตั้งชื่อ เซทตำแหน่ง x และ y ขนาดและทิศทางเล่นดู

การต่อโค้ด 

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

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

scratch code block

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

ตำแหน่งในส่วนแสดงผล

ในส่วนแสดงผล ตำแหน่งในโปรแกรม จะมี 2 แกน คือแกน x แนวนอน และแกน y แนวตั้ง ตรงกลางจะมีค่า เป็น 0 ทั้งคู่ (x = 0 และ y = 0)  ซึ่งก็คือตำแหน่งของแมวในรูป

sprite position in display area

ค่าในแนวแกน x เมื่อไปทางขวา ค่าจะเพิ่มขึ้น หรือค่าเป็น + ขณะที่ไปทางซ้ายค่าจะลดลงหรือค่าเป็น –  ขณะที่ค่าในแนวแกน y เมื่อไปทางด้านบน ค่าจะเพิ่มขึ้น หรือค่าเป็น + ขณะที่ไปทางล่างค่าจะลดลงหรือค่าเป็น – 

น้องๆ ลองเลื่อนแมวไปในตำแหน่งต่างๆ ในส่วนแสดงผลดู และลองสังเกตุดูตำแหน่งค่า x และ y ของแมว เพื่อทำความเข้าใจเรื่องตำแหน่งในการแสดงผลมากยิ่งขึ้น

ทิศองศาในการหมุน

sprite direction in scratch

ทิศองศาในการหมุนของโปรแกรม Scratch ก็เหมือนกับองศาการหมุนทั่วไป ซึ่งจะแบ่งเป็นซีกซ้ายกับซีกขวา โดยซีกขวาจะเริ่มที่ เข็มนาฬิกา เลข 12 เท่ากับ 0 องศา หมุนตามเข็มจะได้ค่า + เพิ่มขึ้นไปเรื่อยๆ จนมาถึงที่ เข็มนาฬิกา เลข 6 เท่ากับ 180 องศา

เมื่อหมุนต่อไปเลย 180 องศา มาทางซีกซ้าย ค่าองศาจะกลายเป็นค่าลบแทน โดยเริ่มจาก -179 องศาเมื่อเข็มนาฬิกาเลย เลข 6 มา และค่าจะค่อยๆ ลดลงไปเรื่อยๆ จาก -179 องศา ไปที่ 0 องศา ที่เข็มนาฬิกา เลข 12

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

อยากให้ น้องๆ ลองหมุนองศาเล่นดู เพื่อศึกษาและทำความเข้าใจองศาในโปรแกรม Scratch เพิ่มเติม

เดียวเรามา เรียนรู้เกี่ยวกับโค้ดชุดคำสั่งในตอนที่ 2 ของการปูพื้นฐานการเขียนโค้ดด้วยโปรแกรม Scratch กันครับ

เรียนรู้การเขียน Scratch เบื้องต้น

Skillane x คิดกับโค้ด

สอบถามข้อมูลและรายละเอียดเพิ่มเติมได้ทาง เฟสบุ๊ค คิดกับโค้ด

สำหรับมือถือ กดคลิ๊ก

สำหรับคอมพิวเตอร์ กดคลิ๊ก

หรือกดลิ้งด้านล่างเพื่อไปยัง Skillane

ทางทีมงานจะรีบตอบกลับให้เร็วที่สุดครับ ขอบคุณทุกท่านมากครับ

Skillane x คิดกับโค้ด

https://www.skilllane.com/courses/basic-scratch-for-kids

Leave a Reply

Your email address will not be published. Required fields are marked *