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

เลือกตัวละคร

1. ที่แถบ Sprites ข้างขวาข้อความ New Sprite คลิกไอคอนตัวละคร

จากนั้นเลือกตัวละครที่ต้องการ (เช่น Cat Flying) – แล้วกดปุ่ม OK ครับ

Tip: น้องสามารถลบตัวละครที่ไม่ต้องการได้โดย – ที่แถบ Sprites คลิกขวาตัวละครที่ไม่ต้องการ – แล้วกดปุ่ม delete

เตรียมตัวบิน

2. ก่อนที่น้องแมวของเราจะบิน เราจะให้น้องๆ แมวพูดทักทายเล็กน้อยครับ (คล้ายๆ ข้อความ START เวลาเริ่มเกมส์) โดยเพิ่ม Script ดังต่อไปนี้

2.1) ที่แถบ Scripts ให้คลิกที่คำว่า Events (สีน้ำตาล) – ให้ลากกล่อง [ when Green Flag clicked ] มาที่พื้นที่ว่างด้านขวา

2.2) ที่แถบ Scripts ให้คลิกที่คำว่า Looks (สีม่วง) – ให้ลากกล่อง [ go to front ] มาต่อข้างล่างกล่องที่แล้ว
// คำสั่งนี้จะทำให้ตัวละครของเราเลื่อนมาที่ตำแหน่งด้านหน้าสุดครับ ก่อนวัตถุอื่นๆ ทั้งหมดครับ

2.3) ที่แถบ Scripts ให้คลิกที่คำว่า Looks (สีม่วง) – ให้ลากกล่อง [ say Hello! for 2 secs ] มาต่อข้างล่างกล่องที่แล้ว – จากนั้นเปลี่ยนข้อความ จาก Hello! เป็น START

เพิ่มวัตถุในฉาก

3. ต่อไปเราจะเพิ่มวัตถุในฉากประกอบกันครับ

3.1) ที่แถบ Sprites ข้างขวาข้อความ New Sprite คลิกไอคอนตัวละคร

จากนั้นเลือกตัวละครที่ต้องการ (เช่น Building) – แล้วกดปุ่ม OK ครับ – จากนั้นจัดตำแหน่งให้สวยงาม

Tip: เราสามารถย่อขนาดของวัตถุได้โดย – คลิกที่แถบ Costumes (ที่อยู่ข้างๆ แถบ Scripts) – จากนั้นคลิกที่วัตถุ แล้วคลิกลากที่มุมวัตถุ เพื่อย่อ/ขยายวัตถุได้ครับ

เคลื่อนที่

4. ต่อไปเราจะทำให้น้องแมวของเราบินได้ครับ แต่เทคนิคที่เราจะใช้คือการเคลื่อนที่ฉากหลัง เพื่อให้ดูเหมือนว่าน้องแมวของเรากำลังบินอยู่ แบบนี้ครับ (ซึ่งในหลายเกมส์ก็ใช้เทคนิคการเคลื่อนที่ฉากหลัง แทนการเคลื่อนที่ตัวละคร)

ให้น้องๆ เลือกวัตถุ Building แล้วเพิ่ม Script ดังนี้ครับ

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

4.2) ที่แถบ Scripts ให้คลิกที่คำว่า Control (สีส้ม) – ให้ลากกล่อง [ forever ] มาต่อข้างล่างกล่องที่แล้ว

4.3) ที่แถบ Scripts ให้คลิกที่คำว่า Motion (สีน้ำเงิน) – ให้ลากกล่อง [ set x to 0 ] มาต่อในกล่อง [ forever ] แล้วเปลี่ยน 0 เป็น 250

4.4) ที่แถบ Scripts ให้คลิกที่คำว่า Control (สีส้ม) – ให้ลากกล่อง [ repeat 10 ] มาต่อในกล่อง [ forever ] ท้าย [ set x to 250 ]
และเปลี่ยนค่า [ repeat 10 ] เป็น [ repeat 100 ]

4.5) ที่แถบ Scripts ให้คลิกที่คำว่า Motion (สีน้ำเงิน) – ให้ลากกล่อง [ change x by 10 ] มาต่อในกล่อง [ repeat 100 ] แล้วเปลี่ยน 10 เป็น -5

น้องๆ ลองกดปุ่มธงสีเขียว แล้วสังเกตผลลัพธ์นะครับ

จากนั้น น้องๆ ลองเปลี่ยน [ repeat 100 ] เป็น [ repeat 50 ] และ [ change x by -5 ] เป็น [ change x by -10 ] แล้วสังเกตผลลัพธ์นะครับ

Tip: พื้นที่/ตำแหน่งของ Stage เป็นดังนี้ครับ

เปลี่ยนลุค

5. น้องๆ จะเห็นว่าตอนนี้เรามีตึกแค่แบบเดียว แต่เราสามารถแสดงผลตึกหลายๆ แบบได้ แบบนี้ครับ

ระหว่างกล่อง [ set x to 250 ] (สีน้ำเงิน) และ [ repeat 100 ] (สีส้ม) – ให้แทรกคำสั่ง [ next costume ] (สีม่วง / Looks) ดังนี้

น้องๆ ลองกดปุ่มธงสีเขียว แล้วสังเกตผลลัพธ์นะครับ

Tip: น้องๆ สามารถดูว่าวัตถุที่เราเลือกมี Costumes แบบไหนบ้าง โดยไปที่แถบ Costumes ข้าง Scripts นะครับ

เพิ่มท้องฟ้า

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

จากนั้นเลือกพื้นหลังที่ต้องการ (เช่น blue sky, blue sky 2, blue sky 3) แล้วกดปุ่ม OK – เราจะเห็นพื้นหลังที่เราเลือกปรากฏที่ Stage

เราจะได้ผลลัพธ์ดังนี้

Tip: น้องๆ สามารถเปลี่ยนสีท้องฟ้าได้โดยคลิกที่พื้นหลัง แล้วคลิกแถบ Backdrops (ข้างๆ Scripts) – จากนั้นคลิกที่ปุ่มถังสีด้านขวา แล้วน้องๆ เลือกสีด้านล่าง จากนั้นคลิกที่พื้นหลังครับ

อยากเห็นน้องแมวบินได้

ต่อไปเราจะทำให้น้องแมวบินได้ละครับ โดยถ้ากดปุ่มขึ้น/ลง จะเคลื่อนที่ตำแหน่ง Y +10/-10 (ตามลำดับ) โดยให้น้องๆ เพิ่ม Scripts ไปที่น้องแมวดังนี้ครับ

7.1) ที่แถบ Scripts ให้คลิกที่คำว่า Events (สีน้ำตาล) – ให้ลากกล่อง [ when space key pressed ] มาที่พื้นที่ว่างด้านขวา – แล้วเปลี่ยน space เป็น up arrow

7.2) ที่แถบ Scripts ให้คลิกที่คำว่า Motion (สีน้ำเงิน) – ให้ลากกล่อง [ change y by 10 ] มาต่อท้ายกล่องที่แล้ว

7.3) ที่แถบ Scripts ให้คลิกที่คำว่า Events (สีน้ำตาล) – ให้ลากกล่อง [ when space key pressed ] มาที่พื้นที่ว่างด้านขวา – แล้วเปลี่ยน space เป็น down arrow

7.4) ที่แถบ Scripts ให้คลิกที่คำว่า Motion (สีน้ำเงิน) – ให้ลากกล่อง [ change y by 10 ] มาต่อท้ายกล่องที่แล้ว – แล้วเปลี่ยนค่า 10 เป็น -10

จากนั้นน้องๆ ลองกดปุ่มขึ้น/ลงบนคีย์บอร์ด แล้วสังเกตผลลัพธ์ครับ

ชวนคิด: แล้วถ้าเราอยากให้น้องแมวเคลื่อนที่ในแกน X โดยการกดปุ่มซ้าย/ขวาบนคีย์บอร์ด – ต้องเพิ่ม Scripts อย่างไรบ้าง?

.

.

.

7.5) ที่แถบ Scripts ให้คลิกที่คำว่า Events (สีน้ำตาล) – ให้ลากกล่อง [ when space key pressed ] มาที่พื้นที่ว่างด้านขวา – แล้วเปลี่ยน space เป็น right arrow

7.6) ที่แถบ Scripts ให้คลิกที่คำว่า Motion (สีน้ำเงิน) – ให้ลากกล่อง [ change x by 10 ] มาต่อท้ายกล่องที่แล้ว

7.7) ที่แถบ Scripts ให้คลิกที่คำว่า Events (สีน้ำตาล) – ให้ลากกล่อง [ when space key pressed ] มาที่พื้นที่ว่างด้านขวา – แล้วเปลี่ยน space เป็น left arrow

7.8) ที่แถบ Scripts ให้คลิกที่คำว่า Motion (สีน้ำเงิน) – ให้ลากกล่อง [ change x by 10 ] มาต่อท้ายกล่องที่แล้ว – แล้วเปลี่ยนค่า 10 เป็น -10

ให้ดวงใจลอยไปกับฟ้า

ต่อไปเราจะเพิ่มหัวใจลอยบนฟ้ากันครับ

8. ที่แถบ Sprites ข้างขวาข้อความ New Sprite คลิกไอคอนตัวละคร – จากนั้นเลือกวัตถุที่ต้องการ (เช่น Cat Flying) – แล้วกดปุ่ม OK ครับ – เสร็จแล้วย่อรูปหัวใจให้สวยงาม

9. เสร็จแล้ว เพิ่ม Script ดังต่อไปนี้ครับ

9.1) เมนู Events (สีน้ำตาล) – ให้ลากกล่อง [ when Green Flag clicked ] มาที่พื้นที่ว่างด้านขวา

9.2) เมนู Control (สีส้ม) – ให้ลากกล่อง [ forever ] มาต่อท้ายกล่องที่แล้ว

9.3) เมนู Motion (สีน้ำเงิน) – ให้ลากกล่อง [ go to mouse-pointer ] มาต่อในกล่อง [ forever ] จากนั้นเปลี่ยนค่า mouse-pointer เป็น random position

9.4) เมนู Motion (สีน้ำเงิน) – ให้ลากกล่อง [ set x to 0 ] มาต่อท้ายกล่องที่แล้ว จากนั้นเปลี่ยนค่า 0 เป็น 250

9.5) เมนู Control (สีส้ม) – ให้ลากกล่อง [ repeat 10 ] มาต่อท้ายกล่องที่แล้ว จากนั้นเปลี่ยนค่า 10 เป็น 50

9.6) เมนู Motion (สีน้ำเงิน) – ให้ลากกล่อง [ change x by 10 ] มาต่อในกล่อง [ repeat 50 ] จากนั้นเปลี่ยนค่า 10 เป็น -10

จากนั้นน้องๆ ลองกดปุ่มธงสีเขียว แล้วกดปุ่มลูกศร ขึ้น/ลง/ซ้าย/ขวา แล้วสังเกตผลลัพธ์ครับ (น้องๆ สามารถหยุดการเล่นได้โดยกดปุ่มป้ายสีแดง ข้างธงสีเขียวนะครับ)

Tip: น้องๆ สามารถ Copy Scripts ได้โดยคลิกขวาที่ Scripts ที่ต้องการ แล้วเลือก duplicate

เก็บหัวใจแล้วได้คะแนน

สุดท้าย เมื่อน้องแมวเก็บหัวใจได้ ก็จะได้คะแนนครับ

10. ก่อนอื่นให้เราไปที่แถบ Scripts คลิกที่คำว่า Data (สีแสด) เพื่อสร้างตัวแปรไว้สำหรับเก็บคะแนนก่อนครับ – จากนั้นกดปุ่ม Make a Variable – ตั้งชื่อตัวแปรว่า score – แล้วกดปุ่ม OK ครับ

11. ให้น้องๆ เพิ่ม Script ไปที่น้องแมว ดังนี้ครับ

11.1) เมนู Events (สีน้ำตาล) – ให้ลากกล่อง [ when Green Flag clicked ] มาที่พื้นที่ว่างด้านขวา

11.2) เมนู Data (สีแสด) – ให้ลากกล่อง [ set score to 0 ] มาต่อท้ายกล่องที่แล้ว

11.3) เมนู Control (สีส้ม) – ให้ลากกล่อง [ forever ] มาต่อท้ายกล่องที่แล้ว

11.4) เมนู Control (สีส้ม) – ให้ลากกล่อง [ if … then ] มาต่อในกล่อง [ forever ]

11.5) เมนู Sensing (สีฟ้า) – ให้ลากกล่อง [ touching ___ ] มาต่อในที่ว่างของกล่อง [ if … then ] จากนั้นเปลี่ยนค่า ___ เป็น Heart

11.6) เมนู Sound (สีม่วง) – ให้ลากกล่อง [ play sound pop ] มาต่อในกล่อง [ if … then ]

11.7) เมนู Data (สีแสด) – ให้ลากกล่อง [ change score by 1 ] มาต่อท้ายกล่องที่แล้ว

11.8) เมนู Control (สีส้ม) – ให้ลากกล่อง [ wait 1 sec ] มาต่อท้ายกล่องที่แล้ว

จากนั้นน้องๆ ลองกดปุ่มธงสีเขียว แล้วกดปุ่มลูกศร ขึ้น/ลง/ซ้าย/ขวา แล้วสนุกกับเกมส์นะครับ (น้องๆ สามารถหยุดการเล่นได้โดยกดปุ่มป้ายสีแดง ข้างธงสีเขียวนะครับ)

บทส่งท้าย

และนี่คือคลิปแสดงผลลัพธ์การเล่มเกมส์นี้บางส่วนครับ

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

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

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

The post สร้างเกมส์ด้วย Scratch : ตอนที่ 6 เกมส์บินเก็บของ appeared first on KarnLab.