จากที่ผ่านมาได้ศึกษาวิทยาการสร้างภาพเคลื่อนไหวด้วย Scratch มาบ้างแล้ว ในส่วนนี้จะนำเสนอเทคนิคการเขียนโปรแกรมภาพเคลื่อนไหวด้วย Scratch การสร้างภาพเคลื่อนไหวใน Scratch

เทคนิคการเขียนโปรแกรมภาพเคลื่อนไหวด้วย Scratch มีมากมายหลายอย่างขึ้นอยู่กับความคิดสร้างสรรค์ การผสมผสานภาพและคำสั่งข้าด้วยกัน

1.1 การวาดภาพ

การวาดภาพด้วย Scratch จะเป็นการลากเส้นตามทางเดินของ Sprite ซึ่งเส้นทางเดินดังกล่าวเป็นเส้นตรง ทำให้เส้นที่วาดก็เป็นเส้นตรงไปด้วย ในตอนนี้จะนำเสนอเทคนิคการวาดเส้นโค้ง โดยอาศัยการวาดเส้นตรงสั้นๆ ต่อกัน

จากตัวอย่างคำสั่งวาดเส้นโค้ง เป็นการวาดเส้นตรงตามคำสั่ง move ทีละ 4 steps จากนั้นหมุนทีละ 6 องศาด้วยคำสั่ง turn ทำการวนรอบด้วยคำสั่ง  repeat จำนวน 15 รอบ จึงเกิดเป็นเส้นโค้งดังภาพ หากต้องการวาดวงกลม ทำโดยใช้คำสั่งเดิม แต่ให้เลี้ยวครอบของกลม คือ 360 องศา นั่นคือ จำนวน turn คูณกับจำนวนรอบ repeat จะต้องเท่ากับ 360 องศา เช่น Turn ทีละ 6 องศา  360/6  เท่ากับ 60 แสดงว่าจะต้องสั่ง repeat 60 รอบ จึงจะครบรอบวงกลม

ตัวอย่างคำสั่งวาดวงกลม

เมื่อวาดเส้นโค้งด้วย Scratch ได้ จึงสามารถนำไปประยุกต์วาดภาพสิ่งของต่างๆ ได้อีกมากมาย เช่น ดอกไม้ เริ่มจากการวาดกลีบดอกไม้ด้วยคำสั่ง

บล็อกคำสั่ง petal คำสั่งวาดกลีบดอก

จากคำสั่งวาดกลีบดอก เกิดจากการเพิ่มเติมคำสั่งวาดเส้นโค้ง 2 เส้น โดยใช้คำสั่ง repeat 2 รอบ คำสั่งวาดเส้นโค้งเดิม แต่ก่อนที่จะวาดเส้นที่สอง ก็สั่งให้เปลี่ยนทิศทางโดยคำสั่ง turn 90 เพื่อให้วาดเส้นย้อนกลับทางเดิมกลายเป็นรูปกลีบดอก เป็นการวาดกลีบดอกไม้หนึ่งกลีบ แต่ดอกไม้ต้องประกอบด้วยกลีบดอกหลายกลับ ฉะนั้นจะใช้ความรู้เรื่อง Procedure สร้างบล็อกคำสั่ง petal เป็นบล็อกคำสั่งวาดกลีบดอก โดยนำส่วนของคำสั่งวาดกลีบดอกวางลงไป

จากนั้นสร้างบล็อกคำสั่ง flower เพื่อวาดดอกไม้ โดยเรียกใช้คำสั่งวาดกลีบดอก petal ทำการวาด 5 รอบโดยใช้คำสั่ง repeat โดยในแต่ละรอบให้หมุน 72 องศา โดยใช้คำสั่ง turn (ทำไมจึงให้หมุนเท่ากับ 72 องศา ด้วยเหตุผลเหมือนกับตอนวาดวงกลมที่จะต้องหมุนให้ครบรอบ 360 องศา เมื่อทำการวาดกลีบดอกจำนวน 5 รอบ ผลคูณ 5 คูณ 72 จะเท่ากับ 360 องศา) หากวาดกลีบดอกมากกว่าหรือน้อยกว่านี้ ต้องเปลี่ยนค่า turn เพื่อให้ผลคูณเท่ากับ 360 กลีบดอกไม้จะกระจายเป็นรูปวงกลม

บล็อกคำสั่ง flower คำสั่งวาดดอกไม้

จากนั้นเรียกคำสั่งวาดดอกไม้ จะได้ผลลัพธ์ดังภาพ

ผลลัพธ์และการเรียกใช้คำสั่งวาดดอกไม้

คำสั่งที่สร้างขึ้นวาดดอกไม้เพียงขนาดเดียว หากต้องการวาดดอกไม้หลายขนาด ให้กำหนดค่าพารามิเตอร์ Number ให้กับบล็อกคำสั่ง petal และ flower ในที่นี้คือ size กำหนดให้กับคำสั่ง move

บล็อกคำสั่ง petal กำหนดขนาดโดยพารามิเตอร์ size

การเรียนใช้คำสั่งวาดดอกไม้ต้องกำหนดขนาดด้วย

บล็อกคำสั่ง flower กำหนดขนาดโดยพารามิเตอร์ size

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

1.2 การเดิน

การย้ายตำแหน่งของ Sprite จะใช้บล็อกคำสั่งในหมวด Motion   ซึ่งตัว   Sprite จะถูกย้ายตำแหน่งคล้ายกับเป็นวัตถุ

แสดงการย้ายตำแหน่งของ   Sprite

จากนี้จะย้ายตำแหน่งของ Sprite โดยวิธีการเดิน โดยใช้เทคนิคการสลับ Costume ที่แสดงท่าทางลักษณะการเดิน และการค่อยๆ ขยับตำแหน่งของ Sprite เพื่อให้ดูเหมือนว่า   Sprite เดินทีละก้าว

แสดงเทคนิคการเดินของ Sprite

หรือทำให้คำสั่งสั้นลงโดยใช้คำสั่ง next costume (ภาพถัดไป) ในกรณีที่มีรูป Costume เป็นภาพท่าทางเดินเท่านั้น

การเดินของ sprite โดยใช้คำสั่ง next costume

ในเมื่อ Sprite หลายตัวต้องเดิน จะสร้างบล็อกคำสั่ง walk แล้วเพิ่มตัวเลขจำนวนระยะที่จะเดินและหมายเลขของ costume1 และ costume2 ที่จะใช้การแสดงท่าทางการเดิน

บล็อกคำสั่งเดิน Walk

บล็อกคำสั่ง walk จะรับค่าระยะที่เดินด้วยพารามิเตอร์ steps จากนั้นนำมาคำนวณจำนวนที่วนรอบโดยในแต่ละรอบจะมีการเคลื่อนที่ 10 steps (แสดง Coutume ละ 5 steps) จึงนำค่า steps/10 จะได้จำนวนรอบที่ต้องเดินตามระยะที่กำหนด การเปลี่ยน costume ค่าหมายเลขของ costume ที่แสดงการเดิน คือ costume1 และ costume2 จากนั้นเรียกใช้บล็อกคำสั่ง walk ที่สร้างขึ้น

การเรียนใช้บล็อกคำสั่งเดิน walk

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

การ Duplicate และเปลี่ยน Costume เป็น Sprite ตัวใหม่

เพิ่มเติมคำสั่ง Set rotation style left-right เพื่อให้การหมุนทิศทางทำได้เฉพาะทางซ้ายและขวาเท่านั้น แล้วเรียกใช้คำสั่ง walk กับ sprite ตัวใหม่

การเรียกใช้บล็อกคำสั่งเดิน walk กับ Sprite ตัวใหม่

1.3 Effects

การสร้าง Effect มีหลากหลายเทคนิคตามความคิดสร้างสรรค์และการประยุกต์ใช้คำสั่งในที่นี้จะนำเสนอ 2 Effects คือ หายตัวและระเบิดเพื่อเป็นแนวทางในการสร้าง Effect อื่นต่อไปนี้

1. หายตัว ปกติใช้คำสั่ง hide และ show ในการซ่อนหรือแสดง Sprite แต่คำสั่งดังกล่าวทำการซ่อนหรือแสดงในทันทีไม่น่าสนใจ ในที่นี้จะใช้คำสั่ง Change() effect by ในการเพิ่ม Effect ให้กับรูปภาพ ก่อนที่จะทำการซ่อน โดย Effect ที่ใช้คือ whirl

คำสั่งหายตัว

เพิ่ม Effect ม้วนรูปให้กับรูปภาพโดยคำสั่ง change whirl effect by 25 จำนวน 20 รอบ ด้วยคำสั่ง repeat จากนั้นเรียกคำสั่ง hide ทำให้ Sprite หายตัวไป เมื่อต้องการแสดง Sprite จะเรียกคำสั่ง show แล้วค่อยคืนค่า   Effect โดยใช้คำสั่ง change whirl effect by – 25 จำนวน 20 รอบเช่นกัน

คำสั่งปรากฏตัว

ลักษณะการหายตัวและปรากฏตัว

ระเบิด เป็น Effect ทำให้สิ่งของหรือ Sprite แสดงการระเบิด โดยใช้ Sprite ด้วย change size by 20 พร้อมกับเพิ่มขนาดของ Sprite ด้วย Chage size by 20 ให้ดูเหมือนกับว่ากำลังแตกและกระจายออก ทำการวนรอบ 10 ครั้งด้วยคำสั่ง repeat แล้วทำการซ่อน Sprite ที่ระเบิดนั้น

คำสั่งระเบิด

แสดงการระเบิด

นำคำสั่งระเบิดมาสร้างบล็อกคำสั่ง boom เพื่อความสะดวกในการเรียกใช้

บล็อกคำสั่ง boom

จากนั้นสร้างบล็อกคำสั่ง   set เพื่อล้าง Effect ระเบิดออก โดยเรียกคำสั่ง clear graphic effects และปรับขนาดให้เท่าเดิมด้วยคำสั่ง set size to 100% แล้วแสดง sprite ที่ระเบิดด้วยคำสั่ง show

บล็อกคำสั่ง   set

3. การสร้างภาพเคลื่อนไหวใน Scratch โปรแกรม Scratch มีภาพใน Library ให้เลือกใช้มากมายในการสร้างชิ้นงาน แต่หากยังไม่เพียงพอหรือต้องการภาพตัว Sprite ที่เป็นเอกลักษณ์ของตนเอง Scratch ก็มีเครื่องมือ paint ที่ใช้ในการวาดภาพ ทั้ง Backdrop และ Sprite ได้เป็นอย่างดี การวาดภาพมีด้วยกัน 2 mode คือ Bitmap Mode เป็นภาพแบบจุด และ Vector Mode เป็นภาพแบบเส้น โดยจะแสดงอยู่มุมล่างขวา และสามารถสลับโดยคลิกที่ปุ่ม covert to ()

แสดงภาพใน Bitmap Mode (ซ้าย) และ Vector Mode (ขวา)

ใน Bitmap Mode จะแสดงเครื่องมือแก้ไขภาพอยู่ทางด้านซ้าย มีเครื่องมือคล้ายโปรแกรม Ms Paint ประกอบด้วย

เครื่องมือ Paint ใน   Bitmap Mode

ส่วนเครื่องมือใน Vector Mode จะประกอบด้วย

เครื่องมือ Paint ใน Vector Mode

ส่วนเครื่องมือใน Vector Mode จะประกอบด้วย

เครื่องมือ Paint ใน Vector Mode

และเครื่องมือแก้ไขรูปภาพ ได้แก่ พลิกแนวนอน พลิกแนวตั้ง และกำหนดจุดศูนย์กลางหรือจุดหมุน

การให้ได้มาซึ่งภาพเคลื่อนไหวที่ต้องการนอกเหนือจาก Library มาใช้ใน Scratch ทำได้ 2 วิธี คือ

1. นำเข้าไฟล์ภาพเคลื่อนไหว (ที่นำเสนอแล้วในตอนต้น)
2. วาดภาพเคลื่อนไหวด้วยตนเองโดยใช้เทคนิคการวาดภาพสองภาพที่แตกต่างกัน

แสดงการวาดภาพ 2 ภาพที่มีลักษณะแตกต่างกันเพื่อแสดงการเคลื่อนไหว

การวาดใน Bitmap Mode จะทำการวาดภาพแรกก่อน แล้วคลิกขวาเลือกคำสั่ง duplicate เพื่อคัดลอกภาพที่วาดในภาพแรก

แสดงการ duplicate ภาพวาด

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

แสดงการวาดภาพ 2 ภาพ ที่มีลักษณะแตกต่างกันเพื่อแสดงการเคลื่อนไหว

การวาดภาพเคลื่อนไหวใน Vector Mode เมื่อทำการวาดภาพแรกแล้วทำการ duplicate เป็น ภาพที่สอง ทำการแก้ไขภาพที่สองโดยการขยับภาพวาดในแต่ละส่วนให้เกิดการเคลื่อนไหว

การแก้ไขภาพที่สองให้เกิดการเคลื่อนไหวใน Vector Mode