ดูแบบ มันมีหลายวิธี นึกออกนะ เราจะพาทำแบบแรกที่ชื่อก็บอกอยู่แล้ว DINOSAUR moving ก็คือ DINOSAUR เคลื่อนไหว แต่เด็ก ๆ อาจจะไม่เรียกตัวไดโนเสาร์ก็ได้ เคลื่อนไหวอย่างไร เดี๋ยวให้ดู ให้ดูตัวอย่างก่อน โอ้โห เครื่องใครนี่ เตือนอย่างแรงมากไม่มีกั๊กเลยเดี๋ยว มัน แป๊บหนึ่ง มันขึ้นหน้านั้น Windows มันไม่เล่นหน้านั้น ให้ดู ให้ดูไอ้ตัวเล็กนี่นะ ดูดี ๆ นะ ดูตัวเล็กนะ ดูไดโนเสาร์ตัวเล็ก ๆ นี่นะ เห็นไหม มันวิ่งใช่ไหมคะ ทำอย่างไรเราจะทำให้มันวิ่ง เราจะทำอย่างไร ก็คือตัวเกมเราที่เอามา เราเอามาแล้วนี่เราจะทำอย่างไรให้มันวิ่งได้ อันนี้คือทำให้วิ่งแบบที่ 1 นะคะ วิธีการ วิธีการ เราจะไปหาสิ่งที่เรียกว่า "Spite Sheet" ให้ดูที่รูปไดโนเสาร์ ไดโนที่เป็น Sprite Sheet นี่ มันก็คือถ้าพูดถึงการ์ตูน การ์ตูนที่มีท่าทางการเคลื่อนไหวของเจ้าตัวละครนั้น นึกออกไหม เพราะฉะนั้น Sptie sheeเขาวาดตัวไดโนเสาร์แต่เราเปลี่ยนท่าของไดโนเสาร์ไปแต่ละท่าน่ะนึกออกไหม ถ้าให้ไปวาดเองมันจะช้าใช่ไหม ตอนนี้เราก็เลยจะใช้ทางด่วนไปหาภาพที่เขาทำไว้แล้วนึกออกนะมาใช้ เป็นอันนี้ของเรา แต่พอ ถ้าเกิดสมมติเราเริ่มเรียน วาดตัวการ์ตูนเองได้ เด็ก ๆ ก็ไปวาดเพื่อทำไว้ใช้เองได้นึกออกนะ แต่ตอนนี้ถ้ามาวาดจะทำให้เราเสียเวลาในการวาดอย่างน้อยก็ 2 หรือ 3 สัปดาห์ใช่ไหมคะ เพราะฉะนั้น เราจะต้องใช้วิธีการไปขอยืมคนที่เขาวาดไว้แล้วมาใช้งานก่อนนะคะ ลักษณะก็คือมันจะเป็นภาพต่อเนื่องนั่นเองนะคะ sprite sheet นะคะ ก็คือภาพที่มีภาพเดียว ให้นึกถึงตอนนี้ยืนแล้วเขาก็เริ่มก้าวขา ภาพที่ 2 ไดโนเสาร์ก้าวขาเห็นไหม ภาพที่ 3 ลักษณะเปลี่ยนแค่ขา ดูดี ๆ หน้ากับตา อาจจะอ้าปากขึ้นบ้าง แล้วแต่นะคะ แล้วแต่คนวาดนี่ มีการยกแขนบ้าง เอาแขนลงบ้าง แต่พอพอเราเอามาทำเป็นภาพต่อเนื่องน่ะ มันก็จะเหมืนอภาพมันเคลื่อนไหวได้นึกออกนะคะ เพราะฉะนั้น ให้เปิด Google มา เปิด Chrome ขึ้นมานะคะ ก็คือเว็บฯ ที่เราจะไปก็อปปี้ภาพนั้นนะคะ ชื่อมีอยู่ 2 เว็บ(ไซต์)นะคะ ลองเข้าทั้ง 2 เปิดอันเดียว เปิดหน้าต่างเดียวไม่พอเราเปิดพร้อมกัน 2 หน้าต่างเลย วิธีใช้งานให้เกิดประโยชน์สูงสุดนะคะ เปิด Chrome เปิดเว็บไซต์ Chrome ขึ้นมา เกม art นี่ ๆ gameart2d.com กับ เว็บ vecteezyเปิด ๆ ค้นพร้อมกัน 2 หน้าต่างเลย ทีนี้สำคัญมากห้ามลืมก็คือเวลาโหลดมาแล้วต้องเอาไปเก็บไว้ที่ไหน Disk C: แล้วก็อะไร ชื่อตัวเองสร้างไว้นะคะ อย่าลืม ต้องเอาไปไว้ที่นั่น เพราะเวลาโปรแกรมถามหาจะได้หาเจออย่าลืมนะคะ ต้องเอาไปเก็บไว้ที่โฟลเดอร์ที่มีชื่อของเด็ก ๆ อันนี้ห้ามลืมเด็ดขาด Folder ที่ให้สร้างไว้นะคะ เอาไปเก็บไว้ที่นั่น ขึ้นหรือยัง นี่ ถ้า gameart2d นี่ มันจะมี นอกจากมีตัวไดโนเสาร์ก็มีตัวอื่นอีก มีตัวแซนตาคลอสก็มี ดูนะคะ ถ้าใครไปโหลดของ game 2d นี่ gameart2d จะมีนี่ เห็นไหมคะ รูปให้เลือกนี่ ไม่เอาตัวไดโนเสาร์ก็ได้ เข้าใจนะ เด็ก ๆ อาจจะเลือกเอาซานต้าคอสก็ได้ อยากให้ตัว อยากเอาตัวไหนไปวิ่งเลือกเอาเลยนะคะ อันนี้ถ้าโหลดจาก Game 2D นะคะ อันนี้ถ้าโโหลดจาก vecteezy นะคะ ให้พิมพ์ Sprite Sheet เพื่อหาก็ได้ S-p ถ้าใช้ของ vecteezy ให้พิมพ์ Sprite Sheet เห็นไหม ด้านล่างก็จะมีตัวนี้ให้หา ให้เลือกที่เขาแปะว่า Free ไว้เห็นไหมคะ ให้ดูว่ามีคำว่า "free" นั่นหมายความว่าเขาให้เรานำภาพนั้นไปใช้ได้ มันจะมีคำว่า "Free" แปะไว้บนหัวน่ะลูก โอเคนะ ถ้าอย่างนี้เราโหลดไปใช้ได้นะคะ ให้เลือกภาพที่มันมีคำว่า "Free" นะคะ มีหลายอันอยู่นะคะ ลองหาดูได้ ตอนนี้คือเลือกค่ะ เลือกจะเอารูปอะไร แล้วก็เลือก Download นะคะ กด Download สมมติ เราจะเปลี่ยนเป็นน้องหมีบ้างดีกว่ารอบนี้ เราไม่เอาไดโนเสาร์เราจะเอาน้องหมีเห็นไหมคะ สังเกตมันจะมีคำว่า "Free Dowload" อย่างนี้ ถ้าอย่างนี้ เลือกฟรีนะคะ เด็ก ๆ อย่าลืม // อาจารย์แม่ครับ ให้เลือกอันนี้ใช่ไหมครับ (อาจารย์สุธิรา) ใช่ ๆ ให้เลือกในเว็บฯ เลย ให้เลือกจากในเว็บฯ เลย ส่วนใหญ่ไฟล์ภาพของ Sprite Sheet มันจะเป็นไฟล์ Zip นะ อย่าลืมนะ เด็ก ๆ ก๊อบปี้ไฟล์ .zip ในโฟลเดอร์เราน่ะ เพื่อสร้างโฟลเดอร์ในเครื่องเรานะ โอเคนะ ใน Folder เรานะคะ เหมือนแม่ได้ตัวนี้แล้วเดี๋ยวก็จะเอาไปแตกไฟล์สอนแล้วนะคะ สัปดาห์ที่แล้ว จำได้อยู่นะ เราจะเอาไปไว้ที่โฟลเดอร์เราเอาไว้ที่ Drive C : แล้วก็ตามด้วยชื่อโฟลเดอร์ นี่มันเป็นไฟล์ Zip ใช่ไหมคะ มันเป็นไฟล์ Zip เด็ก ๆ จะต้องแตกไฟล์ก่อน ก็คลิกขวา แล้วก็เลือกว่าให้มันมีโฟลเดอร์อย่างนี้ พอเข้าไปดูนะ ๆ เดี๋ยวจะเปิดให้ดูไปไหนล่ะ โฟลเดอร์เรา นี่ก็จะมีรูปภาพอย่างนี้นะคะ หรือถ้าอยากค้นเองไม่อยากได้อย่างนี้ ก็ค้นใน Chrome แล้วก็ใช้คำว่า "Free" นะ Free Downoad Download Sprite Sheet อย่างนี้นะคะ ถ้าเกิดเปิดมาแล้วไม่ถูกใจว่าอย่างนั้นเถอะ ก็ค้นคำว่า "Free Download Sprite Sheetอย่าลืมว่า จุดสังเกต ก็คือให้เลือกดาวน์โหลดที่มันเป็นฟรีนะคะ ที่เขาให้โหลดได้ฟรีนะคะ แซนตาคงแซนตาคลอส เอาซานต้าคลอสก็ได้ไง In trend chrismastคือบางไฟล์์มันก็จะใหญ่ ก็ขึ้นอยู่กับรูปที่เราเลือกนะคะ Chrome หายไปไหนล่ะ เอา... นี่ดีกว่า อย่าลืมเอาไปไว้ที่โฟลเดอร์นะคะ แต่ถ้าไฟล์มันมานี่แยกออกมาให้อย่างนี้ดีเลยนะเห็นไหม เหมือนของไดโนเสาร์นี่ มันจะเป็น 1 รูป 1 รูป ใช่ไหม ให้เลือกแบบนี้จะดีมากเลยนะครับ เพราะถ้าได้มาเป็นแผงนี่ต้องมาตัดออกทีละส่วนก็จะเสียเวลา ให้ดูว่าเราควรได้ไฟล์ที่มีลักษณะเป็นอย่างนี้มา ให้มันแยกเป็นรูป ๆ ออกมา ถ้าอย่างนี้ ถ้าได้แบบนี้มันได้มาแค่ มันเป็นรูปเรียงกันมา แต่เราต้องมาคัดทีละตัวออกมาทำเป็นรูปใหม่น่ะนึกออกนะ แต่อย่างนี้ก็ได้ถ้าเอามา แล้วเราก็ไปเปิดใน Paint นึกออกนะคะ แต่ต้องเสียเวลาทำนิดหน่อย ๆ โอเคไหม ได้หรือยัง อยากให้ได้เป็นแบบนี้ตอนนี้อยากให้ได้เป็นอย่างนี้ นี่ ๆ ๆ ๆ ที่มันแยกเป็น 1, 2, 3, 4, 5 หลาย ๆ ไฟล์อย่างนี้นะคะ โอเคนะ ปัญหาก็คืออะไร ปัญหา คือ ถ้าภาพที่ได้มามันใหญ่ เด็ก ๆ จะต้องลดไซซ์รูปลง จะมีวิธีดูภาพเราใหญ่หรือไม่ ดูนะคะ ให้ไปดูที่ไฟล์ภาพที่เรา Download มา ไปดูในโฟลเดอร์ เช่น ตัวนี้ Run Run มี 1, 2 เราจะไดโนเสาร์ จะเอาวิ่งหรือจะเอาเดิน รอบนี้เอาเดินแล้วกัน Walk คลิกขวานะคะ แล้วเราบอกว่า"เปิดด้วย...มันจะเปิด Paint ไม่เปิด Paint เสียแล้ว Open With... อยู่ไหนนะ เปิดด้วยเห็นไหมคะ แล้วเลือก Paint ระบายสีให้เลือกระบายสี จานสีน่ะ นึกออกนะ เพื่อเราจะเช็กว่ารูปตัวการ์ตูนที่เราเอามามันใหญ่หรือเปล่านะคะ วิธีการเช็ก เห็นไหมนี่ ตัวใหญ่นะนี่ เพราะอะไร ถ้าไปที่มุมมอง แล้วเลือก 100 เปอร์เซ็นต์ดูนะคะ ถือว่าตัวใหญ่ เพราะอะไร ถ้าเราทำหน้าต่างเล็กนึกออกนะ เดี๋ยวมันจะไซซ์ใหญ่เกินนะคะ ดูวิธี วิธีเปลี่ยนขนาดภาพก่อน นะคะ ใช้โปรแกรม Paint พอเปิดโปรแกรม Paint ขึ้นมานะคะ ให้คลิกที่ Resize เมื่อเราเปิดโปรแกรม Paint ไอ้รูปตัวนี้ ตัวนี้นะคะ เห็นไหมคลิกที่ Resize นี่นะคะ แต่ก่อนจะเลือกเราต้องคลิกเลือกตัวไดโนเสาร์ก่อนนะคะ ก็คือคลิกเลือกทั้งหมดให้มันครอบคลุม เราจะเอาเฉพาะส่วนตัวก็ลดลงไปนิดหนึ่ง เห็นไหมล่ะ ๆ นะคะ คลิกเลือกทั้งหมด เสร็จแล้ว คิลกที่เปลี่ยนขนาด Resize เปลี่ยนขนาด เราจะลดขนาดมันลงนะคะ ถ้าขนาดนี้ ดูสิ เห็นไหม ขนาดหน้าต่างของโปรแกรม Paint มันกินพื้นที่เกือบไอ้นี่หน้าต่างแล้วนะ แล้วเลือก Pixels Download ได้หรือยัง เอ็ม Download ได้หรือยัง เปิดดด้วยโปรแกรม Paint ไง ให้ติ๊กเลือกเป็น Pixels เห็นไหม ดูขนาดมันตั้ง 600 ลดลงครึ่งหนึ่งของ 600 1ก็ยังใหญ่ไป ครึ่งหนึ่งของ 600 คือ 300 ครึ่งหนึ่งของ 300 คือ 150 พิมพ์ตัวเลขเป็น 150 คลิกที่ช่องแรกแล้วก็พิมพ์ 150 จากนั้นคลิกตกลง ้เห็นไหม ได้ไซซ์มันแล้วนี่ เอาตัวนิดเดียว คลิก Crop เพื่อตัด ตัดพื้นที่ส่วนเกินออกด้วย เพราะฉะนั้น เหมือนอันเดียวกันถ้าเกิดเราไปเลือกรูปนี้นะคะ ไหนล่ะ อยู่ไหนล่ะ Paint ธรรมดา โปรแกรม Paint ธรรมดาครับ สมมติว่าไปเอารูปเจ้าหมีนี่ ที่มาเป็นแถบอย่างนี้ เดี๋ยวนะคะ อยู่ไหนล่ะ ถ้าเราไอ้ตัวนี้เราก็ลดขนาดนะคะ คลิกเลือกทั้งหมดก่อน อยู่ตรง Resize จาก Pixel 600 ใส่ 150 พอนะคะ ของน้องหมีหายไปไหนแล้ว จะได้เท่าไหนนี่ ใส่แค่ค่าบนตัวเดียวเดี๋ยวมันปรับอัตโนมัติ เล็กไป อันนี้ ถ้าเล็กเราก็ย้อนกลับคืนแล้วก็เลือกมุมมอง เลือกทัั้งหมดนะคะ เมื่อกี้หมีมันเล็กไป แต่เปลี่ยนขนาด คือ ถ้าแม่บอกเปลี่ยนแล้ว เพราะรูปของแต่ละคนไม่เท่ากันนึกออกนะ เด็ก ๆ ลองดูก่อนได้ ถ้าเลือก Pixel 150 มันเล็กไป เราก็เหลือ 300 ก็ได้ เราก็ปรับดู 300 ก็ยังดูว่าเล็กไปอีก ให้ลดขนาดตัวเพราะอะไร เพราะให้นึกถึงถ้าทำเกม เวลาทำเกมน่ะ ถ้าเราใช้รูปใหญ่ โปรแกรมมันต้องไปโหลดรูปเข้ามาใช้ไง นึกออกหรือเปล่า เราต้องลดขนาดมันนะคะ เสร็จแล้วทำอย่างไร พอลดขนาดเสร็จนะ เด็ก ๆ ตอน Save น่ะค่ะ บันทึกเป็นไฟล์ บันทึกเป็น เปลี่ยนชื่อ นึกออกหรือเปล่า ให้เลือกบันทึกเป็น นะคะ เอาไว้ที่ไหนอย่าลืมโฟลเดอร์เกมเราใช่ไหมคะ เอาเป็นชื่ออะไรดี เพราะชื่อเดิมมันเป็นอะไรน่ะ Dino 1 สมมติ Dino ตัวที่ 1 ที่เราจะเอาไปใช้นะคะ แม่จะตั้งชื่อมันว่า Dino 1 เพราะอันนี้เป็นภาพตัวแรกเพราะฉะนั้น เด็ก ๆ จะเอาไอ้ตัวภาพที่เคลื่อนไหวกี่ตัว เด็ก ๆ ก็ต้องทำขนาดให้มันเท่ากันทุกตัว นึกออกไหม โอเคไหมคะ เพราะฉะนั้น ก็คือต้องไปแปลงภาพอื่นด้วยนะคะ ทำเหมือนกัน ก็เราก็เรียงลำดับหมายเลข เอาอย่างน้อยสัก... ในตัวอย่างในสไลด์เราใช้กี่รูปเอง 1, 2, 3, 4, 5, 6, 7, 8 รูป มันจะสมูต การเคลื่อนไหวจะมี แต่ยกเว้นว่าไอ้ตัวต้นฉบับเขามีมาน้อยเหมือนน้องหมี เหมือนรูปต้นฉบับน้องหมีมันมี 1, 2, 4, 6 6 ตัว ใช่ไหม เราก็ใช้แค่ Bear 1, Bear2, Bear3, Bear 4 นะคะ โอเคนะ เพราะฉะนั้น เด็ก ๆ จะต้องมีภาพที่ลดขนาดแล้วอย่างน้อย 6 ตัวนะคะ 6 ตัว ก็วิธีการพอเราลดขนาดมันลง เราเปลี่ยนชื่อเราก็ใส่หมายเลขให้รู้ว่าภาพนี้เป็นภาพการเคลื่อนไหวลำดับที่ 1 นึกออกนะ ถ้าสมมติเป็นหมีก็ใช้ Bear 1, Bear 2, แบ 1, Dino 4 ไปจนกว่าจะครบทั้ง 6 ภาพ หรือ 8 ภาพ หรือ 10 ภาพ ใครจะเอาเยอะกว่านั้นก็ได้ ก็แล้วแต่นะคะ แต่คืออย่างน้อยได้ 6 รูปนี่ การเคลื่อนไหวจะเห็นได้ว่ามันเคลื่อนไหวเป็นธรรมชาติ ไม่กระตุก นึกออกนะคะ เดี๋ยวเราจะลองเอาภาพนี้ไปใช้ โอ้ยภาพไม่ค่อยเดี๋ยว ๆ นี่ สมมติจะเอารูปที่ 1 อย่างนี้นะคะ จะเลือกเฉพาะตัวน้องหมีอย่างนี้ บันทึกเป็น บันทึกเป็น png นะ ตอนนี้ได้น้องหมี 1 ตัวนะคะ ตัวที่ 2 ของน้องหมีนี่ขนาดลดลงอยู่ที่แค่ 300 นะคะ ลดลงไม่เท่ากัน ค่อย ๆ ลดไปทีละตัวนะคะ เด็ก ๆ อย่าลืม พอได้ตัวที่ 2 เราก็บันทึกเป็น Bear 2 ตอนนี้เราได้ 2 ตัวแล้วนะ ตัวที่ 3 ให้ได้อย่างน้อย 6 ตัวนะคะ เดี๋ยวได้เขียน เดี๋ยวพาเขียน เขียนได้หลายวิธี เขียนโค้ดตั้งค่าหน้าต่างใหม่น่ะ 3, 4 เดี๋ยวทำเสร็จแล้วจะเดินไปดูนะคะ 4 แล้วก็ 5 ตัวที่ 5 4, 5 แล้วก็ตัวสุดท้าย ตัวที่ 6 ของเรา เราครบแล้วนะคะ เดี๋ยวเราจะลองดูน้องตัวอื่น Walk 1 Walk 2 จะแปลงให้หมด ต่อไป ตัวที่ 3 ตัวที่ 4 ตัวที่ 8 ตัวที่ 9 ตัวสุดท้าย ได้แล้วนะครับ ให้ดูนะคะ ถ้าใครที่ทำเสร็จแล้ว ตัวเองจะต้องเช็กก่อนว่าในโฟลเดอร์ โฟลเดอร์ชื่อที่เราสร้างไว้นี่มีตัวเกมน่ะ ที่เราแปลงไฟล์แล้วน่ะ อยู่ในนั้นหรือเปล่า มันจะต้องแสดงรูปอย่างนี้ใช้ View แล้วก็ดูรูปว่ามันมาไหม ถ้าไม่มาย้อน ย้อนไปคลิกที่บันทึกเป็น แล้วดูว่ามันไป Save ไว้ที่ไหน แล้วไปย้ายมันมาใส่ไว้ในโฟลเดอร์เรานะคะ โดยปกติถ้า Paint มันจะเอารูปไปเก็บไว้ที่รูปภาพโฟลเดอร์อยู่ที่รูปภาพหรือ Picture น่ะ ถ้าใครบอกว่าตัวเองทำเสร็จแล้ว แล้วแม่ไปเปิดโฟลเดอร์ดูไม่มีรูปอยู่ในนั้นน่ะ ไม่มีรูปตัวเกมที่เราจะเอามาทำอยู่ในโฟลเดอร์นั้นน่ะ ต้องไปเปิดดูว่าเราเซฟมันไปไว้ที่ไหนแล้วไปย้ายมันมาใส่ในโฟลเดอร์นี้นะคะ ถ้าใครทำถูกน่ะ พอเราเปิดโฟลเดอร์ พอแม่ขอดูโฟลเดอร์น่ะ ก็จะเห็นรูปของตัวเกมไง ว่าเด็ก ๆ มีตัวเกมที่พร้อมจะใส่โค้ดแล้วให้มันทำงานได้โอเคนะ ตอนนี้เหลืออีก 1, 2, 3 3 คนนะคะยังไม่เสร็จ คนอื่นเสร็จหมดแล้วก็เลยจะรอเพื่อนแป๊บหนึ่ง โอเคนะคะ ลองไปเปิด Sublime ทีนี้ น่าจะเสร็จทุกคนแล้ว เปิดโปรแกรมนะคะ ให้เด็ก ๆ อันนี้เปลี่ยนภาพไปแล้ว เราเปิด Sublime นะ เอาไฟล์เดิม เพราะสัปดาห์ที่แล้วสร้างพื้นที่ไว้แล้ว จะได้ไม่ต้องไปแก้ สิ่งที่จะมีเพิ่ม จะมาตั้งค่าการหน่วงเวลา ในบรรทัดที่ต่อจาก pygame.init ให้ไปหาบรรทัดที่ต่อจาก pygame.intui.init ใน Sublime ของเรานะคะ เดี๋ยวเอ็มเดี๋ยวค่อยดูตอนเลิกไอ้นั่นน่ะ ทำไมหา sublime ไม่เจอ อัปเดตเวอร์ชัน Sublime นะคะ ไม่เป็นไร ของใครถ้าเปิดแล้วนะคะ เด็ก ๆ ไปบรรทัดที่ pygame.init() เห็นไหม หาคำนี้ หาบรรทัดที่มีประโยคนี้ pygame.init เพราะ import game มันต้องพิมพ์อยู่แล้วนะคะ ให้ Install อีกนะ เดี๋ยวไม่ init แล้ว จะ Run แล้ว ยกเลิก ยังไม่อัป(เดต) ปล่อยมันไปก่อน บรรทัดที่ 2 กด Enter ก่อน 1 ครั้ง แล้วพิมพ์อะไร ดูนะคะ โค้ดที่เราจะพิมพ์ clock ตัวแปรสำหรับ... คือ เวลาจะให้มันเดินอย่างนี้ ถ้าไม่กำหนดการหน่วงเวลา นึกออกนะ เดินเร็วเกินไป มันจะแบบ 0.1 วิ(นาที) อย่างนี้ มันก็จะเหมือนจากเดินจะกลายเป็นวิ่งอย่างนี้ เราจะมากำหนดตัวแปรสำหรับทำนาฬิกาหน่วงเวลา ตัวแปรนั้น ก็เลยได้ชื่อว่า clock นะคะ ตามด้วยเครื่องหมายเท่ากับ (=) อย่างนั้นพิมพ์ตามเลยนะ clock = เอ้ย clock = แล้วก็วรรคนะคะ เราจะเรียกใช้ pygam.time module time นะคะ โอเคไหม ที่ Sublime ที่ บรรทัดที่ต่อจาก pygame.init นะคะ ชื่อว่า clock นะคะ ตัวเล็กนะคะ clock เล็ก c-oc-k แล้วก็กด Spacebar 1 ครั้ง กด Spacebar 1 ครั้งแล้วก็ = แล้วก็วรรค กด Space Bar 1 ครั้ง แล้วก็พิมพ์ pygame พิมพ์ pygame ขึ้นมาแล้วกด Enter ค่ะ แล้วก็ . นะคะ แล้วก็ t-i-m-e แล้วก็ตามด้วย .Clock แต่ Clock ตัวนี้จะเป็น C ตัวใหญ่นะคะ ดูดี ๆ เห็นไหม C นะ c-l-o-c-k มันจะเป็นคนละ clock กับตัวแปร clock ที่เป็นตัวแปลจะเป็นตัวเล็ก ตั้งชื่อตัวแปรนี่ ถ้าชื่อตัวเล็กกับตัวใหญ่มันคือคนละตัว เพราะฉะนั้น ตัวแปรนี้เราใช้ตัวเล็ก แต่ตัวที่เป็นโมดูลเราใช้ตัวใหญ่ แล้วตามด้วยเครื่องหมายวงเล็บค่ะ นี่ Clock จะเปลีย่นเสีฟ้า ดูดี ๆ นะคะ Clock ในโมดูลจะเป็น C ตัวใหญ่นะคะ ไม่ใช่ c ตัวเล็ก เด็ก ๆ เช็กด้วย ไม่เหมือนกันนะ ไม่เหมือนกับ clock ที่เป็นตัวแปรนะคะ เมื่อสร้างแล้วนะ สร้างตัวแปรแล้วก็ต้องไปเรียกใช้มัน ตำแหน่งที่เรียกใช้อยู่ตรงนี้ อยู่ก่อนถึง เขาเรียกว่าอะไรล่ะ ก่อนที่เราทำหน้าจอน่ะ จำได้ไหม บรรทัดที่เท่าไรคะ เราก็จะเรียก clock.tick ในวงเล็บ 60 60 นี้ ก็คือจำนวนระยะเวลาที่เราจะให้มันหน่วงน่ะ นึกออกไหมโอเคนะคะ Clock ตัวใหญ่นะคะ .Clock น่ะ C ใช้ Clock ตัวใหญ่ เอามาไว้ตรงหน้านี้เห็นไหม ต่อจาก Comment ที่ทำหน้าจอในบรรทัดที่ 7 อยู่ก่อนทำหน้าจอ นะคะ เราก็จะต้องกด แถ็บเข้าไป 1 ครั้งนะคะ ดูตำแหน่งนะคะ เราจะกด Tab เข้าไป 1 ครั้ง ตอนนี้เด็ก ๆ มาอยู่หน้า อยู่ในบรรทัดที่อยู่ก่อน Screen หรือนัง ก็คือบรรทัดที่ 7 แต่เลขบรรทัดอาจจะไม่เหมือนกัน ก็คือให้อยู่เหนือบรรทัดที่อยู่ screen 1 ครั้ง เด็ก ๆ ต้องกดแถ็บ 1 ครั้งนะ ไม่ใช่กด Space Bar แล้วก็พิมพ์ clock clock เล็กนะคะ c เล็็ก แล้วเลื่อนไปหา .tick ใช่ไหม .tick tick t-i-c-k นะคะ จำไม่แม่น t-i-c-k แล้วก็วงเล็บ ในวงเล็บใส่ตัวเลขลงไป 60 นั่นก็คือระยะเวลานะคะ ที่เราจะให้มันหน่วง นะ ประกาศตัวแปรเสร็จนะคะ แล้วมาเรียกใช้มัน โอเคครบ ส่วนต่อไปที่เราจะ Code ดูส่วนต่อไป 2 บรรทัดนี้เสร็จหรือยังคะ ใครยังไม่เสร็จเอ่ย ยังไม่ run นะ เพราะ run ไปก็ไม่แสดงผลนะ แค่ระบุเวลาเฉย ๆ ไม่ได้มีตัวแสดงขึ้นนะ เพราะฉะนั้น เราจะยังไม่ Run หน้าจอเกมเราเซ็ทไปแล้วนะคะ เราจะลองเปลี่ยนขนาดไหม ถ้าทำรูปแบบนี้ รูปแบบนี้นะคะ มันจะเป็นการเขาเรียกว่าอะไร เรียกว่าเป็นการกำหนดค่าหน้าจอเสียก่อน กำหนดความกว้าง ความสูง มาใส่ตัวแปรที่รับ... ที่กำหนดค่าความกว้างค่าความสูงไว้แล้วอย่างนี้นะคะ แต่แบบเดิมก็คือเราใส่ค่าเข้าไปในวงเล็บเลยนะ 600 คือ 600 ใช้ตัวนั้นก็ได้ ใช้ตัวเดิมก็ได้ เพราะฉะนั้น เรารู้แล้วเราผิดตรงตำแหน่งไหน โอเคนะ เราก็คือเอาเก่าเราจะเป็น 800 x 600 นะคะ จากยูนิคอร์นจะขอเปลี่ยน ขอเปลี่ยนชื่อเกมแล้ว Dino เด็ก ๆ สามารถเปลี่ยน caption ได้ ตัวเก่าเรานึกออกไหม เพราะฉะนั้น ตอนนี้เกมเราเปลี่ยนนะคะ เราก็จะเปลี่ยนชื่อมัน ก็จะเป็น Dinowalk นะ สมมติ เราจะตั้งชื่อนี้ อันนี้ ๆ อันนี้คือชื่อ Caption นี่ ที่เด็ก ๆ อย่างตั้งเลยได้นะคะ icon ถ้าอยากเปลี่ยนค่อยหามาเปลี่ยนเองนะคะ โอเคนะ รู้วิธีเปลี่ยนแล้วนะ ถ้าอยากเปลี่ยนก็แค่เปลี่ยนชื่อรูปน่ะ เมื่อกี้เราบอกเราจะเอาไดโนหรือเอาหมีดี เอา Dino ก่อนแล้วกัน Dino 1 Icon ก็จะใช้ Dino 1 นี่ล่ะ โอเค นามสกุลอะไร .png แต่ Dino 1 นามสกุลมันเป็น png ตรง caption กับ icon น่ะ เด็ก ๆ เปลี่ยนได้เลยนะคะ ถ้ายังไม่เปลี่ยนก็ปล่อยมันไว้เหมือนเดิมนะคะ โอเค มาดูส่วนต่อไปที่เราจะไปต่อนะคะ ตรงกำหนด loop loop เรานะคะ ตรง Loop นี่ เหมือนเดิมเลย ไปแก้แต่ตรงบรรทัดที่ต่อจาก pygame.QUIT.moduleeventtypepygame.quit ตรงนี้แก้นะ แก้นะคะ เด็ก ๆ แก้เป็น pygame ใช่ไหมคะ pygame. ลบ run ออกแล้วก็ใส่ pygame.quit quit เล็กนะคะ quit ใส่วงเล็บ quit ตัวเล็กนะ เลือก quit ตัวเล็ก sys.exit นะคะ มีแก้ 2 จุด เอา run ออกแล้วใส่ กับ sys.exit เข้าไปนะคะ นี่ตรง loop แก้โค้ดอยู่ 2 บรรทัดพอ โอเคไหมคะ ส่วน loop ของเรา แก้ 2 บรรทัด ก็คือเอา run =false ออก แล้วก็พิมพ์ sys.exit() นะคะ โค้ดนี้จะเยอะหน่อย เพราะเราจะสร้าง Class เพื่อเอาตัวไดโนเสาร์หรือตัวเกมเรามาใส่นะคะ เพราะฉะนั้น การสร้าง class นะคะ ก็คือพิมพ์คำว่า class แล้วก็ตามด้วยชื่อ class ที่เราต้องการสร้าง แล้วก็เงื่อนไขต่าง ๆ ที่อยู่ใน class นะคะ ชื่อ class จะต้องขึ้นต้นด้วยตัวพิมพ์ใหญ่ เพราะฉะนั้น เหมือนเกมแม่ชื่อเกม Dino ก็เลยจะตั้งชื่อ class ว่า Dino เขามีชื่อตัวนั้นมาใช่ไหม เอาชื่อของตัวเองเป็นตัวนั้น นึกออกนะ แต่อย่าลืมนะคะ ชื่อจะต้องตั้งด้วยตัวใหญ่นะชื่อ class โอเคนะ เข้าใจตรงกัน จัดไปค่ะ อย่างนั้นเริ่ม class จะอยู่ต่อจากเห็นไหม เอาไปใส่ใต้ import pygame นะคะ แล้วเมื่อกี้เราไปเพิ่มโมดูล sys เห็นไหมตรงหลัง import pygame แก้ตรงนั้นด้วย นี่ อยู่ตรงนี้นะคะ แล้วก็เติม sys เข้าไปด้วย เลือก sys โอเคไหม เอา class ไว้บรรทัดที่ 3 class จะเริ่มบรรทัดที่ 3 นะ เด็ก ๆ นะ ก็พิมพ์คำว่า "class ก่อน เห็นไหม พิมพ์ cl แล้วมันจะมี class ให้เราคลิกเลือกตัวนี้เลยค่ะ มันจะได้... นึกออกนะ มันจะได้ตัวคั่นตัวอะไรมาเลยโอเคไหม วิธีการนะ ิพิมพ์ cl ปุ๊บแล้วเลือก class new class ตรง class name เห็นไหม เราก็พิมพ์ชื่อ ชื่อตัวให้นึกถึงชื่อตัวละครที่ตัวเองจะเอามาใช้เข้าใจนะ ไอ้ตัวการ์ตูนเราน่ะ ให้พิมพ์ชื่อตามตัวการ์ตูนเรานะคะ จะได้เข้าใจง่ายของแม่ ตัวการ์ตูนที่จะใช้ ก็คือตัวไดโนเสาร์ ตั้งชื่อ class นี้ว่า Dino ใช้ตัวใหญ่ไง ใช้ตัวใหญ่นะคะ  ในช่อง Opject ในวงเล็บพิมพ์อะไร ในช่อง Object จะต้องพิมพ์ว่า pygame.sprite .Sprite): นะคะ พิมพ์ pygame.sprite.sprite ในช่อง Object นะคะ พิมพ์ pygame กด Enter .sprite s-p-r-i-t-e spirte .sprite 2 ครั้งนะคะ Sprite โอเคไหม ในช่อง Object พิมพ์อย่างนี้นะคะ .spirte .spirite s-p-risprite ดูดี ๆ ให้ขยายอีกไหม กลัวเห็นไม่ชัด โอเคนะคะ ได้บรรทัดที่ 1 แล้ว คือ ประกาศ... สร้าง class ชื่อว่า dino นะคะ มี Object pygame.sprite.Sprite ก็คืออันนี้ให้ดูชื่อ ต่อไปสร้าง Method ก็คือตรง Definition  นะคะ นะคะ init_() Method ชื่อ init นะคะ มาดูที่ตัวนี้มันสร้างแล้วนะคะ Method.init นี่ ตรงนี้ค่ะ self นะคะ ตรง self นี่ ตรงเงื่อนไขข้างในนี่ ที่เราจะใส่ ก็คือ selff แล้วตามด้วย แล้วก็ตาม pos_y คั่นด้วยcomma self ตรงตัวที่ 2 ให้เปลี่ยน pos pos ตรงนี้ก็คือ position หรือตำแหน่งนั่นเองนะคะ ตรง org นี่เปลี่ยนเป็น pos ค่ะ p-o-s แล้วก็x ก็คือบอกว่าเราจะบอกตำแหน่งของ position x แล้วก็วรรค position y มาจาก position ตัวเล็กนะคะ ใช้ตัวเล็ก ไม่ได้ใช้ตัวใหญ่ เมื่อใดที่บอกให้ใช้ตัวใหญ่ค่อยใช้ตัวใหญ่ ตอนนี้สร้าง method แล้ว method.init โดยบอกตำแหน่งหรือพิกันของแกน x แล้วก็แกน y self นี่นะคะ บรรทัดต่อมา ตรงนี้ super เปลี่ยนเป็น super.init พอ ลบไอ้นี่ออก นะ ดูนะคะนี่ เห็นไหม ลบเยอะเกินขอโทษ ลบเยอะไปนิดหนึ่ง มือไวไปหน่อย ย้อนกลับคืนได้  Undo นะคะ ลบไอ้ข้อความที่อยู่ในวงเล็บออกพอโอเคไหมคะ เอาแบบนี้ ดูดี ๆ อันไหนไม่ใช้ลบออกนะคะ self =arg นี่ เราต้องลบออก อันนี้ comment เดี๋ยวเราจะเอาไปไว้ข้างบนนะ เดี๋ยวจะใส่ Comment ไว้นะคะ ว่าเราจะได้รู้ว่าตรงนี้เป็น class สร้าง class ก็เลยจะอธิบายเพราะว่าตอนนี้เราจะสร้าง class ไดโนเสาร์นะคะ สร้าง class Dino สร้างคลาสสำหรับตัวไดโนเสาร์เดินนี่นะคะ สร้างไว้ตรงนี้ ยังไม่เสร็จหรอก แต่ระบุไว้ก่อน มันจะต้องมีตำแหน่งที่จะต้องวางแน่นอนล่ะ อันดับต่อไป ได้ class แล้ว (พี่อี๊ด) อาจารย์ได้ยินไหมคะ ทางล่ามไม่ได้ยินเสียงอาจารย์ค่ะ เป็นอีกแล้วหรือ อาจารย์ได้ยินเสียงล่ามไหมคะ ได้ยินเสียงล่ามไหมคะ ไม่ได้ยินเสียงพูดค่ะ (พี่การ์ตูน) อาจารย์ได้ยินเสียงล่ามไหมคะ (เจ้าหน้าที่) ได้ยินค่ะ พี่ได้ยินไหมคะ ได้ยินค่ะ ๆ (พี่อี๊ด) ล่ามไม่ได้ยินเสียงสกลค่ะ ล่ามไม่ได้ยินเสียงฝั่งอาจารย์เลยค่ะ (อาจารย์สุธิรา) เป็นเหมือนเดิมอีกแล้วหรือ (อาจารย์สุธิรา) เป็นเหมือนเดิมเลย สอนไปได้ 1-2 ชั่วโมงแล้วฝั่งทางโน่นจะไม่ได้ยินเสียง ไม่ได้ยินเสียงอาจารย์อีกลแล้ว เป็นกับอะไร เทอมนี้แปลก แต่ล่ามไม่ได้ยินน่ะ เป็นเหมือนครั้งก่อนเลยค่ะ สอนไปได้ชั่วโมงถึง 2 ชั่วโมงแล้วไม่ได้ยินเสียงกัน ทีนี้พอใครได้บรรทัดนี้นะ ก็คือบรรทัดนี้จะให้เราไปเรียกเปิด เป็นคำสั่ง ให้ไปเรียกเปิดไฟล์ภาพน่ะมาใช้งาน ไฟล์ภาพเพราะฉะนั้น บอกแล้วว่าชื่อ ชื่อตรงนี้นะคะ ให้เด็ก ๆ ดูในโฟลเดอร์ตัวเอง ในเครื่องตัวเอง ก็คือรูปก็คือมาชื่ออะไร ไม่ใช่มาตามอันนี้ ไม่ใช่ ให้ดูชื่อที่อยู่ในเครื่องตัวเองนะ ชื่อรูปของตัวเองนะคะ เพราะฉะนั้น จำนวนรูปมีกี่รูป มี 1, 2, 3, 4, 5 ก็ต้อง Copy แล้ววางลงไป 5 อัน ดูนะคะ เดี๋ยวทำให้ดู เมื่อทำแถบสี เพื่อจะ copy แล้วก็กด Ctrl + C เสร็จแล้วก็ Ctrl + V วางไป ขอโทษมือไวไปหน่อย วางแล้วก็ Enter แล้วก็วาง Enter แล้วก็วาง เดี๋ยวสิมันยังไม่เรียก... คำสั่งมันยังไม่ครบเลย จะ run แล้ว รอก่อนสิ 5, 6 ครบหรือยัง 7, 8 มันเพิ่งบอกให้มันไปโหลดนะ แต่ยังไม่ได้บอกให้มันไปแสดงเลย ของแม่มี 10 รูป มีกี่รูปนะ 1, 2 เราก็มี 10 นะคะ เราก็จะเอาชื่อตามนี้มาลงไป ก็แก้แค่ชื่อเห็นไหมคะ นะคะ อันดับแรก ก็คือเราจะไปตรวจของเครื่องอื่น ก็แก้ชื่อ ตัวเองใช้ชื่อนี้หรือเปล่า self แล้วก็ . sprites พี่อี๊ดได้ยินไหมคะ ได้ยินแล้วไหมคะ (พี่อี๊ด) ได้ยินค่ะอาจารย์ (อาจารย์สุธิรา) โอเคได้ยินแล้วนะ เป็นอะไรอีกนี่ โอเค บางคน... บางคนก๊อบแล้วก็วาง แล้วก็ชื่อครบหมดแล้วนะคะ แต่บางคนยังไม่ได้ class เลยนะคะ class อยู่ตรงนี้นะ บางคนยังไม่ได้ class นี่นิวเห็นไหม สร้างบรรทัดที่ 4 ก่อน พิมพ์ พิมพ์ class ก่อน ของนิวยังไม่ได้ class นิวพิมพ์ class c-l-a-s-s เดี๋ยวกด class แล้วมี new class ขึ้นมากด Enter จะได้ได้รูปแบบ โอเคไหม ตรง class name สีเขียว ๆ ชื่อไดโนน่ะ ก็คือชื่อตัวการ์ตูนของนิวชื่อว่าอะไร ไปดูสิ ชื่อตัวการ์ตูนตัวเองน่ะ อย่าลืมว่าต้องพิมพ์ตัวพิมพ์ใหญ่นะคะ ชื่อตัวอักษรตัวแรกต้องเป็นตัวพิมพ์ใหญ่ ใช้ตัวพิมพ์ใหญ่นะลูก ชื่อ class ตัวอักษรตัวแรกต้องใช้ตัวพิมพ์ใหญ่ เสร็จแล้วเมื่อได้ชื่อ Class แล้ว ในวงเล็บ ในวงเล็บให้พิมพ์ Object ว่า pygame.sprites.Sprite นะคะ คนอื่นที่พิมพ์ตัวอื่นไปแล้วเช็ก sprite ดี ๆ นะคะ sprites ในที่เราจะไปโหลดภาพมันจะต้องเติม S นะคะ ต่างกันนะ ต่างกันกับใน Object นะ ต่างกันนะ ต้องเติม s นะคะ เช็กด้วย โอเคหรือยัง class เสร็จหรือยัง sprite แล้วใช่ไหม โยโกะทันหรือเปล่าลูก ทันเปล่า ถึงบรรทัดไหนแล้ว มุกไปดูสิ มุกไปดูช่วยสิ ใครที่เสร็จบ้างแล้วช่วยกันดูนะคะ จุดที่จะต้องเช็กนะคะ ก็คือชื่อ ชื่อตัวการ์ตูน ตรงที่แม่พิมพ์น่ะ แม่ก็พิมพ์ชื่อตัวการ์ตูนแม่ใช่ไหม แม่ใช้ Dino หมายเลข 1 ก็คือ ท่าของไดโนเสาร์  ท่าที่ 1นะ เพราะฉะนั้น ถ้าเด็ก ๆ ไม่ได้ตั้งชื่อ DINoชื่อตรงนี้ชื่ออะไร ก็พิมพ์ตามชื่อของตัวการ์ตูนเรานะคะ พอได้บรรทัดแรกนี่ บรรทัดที่ 2 ที่ 3 ก็ใช้วิธีก๊อปฯ แล้วก็บอกเป็นชื่อตัวการ์ตูนตัวที่ 1 ตัวที่ 2 ตัวที่ 3 ต่อไปจนถึงตัวสุดท้ายที่เด็ก ๆ มี ถ้าใครมี 5 ตัว มันก็จะถึง 5 ใครมี 10 ก็จะ 1 - 10 นะคะ เพราะฉะนั้น ดูโฟลเดอร์ที่ตัวเองไปดาวน์โหลดรูปมาน่ะลูก ดูว่ารูปที่เราใช้มีกี่ตัว เราก็วาง เราก็วางคำสั่งนี้ให้เท่าจำนวนรูป นะ เราค่อยมาแก้แค่ลำดับที่ของรูปน่ะค่ะ กับชื่อรูปแค่นั้นเอง ไม่ต้องไปพิมพ์ใหม่ เพราะพิมพ์ใหม่พิมพ์ตกเพราะฉะนั้น ต้องพิมพ์ทีเดียวแล้วก๊อปฯ เอา เชอร์รี่ไปไหนน่ะ เชอร์รี่ไม่มาหรือ โอเคไหม เอ็ม ๆ เอ็มกับดอมพิมพ์ต่อลูกเห็นหรือเปล่า รูปสุดท้าย ใครที่ครบ พิมพ์ต่อนะคะ บรรทัดต่อไปเห็นไหม อีก 1, 2, 3, 4 4 บรรทัด ใครที่เสร็จแล้ว รูปสุดท้ายของเราอยู่ตำแหน่งไหน เราก็พิมพ์ self.current.sprite ตัวนี้ที่เรียกใช้ไม่มี s นะ อย่าสับสนนะ = 0 มันต้องให้มันเคลียร์น่ะลูก เคลียร์ไปโหลดมาทุกครั้งนะคะ เพราะฉะนั้น ก็คือบอกให้มันรู้ว่า sprite ที่เราจะใช้นี่ clear เป็น 0 เสมอ แล้วก็self.image = self.sprite ในวงเล็บเรียกใช้ self เมื่อใส่รูปครบหมดนะ เรามาพิมพ์โค้ดต่อก็คืออีก 4 บรรทัดนี้ พิมพ์ต่ออีก 4 บรรทัดนี้ พิมพ์เลยค่ะ ก็คือจะเป็นโค้ดที่สำหรับสร้าง Animation ก็คือสั่งให้มันเคลื่อนไหว มันจะเคลื่อนไหวตามโค้ดนี้นะคะ self.current_sprite= 0 ขอโทษ ขอโทษทีเอาใหม่ ๆ เดี๋ยว Freez หน้านั้นให้ก่อน อันนี้จะเห็นชัดหรือเปล่า self.current รีโมทไปไหนนะ 4 บรรทัดนี้นะคะ ก็คือจะเป็น... พี่อี๊ดได้ยินไหมคะ ไม่ได้ยินอีกแล้ว (พี่อี๊ด) ได้ยินค่ะ (อาจารย์สุธิรา) อ๋อ ได้ยินอยู่นะคะ โอเค บรรทัดแรก self.current_sprite กำหนดให้มันเซ็ตค่าเริ่มต้นน่ะค่ะ เริ่มที่ 0 เสมอ เสร็จแล้วเรียกใช้โมดูล image เห็นไหมคะ ก็คือตาม current_sprite เสร็จแล้วกำหนดพื้นที่ rac มาจาก ที่เราจะเอารูปเราไปวางนั่นเอง top left เท่ากับอยู่ด้านบนซ้ายนะคะ =  pos_x, pos_y ก็คือตำแหน่งPosition y ให้นึกถึงนะ หน้าจอมีแกน x แกน y นะคะ ยังไม่จบ ไปต่อ เกม 1 เกม เขียนโค้ด 20 กว่าบรรทัดมันไม่ใช่ไง นี่ดูสิเพิ่งได้กี่บรรทัดเอง ใช่ไหม ๆ นะคะ สิ่งที่เราจะมา Coding ต่อไป เมื่อกี้มีการ update อะไร update class ใช่ไหม สร้าง class ขึ้นมาใช่ไหม สร้าง class ขึ้นมา เราก็จะมาสร้างส่วน ก็คือเมื่อมันมีการอัปเดตนี่ ภายใน loop น่ะ ก็ต้องมีโค้ดเพื่อที่จะสร้างตัว sprite แล้วก็ขั้นตอนนี้ มันจะเป็นเอา Sprite ให้รวมมาอยู่ใน Group เดียวกันน่ะค่ะ ก็จะเริ่มที่เขียน Comment ก่อร ว่าเราจะสร้าง sprite แล้วก็ group นะคะ พิมพ์ภาษาไทยก็ได้ สร้าง sprites สร้างภาพต่อเนื่องแล้วก็จัดกลุ่ม มันจะอยู่ต่อจากบรรทัดที่ loop น่ะ ที่เรามี loop เพราะฉะนั้น เด็ก ๆ จะต้องไปบรรทัดที่เท่าไรคะ loop เราอยู่ตรงนี้ใช่ไหม while เพราะฉะนั้น จะต้องเป็นบรรทัดนี้นะคะ ให้เด็ก ๆ ใส่ Comment จอค้างหรือขอโทษ โอเคไหม โอเค เด็ก ๆ ไปที่บรรทัดที่เห็นไหมคะ loop การทำงานเห็นไหมคะ เราลงมาอยู่ที่บรรทัดที่ตรง sys.exit.exit ตรงนี้เราจะอัปเดต class เมื่อกี้ที่เราสร้างนะคะ Enter ลงมาสัก 2 บรรทัด อยู่บรรทัดที่ 46 นะคะ แล้วเราจะเริ่มพิมพ์โค้ด moving เอ้ยยังไม่พิมพ์โค้ด พิมพ์ comment ก่อนนะคะ พิมพ์ Comment ก่อน เพราะเราจะได้รู้ว่าตำแหน่งที่เราทำไว้ ใส่เครื่องหมาย # เราระบุลงไปว่าตรงนี้ ก็คือสร้าง Comment บอกไปว่าเราจะสร้างภาพต่อเนื่อง และจับกลุ่มด้วย เราทำภาพต่อเนื่องนะคะ แล้วก็จัดกลุ่มให้มันนะคะ ได้ Comment แล้วนะคะ ทีนี้เราจะเริ่มโค้ด พิมพ์คำว่า "move" ค่ะ ลืมเปลี่ยนภาษา moving_sprites เติม s นะคะ sprite พิมพ์ บรรทัดแรกพิมพ์ m-o-v-i-n-g_sprites นะคะ เติม s ใช่ไหม เติม s หรือไม่เติม s เติม s นะคะ แล้วตามด้วย = pygame.sprite.Group แล้วก็วงเล็บเปิด - ปิด py เจอ py แล้วกด enter pygame.sprites sprite เติม s ไหม sprite ไม่เติม s นะคะ เพราะฉะนั้น พอพิมพ์ sprite นี่ พอเจอ sprite ที่ไม่เติม s .Group แล้วก็วงเล็บ ดูนะคะ  มีความแตกต่างกันนะ คนละคำสั่งนะ ใน pygame.sprite อันนี้ไม่มี s แล้วก็ บรรทัดต่อไป คำสั่งต่อไป สร้างตัวแปรเพื่อจะเรียกใช้ class ที่เราสร้างนะคะ ย้อนกลับไปดูคลาสที่ตัวเองสร้าง ตรงนี้ ตรงสีฟ้า ๆ คือ ชื่อ class ที่เด็ก ๆ สร้าง เพราะฉะนั้น เด็ก ๆ ต้องย้อนกลับไปดูชื่อ class ของตนเองนะ ไม่ใช่มาพิมพ์ Dino Dino เหมืนแม่ ต้องดูชื่อ class ที่ตัวเองสร้างไว้ที่อยู่ด้านบนน่ะ ชื่อตัวนี้นะคะตัวนี้ก็คือชื่อตัวแปร ที่เอาไว้เรียกคลาสนั้น ใช้ชื่อมันก็ได้ แต่ใช้เป็นตัวเล็กแทนเห็นไหมนะคะ 10,10 นี่คืออะไร คือ ตำแหน่งที่เราจะวางไอ้ตัวรูปนั่นเองเห็นไหมคะ ก็คือใน class Dino position x position y ก็คือ 40 แล้วตอนจะเรียกโมดูล moving_sprites ตัวแปรนะคะ เรียกชื่อตัวแปรไม่ได้เรียก class นะ ดูชื่อดี ๆ เห็นไหม ชื่อจะเป็นตัวเล็ก เราจะเรียกใช้ตัวแปรที่เราประกาศ ชื่อมันจะสอดคล้องกัน มันจะขึ้นคู่กันนะคะ โอเค ลงมือ ไม่เป็นไร เดี๋ยวเดินไปดู เดี๋ยวจะเช็กด้วย ดูนะคะ ดูชื่อ class ของตนเองนึกออกนะ ย้อนกลับไปดูได้ ชื่อ class ตัวเองตั้งไว้ว่าอะไร ให้เอาชื่อ class น่ะมาใช้ มาเรียกใช้นะคะ อันนี้คือ.. dino ตัวเล็ก คือ ชื่อตัวแปรที่ตั้งขึ้นมาเพื่อเรียกใช้งาน class ที่เราสร้างนะคะ เมื่อประกาศตัวแปรเสร็จแล้ว เรามาใช้คำสั่ง moving.sprites.add ใช่ไหม add นะคะ แล้วก็ตามด้วยวงเล็บ แล้วก็ad นะคะ ตัวแปรที่สร้าง ก็คือตัวนี้ เดี๋ยวจะไปเดินเช็กว่าตัวเองใช้ชื่อ class ถูกหรือเปล่า ดูนะคะ จุดที่เด็ก ๆ จะต้องดู ก็คือตรงนี้หมายถึงชื่อตรงตำแหน่ง Dino ชื่อสีฟ้า ๆ นี่ ชื่อมันจะตรงกับชื่อ class ที่ให้ตั้งเมื่อกี้นี้ ก็คือตรงนี้ เห็นไหมคะ ตรง class นี่ ชื่อมันจะตรงกัน ส่วนตรงนี้ส่วนชื่อที่เป็นตัวแปรนะคะ เราก็จะไม่พิมพ์ตัวใหญ่ เราก็พิมพ์เป็นตัวเล็กแทน จากตัวใหญ่เราก็เปลี่ยนเป็นตัวเล็ก เพื่อให้รู้ว่านี่คือตัวแปร ไม่ใช่ชื่อ class ไม่ใช่ชื่อ class เพราะในคอมพิวเตอร์นี่ ชื่อภาษาอังกฤษนี่ ชื่อเหมือนกันเลย Dino เหมือนกันแต่ชื่อตัวเล็กกับตัวใหญ่คนละชื่อกัน มันจะเป็นคนละตัวกันนะคะ โอเคนะคะ เราได้ส่วนของที่เราจะสร้าง groupสร้างภาพต่อเนื่องแล้ว แล้วก็ Group แล้ว เหลือแฝดนี่ แฝดยังไม่เสร็จ พี่แฝด ๆ ดูนะคะ ชื่อ ๆ ชื่อตรง class เวลาตั้ง ตัวแรก ตัวอักษรตัวแรกน่ะ นี่พี่แฝดต้องตั้งเป็นตัวใหญ๋ ต้องเป็นตัวใหญ่นะคะ ต้องเป็นตัวใหญ่ เพราะฉะนั้น ของแฝด groot ก็ใช้ ตัว G ตัวใหญ่ ไม่ใช่ g เล็ก โอเคนะ เพราะฉะนั้น ตรงพอตอนสร้าง sprite ตรงนี้ชื่อตรงนี้แฝดจะต้องไปเอาชื่อที่แฝดสร้าง ต้องไปดูชื่อคลาสของตัวเอง โอเคไหม Groot ใช่ไหม Good ตัวใหญ่ใช่ไหม สีฟ้า ๆ เป็น Goodตัวใหญ่ ตรงตัวแปรใช้ good ตัวเล็ก โอเคไหม แก้แค่ตรงนั้นล่ะ ก็ใช้ได้ โอเคนะ ทีนี้เราจะกำหนดฟังก์ชันนะคะ เพื่อให้ตัวการ์ตูนเรามันเคลื่อนไหวได้มันวิ่งนั่นเอง เราจะต้องทำการอัปเดตมันด้วยนะคะ พิมพ์ที่บรรทัดไหน ไปที่บรรทัดที่ต่อจาก... นี่นะคะ ต่อจากนี้ ให้ย้อนขึ้นมานะคะ ต่อจาก self.rect กด Enter ลงไป 2 ครั้งแล้วพิมพ์ แฮชแท็กไว้ เราจะกำหนดฟังก์ชัน run กับ update นะคะ เพราะฉะนั้น ตรง hastag เราจะพิมพ์ว่าฟังก์ชัน run และ update นะคะ และ และฟังก์ชันอัปเดตนั่นเอง จะได้รู้ว่าส่วนของฟังก์ชัน run อยู่ตรงไหน ฟังก์ชันอัปเดตอยู่ตรงไหนนะคะ คำสั่งที่ใช้ในการสร้างฟังก์ชันนะคะ ก็คือ def แล้วก็ตามด้วยชื่อฟังก์ชันที่เราจะกำหนดนะคะ def นะคะ เริ่มโดย ๆ กด Tab เข้าไป 1 ครั้งค่ะ แล้วก็พิมพ์ d เอ้ยขอโทษ พิมพ์ def เห็นไหม ตรงคำว่า def จะขึ้นคำว่า defdefmethod เราจะเลือก deffunction function โอเค ตรงคำว่า function function เข้าไปแทนนะคะ ก็คือ run ใช่ไหมคะ ตัวแรก คือ run ในวงเล็็บใส่ self เข้าไปนะคะ ในวงเล็บใส่ self ได้เลย ตรง class ก็คือส่วนที่จะเป็ฯข้อกำหนดหรือเงื่อนไข ก็พิมพ์ self s-e-l-f แล้วกด Enter self. .run_animation นะคะ .run นะคะ _วรรคแล้วใส่เครื่องหมายเท่ากับ 2 ครั้ง ถ้าอยู่ใน function เครื่องหมายเท่ากับจะใส่ 2 ครั้ง แล้วก็วรรค กดวรรค กดวรรค พิมพ์ว่า True ให้มันเช็กก่อนว่าถ้า run นี่เป็นจริงถึงจะ run นะคะ ก็คือเงื่อนไขเป็นจริง True True ตัวใหญ่ True ใหญ่นะคะ T ตัวใหญ่แล้วกด Enter เพราะคำว่า True จะขึ้นมา T เห็นไหมคะ จะเห็นคำว่า Tool กด Enter ก็คือบอกให้รู้ว่าฟังก์ชันนี้มันจะ run ก็คือไอ้ตัว animation เราจะวิ่งเมื่อเงื่อนไขเป็นจริง สิ่งที่เราจะทำต่อมา เราจะทำฟังก์ชันที่อัปเดตเงื่อนไขนี้ run นะคะ ก็คือเมื่อมันเป็นจริงแล้ว ทำทุกขั้นตอนแล้วนี่มันจะต้องให้มันไปอัปเดต กด Enter เว้นลงมา 1 บรรทัดนะคะ แล้วกดย้อนกลับคืน กด backspace 1 ครั้ง ฟังก์ชัน update จะอยู่ตรงกับ Function run นะคะ แล้วเลือก def function เหมือนเดิม เห็นไหมคะ จะตรงกัน แต่ตรงชื่อฟังก์ชันเปลี่ยนจาก run เป็นอะไร update นะคะ update ค่ะ พิมพ์ update ในวงเล็บใส่... พิมพ์ self l-f-t s-e-l-f-t s-e-l-f ขอโทษ ๆ แล้วก็กด speed ไม่ใช่ . สิ comma ใช่ไหม ไอ้มุกตาไวself นะคะ แล้วก็ ,speed ตรง pass จะกำหนดเงื่อไข ใช้ if นะคะ if พิมพ์ if แล้วก็เรียกใช้ self.run_animation เข้ามาช่วยi เลือก if อันแรกเลย if เห็นไหมมันจะมีส่วนที่เราจะต้องมีคนเขียนหรือกรอกมาให้เราพิมพ์หรือพิมพ์ if if self.run_animation = full เห็นไหมคะ .run ให้เลือกเป็น run_animation  ใส่เครื่องหมายเท่ากับ 2 ครั้ง แล้วก็ T ใหญ่ แล้วก็เลือก True สังเกตถ้าพิมพ์ตาม Sublime น่ะ ไอ้ตัว colon อะไรมันก็จะขึ้นมาให้ แต่ถ้าพิมพ์เองมันจะไม่ขึ้น ดูด้วย ได้เงื่อนไขที่ 1 แล้วนะคะ ให้เช็กว่าถ้ามีการ animation มันทำงานนี่ ปุ๊บนะคะ มาดูบรรทัดต่อไป เราก็จะให้ self.current_sprite + = speed เพิ่มค่าเข้าไป จะอยู่ตรงตำแหน่ง class เลยนะคะ เห็รนไหน เปลี่ยนเป็น self แทนself.current.sprite เลือก current.sprite เด็ก ๆ ดูดี ๆ พอพิมพ์ปุ๊บ เลือกตัวนี้+ ใส่เครื่องหมาย + แล้วก็ = นะคะ เลือก speed นะคะ พิมพ์ s แล้วเลือก speed มาทำเงื่อนไขเพื่อสร้าง loop ต่อไปนะคะ ทำเงื่อนไขเพื่อสร้าง loop ต่อไปนะคะ เงื่อนไขต่อไป พอพิมพ์ speed เสร็จแล้ว ให้เด็ก ๆ พิมพ์ if if เลือก if condition กด เลือก if condition แล้วกด Enter จะได้ลักษณะของ Coding นะคะ Templat Coding if ขึ้นมา if function แบบนี้ หลังคำสั่ง if ใส่ int integer i-n-t inditure นะคะ หมายถึง intiger ตามด้วยเครื่องหมายวงเล็บ ใช่ไหม ๆ ถูกแล้ว แล้วก็เรียกใช้ module self.current พิมพ์ self เลือก self.c ให้เลือก curren_sprite จะได้ไม่พิมพ์ผิดนะคะ ให้เลือกจากที่ sublime เลือกมาให้ หลังวงเล็บ ใส่เครื่องหมายมากกว่าหรือเท่ากับ วรรคก่อนนะคะ วรรค แล้วก็เครื่องหมายมากกว่าหรือเท่ากับ len len พิมพ์เอานะคะ อันนี้พิมพ์เอา l-e-n len แล้วตามด้วย (self.sprite)ซวงเล็บเปิดวงเล็บปิด นะคะ แล้วก็พิมพ์ self แล้วก็พิมพ์ .spritesprite มี s ไหม sprites มี s นะ เลือก sprites มี s เด้อ ให้เลือกหา sprites เลื่อนลงมาหา sprites ที่มี s นะคะ โอเค ดูนะคะ ถ้าเลือก if ฟังก์ชันมันจะมี Colon ปิดท้ายให้ด้วย ตรงส่วนต่อมา บรรทัดต่อมานะคะ เราจะสั่งให้ slef current sprite = 0 เท่ากับ 0 แล้วก็ self.run.animation == False = False เพราะตรงนี้คือค่านะคะ เป็นจริงเป็นเท็จเป็น 0 self นะคะ เลือก current sprites ใส่เครื่องหมายเท่ากับ 0 แล้วก็ self อีก .current_sprite.run run animation นะคะ เลือก run_animation = False F ใหญ่ lan ถูกเปล่า F-a-l-s-e อันนี้ส่วนของฟังก์ชันอัปเดตนะคะ ก็คือตัวนี้ แล้วเว้น 1 บรรทัดนะคะ นะคะ เพื่อเรียนโมดูล self image พอพิมพ์ False เสร็จ กด Enter ลงไป 1 บรรทัดนะคะ แล้วกด Backspace คืน 1 ครั้งให้มันตรงกับ if if ตัวที่อยู่ในif ตัวที่ 2 น่ะ ไม่ใช่ if. if แล้วก็ตามด้วย int น่ะ ให้มันตรงกับ if int นะ ดูตำแหน่งดี ๆ นะ ตรง run นะ ตัวที่ 1 ไม่ใช่ตัวที่ 2 เพราะฉะนั้น ก็ Backspace ย้อนอีกทีหนึ่งนะคะ ก็จะเป็นตรงนี้ self พิมพ์ self ค่ะ self กด Enter self. อะไร .image = self.spritessprite self.image i ปุ๊บ แล้วก็ไปหา image กด Enter = self อีกแล้วกด Enter sprite ใช่ไหม มี s ไหมล่ะ sprites sprites นะคะ sprites เติม s sprites นะคะ เพราะฉะนั้น เลือก sprites ที่เติม s แล้วก็ปีกกาใหญ่ค่ะ ในปีกกาใหญ่ใส่อะไร ใส่ int พิมพ์ int นะคะ int แล้ว... เลือกก็ได้ พิมพ์ int แล้วเจอ int กดเลย แล้วก็วงเล็บ ในวงเล็บใส่ current_sprite ค่ะ ใส่ current_ถูกไหม โอเคนะคะ สำหรับบรรทัดนี้ ส่วนของฟังก์ชัน run กับอัปเดต เดี๋ยวรู้ผลตอน run นี่ล่ะ ตรงใน loop ต้องไปกำหนดค่าให้คีย์บอร์ด เพื่อเราจะให้ Keybord เป็นตัวควบคุมน่ะค่ะ มันจะอยู่ตรงบรรทัดที่ อยู่ตรงคีย์บอร์ดนะคะ นี่ โอเคไหม บรรทัดนี้ต่อจากตัวนี้ ตำแหน่งเห็นไหมคะ y run นี่ นี่ ตรงนี้ เห็นหรือเปล่า ๆ โอเคนะ อยู่ตรงกับ if if event type เพราะฉะนั้น เช็กตำแหน่งด้วย กด Backspeac ย้อนไป 1 ครั้งให้ตรงกับ if event.type นะ คำสั่งนั้น ก็คือ key key ในที่นี้ก็คือคีย์บอร์ดนั่นเองนะคะ ประกาศตัวแปรชื่อ keyboard ก็คือ Keyboard แล้วก็ตามด้วยเครื่องหมาย = โอเค เริ่ม เริ่มด้วยการประกาศตัวแปรนี่ key แล้วเติม S เพราะอะไร ก็คีย์บอร์มีหลายตัวก็เลยใช้ keys นะคะ วรรคเครื่องหมายเท่ากับ key = py เลือก pygame.keys ค่ะ keys ที่เราขึ้น แล้วก็ . อะไรอีก getget press get_pressed() ก็คือเป็นรับค่าน่ะค่ะ การรับค่าจากคีย์บอร์ดนั่นเองก็คือการกด บอกให้รู้ว่า เมื่อเรียกใช้โมดูล keys แล้วนี่... เราต้องแก้นะในโมดูลน่ะ key ไมม่.get ใช่ไหม get_pressed() p-r-e-s-s มี ed ด้วย แล้วก็วงเล็บ ประกาศตัวแปรชื่อว่า keys ไปที่module pygame keyboard นั่นเอง คีย์บอร์ดใน pygame มานะคะ โดยให้ทำการรับค่า บรรทัดต่อมา ใส่เงื่อนไขว่าถ้า key.pygame.k_RIGHT หมายถึงปุ่มซ้ายน่ะ ปุ่มไปทางซ้ายน่ะ if นะคะ if function นะคะ keys นะคะ เลือกตัวแปรนี้มา เรียกตัวแปรนี้มา เรียก keay if keys เท่ากับหรือเปล่า ไม่ใช่เท่ากับ วงเล็บ วงเล็บนี่ ไม่รู้จะเรียกวงเล็บอะไร สี่เหลี่ยมสิ มันเยอะจน... เอาตามนี้ pygame ปีกกาที่มันมีไอ้นั่นน่ะ นั่นล่ะ ถึงได้บอก โคตรสับสน มีทั้งปีกกา ทั้งวงเล็บ เอาวงเล็บสี่เหลี่ยมน่ะง่ายสุด pygame อะไรนะลืมเลย pygame.K_right pygame.K K ใหญ่นะคะ แล้วก็ตามด้วย _ตัวนี้ใหญ่หมดเลย มันเป็น ตัวนี้มันเป็นฟังก์ชันนะคะ K_RIGHT นี่ K มาจาก key น่ะค่ะ วงเล็บนี่เป็นเรียกใช้ฟังก์ชันนะคะ เสร็จแล้ว ตรงนี้ใส่เรียกใช้ แล้วเราจะเรียกอะไร เรียกตัวแปร dino มาวิ่ง ตัวแปรนะคะ ตัวนี้คือตัวแปรที่เราสร้างสร้างไว้เก็บไอ้ตัวนี้เรา จำได้นะ นี่ ๆ ๆ ก็คือตัวนี้ เราจะเรียกตัวนี้มาเห็นไหมคะ ก็คือตัวนี้นะคะ ตัวนี้ก็คือตรงนี้ เพราะฉะนั้น เด็ก ๆ ก็ย้อนมาดูตรงนี้ได้ ตรงที่สร้างภาพต่อเนื่องค่ะ มาจากชื่อตัวนี้นะคะ ดูนะคะ ชื่อตัวแปรนี้ มาจากชื่อตัวแปรที่เรากำหนดในสร้างภาพต่อเนื่องโอเคนะ ไม่ใช่แม่พิมพ์ Dino ก็พิมพ์ dino ตามแม่ บอกแล้วนะให้ดูของตัวเองที่สร้างในโปรแกรมของตัวเองด้วย dino.run() ลืม . ไปได้อย่างไรนี่ .run นะคะ เสร็จแล้วให้กด Ctrl+B ลองกดดู ลองกดดู ใครคีย์ถึงบรรทัดสุดท้ายนี่ให้กด Ctrl + B ดูนะคะ อันดับแรก กด save ด้วย เสีย 1 ครั้ง เสร็จแล้วก็กด Ctrl + B บิว ๆ มันขึ้นว่าอย่างไรลูก เช็กสิ sprite ตรงในนี้ก่อนอันดับแรก ถูกไหม ถูกไหม โอเค ต่อไป sprite ที่ 3 current sprite แล้ว self sprite current_sprite ไม่มี s โอเค เดี๋ยวเด้อ ย้อนไปดูตำแหน่ง clock ก่อนนะ ดูที่การแสดงผล หน้าจอ เราวาง ... ผิด ไหม น่าจะอยู่ตรง... เดี๋ยวกำลัง keys ผิด เปลี่ยนเครื่อง หน้าจอไม่ขึ้น การแสดงผลจะอยู่ไหน รู้แล้ว เราลืมเรียกใช้ moving_sprites . movingsprite.update นี่ ต้องเรียกอีกสักหน่อยนะคะ อีกสักหน่อย ๆ moving เหมือนกัน moving sprite.มันจะต้องอยู่ตรงกับ for ใช่ไหม อยู่ตรง loop for ใช่ไหม ล่ามไม่ได้ยินเสียงสกลฯ เลยค่ะ