เคลื่อนไหว Archives - KarnLab

สร้างเกมส์ด้วย Scratch : ตอนที่ 2 – ตัวอักษรเคลื่อนไหว

Admin — Thu, 10 Jan 2019 11:28:26 +0000

สวัสดีครับน้องๆ วันนี้เราจะมาเขียนโปรแกรมภาษา Scratch เพื่อสร้างตัวอักษรเคลื่อนไหวกันครับ

สำหรับวิธีการใช้งานโปรแกรม Scratch – น้องๆ สามารถอ่านได้ที่ https://karnlab.com/scratch-ep1-lets-start/

เลือกตัวอักษร

คลิกที่ไอคอนรูปตัวละคร (อยู่ที่แถบ Sprites – สังเกตที่ข้างๆ ข้อความ New Sprite)

Scratch – EP2 (1)

เลือก Category: Letters – เลือกตัวอักษรที่ต้องการ (จะเป็นตัวอักษรแรกของชื่อเล่น ชื่อที่ชอบ หรือ คำศัพท์ภาษาอังกฤษอะไรก็ได้ครับ)

Scratch – EP2 (2)

เอารูปแมวออก – ด้วยการคลิกขวาที่รูปแมว ในแถบ Sprites – จากนั้นคลิก Delete

Scratch – EP2 (3)

ใส่เอฟเฟกต์

ต่อไป เราจะทำให้ตัวอักษรเปลี่ยนสี เมื่อเราคลิกที่ตัวอักษรนะครับ

4.1) ที่แถบ Scripts ให้คลิกที่คำว่า Events (สีน้ำตาล) – ลากกล่องที่เขียนว่า [ when this spike clicked ] มาวางไว้ที่พื้นที่ว่างด้านขวา

4.2) ที่แถบ Scripts ให้คลิกที่คำว่า Looks (สีม่วง) – ลากกล่องที่เขียนว่า [ change color effect by 25 ] มาต่อข้างล่างกล่อง [ when this spike clicked ]

Scratch – EP2 (4)

เมื่อเราคลิกที่ตัวอักษร จะพบว่าสีเปลี่ยนไป

ใส่เสียง

ที่แถบ Scripts ให้คลิกที่คำว่า Looks (สีม่วง) – ลากกล่องที่เขียนว่า [ play sound pop ] มาต่อข้างล่างกล่อง [ change color effect by 25 ]

Scratch – EP2 (5)

เมื่อเราคลิกที่ตัวอักษร เราจะได้ยินเสียง (อย่าลืมเปิดลำโพงด้วยนะครับ)

นอกจากนี้เราสามารถเพิ่มเสียงเอฟเฟกต์เพิ่มเติมได้โดย คลิกที่แถบ Sounds – ข้างล่างข้อความ New Sound ใหคลิกไอคอนลำโพง

Scratch – EP2 (5-1)

เลือกเสียงที่ต้องการ แล้วกดปุ่ม OK

Scratch – EP2 (5-2)

ใส่พื้นหลัง

ต่อไป เราจะมาใส่พื้นหลังกันครับ

6.1) ที่แถบ Sprites ข้างล่างข้อความ New Backdrop คลิกไอคอนรูปภาพ

Scratch – EP2 (6-1)

6.2) เลือกรูปภาพที่ต้องการ แล้วกดปุ่ม OK

Scratch – EP2 (6-2)

ใส่ตัวอักษรถัดไป

เพิ่มตัวอักษรถัดไปครับ (ใครลืมวิธีเพิ่มตัวอักษร ให้กลับไปอ่านข้อ 1-2 ใหม่นะครับ)

Scratch – EP2 (7)

หมุนหมุน

ต่อไป เราจะเพิ่มเอฟเฟกต์ให้ตัวอักษรหมุนได้ครับ

8.1) ที่แถบ Sprites คลิกที่ A-GLOW – ที่แถบ Scripts คลิกคำว่า Events (สีน้ำตาล) – ลากกล่องที่เขียนว่า [ when this spike clicked ] มาวางไว้ที่พื้นที่ว่างด้านขวา

8.2) ที่แถบ Scripts คลิกคำว่า Motions (สีน้ำเงิน) – ลากกล่องที่เขียนว่า [ turn –> 15 15 degrees ] มาต่อข้างล่างกล่อง [ when this spike clicked ]

Scratch – EP2 (8-2)

เมื่อเราคลิกที่ตัวอักษร ก็จะหมุนไปทางขวาครั้งละ 15 องศาครับ

แล้วถ้าเราต้องการให้ตัวอักษรหมุน 360 องศา ?

8.3) ที่แถบ Scripts คลิกคำว่า Controls (สีส้ม) – ลากกล่องที่เขียนว่า [ repeat 10 ] มาครอบกล่อง [turn –> 15 15 degrees ] – จากนั้นเปลี่ยนค่าเป็น [ repeat 24 ] – เมื่อเราคลิกที่ตัวอักษร ก็จะหมุนครบ 1 รอบพอดีครับ

Scratch – EP2 (8-3)

ใส่ตัวอักษรให้ครบ

สุดท้าย เพิ่มตัวอักษรให้ครบครับ

Scratch – EP2 (8-5)

ก่อนจากกัน เราจะเพิ่มเทคนิค/เอฟเฟกต์กันอีกนิดครับ

เปลี่ยนขนาดตัวอักษร – ให้น้องๆ ลองลากกล่องคำสั่งตามรูปภาพข้างล่างนะครับ แล้วลองสังเกตผลลัพธ์

Scratch – EP2 (9)

ตัวอักษรเคลื่อนที่ – ให้น้องๆ ลองลากกล่องคำสั่งตามรูปภาพข้างล่างนะครับ แล้วลองสังเกตผลลัพธ์

Scratch – EP2 (10)

น้องๆ สามารถติดตามสร้างเกมส์ด้วย Scratch ตอนต่อไปได้ที่นี่ครับ https://karnlab.com/tag/scratch/

สำหรับโปรเจคทั้งหมด สามารถเข้าไปเยี่ยมชมได้ที่นี่ครับ https://scratch.mit.edu/users/doctorkarn/

หมายเหตุ: บทเรียนนี้เขียนตอน Scratch 2.0 นะครับ ตอนนี้เป็น Scratch 3.0 แล้ว อาจจะมีบางส่วนเปลี่ยนไปบ้าง แต่คำสั่งส่วนใหญ่ยังเหมือนเดิมครับ

The post สร้างเกมส์ด้วย Scratch : ตอนที่ 2 – ตัวอักษรเคลื่อนไหว appeared first on KarnLab.

วาดรูปด้วยภาษาโลโก้ : ตอนที่ 12 – เคลื่อนไหว

Admin — Sat, 21 Jul 2018 08:40:37 +0000

จากตอนที่แล้ว เราวาดรูปกันมาเยอะมาก และแน่นอนว่า เราก็ต้องลบรูปภาพที่เราวาดด้วยคำสั่ง CS หรือ Clean เยอะมาก ถ้าเราวาดรูปแล้วลบ วาดรูปแล้วลบ วาดรูปแล้วลบ ….. จะเกิดอะไรขึ้น?

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

คำสั่งที่น้องๆ จะเจอในบทนี้

คำสั่ง	ความสามารถ	ตัวอย่าง
fd ระยะทาง bk ระยะทาง	forward = เดินหน้า backward = ถอยหลัง	fd 100 = เดินหน้า 100 pixel bk 50 = ถอยหลัง 50 pixel
rt องศา lt องศา	right turn = หมุนขวา left turn = หมุนซ้าย	rt 90 = หมุนไปทางขวา 90 องศา lt 45 = หมุนไปทางซ้าย 45 องศา
repeat จำนวนครั้ง [ คำสั่ง ]	repeat = ทำคำสั่งต่อไปนี้ ซ้ำ n ครั้ง	repeat 3 [ fd 100 rt 120 ] repeat 4 [ fd 100 rt 90 ] repeat 6 [ fd 100 rt 60 ]
TO ชื่อฟังก์ชัน :ตัวแปร คำสั่ง END	function = สร้างชุดคำสั่ง	TO square :size repeat 4 [ fd :size rt 90 ] END
cs clean	clear screen = ล้างหน้าจอ clean = ล้างหน้าจอ
pu pd	pen up = ยกปากกา pen down = วางปากกา
ht st	hide turtle = ซ่อนเต่าโลโก้ show turtle = แสดงเต่าโลโก้
setxy พิกัดx พิกัดy	set (x,y) = กำหนดตำแหน่งเต่าโลโก้	setxy 200 100
setpensize ขนาด setpencolor รหัสสี fill setscreencolor รหัสสี	set pen size = กำหนดขนาดปากกา set pen color = กำหนดสีปากกา fill = ระบายสี set screen color = กำหนดสีพื้นหลัง	setpensize 5 setpencolor 10 fill setscreencolor 10
wait หน่วยเวลา	wait = หยุดการทำงาน	wait 5

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

โปรแกรมที่ 12-1 วงกลมเคลื่อนที่

LOGO EP12 – Animation 1

TO filled_circle
repeat 360 [ fd 1 rt 1 ]
rt 90 pu fd 10 pd fill
pu bk 10 pd lt 90
END

TO animate_circle
repeat 40 [
pu fd 10 pd
filled_circle
wait 5
clean
]
END

setpencolor “#F0A2AF
rt 90
pu bk 200 pd
animate_circle

อธิบายการทำงานของโปรแกรม

เมื่อโปรแกรมเรียกใช้คำสั่ง animate_circle
- เคลื่อนที่เต่าโลโก้ไปข้างหน้า 10 pixel
- วาดรูปวงกลม (พร้อมระบายสี)
- หยุดรอ 5 หน่วยเวลา
- ลบรูปภาพ
- (ทำซ้ำแบบนี้ 40 ครั้ง)

น้องๆ จะสังเกตได้ว่า คำสั่ง หยุดเวลา และ ลบรูปภาพเดิม (เพื่อวาดรูปใหม่) มีส่วนสำคัญในการวาดภาพเคลื่อนไหวครับ หากเราหยุดเวลามากเกินไป ภาพที่ได้จะกระตุก แต่ถ้าเราหยุดเวลาน้อยเกินไป ภาพจะเคลื่อนที่เร็วมาก (หรือ CPU/GPU จะประมวลผลไม่ทัน)

ต่อไปจะมาวาดรูปดาวที่เคลื่อนที่ด้วยความเร็วไม่คงที่กันครับ (คำสั่งนี้มีการประยุกต์ใช้ Recursive Function จากตอนที่ 11)

โปรแกรมที่ 12-2 ดาวเคลื่อนที่

LOGO EP12 – Animation 2

TO filled_star
repeat 5 [ fd 75 rt 144 fd 75 lt 72 ]
rt 45 pu fd 10 pd fill pu bk 10 pd lt 45
END

TO animate_star :s
if (0.2*:s*:s) > 150 [ stop ]
pu fd 50 – 0.2*:s*:s pd
filled_star
wait 5
clean
animate_star :s+1
END

setpencolor “yellow
rt 90
pu bk 200 pd
animate_star 1

อธิบายการทำงานของโปรแกรม

เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 1
- ความเร็ว = 2 x 1 x 1 = 0.2 ซึ่งน้อยกว่า 150
- เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 0.2 = 49.8 pixel
- วาดรูปดาว 5 แฉก (พร้อมระบายสี)
- หยุดรอ 5 หน่วยเวลา
- ลบรูปภาพ
- เรียกใช้คำสั่ง animate_star 2
เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 2
- ความเร็ว = 2 x 2 x 2 = 0.8 ซึ่งน้อยกว่า 150
- เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 0.8 = 49.2 pixel
- วาดรูปดาว 5 แฉก (พร้อมระบายสี)
- หยุดรอ 5 หน่วยเวลา
- ลบรูปภาพ
- เรียกใช้คำสั่ง animate_star 3
เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 3
- ความเร็ว = 2 x 3 x 3 = 1.8 ซึ่งน้อยกว่า 150
- เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 1.8 = 42 pixel
- วาดรูปดาว 5 แฉก (พร้อมระบายสี)
- หยุดรอ 5 หน่วยเวลา
- ลบรูปภาพ
- เรียกใช้คำสั่ง animate_star 4
( ทำเช่นนี้ไปเรื่อยๆ )
เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 20
- ความเร็ว = 2 x 20 x 20 = 80 ซึ่งน้อยกว่า 150
- เคลื่อนที่เต่าโลโก้ไปข้างหน้า 50 – 80 = -30 pixel (= ถอยหลัง 30 pixel)
- วาดรูปดาว 5 แฉก (พร้อมระบายสี)
- หยุดรอ 5 หน่วยเวลา
- ลบรูปภาพ
- เรียกใช้คำสั่ง animate_star 21
( ทำเช่นนี้ไปเรื่อยๆ จนกระทั่ง )
เมื่อโปรแกรมเรียกใช้คำสั่ง animate_star 28
- ความเร็ว = 2 x 28 x 28 = 156.8 ซึ่งมากกว่า 150
- จบการทำงาน

สำหรับรูปสุดท้ายที่เราจะวาดกัน ได้แรงบันดาลใจมาจากอนิเมะครับ

โปรแกรมที่ 12-3 เมื่อยามซากุระร่วงโรย

LOGO EP12 – Animation 3

TO leaf
repeat 90 [ fd 1 rt 1 ]
rt 90
repeat 90 [ fd 1 rt 1 ]
rt 90
END

TO flower
repeat 5 [
leaf
rt 45 pu fd 10 pd fill bk 10 lt 45
rt 72
]
END

TO animate_flower :s
if :s < -10 [ stop ]
pu setxy 0 (:s * 10) rt (:s * 10) pd
lt 45 flower rt 45
wait 5
cs
animate_flower :s-1
END

setpencolor “#F9BC9D
animate_flower 20

อธิบายการทำงานของโปรแกรม

เมื่อโปรแกรมเรียกใช้คำสั่ง animate_flower 20
- เคลื่อนย้ายตำแหน่งเต่าโลโก้ไปที่ (0, 200) และหมุนขวา 200 องศา
- วาดรูปดอกไม้ (พร้อมระบายสี)
- หยุดรอ 5 หน่วยเวลา
- ลบรูปภาพ
- เรียกใช้คำสั่ง animate_flower 19
( เป็นเช่นนี้ไปเรื่อยๆ จนกระทั่ง animate_flower -10 จึงจบการทำงาน )

และนี่คือเรื่องราวของ Animation ทั้งหมดที่นำมาฝากกันในวันนี้ครับ สามารถติดตามตอนต่อไปได้ที่นี่ครับ https://karnlab.com/tag/ภาษาโลโก้

The post วาดรูปด้วยภาษาโลโก้ : ตอนที่ 12 – เคลื่อนไหว appeared first on KarnLab.