(อาจารย์) สวัสดีค่ะ พร้อมเรียนหรือยัง ก่อนอื่นเปิด Sublime Text เปิดอะไรอีก เปิด Googleวันนี้เปิดเพิ่มอีกตัวหนึ่ง เปิดโปรแกรม Paint ด้วย ให้เปิดโปรแกรม วันนี้เปิด 3 อย่างนะ เปิด เปิด Google Chrome ต้องใช้ Paint นะคะ หาโปรแกรม paint ด้วย สัญญาณภาพฝั่งนู้น ฝีางโน้นกระตุก วันนี้ ๆ สำหรับวันนี้เราจะมาทำAnimation ทำให้ตัวเกมเรามันเป็นการเคลื่อนไหวแบบ Animation นะคะ คือ ในครั้งก่อนน่ะยังไม่ได้เป็น Animation แล้วให้ Candy มันตกใช่หรือเปล่า ภาพเคลื่อนไหวแบบนั้นคนละแบบนะคะ อันนั้นแค่ แต่ทีนี้ สิ่งแรกที่เราจะต้องทำนะคะ เดี๋ยวขอข้ามตัวนี้ไปก่อน ต้องมาที่ตัวนี้ก่อนนะคะ คือ ต้องรู้จักตัวนี้ก่อน sprite Sheet Sprite Sheet คืออะไร ให้นึกถึง image หรือภาพตัวเดิมน่ะ มันก็เป็นรูป 1 รูปใช่ไหมคะ แต่ sprite Sheet น่ะ ก็คือภาพมันจะมีความต่อเนื่อง หรือถ้าแปลด้วยตัวแปลภาษา ถ้าแปลด้วยภาษาไทยมันจะขึ้นว่า "ภาพต่อเรียง" หรือ "ภาพที่มันเรียงต่อกันไป ให้นึกถึงการ์ตูนในสมัยก่อน เวลาเขาเอาการ์มาทำเป็นเคลื่อนไหวได้น่ะ ก็คือภาพมันจะต้องต่อเนื่อง ตัวอย่างข้างบนอาจจะเห็นไม่ชัด ให้ดูที่ตัวอย่างข้างล่าง ภาพไดโนเสาร์ตัวนี้เห็นไหมคะ ภาพแรก พอภาพที่ 2 ลักษณะของเท้าใช่ไหมมันเปลี่ยน ภาพที่ 3 ทั้งเท้าทั้งแขนเปลี่ยนไปใช่ไหมคะ เห็นไหมคะ ก็คือภาพที่มันเป็นภาพที่วาดขึ้นมาแล้วมีกระบวนการภาพต่อเนื่อง ถ้าให้นึกถึงการถ่ายรูป ก็คือถ่ายภาพที่หลาย ๆ ช็อตต่อ ๆ กัน มันก็จะพอเอามาเล่นต่อ ๆ กันมันจะเป็นภาพเคลื่นไหวน่ะ เพราะฉะนั้น เราจะต้องเอาภาพนี้มาใช้ ทีนี้ คือ ถ้าหาวาดจะเสียเวลานะคะ แม่ก็ไปค้นมาแล้วว่ามันมีเว็บฯ ให้ Download เพราะถ้าวาดจะเสียเวลา อันนั้นเอาไว้ตอนเรียนออกแบบค่อยมาสอนวาดภาพลักษณะนี้เพื่อเอามาใช้ในเวลาทำโครงงานตอนปี 4 ก็ได้นะคะ อันดับแรกเราจะไปโหลดก่อน เพราะฉะนั้นเปิด google chrome นะคะ แล้วมันจะมี 2 เว็บ(ไซต์) แสดงว่าเรียงไอ้นี่ผิด ให้ Download นะคะ ถ้าใครจะเอารูปไดโนเสาร์เหมือนตัวอย่างที่แม่ยกมาก็ได้ แล้วมันก็มีรูปอื่น เข้าได้ทั้ง 2 อันนะคะ พิมพ์เลย พิมพ์เข้าได้ทั้ง 2 เว็ย แต่เราไม่พิมพ์เพราะเราทำลิงก์ไว้แล้ว.เดี๋ยว ๆ เปิดให้ดูแป๊บหนึ่ง ขอโหลดของนี่มันจะขึ้นเป็น Free เพราะฉะนั้น เราจะเอามาใช้ได้นะคะ ถ้าเป็นฟรี ถ้าเป็นฟรี ก็คือไม่มีปัญหาเรื่องลิขสิทธิ์แน่นอนนะคะ ในตัวแรกนี่จะมีตัวการ์ตูนหลายตัวเลย ถ้าเด็ก ๆ ไม่เอาไดโนเสาร์เหมือนครเด็ก ๆ ก็เปลี่ยนไปใช้ Boy Girl เลือกเอาตัวใดตัวหนึ่งนะคะ แล้วต้อง Save ไปไว้ที่ไหน จำได้ไหมคะ อย่าลืมว่าเอาไปใส่ใน Folder ที่เราสร้างใน Python จะเป็นชื่อ Mygame หรือเป็นชื่อของเด็ก ๆ จำได้นะ ไฟล์นี้เอาไป Save นะคะ เซฟใส่ใน Folder ที่นักเรียนสร้างนะคะ มันจะมี 2 ตัวใช่ไหม มีตัวนี้แล้วก็อีกตัวหนึ่ง นี่ แต่ถ้าอันนี้ ถ้าเป็นเว็บฯ Vectice Vecticies Vecteezy นี่ให้เด็ก ๆ ดูด้านล่าง ให้เลือกที่มันขึ้นว่า Free น่ะ ถึงเอามาใช้เข้าใจไหม ให้ดูที่ดูที่มีคำว่า "ฟรี" กำกับเขามาใช้เด้อ เด้อหรือเปล่านะ เด้อ แล้ว ออกภาษาถิ่น เด้อ เดี๋ยวพี่ฝั่งโน้นงง เด้ออะไร นะคะ ก็คือให้เลื่อนลงมาแล้วหาที่มันมีคำว่า "Free" กำกับนะ อย่าไป คือถ้าไปเปิดอันอื่นมันจะมีบอกว่าให้จ่ายตัง เพราะฉะนั้นให้เราเลือกที่เป็นฟรีนะลูกนะ เพราะฉะนั้น เลือกเอาจะเอารูปไหน นะคะ โอ.เค. ไหม ใครจะเอารูปไหน เลือกเอา อย่าลืมว่าเอาไปเซฟไว้ที่ Folder ชื่อที่ตัวเองสร้างไว้นะ อย่าลืมนะคะ Save ให้ถูกที่ด้วย เดี๋ยวไม่เจอ เดี๋ยวจะขึ้น Error เห็นชัดไหม พิมพ์ ๆ อันไหนก็ได้ อันใดอันหนึ่ง อันนี้บัง ให้แคปฯ แล้วก็พิมพ์จะได้เข้าง่าย ๆ จะได้ไปตรงที่เลยจะได้ Download ได้ เข้าเว็บฯ ได้หรือยัง ต้องเข้าเว็บฯ ให้ได้ก่อน ใบเตยเข้าได้หรือยังลูก ได้ไหม เอาอันไหน เลือกอันหนึ่ง มันน่าจะเป็นไฟล์ Zip นบางอันก็เป็นไฟล์ Zip เดี๋ยวใครได้ไฟล์ Zip เดี๋ยวค่อยยกมือ แล้วบอกวิธีแตกไฟล์นะคะ ใครที่ได้ไฟล์ซิป ตอนนี้ใครโหลดรูปมาแล้ว ตัวเองยังไม่ได้โหลดเดี๋ยวโหลดบ้าง อยากได้รูปอะไร ใบเตยจะเอารูปตัวไหน แม่จะได้โหลดเหมือนกัน เอารูปอะไรลูก เอาเว็บฯ แรกหรือเว็บฯ ที่ 2 เดี๋ยวเปิดให้ดูอัน... ชื่อเว็บฯ นี่ เด็ก ๆ มีทุกคนแล้วนะ เดี๋ยวแม่จะสลับหน้าจอไปดาวโหลดบ้างนะคะ เด็ก ๆ พิมพ์แล้วเข้าเว็บฯ เดี๋ยวเราจะไปดูเว็บฯ เราบ้าง ไหนเอ่ย เอาอันไหนอันนี้หรือเปล่า เอาจากเว็บนี้หรือเปล่า เอาเว็บนี้ เอารูปไหนล่ะใบเตย อศัวิน ใบเตยเอาอัศวินนะคะ แม่ก็จะเอาอัศวินเหมือนใบเตย เสร็จแล้วพอเข้ามากดคลิกที่ Freedownload นะ เหมือนใครเลือกของ... Vectiนี่ ถ้าคลิกเลือกรูป เช่น ๆ น้องหมี น้องหมีทำอะไรดี น้องหมีกระโดดอย่างนี้นะคะ อาจจะเอาน้องหมีเดินก็ได้เห็นไหมคะ ก็คลิกที่ Free Dowload เหมือนกัน เราคลิกแล้วนะคะ มันดาวน์โหลดอัตโนมัติ นะ นี่สังเกตบางเครื่อง วิธีการเราจะไปย้ายไฟล์นี้ทำอย่างไร เดี๋ยวให้มันโหลดเสร็จก่อน ของใครได้เป็นไฟล์ซิปบ้าง ใบเตยก็เซฟไว้ จ๊าบโหลดหรือยังลูกเป็นไฟล์ Zip หรือเปล่า 2 หนุ่ม 2 สาว อะตอม, คราม แล้วก็บี โหลดได้หรือยัง โอ.เค. เป็นไฟล์ Zip ไหม เดี๋ยวรอแป๊บหนึ่ง ยังขึ้นโหลดไม่เสร็จ ให้ดูนะคะ ใครที่โหลดเสร็จแล้ว ให้คลิปที่ Show all เห็นไหมคะ มุมนี้ Show All นี่ ถ้าโหลดเสร็จแล้ว ไอ้วิ่ง ๆ มันจะหายไปนะ คลิกที่ Show All มุมข้างล่างนี่ แล้วก็เลือก Show in Folder ไปเปิดโฟลเดอร์ที่ไฟล์ Zip มันมาน่ะ นะคะ เราจะ Move มันไปคลิกขวาแล้วเลือกตัดเลย Cut เลย ย้ายเดี๋ยวจะหายาก Cut ไปเลย Cute ไปแล้ว แล้วก็ Folder ที่ให้สร้างไว้ของจ๊าบ เครื่องจ๊าบมันจะอยู่ที่ MSI นะ จำได้นะ เครื่องใครเครื่องมันนะคะ MyGame ปุ๊บ คลิกขวาแล้วก็ plass วาง ไฟล์ Zip เราจะเข้ามาอยู่ในโฟลเดอร์ที่เราจะใช้เขียน Coding เรานะ ต้องมาอยู่ที่ โอ.เค. ไหม เสร็จแล้วให้ทำการแตกไฟล์ คลิกขวาอีก 1 ครั้ง แล้วก็... เวอร์ชั่นนี้ไม่มีให้ Extract Here ไปที่ Winrar แล้วก็เลือกนี่นะคะ เลือกลำดับที่ 3  Add  ให้มันแตกที่นี้ แตกให้ Folder นี้ ให้แตกไฟล์ไว้ที่โฟลเดอร์นี้ นี่เด็ก ๆ ก็จะได้ Fodle  เห็นไหมคะ มีภาพโอ.เค. ไหม ทีนี้สิ่งที่จะต้องทำ เพราะเหมือนของใบเตยมันเป็นเซ็ตใหญ่มันมีทุกท่า ให้เลือกก่อนทำท่าเดียวนะคะ ท่าอื่นก็ไปอัปเดตเอาออก เข้าใจนะ ให้แม่สอนทุกท่าไม่หมดแน่ ทุกค่ามันก็ไม่หมดแน่ชัวโมงนี้ ต้องได้ท่าเคลื่อนไหว 1 ท่าก่อน สังเกตที่ชื่อไฟล์นึกออกไหมลูก เห็นไหมเขาตั้งชื่อไฟล์ไว้ Walk นั่นหมายถึงท่าเดิน เราจะเอาท่าไหน มีลำดับด้วย เราต้องเอามาให้หมดนึกออกไหม ถ้า walk มันมี 8 เราก็ต้องเอา Walk 1 ถึง Walk 8 จะเลือกท่าไหน เลือกได้เลยนะคะ แต่ต้องเอามาทั้งหมด โอ.เค. ไหม เข้าใจนะ เพราะอะไรอันดับแรก อยากรู้ว่ารูปมันใหญ่ไหมก่อน เพราะถ้ารูปใหญ่น่ะ พอเวลาเอามาลงในฉากเรานะ แล้วไปกำหนดค่า x y เวลาเคลื่อนไหวน่ะ มันจะหาตำแหน่งที่มัน Mark ยาก นึกออกไหม เราอาจจะต้องปรับ Size เดี๋ยวเรามาดูก่อนว่ารูปนี้ พอเวลาเปิดมาใหญ่ขนาดไหน เอาท่าไหนใบเตย วิ่ง run นะคะ ใบเตยจะเลือกท่าวิ่งใช่ไหม เดี๋ยวแม่จะขอลองเปิดไฟล์นี้ก่อนว่าไฟล์ ใหญ่ไหมนะคะ อันดับแรก เลือกท่าที่จะใช้ ก็คือ run 1 จนถึง Run ไหน ถึง 10 ใช่ไหม ขอเลือก 1 รูปก่อน ขอดูก่อน คลิกขวาแล้วเลือก Open With > Paint เปิดด้วย Paint นะคะลูก เห็นไหม อยากรู้ว่ามันตัวเล็กตัวใหญ่ ในโปรแกรม Paint นะคะ ให้เด็ก ๆ ไปที่เมนูที่ชื่อว่า View ก่อน ไปที่ View ก่อน แล้วก็คลิกที่ไม้บรรทัด luler และดูที่ 100 เปอร์เซ็นต์ 100 เปอร์เซ็นต์ เห็นไหม รูป 100 เปอร์เซ็นต์นี่ ขนาดภาพ... ดูตำแหน่งค่านี่ แกน x แกน y เป็น pixcel นะคะ คิดดูว่าขนาดภาพถึง 500-600 pixels นี่ใหญ่นะคะ ถือว่าใหญ่ รูปมันใหญ่ ทีนี้แม่ต้องการรูปที่มีขนาด หารเลย 6 เท่า เอาแค่เท่าเดียวน่ะ นึกออกนะ เพราะฉะนั้น ถ้า 600 มันก็จะเหลือแค่ประมาณสัก 100 วิธีเปลี่ยนขนาดมาดูนะคะ มาดูนะคะ มาดูวิธีเปลี่ยนขนาดภาพก่อน การเปลี่ยนขนาดภาพ ทำไมมันไม่ play ให้ วิดีโอไม่ Run ช่างมันข้ามไป ดาวน์โหลดมาแล้วนะ คือเราต้องทำให้มันใหญ่ ๆ ให้มันเหลือตัวเท่านี้เห็นไหม จากภาพต้นฉบับที่มันใหญ่น่ะ เห็นไหม ลด Size มันลงตั้งเยอะน่ะ เห็นไหม เห็นนะ เพราะฉะนั้น มาดูวิธีเปลี่ยนขนาดด้วย เปิดโปรแกรม Paint แล้วไปที่แถบเครื่องมือที่ชื่อว่า resize นะคะ Resize หรือยัง ใครเห็น Rezise เห็นไหมคะ อยูมาหน้า Home กลับมาหน้า Home ก่อน เมื่อกี้เราไปหน้า View นะคะ Home แล้วก็คลิกที่ Resize ตรง tool ที่ชื่อ image Re-ziseจะได้หน้าต่างนี้มา จากเปอร์เซ็นต์ให้มาเลือกเป็น Pixcle คลิกที่ตำแหน่ง Pixcels เห็นไหมคะ ขนาดเดิมมัน 500 กว่าน่ะ 587 ลดลงไป ให้ลดลงไป เอาสัก 5 เท่า หาร 500 เป็น 100 เอาสัก 120 ดูสิดูก่อนได้ ๆ เพราะเรายังไม่ Save ใช่ไหม เราลอง Re-size ดูก่อน เปลี่ยนตัวเลขเสร็จ คลิก OK คลิก OK ดู ตัวเท่านี้เห็นไหม จากเดิมเห็นไหมคะ ลงมาจากนี่ถึงนี่นู่น เกือบมาถึงนี้ขนาดเท่านี้ โอ.เค. แล้ว น่าจะใช้การได้ เอาเท่านี้ก็ได้ ทีนี้ให้ฟังตอน Save เคลื่องนี้หา Paint ไม่เจอ อุ้ยจำไว้นะครางหน้า ห้ามลงโปรแกรมเทอมหน้า เทอมหน้าห้ามใช่ภาษาไทย จริง แปลเป็นภาษาไทยแล้วปวดตับมากเลย เทปเปลี่ยนเป็นรูปภาพ ไม่ใช่เลยนะ งงมากเลย เพราะฉะนั้น เพราะเรา Coding ก็หัดให้ใช้ภาษาอังกฤษไปเลยแล้วจำไว้เลย ปวดตับมากเลย พอมาแปลเป็นไทยนี่ ตอนเซฟให้ดูตอนเซฟ เพราะดูที่ Folder เราก่อนนะ ให้ย้อนกลับไปดูที่ Folder ตัวนี้ไฟล์ที่มันแตกน่ะ มันเข้าไปในโฟลเดอร์มันจะยาก พอตอน Save as ให้ เข้าใน Folder มัน ให้รูปมันวางอยู่ข้างนอกอย่างนี้ นึกออกนะ วิธีการ ไปไหนแล้ว คลิกที่ไฟล์ แล้วก็ Save as นามสกุลโดยส่วนใหญ่ นามสกุลภาพมัน ก็คือ PNG อยู่แล้วนะคะ อยู่ไหนล่ะ ไปที่ไหน ไปที่ Foldle C.Folder นี่ ทีนี้จะเอาชื่อเดิมเลยก็ได้ หรือเปลี่ยนก็ได้ ตัวเล็ก เดี๋ยว ๆ ช่วย ๆ เขาบอกตัวเล็กมองไม่เห็น พอลดขนาดเสร็จนะคะ ให้เด็ก ๆ เลือก Save as ใช่ไหมเอาไปไว้ที่ C. แล้วก็ชื่อ Folder ของแม่ตั้งชื่อ MyGame ของตัวเองตั้งชื่ออะไรไปที่โฟลเดอรนั้น เสร็จแล้ว ทีนี้ชื่อถ้าไม่อยากพิมพ์มีวงเล็บ แก้ได้ใช่ไหม ก็เป็น Run แล้วลบวงเล็บออก เป็น Run 1 จะได้ง่าย ๆ เวลาเอาไปใช้งานก็จะได้ง่าย ๆ เอาวงเล็บออกด้วย เอาไปติดกัน ไม่ต้องเว้นวรรค เห็นไหมคะ นั่นก็คือรูปนี้เป็นท่าของการวิ่งท่าที่ 1 เพราะฉะนั้น ใบเตยต้องทำต่ออีกกี่รูป เพราะฉะนั้น ทำเลยค่ะ ใครที่ได้รูปที่ 1 แล้ว รูปที่ 2 รูปที่ 3 รูปที่ 4 ก็ Resize ให้ก นึกออกนะ แล้วก็ Save ลงในนี้เพราะตอนนี้ ก็คือเป็นเวลาที่เด็ก ๆ จะต้อง Resize ภาพแล้วก็ Save ลงในโฟลเดอร์ เพื่อจะเอามาใช้ได้ ของรูปตัวเองในท่านั้นน่ะมีกี่รูป ของอะตอมมีกี่รูป เด็ก ๆ เปิดระบบไหม เดี๋ยวถามให้ก็ได้ ไม่ ๆ ๆ มันยังไม่ถึง 70 เดี๋ยว Save ก่อน ดูนะ ๆ ดูใหม่ ๆ ดูที่ไหน ดูที่ชื่อนี่ ดูที่ชื่อมันนี่ สมมตเลือก Run นี่ Run มีลำดับที่ถึงเท่าไร เพราะฉะนั้น ก็ 1-10 โอ.เค. ไหม ของอันนี้เอารูปอะไร อุ้ยมันไม่ขึ้นหน้านั้นแล้วไอ้นี่ ไม่ขึ้นหน้าที่จะกดไปหาเด็ก ๆ  บี... แบมสิ หลงคน ดูนะ แบมภาพที่แบมเลือกมาใช้รูปแรกชื่ออะไร หรือชื่อไหน ชี้ เพราะฉะนั้น ถ้าภาพแรกเลือกอันนี้แบมก็ตังเอาตั้งแต่ภาพที่ 1 จนถึงภาพที่เท่าไร 10 เหมือนกันหรือ ถึง 10 นึกออกไหม มัน Resize ให้หมดเมื่อกี้ได้ 1 แล้ว ก็อันที่ 2 ภาพที่ 3 ภาพที่ 4 ไปเรื่อย ๆ จนครบ 10 รูป เข้าใจหรือยัง เข้าใจไหม แบมกับบีก็แบมก็มาคลิกเปิด เมื่อกี้รูปที่ 1 ทำเสร็จแล้วนะ รูปที่ 2 ก็ เดิมน่ะลูก คลิก Open with Paint เหมือนเดิม เสร็จแล้วก็คลิก Resiz ตัวที่ 1 นึกออกนะ พอลดขนาดเสร็จก็ 120 ก็คลิก Save As แล้วก็เอามาไว้ที่นี่ Folder ที่เป็นชื่อเราเหมือนเดิม แล้วก็แก้ชื่อให้เหมือนตัวแรก แต่เปลี่ยนแค่หมายเลข นึกออกนะ ตัวเลข ก็คือให้ลบวงเล็บออก เข้าไปติดชื่อที่แก้นะคะ เพราะฉะนั้น เราจะต้องมีภาพลำดับที่ 1 ถึงลำดับที่ 10 เพื่อเอามาใช้ โอ.เค. ไหม เข้าใจหรือยัง อะตอมกับคราม โอ.เค. แล้วนะ โอ.เค. งั้นขอเวลาอาจารย์ 10 นาทีนะคะ จะ Resize ภาพมาใช้เหมือนกันนะคะ นะคะ เพราะไม่อย่างนั้นถ้ามาเลือกภาพที่ไม่ต่อเนื่อง นึกออกนะ ภาพมันก็จะเป็นไม่มีความต่อเนื่องน่ะ เราต้องเลือกภาพที่มันเป็นเซตเดียวกัน ที่มันระบุไว้แล้วนะคะ Cancle ก่อน เพราะรูปของข้าพเจ้าไม่ใช่รูปนี้ ของเรา คือ Run ทั้งหมดทั้งปวง ไปเปิด Run 2 ก็คือทำซ้ำไปเรื่อย ๆ Resize ซ้ำกลับไปเรื่อย ๆ จนครบ 10 รูปน่ะลูก ดูนะคะ นี่ทำซ้ำอีก ภาพที่ 2 นี่เสร็จแล้วก็กด Save นี่ นะคะได้รูปที่ 2 แล้วก็ทำรูปที่ 3 ต่อ ทำเหมือนเดิม ก็คือคลิกรูปนั้น แล้วก็คลิก Open ตรง Pixcels ก็เปลี่ยนเป็น 120 เพราะเมื่อกี้เราลองดูแล้ว โอ.เค. Size ใช้ได้นะคะ เสร็จแล้วเราก็ Save As Save as เดี๋ยวก่อน อันเดิมอย่างเพิ่งเอาไว้ทีหลัง ก็บอกแล้ว FFolder น่ะ มันอยู่ที่โฟลเดอร์ที่ตัวเองเอารูปไปเก็บ มันต้องอยู่โฟลเดอร์เดียวกับที่เขียน Code ถ้าย้ายก็ต้องเอาไปไว้ที่เดียวกัน อันเดิมน่ะปล่อยไปก่อน ต้องแก้หลังจากไอ้นี่แล้ว 5 แล้วนะคะ ตอนนี้เรากำลัง Resize รูปที่ 5 1, 2, 3 กระโดดข้ามรูปที่ 4 เดี๋ยวย้อนได้ไม่เป็นอะไร เพราะเลขมันเรียงตามลำดับอยู่แล้ว ใบเตยเสร็จหรือยัง โอ.เค. เปิด Sublime ยังเปิด Sublime  รอเลย ใครที่ Resize เสร็จหรือถ้าของตัวเองมี 5 ภาพ ก็แค่ 5 ภาพนะคะ ก็คือตามจำนวนภาพที่ตัวเองมี ให้เปิด Sublime ขึ้นมาด้วย ใบเตยดูนะ ถ้ามันมีนามสกุลขึ้นมาอย่างนี้ ถ้าใครโหลดเสร็จแล้วปิดโปรแกรม Paint ได้เลยนะคะ แล้วมาดูที่ Folder ชื่อนี้เห็นไหม เด็ก ๆ จะต้องมีภาพ 1 เคลื่อนไหวนี่ให้ครบ นะคะ แล้วใครมีครบ 10 รูป หรือกี่รูปก็แล้วหรือกี่รูปก็แล้วแต่เปิด sublime text ขึ้นมานะคะ คลิกที่ File Ne ก็คือเราจะสร้าง Project python ของเรานะคะ New File แล้วก็คลิก Save เกมนี้เราจะตั้งชื่อว่าอะไร Animation Animation ก็ได้ อย่าลืมใส่ .py ด้วยนะคะ Animation.py .py ด้วย ต้องอยู่ที่เห็นไหมคะ Folder ชื่อของเรานะ ต้องอยู่บอกแล้วรูปกับไฟล์โค้ดน่ะ ไฟล์โปรแกรมน่ะ เวลามันไปเรียก ถ้าไฟล์อยู่ตรงนี้รูปอยู่ตรงนี้มันจะได้หากันมันจะได้เจอกันนะคะ เพราะฉะนั้น มันจะต้องอยู่ที่เดียวกัน Animation เห็นไหมล่ะ เดี๋ยว ฃขอเปิดตัวช่วยอีกตัวหนึ่ง พิมพ์ตามใน Noet pet A-n-i-m-a-t-i-m-a-t-i-o-n .py นะคะ ชื่อโปรแกรมของเราที่จะสร้างในวันนี้ เพราะเราจะทำ Animation เพราะฉะนั้น ให้สังเกตด้วย เห็นไหมคะ โฟลเดอร์ที่เก็บรูปกับโปรแกรมจะต้องเป็น Folder เดียวกัน ซึ่งFoler ที่เราเซฟ ที่ตั้งชื่อของเด็ก ๆ แต่ละคนนะคะ ชื่อตรงนี้ก็จะเปลี่ยนเป็น Animation ชื่อตรงนี้ ก็จะเป็นชื่อเดียวกัน ต้องเหมือนข้างบนนี้ เหลืออีก 2-3 คนตอนนี้รอแป๊ปหนึ่ง ยัง Resize ไม่เสร็จใครที่ Resize รูปเสร็จนะคะ เปิด Sublime แล้วก็สร้างไฟล์ใหม่ โดยเซฟชื่อไฟล์ว่า Animation.py แบมเสร็จหรือยัง ทำไมภาพแบมมันนิ่ง ไม่ได้นะนี่ ภาพไอ้แบมไม่ได้ สัญญาณภาพเด็กไม่ได้ ไม่เป็นไรแบมดูพี่เขาแล้วกัน โอ.เค. ไหม เสร็จหมดทุกคนหรือยัง เสร็จแล้วนะคะ ก่อนอื่นก่อนจะทำได้นี่ ต้องทำความเข้าใจก่อนว่าโปรแกรมที่เราจะเขียนวันนี้มีลักษณะเป็นอย่างไรนะคะ ฃมาดู ย้อนกลับไป เพราะหัวข้อบอก OOP นะคะ Object กับ Class & Object create 2D animation นะคะ หัวข้อแรกก่อน เนื่องจาก Python เรานี่มันเป็นโปรแกรม OOP นะคะ หรือชื่อเต็มมันก็มาจาก มาจาก object-Oriented Programming หรือแปลเป็นไทยว่า "การเขียนโปรแกรมเชิงวัสถุ ก็คือลักษณะการเขียนโปรแกรมเชิงวัสถุนก็คือเราจะต้องมองสิ่งที่เราจะเขียนนี่ให้มันเป็นวัตถุเพราะอะไร เพราะ Object แปลว่า วัตถุนะคะ Object 1 อย่าง หรือวัสถุ 1 ชิ้นนี่ ต้องมี Data หรือมีข้อมูลนะคะ เช่น ๆ เช่น ๆ ยกตัวอย่างให้เห็นใกล้ ๆ ตัว นะคะ ปากกานี่ ปากกาแม่กับปากกาเด็ก ๆ เหมือนกันไหม ไหนทุกคนลองยกปากกาตัวเองขึ้นมาสิ ไม่ได้พก โชว์ปากกาหน่อย โชว์ปากกาของตัวเองหน่อย เอาปากกาขึ้นมานะคะ เห็นไหม ปากกา ชื่อปากกาเหมือนกันใช่ไหม ปากกาเหมือนกันใช่ไหม แต่ให้ดู Data หรือข้อมูล เหมือนของเซฟ สีเหมือนไหม ยี่ห้อเหมือนไหม นี่คือ Data เห็นไหมคะ ของเซฟเป็นแบบกดไหม ไม่ใช่ใช่ไหม ของเซฟมีปอกปากกา วัตถุชิ้นนี้นะคะ 1 ชิ้นนี่นะคะ แล้วมีสิ่งที่เรียกว่าใน object นี่นอกจากมี data แล้ว ยังมี method Method ก็คือตัวที่แสดงเขาเรียกว่าถ้าเป็นภาษาไทยน่ะ ภาษาไทยเวลาเขียนประโยคมันจะมีประธาน กิริยา กรรม นะคะ Method นั้นให้นึกถึงลักษณะของกริยา ก็คือการกระทำนะคะ แต่ในภาษาคอมพิวเตอร์นี่ Method นี่จะเป็นพฤติกรรม หรือสิ่งที่เราต้องการให้วัสถุชิ้นนั้นมันสามารถทำได้ หรือเกิดอะไรก็ได้กับวัตถุชิ้นนั้น เช่น เหมือนปากกาแม่นี่ นึกออกนะ สิ่งที่จะให้มันทำ เช่น เมื่อกดใช่ไหมคะ กระทำโดยการกดใช่ไหม แล้วมันจะมีหัวปากออกมาใช่ไหมคะ อย่างนี้ นั่นคือสิ่งที่ให้เกิดการกระทำในตัววัตถุชิ้นนั้น หรือปากกาทำอะไรได้อีก เขียนได้ รุ่นใหม่ทำอะไรได้อีก ปากการุ่นใหม่ที่ปากกาลบได้นะคะ นั่นคือ Method ซึ่งจะเป็นตัวควบคุมหรือสั่ง Data นั่นเอง สั่งข้อมูลนะคะ ซึ่ง Data ในหลักของการเขียนโปรแกรม Data จะหมายถึง Variable หรือตัวแปร ซึ่งเราจะกำหนดตัวแปรเพื่อให้คอมพิวเตอร์มันรู้จัก นึกออกนะ เราจะไม่มาเขียน Data ใส่ล นะคะ เพราะฉะนั้นบางที Object 1 กับ Object 2 อาจจะใช้ method ร่วมกันได้ เห็นไหมคะ เพราะอะไร เพราะเหมือนที่บอกปากกา มีบางสิ่งที่เหมือนกัน เช่น การกระทำนั่น ก็คือใช้เขียนใช่ไหมคะ มันก็คือใช้ method เดียวกัน เห็นไหมคะ อย่างนี้เป็นต้น เดี๋ยวคลิกให้เห็นการเชื่อมโยง Method ตัวนี้มาใส่ตัวนี้ได้นะคะ ให้ Method มันเชื่อมโยงกันได้ของการเขียนโปรแกรมเชิงวัตถุนี่ มันจะมีการห่อห้มตัว Object เห็นไ วัตถุไว้ข้างในนี่ วัตถุมันตัวกลม ๆ ต้องหุ้มมันไว้ หุ้มข้อมูลกับตัวของ method ไว้นะคะ ซึ่งเขาบอกไว้ว่าที่เรามาใช้โปรแกรมนี้ โปรแกรมเชิงวัตถุนี่เพราะเราต้องการลด คือ แต่เดิมนี่ โปรแกรมแบบเดิมเป็นภาษาแบบที่เป็นโครงสร้างนี่ เขียนแค่ 1-20 บรรทัดนี่มัน โอ.เค. อยู่ แต่พอเยอะ ๆ น่ะ แล้วทีนี้โปรแกรมที่เขียนจริง ๆ นี่ เหมือนโปรแกรมขนาดใหญ่น่ะ มันไม่ได้เขียนแค่ 1-20 บรรทัดไง มันเลยทำให้เกิดการสร้างวิธีการสร้างโปรแกรมเชิงวัตถุขึ้นมา ก็คือเพื่อลดเห็นไหมคะ รองรับงานที่ซ้ำซ้อน เพราะบางทีน่ะ จะต้องมาเขียนกระทำบางอย่างซ้ำ ๆ นึกออกนะ ในโปรแกรมเดียวนี่ ซึ่งมันอาจะทำให้เกิดปัญหา Error ได้ เหมือนสัปดาห์ที่แล้วน่ะ ทำไมถึงมี pos_x แล้วยังมี x เป็นแกน x แต่มันเป็นตัวแปรที่แทนค่าแกน X ของตัวนี้อีกตัวหนึ่ง อย่างนี้ นึกออกนะ ไม่ให้มันซ้ำกัน เพราะถ้ามันซ้ำกันกับไอ้ตัวแปรเดิมใช่ไหมคะ ให้นึกภาพนี้นะคะ มันก็เลยเพื่อไม่ให้ข้อมูลมีความซ้ำซ้อนนะคะ อันนี้เขายกตัวอย่างเป็นรถยนต์ ถ้าเทียบกับการเขียนโปรแกรมเป็นรถยนต์นี่ แบบ OOP เป็รรถยนต์นี่ ถ้า OOP แยกเป็นชิ้น ๆ ออกมานี่ ออกมานี่นะคะ เห็นไหมคะ ชิ้นส่วนวัตถุนี่เขาจะเรียกว่า "Object" ที่เราจะเขียนนี่ให้มองมันเป็น Object  ไว้ก่อน แล้วทีนี้ถ้าให้เปรียบถึงรถ เดี๋ยวมีรูปให้ดู ก็คือพอดึงชิ้นส่วนแต่ละอย่างออกจากกันนี่ บางทีให้นึกถึงเวลาซ่อมรถนึกออกไหม อาไหล่รถตัวนี้อาจจะเอาไปซ่อมรถอีกคันหนึ่งได้ เห็นไหมคะ ลดการซ้ำซ้อน ก็คือไม่ต้องไปสร้างอะไหล่อะไหล่ใหม่เพื่อใช้กับรถคันใหม่ ตัวเดิมไปใช้ด้วยกันได้ให้มองเป็นรูป ถ้ามองแบบเขียน Coding เหมือนช่างน่ะ ซ้อมน่ะ เขาก็ Adapt ได้ เหมือนอะไหล่รถยุโรปกับรถญี่ปุ่นนึกออกนะคะ ไม่ใช่ว่าพออะไหล่รถญี่ปุ่นเสีย เอาของรถยุโรปมาใช้ไม่ได้อย่างนี้ มันก็จะกลายเป็นว่า ต้องไปสร้างใหม่ หรือทำอะไหล่ใหม่ คือ บางอย่างเขาเรียกว่ามันเป็นการเอื้อให้มันมาใช้ได้ ทีนี้เวลาจะดู object นะคะ หรือแบ่ง object ในทางโปรแกรมนี่ เราสามารถแบ่งลักษณะของ Object นี่ ออกเป็น 2 ประเภท แบบที่ 1 คือ รูปธรรม รูปธรรมนั้นคือมันจับต้องได้ เช่น ให้นึกถึงจักรยานรถสุนัข นะคะ แต่ถ้าเป็นนามธรรมจับต้องไม่ได้ มันจะเป็นเหมือนการพูดถึงน่ะ เที่ยวบินอะไรอย่างนี้ เขาก็จะ... พอเขียนโปรแกรมนี่ไม่ใช่เฉพาะวัตถุอย่างเดียวุถึงจะเป็น Object พวกเหมือนเราทำเที่ยวบินนี่ เที่ยวบินมันจับต้องไม่ได้แต่มันต้องมีรูปธรรมไปยุโรปมีสายการบินไหนบินบ้าง เห็นไหมคะ อันนี้น่ะคือจับต้องไม่ได้ ถ้าไปยุโรปมีไปประเทศไหนนะคะ อย่างนี้เป็นต้นนะคะ ฉะนั้น นั่นจะมองไม่เห็น เหมือนวิ่งน่ะ วิธีวิ่งของคนแต่ละคน นึกออกนะ วิ่งเหมือนกันไหม ไม่เหมือนนะคะ บางคนจะถนัดวิ่งช้า ๆ วิ่งเร็ว ๆ นะคะ ทีนี้ที่พูดถึงเพราะมันจะต้องถ้าเขียนแบบ object ปุ๊บนี่ มันจะต้องมีการ มีองค์ประกอบอยู่ 2 อย่าง ก็คือมีClass กับ Object  การเขียนโปรแกรมในวันนี้จะมีการเขียน Class ด้วยนะคะ ทีนี้ก่อนจะเขียนได้ ต้องมารู้ก่อนว่า Class กับ Object นี่มันมีความสำคัญด้วยกันอย่างไร ก็คือถ้าเราจะทำ Object ได้เราจะต้องมี Class ขึ้นมาก่อน กำหนด Class ขึ้นมาก่อน ในนี้เขาบอกว่าให้นึกถึง Class เป็นมีแม่แบบเพื่อกำหนดว่า object  นี้มันจะมี Data อะไร มี method อะไร นึกออกนะ ทีนี้ใน object นี่จะประกอบไปด้วยสิ่งที่เรียกว่า "คุณสมบัติอยู่ 2 ประการ" เห็นไหมคะ ตัวแรกนะคะ คุณสมบัติที่เรียกว่า "ค นะคะ ก็คือบ่งบอกถึงลักษณะข้อมูลทั่วไปของวัตถุนั่นเองนะคะ มันจะเรียก "attribute" นะคะ หรือ Data แต่ในภาษานัก Programming นี่นะคะ จะเรียกตัวแรก แล้วส่วนของพฤติกรรมหรือสิ่งที่ให้มันกระทำ หรือถ้าแปลเป็นภาษาไทย ก็คือกริยานั่นเองนะคะ การกระทำนี่ ในภาษาคอมนี่เราจะใช้คำว่า "Method" ก็คือเมื่อเราสร้าง Class ขึ้นมา ใน Class นั้นจะต้องมี Attribute กับ Method อยู่ข้างในนะคะ เช่น ยกตัวอย่างให้เห็นรถยนต์ถ้าเราสร้าง Class ของรถยนต์นี่ attribute ของมันนะคะ ก็ควรจะมีบอกว่ายี่ห้ออะไร เห็นไหมเพราะรถยนต์มีหลายยี่ห้อนะคะ เพราะฉะนั้น จะทำโปรแกรมสำหรับเก็บหรือทำให้เกิด Class ของรถยนต์นี่มีอะไรบ้าง เก็บยี่ห้อ เก็บรุ่น เก็บสี นะคะ อยากเก็บเพิ่มมากกว่านี้ก็เก็บได้นะคะ แล้วสิ่งที่ method ใน Class รถยนต์จะต้องมี รถยานต์ทำอะไรได้ เปลี่ยนเกียร์ได้ แต่มีคลัช แต่รุ่นใหม่ไม่มี Auto ใช่ไหม มันมีครัช ถ้ารถรุ่นก่อนก็จะมีเปลี่ยนครัชได้ มันก็จะมีMethod ก็คือสิ่งที่รถยนต์จะสามารถกระทำออกมาได้ หรือเราต้องการให้รถยนต์นั้นกระทำนะคะ เช่น อะไรนะ เปิดแอร์ได้ ให้นึก ถ้านึกถึงวิวัฒนาการของรถยนต์ก็เป็นเปิดพัดลมอย่างนี้แทนนะคะ หรือตรงเปิดแอร์หรือปรับอุณหภูมินี่อาจจะมีเปิดเป็นแอร์ เปิดเป็นพัดลมเฉย ๆ อย่างนี้ก็ได้ นั่นก็คือเวลาเราเรียน Class 1 Class เราจะต้องมีองค์ประกอบข้างในคือ attribute กับ method นะคะ ขาดไม่ได้ ถ้า Attribute นี่ เวลาพอเขียนเป็นโปรแกรมออกมา หมายถึงตัวแปรน่ะสร้างตัวแปรขึ้นมาหรือรับค่า แล้วส่วนของ Method ก็คือพวกเงื่อนไขนั่นเอง เงื่อนไขที่ให้เกิด Event หรือเหตุการณ์ หรือการกระทำนะคะ ทีนี้รูปแบบเวลาเขียนนะคะ เรานะต้องพิมพ์รูปแบบ ก็คือพิมพ์คำว่า "class" แล้วตามด้วยชื่อ ClassName ส่วนสิ่งที่ หรือสิ่งที่อยู่ข้างใน Class ก็จะมี Method อยู่ข้างใน จะต้องมี Attribute กับ Method อยู่ข้างในนะคะ ทีนี้เราจะมาเริ่มเขียน Code แล้วนะคะ อันนี้ข้าม อันดับแรก ก็คือเราจะต้อง import module เข้ามาก่อนใช่ไหมคะ บรรทัดที่ 1 บรรทัดที่ 2 ตั้งค่าทั่วไปและบรรทัดที่ 3 ตั้งค่าการแสดงผล ทำไมหายไป สิ่งหนึ่งที่หายไป บรรทัดแรก เห็นไหมคะ import Module ที่ชเพราะฉะนั้น บรรทัดที่ 1 พิมพ์เลย import เปิด Sublime นะคะ พิมพ์... เดี๋ยว คลิก import pygame, กับ sys เห็นไหมคะ sys Module นะคะ Six Module ก็คือ import module ที่ชื่อ pygame กับ import ที่ชื่อ modle หรือระบบ เราจะไปดึงระบบมาใช้ด้วย เพราะมันมี เพราะเราจะเปิด class เมื่อได้ ทำการ import เสร็จ สิ่งที่เราจะต้องทำนะคะ ก็คือการตั้งค่าทั่วไป ก็คือบอกให้ pygame รู้แล้วเราจะเริ่มโปรแกรมใช่ไหมคะ อีกตัวหนึ่ง ค่า Clock ถ้าพูดถึง ก็คือนาฬิกานั่นเอง ค่า clock เพราะอะไร เพราะการจะทำให้ภาพมันเคลื่อนไหวนี่มันต้องใช้ตัว... ตัว Function Clock ช่วย ให้รูปมัน... คือการเคลื่อนที่ของภาพน่ะ ให้ภาพมันต้องใช้ตัวนี้เป็นตัวช่วยนะคะ เสร็จแล้วก็สร้างส่วนการแสดงผลของ clock เห็นไหมคะ clock.tick หมายถึง ฟังก์ชันติ๊ก การนับน่ะค่ะ การนับเวลาเข็มนาฬิกาน่ะ นึกออกนะ เข็มวิมันก็ 1 tick นะคะ 60 วิ(นาที) ภายใน 60 วินาทีนี่ เพราะค่าของ Clock นี่เลข 60 หมายถึง FPS น่ะ FPS ก็คือ Fastแปลว่า ความเร็ว sec ต่อวินาที ก็คือความเร็วที่จะให้ไอ้ตัวรูปน่ะมันแสดงผลน่ะ ต่อวินาทีนี่เท่านี้ นะคะ เพราะฉะนั้น เราทำก่อนอื่นเราจะต้อง import Module เข้าไปตามหลักทั่วไปแล้วก็เซ็ตค่าที่มันจะได้ใช้ตลอดนะคะ โอ.เค. นะ ถึงไหนแล้ว ตามเรามา ตามเรามาด้วย Import pygame เว้น 2 บรรทัด แล้วใส่ Hashtag (#) เพื่อจะได้รู้ว่าเราจะตั้งค่า ตั้งแค่เบื้องต้นน่ะ ตั้งค่าเบื้องต้น ก็คือpygame Error จริง ๆ ด้วย Function นะคะ Function อย่าลืม เมื่อเรียกเป็น function จะต้องมีวงเล็บ มี () เห็นไหมคะ () ทันที แล้วก็ Clock ค่ะ Clock = อันนี้คือตัวแปรนะคะ ประกาศตัวแปรก่อน Clock = py pygame module..Clock() เห็นไหม . อะไร .time.clock Clock Function เห็นไหมเราก็จะเรียกใช้ pygame.time time นะคะ module แล้วก็ Function สังเกตเห็นไหมคะ ว่า Clock ที่เป็นชื่อตัวแปร เห็นไหม เห็นไหม Clock Function จะเป็นตัวใหญ่ขึ้นต้นด้วยตัวใหญ๋ จะเป็นคนละตัวกันนะคะ ได้ส่วนของการตั้งค่าทั่วไป แล้วก็ส่วนของการแสดงผล Clock.tick มีค่า = 60 นะคะ กำหนดค่าของการแสดงผล ตามมา เว้นไปสัก ตรงนี้จะเป็นส่วนของการแสดงผลลัพธ์เรานะคะ นะคะ Clock.tick(60) อย่างอย่าลืมดู โอ.เค. ไหมคะ 1 2 3 4 4 บรรทัดนี้ใครเสร็จแล้วยกมือขึ้น เสร็จหรือยัง เสร็จแล้วนะ จ๊าบเสร็จหรือยัว ถึงบรรทัดไหนแล้ว Clock ติ๊กหรือยัง โอ.เค. รอเพื่อนแป๊บหนึ่ง โอ.เค. ไหม เสร็จแล้วนะคะ ไปแล้ว ส่วนต่อไปที่เราจะทำ ก็คือก็ต้องสร้างหน้าจอให้มันใช่ไหมคะ ก็คือการตั้งค่าหน้าจอเกมนะคะ กำหนดตัวแปรชื่อว่า Width สำหรับค่าความกว้างแล้วก็ Hight อันนี้ปรับได้นะคะ ตัวเลขไม่จำเป็นต้องเป็น 600 แล้วก็เรียก แล้วก็สร้างตัวแปร เป็นตัวแปรสำหรับหน้าจอนั่นเองนะคะ แล้วก็ใน Caption น่ะ พิมพ์ว่า " สร้างหน้าจอก็จะอยู่ต่อกับตั้งค่าเบื้องต้นนี่เอเราจะสร้างจอเกมกันแล้วนะคะ อันดับแรกสร้างตัวแปร y ค่ะ อันนี้พิมพ์เองนะคะ นะคะ W-i-d-t-h ค่า Width เราเท่ากับเครื่องนี้อาจจะใหญ่ ลองเอาเท่าตัวอย่างก่อนก็ได้ 600 กว้าง 600 height h-i-g-h-t ตัวแปร Hight สำหรับความสูงของจอ ตอนนี้อยากได้สี่เหลี่ยมจัตุรัส ถ้าอยากได้ผืนผ้าก็ต้องทำให้ Width เยอะกว่า Hight นะคะ เสร็จแล้วกำหนดตัวแปร screen ตัวแปรชื่อ "SceenW เพื่อทำอะไร เพื่อสร้างจอนั่นเองนะคะ module pygame.display เลือก .display นะคะ แล้วก็ . ลืมน่ะ ทำไมวันนี้ Error memory ตัวเองไม่ค่อยดี .set_mode นะคะ ตามด้วยค่า ชื่อตัวแปร เรากำหนดตัวแปรแล้วเราไม่ใช้ตัวเลขแล้ว Function Set_mode นะคะ .set เลือก set mode ฟังกชืั ใส่ 2 ครั้ง 2 วงเล็บนะะค แล้วก็พิมพ์ width width ไหน width ตัวนี้ พิมพ์ hight ให้ดูนะคะ Statement หรือตัวแปรที่เราสร้างนี่ ก็คือมันหมายถึงตัวนี้ ทะลุเดือด ลด Size ลงหน่อยนะคะ อีกบรรทัดหนึ่ง อีกบรรทัด หนใส่ Caption ใช้ module pygame.display.set_caption นะคะ สร้าง Caption ของเกม ถ้เาใคใส่เอาเองเพิ่ม อันนี้จะข้ามไปก่อน เรียกใช้ module pygame.display เหมือนเดิ.displเหมือนเดิม แล้วก็ .caption set_caption นะคะ set_caption .set_ception ในวงเล็บใส่เครื่องหมายคำพูดชื่อ caption เราจะใช้ caption จอมีชื่อว่า GameAnimation นะคะ GameAnimation 4 บรรทัดนี้ โอ.เค. หรือยัง นะคะ เสร็จ... เสร็จหรือยังคะ เซฟกับไอซ์เสร็จหรือยัง อะตอม, คราม เสร็จหรือยังคะ เสร็จแล้ว เสร็จแล้ว ใบเตยเสร็จ... เหลือจ๊าบกับเสือน้อย จ๊าบเสร็จหรือยังครับ จ๊าบเสร็จแล้ว เสือน้อยล่ะ โอ.เค. ได้ส่วนของจอเกมแล้วนะคะ สิ่งที่เราจะทำต่อไป ก็คือเห็นไหม ใส่สี screen.file การใส่สีให้จอนะคะ ค่าสี RGB ของเรา ก็คือ 255 255 นั่นก็คือสีขาว จำได้นะ นึกค่าสี อยากจะเปลี่ยนค่าสีก็ให้ไปดูที่ rgb เพราะฉะนั้น ในส่วนของการแสดงผลให้เรียกใช้ screen นะคะ แล้วก็ fill ก็คือใส่สีเข้าไป ก็คือสีทีเราจะใส่ นะคะ มาที่ส่วนนี้นะคะ เรียก screen นะคะ ต้องให้มันขึ้น Statement fill function ใส่วงเล็บต้องมี 2 อัน ถูกไหม สังเกตถ้าเป็นค่าที่เป็นตัวเลขนี่ หรือเป็นค่าพวกนี้นะคะ ถ้าสีขาวของเรา ก็คือ 255 ทั้ง 3 อันเลยนะ สีขาวล้วน 255 R ก็ 255 g ก็ 255 แล้วก็ B ก็ 255 นะคะ นี่คือค่า RGB นั่นเอง Red, Green, Blue 255, 255, 255 นะคะ นี่คือเราสร้างจอแล้วนะ ยังไม่ Run เดี๋ยว Error จะต้องตามแก้ Run ทีเดียวเลยจะได้จบ ส่วนต่อมา โอ.เค. ไหม เสร็จแล้วนะ ทุกคนเสร็จแล้วนะ โอ.เค. อันนี้เพราะเพิ่มอีกแค่ 1 บรรทัดนะคะ สิ่งที่จะทำ ก็คือ Loop ใช่ไหม สร้าง Loop สร้าง Loop สำหรับให้โปรแกรมพอสร้างจอแล้วก็สร้าง Loop ใช่ไหมคะ เปิดแล้วก็ต้องมีปิดเหมือนเดิมนะคะ ตอนนี้เราจะทำ Loop ก็คือ while ทำเมื่อเป็นจริง while True whie True: Loop จะอยู่ต่อจากตรงนี้นะคะ เลือก while trนะคะ เราจะทำ Loop while True ตัวใหญ่ T ตัวใหญ่นะคะ ทำเมื่อเป็นจริง เห็นไหมคะ while Trup for แล้วก็ if .event.get(): memory ไม่ค่อยดีวันนี้ for ค่ะ ใน Loop ก็คือใส่เงื่อนไข for loop เข้าไป for ตรงนี้ใส่ตัวแปร event e-v-e-n-t event ก็คือหมายถึงเหตุการณ์นะคะ เหตุการณ์นะคะ ใน... ในอะไร เหตุการณ์ใน pygame.event.get pygaeนะคะ เรียนะคะ เรียกใช้ Module pygame.event event module นะคะ แล้วก็ .get get function ใส่วงเล็บ มือไปโดนอะไรนี่ ขอโทษ ๆ มันไวไปหน่อย ใส่ () นะคะ เป็น function get เพราะเป็นฟังก์ชัน get เมื่อ while เห็นไหมคะ เป็นจริง ถ้าเหตุการณ์ใน pygame get ก็คือการรับค่านั่นเองนะคะ รับค่าอะไรมาดูกัน ค่าที่เราจะรับ ก็คือ ถ้า event type pygame.quite ก็ให้ออก ก็คือจบนั่นเอง สิ้นสุด หรือ sys.exit() นะคะ นะคะ ก็คือถ้าเกิดเหตุการณ์นี้ if ก็คือถ้า ถ้า if condit ถ้า event evtnt.type == pygame Event.type นะคะ .type นี่นะคะ type statement นี่ == pygame pygame module QUIT ตัวใหญ่นะคะ Q ตัวใหญ่ เพราะเราจะเรียกใช้ Statement นี้ นั่นก็คือถ้าเป็นจริงนี่ ถ้าเป็นจริงนี่ ถ้ามีการกด type นี่ก็คือกดพิมพ์หรือกดปุ่มนี่ จะออกจากโปรแกรม เมื่อมันเป็นจริง เพราะฉะนั้น pygame module.quite QUIT function นะคะ ไปเรียกใช้ จบโปรแกรม ส่วน system module นะคะ ก็จะเรียกใช้ .exit() function exit exit นะคะ ตอนนี้เราทำ Loop เพราะเมื่อเราเปิดแล้วต้องมีปิด Loop นี้จะมีทุกอันอยู่แล้ว จะมีที่ Code มาจะต้องมี Loop ในการปิดเกมเสมอนะคะ มีให้พิมพ์บ่อย ๆ จะได้ชิน ไม่อยากให้ไป Copy นะคะ ได้ส่วนของ Loop แล้ว แล้วสิ่งที่เราจะทำต่อไป โอ.เค. ไหม เสร็จแล้ว ใบเตยเสร็จไหม จ๊าบเสร็จไหมคะ เหลือตรงไหนเอ่ย เหลืออีกกี่บรรทัด แล้วตรงในส่วนของตรงแสดงผลนะคะ เราจะกำหนดความจริงแค่ pygame.display.flip ไม่เป็นอะไรใส่เลยนะคะ อย่าเพิ่มใส่ก็ได้ข้ามไปก่อน สิ่งที่จะทำต่อมา คือ เราจะสร้าง Class นะคะ เห็นไหมคะ ชื่อ class ของเรา ก็คือ Dino สังเกต ตัว D จะเป็นตัวพิมพ์ แล้วเนื่องจาก Class นี้ เนื่่อิงจาก Class นี้ class นี้ ไอ้ตัวนี้มันชื่ออะไรลูก ตัวนี้ตั้งชื่อตามตัวการ์ตูนเราน่ะ นึกออกะนึกออกนะ เพราะฉะนั้น ย้อนกลับไปดูก็ได้นะคะ ว่าตัวการ์ตูนที่เราเอามามันชื่ออะไร ไหนล่ะ เขาชื่อ Knight แปลว่าอัศวินนะคะ เราตั้งชื่อนี้นะคะ ให้เด็ก ๆ ดูชื่อตัวการ์ตูนของตัวเองน่ะ นึกออกนะ เช่น ถ้าใครเอานี่เห็นไหมมันก็จะมีชื่อ โจ อย่างนี้ บอย อย่างนี้ ซานต้านึกออกนะ มันก็คือชื่อของ ชื่อของส่วนนี้น่ะ นี่ ๆ Class นั่นเอง คือสิ่งที่เราจะเอามาตั้งชื่อ Class เข้าใจไหมคะ เข้าใจไหม บีกับแบมเข้าใจหรือเปล่า ทำตาปิ๊บ ๆ เดี๋ยว ๆ ชื่อ ชื่อตรง class นี่นะคะ ชื่อตรง class อย่าไปเอาชื่อของ... ตัวการ์ตูนที่เราไปโหลดมานี่ เอาชื่อนี่ เอาชื่อของมันนี่มาใส่ นึกออกไหม ของตัวเองตัวการ์ตูนชื่ออะไร ให้เอาชื่อนั้นมาใส่นึกออกนะ จำให้ได้ว่าชื่อตัวเองนี่ชื่ออะไร เห็นไหมมันจะมีชื่อของใครของมันใช่ไหมคะ เหมือนตอนที่แม่ Run น่ะ แม่เอาตัวไดโนเสาร์ แม่ก็เลยใช้ชื่อว่าไดโนใบเตยจะเอา The Knight ก็คืออัศวินใช่ไหมคะ เราก็ใช้ชื่อ Class ว่า Niew นะคะ ถ้าของแบมหรือของบีหรือเป็นแซนดาครอส ใช้ชื่อนี้นะคะ ของแบมใช้ Girl ก็ใช้ชื่อ Gril อย่างนี้นะคะ ชื่อของใครของมัน Class ใคร Class มัน class ใคร class มัน เริ่มหรือยัง อันดับแรก Class จะอยู่ตรงไหน อยู่ต่อจาก ๆ ๆ เห็นไหมคะ ต่อจาก Modle เลย ต่อจาก import Module เลย Class ของเราจะอยู่ตำแหน่งนี้ เพราะฉะนั้นเลื่อนขั้นไปตรง import module class ก็จะบอกก็จะได้บอกว่า Class class Knight นะคะ โอ.เค. mi อะไรนะ ไม่จำ ๆ k-n-i-g-h-t สังเกตที่ชื่อ Class เห็นไหม ตัวแรกจะใช้ตัวอักษรตัวใหญ่เห็นไหม เวลาสร้าง Class คลิก New class เลย เห็นไหมคะ ตรง class name นี่ ใส่อะไรเข้าไป ใส่ เพราะ class นี้จะเป็น class ของไอ้เจ้าอัศวินของเรานั่นเอง บอกให้รู้ว่า Class ของ นะคะ ในนี้ในส่วนของ Object วัตถุที่จะใส่เข้าไปมีอะไรบ้างมาดูกัน เราจะเรียก... วัตถุของเราก็จะมี pygame.sprite.spriteตัว Sheet เรานั่นเองนะคะ วัตถุของเรา ก็คือจะประกอบด้วย sprite Sheet ของเรา sprite ของเรานั่นเอง ใส่เลยในวัตถุที่ชื่อ นี่เห็นไหม ใช้ sprite module นะคะ แล้วก็ . sprite class นะคะ ใช่ไหม ใช่หรือเปล่า เห็นไหมคะ สังเกตตรง Object  นี่ มันจะมี pygame sprites มันจะมี 2 ตัว มันจะมี sprite เล็กที่เป็น module กับ sprite เห็นไหม สังเกตว่า ถ้าเป็นชื่อ Class ตัวอักษรตัวแรกขของชื่อจะเป็นตัวใหญ่เวลาจะพิมพ์ Sprite class ต้องพิมพ์ S ตัวใหญ่นะคะ ดูใหม่นะคะ ให้ดูใหม่ ตอนระบุ Object ตอนระบุ Object ดูดี ๆ นะ Object แรก ก็คือ pygame.sprite แล้วก็เลือก sprite module แล้วก็เลือก S ใหญ่ เห็นไหมคะ มันจะขึ้นว่า Sprit เพราะตอนนี้เราจะ... สังเกต เห็นไหม Class Sprite นี่ ในนี้ไแต่ตัวนี้ คือ โปรแกรม pygame ชื่อ Sprite มา ก็คือ Class นี้จะไปเรียกใช้งานวัตถุที่เป็น Sprite น่ะ มานะคะ โอ.เค. ไหม ในส่วนของ Class นะคะ บรรทัดแรก เสร็เสร็จเรียบร้อยแล้ว บรรทัดต่อไป บรรทัดต่อไป เว้นลงไปเย๊ะ ๆ ได้ Class แล้วนะคะ ได้ชื่อกับ Class ในนี้นอกจาก Class กับชื่อ Class มันยังมี statement ต่อนะคะ สิ่งที่เราระบุต่อไปนะคะ method นะคะ method ที่ชื่อว่า init ทีนี้เด้ก  ๆ มาดูนะคะ ถ้าคำสั่ง definition def นี่มันจะเป็นการสร้าสงมันจะเป็นการสร้าง Function เมื่อมันเข้ามาอยู่ใน Class มันจะเป็นการสร้าง method วิธีที่ให้เห็นความแตกต่างว่าสร้าง function กับสร้าง method เป็นอย่างไร เห็นไหมคะ เวลาสร้าง method_init_() ใส่ _ ก่อน _ เปิด _ ปิด เพื่อบอกให้รู้ว่าสิ่งนี้คือ methoded นะคะ ก็คือจะมี _ และก็ตามด้วยชื่อ Method แล้วก็ตามด้วย วงเล็บนะคะ แต่ถ้าเป็น Function น่ะ พิมพ์ชื่อใช่ไหม def แล้วก็ตามด้วยชื่อเลย จะไม่มีไอ้ 2 ตัวนี้ ตัวนั้นจะเป็น function จะเป็นคนละแบบ มันจะโดนเรียกว่าเป็น method นะคะ ดังนั้น Function ที่ชื่อ init นี่ เป็น function ที่สร้างอัตโนมัตินะคะ มันจะโดนเรียกใช้อัตโนมัติ ก็คือทุกครั้งที่สร้าง Class นี้ต้องสร้าง Method นี้เสมอ จำไว้เลยนะคะ แล้วก็มีการเรียกใช้มันเห็นไหม บรรทัดที่ 2 เป็นการเรียกใช้ โดยใช้คำว่า "super. method_init_() ต่อไป เห็นไหมคะ โปรแกรมมันจะให้ขึ้นไอ้ตัวนี้ขึ้นมาอัตโนมัติเลย เห็นไหมคะ สร้างขึ้นมาอัตโนมัติ เปลี่ยน ก็คือค่าตรงนี้ ค่าของ super เห็นไหมคะ แล้วก็เลือก ClassName ตามด้วย ClassName นะคะ แล้วก็ตามด้วยอันนี้ แต่จะยังไม่เรียก มาดูกัน เห็นไหม เดี๋ยว ๆ ลบออกให้ดูก่อน พอสร้างเสร็จปุ๊บน่ะ ไอ้ตัวนี้มันขึ้นมาเอง เห็นไหมครับ พอเราเลือก New Class น่ะเห็นไหม method นี้มันจะขึ้นมาที่เราจะมาแก้ ก็คือตัวนี้ กับค่าตรงนี้ docstring for kinght ก็คือกำหนดค่า ตรงนี้นะคะ เราแก้ค่าตัวที่ 2 เห็นหรือเปล่า ตัวที่ 2 นี่มีตำแหน่งค่ะ เราจะกำหนด pos_x pos_y นั่นเองนะคะเด็ก ๆ นะคะ เพราะพอสร้าง Class นี่ Method มันจะขึ้นมาอัตโนมัติ แล้วเรียกอะไร ตรง super เห็นไหมคะ ตรง super นี่เราเอาตรงนี้ออกนะคะ ไม่มีค่า ให้เป็นค่าว่างเปล่า แล้วตรง self ที่เราจะเรียกใช้ Sprite ค่ะ sp เรียก sprites ก้ามปู วงเล็บใหญ่น่ะ เห็นไหม เรียก sprites ตัวเล็กนะ เห็นไหมเรียก sprites sprites ที่เราใช้ es นี่นะคะ เราจะเรียก sprites มาแทนนะคะ ดูดี ๆ นะ sprites นี้นะคะ Sprites มี es นะคะ มี es เติมมานี่ คนละตัวกับ... นะคะ ต่อไป ก็คือพอเสร็จแล้วนี่ ตรงส่วนนี้ คือ เราจะโหลดน่ะ คำสั่ง self ที่ชื่อ Sprites ก็คือค่าว่างของค่าเริ่มต้นของการโหลด sprites นี่ คือ ค่าว่าง ก็คือไม่มีค่า เสร็จแล้วก็มาโหลดนะคะ self.sprites.aooend นะคะ pygame.load แล้วก็ตามด้วยชื่อภาพ มาดูกัน มาดูบรรทัดนี้กันนะคะ เลือก self นี่นะคะ . เลือก statements sprites นะคะ บรรทัดที่ 2 .apnet แล้วก็ตามด้วยวงเล็บ วงเล็บ 2 ครั้งนะคะ จัดได้แล้ว . append function ซ้อนกัน ตามด้วย .image ค่ะ image module นะคะ แล้วก็ .load เพราะบอกแล้วเราจะไปโหลดรูป load function ขอโทษ ๆ เดี๋ยว ๆ ใส่วงเล็บเกินเอาใหม่ appain Function แล้วก็เรียกใช้ module pygame.image module แล้วก็ .load load Function เพราะฉะนั้น ใส่วงเล็บ อันนี้ถูกแล้ว ใน function load ใส่ singel quort เพื่อไม่ให้ Copy File ผิดใช่ไหมคะ เราก็ไปเปิดไฟล์ของเรา ไม่ใช่ตัวนี้นะ ไฟล์ที่เราเซฟไว้นี่ตัวแรกเลย ก็คืออะไรคะ Properties Run1 Copy ตัดปัญหาไม่ให้พิมพ์ชื่อไฟล์ผิด เสร็จแล้วเด็ก ๆ เนื่องจากมันมี 10 รูปใช่ไหมคะ ก๊อบ(ปี้) ค่ะ แล้ววางไปให้ครบ 10 ครั้ง 3, 4, 5, 6, 7, 8, 9, 10 10 ใช่ไหม เราก็มาเปลี่ยนแค่ตัวเลข 2, 3, 4 ถูกไหม เพราะรูปเราตั้งชื่อให้มันเรียงตามลำดับแล้ว เพราะฉะนั้นเราก็มา copy เรียงกันให้ได้ 16, 7, 8, 9, 10 ของเราครบ 10 แล้วนะครับ ก็คือบอกให้ไปโหลดภาพ sprites ของเรานั่นเองมานะคะ เรามี 10 รูป เราก็โหลด 10 รูป เรามี 11 รูป โอ.เค. ไหมครบไหม เช็กชื่อรูปด้วยนะ ว่าตรงกันไหม เซฟไว้ถูกที่แล้วนะ รอบนี้ไม่ขึ้น นะ หยุด Stop Stop ชื่อตรงนี้เปิดโฟลเดอร์ ให้เปิด Folder ๆ Folder ตัวเอง อย่ามาเอาชื่อเหมือนแม่สิ ตัวเองตั้งชื่อเหมือนแม่หรือเปล่า นึกออกไหม เออ ชื่อไฟล์รูปตัวเองน่ะ เข้าใจหรือยัง เดี๋ยวก็ทำไมโหลดไม่ได้ ไม่ใช่นะคะ ตัวเองอีกชื่อหนึ่ งเพราะฉะนั้น ช่วยเช็กชื่อด้วย ตัวเองก็เปิดโฟลเดอร์ตัวเอง แล้วดูชื่อรูแตัวเอง แล้วก็ก๊อบฯ มาวาง 1 อัน แล้วค่อยมา Run เลขใหม่เข้าใจไหม อะตอมเสร็จหรือยัง ครามเสร็จหรือยัง เสร็จแล้วโอ.เค. เหลือ 2 สาว อย่าลืมนะคะ พอได้ภาพที่ 1 แล้ว copy ไปจนถึง 10 รูปน่ะ แล้วก็แก้เลข โอ.เค. ใครที่มีรูปครบตามจำนวนตัวเองแล้วนะคะ สิ่งที่จะต้องเขียนต่อมา ก็คือเราจะสร้าง สั่งให้มันสร้างการเคลื่อนไหวนั่นเอง สร้าง Animation นะคะ เริ่มต่อจากภาพที่ 10 เดี๋ยวรอแป๊บหนึ่ง รอ ใคร... ถ้าโหลดภาพน่ะ ต้องมีชื่อไฟล์ แล้วก็นามสกุลมันด้วยนะ .png ทั้งหมด เพราะตัวนี้เป็นไฟล์ Animation เราจะทำเป็น Animation เหมือนเสร็จ โหลดภาพเสร็จหมดทุกคนแล้วนะคะ สร้าง ก็คือให้มันกำหนด เหมือนการเคลื่อนไหวน่ะ ก็คือสร้างการเคลื่อนไหวให้มันนะคะ คำสั่ง self เหมือน มี self อะไรบ้าง self.current = 0 มันจะอยู่นี่นะคะ พิมพ์ self เลือก self เลือก self นี่นะคะ .sprites เพราะเราชื่อเดียวกันเลย นะคะ Statements ตัวแปร sprite เรานั่นล่ะ อ๋อ กำหนดค่าปัจจบันให้ sprites self.current_sprite = = 0 มีค่าเท่ากับ 0 ก็คือค่าของไอ้ตัวนี้ ค่าเริ่มต้นนี่มันจะต้องเป็น 0 ต่อมากำหนดเห็นไหมคะ กำหนด เห็นไหมคะ ให้ images นี่ เท่ากับ current_sprite นั่นเอง self.image นี่ self.current_spritนะคะ ส่วนตัว Rect นี่ มาจาก rect หรือสี่เหลี่ยม จะเป็นตัวพิกัดน่ะ พิกัดของตัวทำ... คือ ทำรูปแล้วเรายังทำพื้นที่ที่จะให้ไอ้รูปของเราน่ะมันเคลื่อนไหวนะคะ ก็คือพิกัดของมันน่ะ ก็คือ วาดเป็นลักษณะ 4 เหลี่ยมนะคะ พื้นที่ของตัว Animation เรานั่นเองนะคะ เพราะอยู่ ๆ Animation มันไม่เคลื่อนไปเองแน่ ถ้าไม่กำหนดเขตให้มันนะคะ self เหมือนเดิมขึ้นด้วย Self .image นะคะ .image = self.sprites นะคะ sprites statementsStatement แล้วก็ ปีกกาใหญ่ กดผิด ๆ ไม่ใช่ปีกกา ก้ามปูเป็น self เป็น current current_sprite โอ.เค. บรรทัดที่ 2 นะคะ ก็คือระบุภาพเรานี่ มันจะต้องเป็นแบบนี้นะคะ อยู่ตำแหน่ง current_sprite ถูกต้องไหม เห็นไหมคะ self.sprites ใส่ self ด้วย ขาดไป 1 ประโยค โอ.เค. นะคะ คือใน Class นี่ มันจะมีไอ้ตัวนี้ ไอ้ตัว self แค่นั้นเอง ต้องใส่ พอเวลาเราจะเรียกใช้งานมันจะต้องมีตัวนี้นะคะ บรรทัดต่อไประบุ image แล้ว ต่อไประบุอะไร ระบุพิกัด ก็คือ self.rect tanbl= self.image.get_rect() .get_ = self.image ตัวบนนี่ .get get เอ่ย เก็ทอะไรครับget อะไร ๆ ๆ get_rect() get เล็กนะคะ get เรียกใช้ รับค่าให้มันรับค่า get_rec ขึ้นไหม r ตัวเดียวน่าจะขึ้นแล้ว เรียกใช้ function get_rect() นะคะ ก็คือขอบเขตนี่ ตำแหน่ง เห็นไหมคะ บนซ้าย สร้างตัว rectangle นี่ ตั้งแต่บนซ้ายมีค่าเท่ากับ pos_x, pos_y self เหมือนเดิม .recself.e ไปต่อ .topleft นะคะ .topleft นะคะ .topleft ก็คือตำแหน่ง .topleft เห็นไหมคะ topleft topleft = เริ่มที่ซ้ายบนสุด บนสุดซ้าย topleft แล้วก็ = [pos_x อะไรคะ pos_y ใช่ไหมคะ ลืมอะไรหรือเปล่า ทำไมอ๋อ ลืมใส่ก้ามปูเข้าไปให้ = ต้องใส่ก้ามปูเข้าไปด้วย เอาใหม่ ๆ ก้ามปูนะคะ ก้าแล้วก็ตามด้วย pos_x,pos_y เห็นไหมคะ สังเกต pos_x pos_y จะเปลี่ยนชื่อเป็นตัวนี้ ดูดี ๆ เห็นไหม นี่ parum นี่ parum เพราะอะไร เพราะนี่มันอยู่ตรงนี้นี่ ตรงค่านี้เห็นไหม ตรงการกำหนดตรงนี้เห็นไหมคะ ก็คือตัวนี้ตัวเดียวกัน มันจะไปเรียกใช้มาแล้ว ได้ส่วนของโหลดรูปมาแล้วกำหนดพื้นที่ที่มันจะเคลื่อนไหว แล้วก็สร้างพื้นที่ให้มันเคลื่อนไหว แล้วก็สั่งค่าเริ่มต้นของมันแล้วสิ่งที่จะทำต่อไปนะคะ นี่ สร้างตัว sprites ก็คือ กำหนดค่าให้การเคลื่อนไหวน่ะ เสร็จแล้วก็ Group รูป เพราะรูปมันเยอะใช่หรือเปล่า ให้ดูตรงชื่อนะคะ ชื่อตรงนี้ ตัวแปรนี่เห็นไหมคะ ตัวนี้ คือ ชื่อ Class เราให้มันตรงกับชื่อ Class ที่สร้าง ชื่อตรงนี้ คือ ชื่อ Class ของเรา ชื่อตัวแปรกับชื่อ Class ใช้เหมือนกันก็ได้ เพราะ Class นี้ คือ Class ของตัวการ์ตูนที่เราจะเอามาทำให้มันเคลื่อนไหวนะคะ อันนี้คือค่าตำแหน่งที่จะวางไอ้รูปนั้นน่ะ วางรูปนะคะ เขาก็เลยบอกว่าเอา Sprites นี่ไปไว้ที่ไหนนะคะ ระบุตำแหน่งรูป มาดูกัน ตัวนี้จะอยู่เอาไว้ต่อจาก loop while นะคก็คือจากหลาย ๆ ภาพนี่ ให้มัน Groups ภาพเข้าไป เป็น funนั่นเองนะคะ เอามาไว้ตรงนี้นะคะ แปลเป็นไทนก็คือตรงนี้เราจะสร้างตัวที่ให้มันสร้างภาพไปต่อเนื่อง รวมให้มัน คือ ไม่ให้ภาพมันแตกออกน่ะ นึกออกนะ คือ ภาพ 1, 2, 3, 4 นี่รวม เรียงไปแล้ว แต่มันเข้ามาเป็นภาพ แล้วก็รวมภาพนะคะ คำสั่งที่ใช้ ก็คือ move สร้างตัวแปร moving = pygame.sprite.Gorใช้ function นี้ สร้างตัวแปรชื่อว่า moving ไม่อยากพิมพ์ยาว move ก็เลย Move_sprites ตัวแปรของเรานะคะ เท่ากับ Move_sprites .group เรียก module แล้วก็ function Group() มาใช้งานนะคะ = module pygame.. sprites เรียก module sprites มาใช้แล้วก็เรียก function Group Group ตัวใหญ่ อ๋อ เรียก Class Group มาใช้ ไม่ได้เรียก Function Class ที่ชื่อ Group มือไวไปหน่อย เห็นไหมคะ เห็นไหม Gropu Class ที่เราไม่ได้สร้างไว้ แต่เป็น Module ที่pygame มันสร้างไว้แล้วน่ะ เราก็ไปเรียกใช้ได้เลยนะคะ ไม่ต้องไปสร้างใหม่ เห็นไหม ก็คือที่บอกไง มันลดการซ้ำซ้อน พอเขียนโปรแกรมใหม่ก็ไปสร้างใหม่เห็นไหมนะคะ แล้วก็ตามด้วยชื่อตัวแปรตัวการ์ตูนของเรา แล้วก็เรียก Class ตัวการ์ตูนนั้นมานะคะ ตามด้วย Knight Kแล้วก็เรียก Class เห็นไหมคะ เรียก Class ที่เราสร้าง แล้วก็ตามด้วย... เห็นไหมคะ มันจะบอกเลย Knight นี่ตามด้วย pos_x pos_y แpos_x แล้วก็ pos_y ให้มันไว้ที่ (10,10๗ แล้วก็ทำตัวแปร Move อีก move sprites เหมือนเดิมไหม sprites แล้ว add เข้าไปตัวแปรรูปเรานะคะ move_sprites..add function add function นะคะ ใน Knight k เล็ก knight statement ดูดี ๆ นะคะ ชื่อนี่ คือตัวแปร ชื่อตัวนี้ คือ class ที่เราสร้างไว้ข้างบนตรงนี้เลื่อนขึ้นไปให้ดูนี่เด็ก ๆ ไปดู Class ตัวเองตั้งชื่ออะไร เข้าใจนะ Class ตัวเองฃตัวเองชื่ออะไร ตอนมาเรียกใช้ก็ต้องเรียกใช้ชื่อให้มันตรงกันนะคะ นะคะ เพราะฉะนั้น ย้อนกลับไปดู class ตัวเองด้วย Class name ตัวเองด้วยนะคะ ได้ส่วนของการสร้างภาพแล้ว สิ่งต่อไป โอ.เค. ไหม บรรทัด 3 บรรทัดนี้เสร็จหรือยัง ส่วนตรงนี้เห็นไหมคะ King ตังเล็กนี่ ก็คือชื่อตัวแปร เปลี่ยนให้เหมือนชื่อ Class ก็ได้แต่เปลี่ยนตัวพิมพ์น่ะ เป็นตัวพิมพ์เล็กทั้งหมด แต่ถ้าเป็นชื่อ Class น่ะ ตรงบรรทัดที่ 45 เห็นไหมคะ ชื่อตัวแรกมันจะเป็นตัวแปร เราใช้ตัวนี้เราไปเรียก Class ที่เราสร้างไว้ตั้งแต่ครั้งแรกน่ะมา สังเกตชื่อ Class 2 ตัวแรกมัน สีมันจะเป็นสีนี้นะคะ ถ้าใครไม่เรียก Class ตัวเองมามันก็จะไม่ขึ้น สิ่งต่อไปที่เราจะทำ นะคะ จะสร้าง function Run กับ function Run กับ Function นี้ ก็คือ Function แสดงค่า ถ้าของเรามันเป็นวิ่งก็ใช้ Run ก็ได้ แต่ถ้าของเรามันเป็นอะไรนะ กระโดด หรือ wack Function ตรงนี้ ชื่อ Function นี้ ตั้งค่าตามกิริยาหรือการกระทำของตัวการ์ตูนนั้น ๆ โอ.เค. ไหม คือ เวลาตั้งมันจะต้องสื่อไง จะได้รู้ว่าตัวนี้มันทำอะไร มันวิ่งใช่ไหม เพราะสังเกตที่ตัวการ์ตูนเรา มันนอกจากมันมีวิ่งแล้ว บางอันมันมีทั้งกระโดด มีทั้งอะไรใช่ไหมคะ เราก็ไปเปลี่ยนได้นะคะ โอ.เค. นะคะ เราจะมาสร้าง function ให้มัน เพื่อให้มันทำงานน่ะ ตาม function ที่กำหนด เริ่มที่ Function แรกก่อน ดูนะคะ Function จะอยู่... ขอโทษ ๆ ตำแหน่ง ๆ จะอยู่ต่อจาก ต่อจาก Class ของเรานั่นเองนะคะ เราไป Class ค่ะ เราจะสร้าง Function ตรงนี้นะคะ สร้าง Function Run กับ Update ทำไมต้องมีอัปเดตบอกแล้วเพื่อให้มันคืนค่าน่ะ พอวิ่ง ๆ ไป มันก็ต้องกลับมาค่าเดิมน่ะค่ะ มันวนกลับไปกลับมานะคะ Tab เข้าไป 1 ครั้งนะคะ สังเกตตรง function ตำแหน่ง Function นะ มันจะไม่อยู่ชิด เด็ก ๆ ต้อง Tab เข้าไป 1 ครั้งนะคะ เด็ก ๆ จะต้องdef function ขึ้นมา ตามด้วย... งfunction แรก คือ function Run นะคะ เห็นไหมคะ เนื่องจากบอกแล้วมันอยู่ใน Class ไง มันอยู่ใน Class def run แต่เราต้องเรียก self มา self นะคะ แล้วก็ self กำหนดค่าให้ self. = นะคะ ก็คือสร้างตัวแปร Run Animation นี่ โดยมีการกำหนดมีค่าเริ่มต้นที่ 0 ไม่ใช่ 0 =true เป็นจ= t= True ก็คือมันจะวิ่งเมื่อเป็นจริง เสร็จแล้ว function update เหมือนเดิม def Function ตามด้วย update update function คลิกเลย ในนี้ใส่อะไรบ้าง ใน updอะไรบ้างใน update จะต้องใส่ self แล้วก็ speed นะคะ มี self กับ speed การไอ้นั่นน่ะ ความเร็วในการเคลื่อนไหวนั่นเองนะคะ ที่เราเรียก clock มาใช้งานน่ะ เราก็ต้องมี speed ให้มัน ตัวแปร นะคะ self แล้วก็ speed นะคะ function update โดยที่ถ้า self ถ้ามีการวิ่งนะคะ ให้ค่าเป็นจริง แล้วตำแหน่ง current_sprite นี่ตาม speed นั้น if self.run กำหนดเงื่อนไขแล้วนะคะว่า ถ้า If ถ้า Run if self.run .run_animation ถ้า if self.run ของเราเป็นจริง = True ปุ๊บ เป็นจริงเมื่อไหร่ ถ้าเงื่อนไขเป็นจริงนะคะ สิ่งที่จะต้องทำ ก็คือ self.current_sprite หมายถึงตำแหน่งปัจจุบันนี่ให้เพิ่มเข้าไป ก็จะเพิ่ม self. เรียกใช้ current นะคะ + +ใส่เครื่องหมาย + = บวกหรือ อย่าใส่ +- อีกนะ ใครใส่ +- ภาพไม่เคลื่อนนะคะ += นะคะ = speed speed ตัวนี้ speed แพรม เห็นไหม เรียกตัวนี้มา += นะ ไม่ใช่ เห็นไหมคะ speed นี่ เด็ก ๆ ดูนะ ต้องเลือกตัวที่เป็น speed ตัวนี้นะคะ speed เสร็จแล้วอะไรต่อ มีเงื่อนไขต่อครับ ค่า... หรือค่าใน self_current_sprites น้อยกว่าหรือเท่ากับ range ของ sprite นี่ มันเริ่ม 0 เห็นไหมคะ แล้วก็จะ Run Animation ถ้าค่าไม่จริง ก็จะไป Run ไอ้นี่นะคะ ดูเงื่อนไขดี ๆ if ค่ะ ใส่ if condition if selfถ้า .current_sprite current_sprite อ๋อ เรียก function inditure ให้มันทำแปลงค่าน่ะค่ะ ให้เป็นจำนวนเต็มนั่นเองนะคะ int if ... if condition int นี่นะคะ นี่ ใช้ init ตัวนี้ class นี่ ใช้ class ที่มันสร้างไว้ให้แล้วนี่ int class นี่ โดยที่ self.current_sprite ของเรานี่ มีค่าเท่าไร มีค่าเท่าไร น้อยกว่า หรือเท่ากับ มันจะไปเลือก class len มา >= นะคะ function len ด้วย ในค่านี้ ก็คือค่า x ค่า y ค่า len ของเรา ก็คือ self sprites self_sprites ที่เรากำหนดในครั้งแรก ๆ น่ะ เดี๋ยวมันขึ้นมาเองล่ะ self.sprites ของเรา sprites statement มัน... ถ้าจำนวนเต็มของค่านี้น้อยกว่า len นี้ปุ๊บ สิ่งที่จะต้องให้ทำ ก็คือให้ current_sprite เริ่มที่ 0 แล้วให้ run_animation โอ.เค. = 0 แล้วก็... แล้วก็อะไร = run_animation ให้กำหนดค่าของ self.run Run Animation นี่ ให้เป็น False ให้อัปเดตค่านะคะ การให้มัน Update ค่านะคะ ก็คือคืนค่าให้... โอ.เค. นะคะ เราจะได้ส่วนของ function อะไรเอ่ย Function run กับ function update Size ใหญ่ไปลดลงให้ เห็นไหมคะ function run นี่ เพื่อให้มันสร้าง run_animation เสร็จแล้วให้ทำงานนะคะ เสร็จแล้ว พอทำไปแล้วนี่ มันต้อง update oี่ รูปมันมี 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 กลับไปค่าเริ่มต้นแล้วก็เปลี่ยนค่านะคะ ก็คือ update ให้มีค่าคืนค่าให้เป็น 0 นะคะ ให้เป็น False โอ.เค. ไหม เสร็จหรือยัง ส่วนของ function run กับ function  สาว ๆ เสร็จหรือยังคะ เสร็จแล้วนะ โอ.เค. อย่างนั้นไปต่อ จะได้เห็นผลงานตัวเอง สิ่งที่เราจะต้องทำ ก็คือมีรูปแล้วเราจะต้องมาจะใช้คีย์ไหนให้มันวิ่งใส่ key เข้าไปให้มัน กำหนดค่าคีย์บอร์ดให้มัน คำสั่ง key ของเรานั่นเองนะคะ กำหนดค่าให้ keybord ที่เราจะใช้ ก็คือ Keyboard ที่ลูกศรไปทางขวา โทษที ๆ โทษที ๆ โดยตัวแปรค่า Keyboard นะคะ แล้วเรียกใช้ Module pygame.key แล้วใช้ process นะคะ ก็คือรับค่า รับค่าการกดปุ่มนั่นเองนะคะ ว่าถ้าเมื่อใดที่กดคีย์ลูกศรขวา ลูกศรขวาตัวการ์ตูนเราจะวิ่งตามคำสั่งทันทีนะคะ เพราะฉะนั้น ตัวนี้ก็จะอยู่ตรงตำแหน่ง y นะคะ ไปที่ y Loop ของเรา สิ่งที่จะใส่เพิ่มจะอยู่ตรงกับตำแหน่ง if แรก ใส่ค่า key ค่ะ ตัวแปร = = pygame module. ..key.get_pressed() .keys.key key module นะ .สังเกตชื่อตัวแปรกับชื่อ module คนละตัวนะคะ .key นะคะ แล้วก็ .get get ที่เราเรียกใช้ ก็คือ get_pressed() หรือการรับค่าปุ่มกดนั่นเอง ก็คือตัวนี้นะคะ ใส่วงเล็บเข้าไป กำหนด... ขอโทษ ๆ ทำไมไปถึงวงเล็บลงมา กำหนดเงื่อนไข โดย Tab เข้าไป 1 ครั้ง if if condition เรา เงื่อนไขว่าถ้า key ในที่นี้ คือ ชื่อตัวแปรเรานะคะ = ไม่ใช่เท่ากับสิ อ๋อ ระบุค่า key เข้าไปว่า K_RIGHT โอ.เค. ๆ ใส่ if นะคะ if keysบล ก้ามปู สอนเสมอว่าเวลาใส่ [ แล้วใส่ปิดมันด้วย เช่นเดียวกับใส่ ใส่เปิดแล้วก็ปิดเพราะเดี๋ยวมันจะขึ้นหรือหา Syntax ไม่เจออีก key ตัวใหญ่นะคะ K_R ตัวใหญ่ K_RIGHT ปุ่มลูกศรขวา ก็คือถ้า key ที่เรากดนี่ คือปุ่มลูกศรขวานี่ให้ชื่อตัวแปรเรานะคะ knight นะคะ Knight ในวงเKnight.run() มั่วหรือเปล่านี่ Knight.run() ถูกแล้ว ชื่อตรงนี้ ก็คือชื่อตัวแปรที่เราสร้างขึ้นมา อยู่ไหนแล้ว ๆ ๆ ตัวนี้นะคะ คือ ตัวนี้ตัวเดียวกัน knight.run() ตัวเดียวกัน Nint.run Run function ใส่ไปโดนอะไรน่ะ นะคะ เรียกใช้ function run นี่ เราจะมาเรียกใช้ function นี้ เพราะฉะนั้น ก็เลยเป็น Knight.run ให้ knight มันวิ่ง เราไปเรียกใช้ Function นี่นะคะ นี่ ๆ ๆ ๆ ก็ดูด้วย ๆ ให้ตรงกัน สิ่งที่จำทำต่อไป ก็คือได้อะไร ต้องไปที่ส่วนของยัง ๆ ๆ เด็ก ๆ ยังทดสอบไม่ได้ เด็ก ๆ ต้องไปเพิ่มค่าตรงตำแหน่งนี้ก่อน เพราะเราข้ามตรงนี้ไป ตรงส่วนของการแสดงผล นะคะ เพราะเราสร้าง move_sprites ไปแล้ว เพราะฉะนั้น ชื่อตรงนี้นะคะ ใส่เพิ่ม ตรงที่ตำแหน่งการแสดงผลของเรานี่นะคะ นี่เราเพิ่งมี sceen fill แต่เรายังไม่ได้เรียกนี่ move_sprites ตัวนี้มา เพราะฉะนั้น พิมพ์ move move_sprites statements นะคะ ตรงส่วนของการแสดงผลนะคะ move_sprites แล้วตามด้วย drw screen ให้สร้าง screen อีกอันหนึ่ง move_sprite เห็นไหมคะ เรียก function update ขอโทษ ๆ เรียกผิด เรียก function update เรียกใช้ pygame displayเลือก Function flip การแสดงผลเข้าไปเพิ่มอีก 3 ตัวนะคะ move_sprite sprites ตามด้วย Function อะไรนะ ลืมเองอีก sprites ลืมเองอีก . เยอะเกิน ลืมเองอีก .draw draw function ในนั้นใส่ค่าของ... draw อะไร draw ตามด้วย surface ตามด้วย sก็คือ ตัวนี้เรียกตัวนี้มา นี่ ๆ ต่อด้วย move อีกเหมือนเดิม sprites ของเรานะคะ แต่เป็น .updateในวงเล็บ... ตามด้วย () 0.25 ใส่ค่าให้การ update อยู่ที่ 0.25 แล้วก็เรียกใช้ module pygsam display module pygame..display แล้วก็ .flip เลือก flip function นะคะ flip Function เราจะต้อง... กำหนดการแสดงผล 3 ตัวนี้เพิ่ม เข้ามาถ้าเสร็จแล้วให้กด CTrl + B เพื่อทดสอบโปรแกรม ดูตรงนี้ โอ.เค. ไหม ขยายขนาดให้ 3 บรรทัดนี้ โอ.เค. ไหม ถ้าใส่ส่วนแสดงผลเสร็จ ลองกด  ก็มาแล้ว ไม่ Error รูปหาย ๆ ลืมเรียกอะไร เดี๋ยวนะ เลือก move แล้ว เลือก sprites แล้ว add knight ขนาด knight เล็กไหขอรูป Knight ดูนะ อะไรหายไป ยังหาไม่เจอ เดี๋ยวนะ ตรงการแสดงผลไม่แสดงอะไร ขาดตัวไหนไปตัวหนึ่ง flip ใน flip Dino run moveing_sprites add Dino เข้าไปนะครับ ขอเช็กโค้ดตัวเองก่อน อย่างนั้นเดี๋ยวเราขอบคุณพี่ล่ามก่อน เพราะว่าส่วนของการ Code เสร็จแล้วเหลือทดสอบ เราจะขอบคุณพี่ล่ามก่อนนะคะ ขอบพระคุณค่ะ สำหรับวันนี้จบเพียงเท่านี้นะคะ โอ.เค. ทีนี้มาดู Code เราว่าอะไรที่หายไป