--- title: การเขียนโปรแกรมภาษาคอมพิวเตอร์ subtitle: date: วันอังคารที่ 6 ธันวาคม 2565 เวลา 08.50 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) ก่อนอื่น ก่อนอื่น เปิด Sublime ขึ้นมาเหมือนเดิมเปิดโปรแกรมเรา ไอ้ตัวสีส้ม ๆ นี่สีส้มนี่ เปิดขึ้นมา กด Ctrl +B ก่อน 1 ครั้ง เพื่อเช็กว่าตอนนี้ทุกคนมี backgrOUND ภาพพื้นหลังอยู่แล้วนะคะ ใครยังไม่มีหน้าต่าง พื้นที่การทำงานของตัวเองที่มีรูป Backgr ยกมือนะคะ เดี๋ยวไปต่อไม่ได้ เพราะสิ่งที่เราจะทำต่อไปก็คือ เราจะเอาตัว เกมเกมของเราเข้ามานะคะ แล้วจะทำให้มันเคลื่อนไหว ของใครยังไม่ขึ้น ขึ้นหมดทุกคนแล้วหรือยังคะ อะไรนี่ มีเวอร์ชัน... Cancel ไป Cance wxทำไหมหน้าต่างนี้มันไม่ยอมให้ย่อลงทำไม PowerPoint ย่อลงไม่ได้ล่ะ เราต้องการพื้นที่โอเคนะคะ สิ่งแรกเด็ก ๆ ไปดูไฟล์ของเราใน Disk :C โฟลเดอร์เรายังไม่ได้โหลดภาพหรือจำได้ไหมครับ ตัวเกมที่จะใช้... ทำไมมันย่อสไลด์ PowerPoint ตัวนี้ลงไม่ได้ ปิดก็ไม่ได้ คือ ขอปิดก่อนแป๊บหนึ่ง จำได้ไหมคะ ที่บอกให้ค้น sprites sheet น่ะคือ เราต้องการภาพที่มันมีลักษณะภาพที่มีหลาย ๆ ภาพ คือภาพที่มีการเคลื่อนไหวต่อเนื่องกันนะคะ ก็คือเด็ก ๆ จะต้องเลือกตัวการ์ตูน หรือตัวเกมที่เราจะทำให้เขาเคลื่อนไหว เราจะไม่มาเสียเวลาวาดเอง เลยจะให้ค้นจากเน็ตนะ ก็ต้องเลือกใช้ Free Dowload ด้วยนะคะเพื่อจะได้ไม่ติดปัญหาลิขสิทธิ์ ต้องพิมพ์คำว่า "Free Download" เสมอเวลาค้นนะ แล้วก็ตามด้วยคำว่า "Spirte sheet "S-p-r-i-t-e Sprite แล้วก็ sheet s-h-e-e-แล้วก็กดค้นหา นี่ลักษณะภาพ sprite sheet ก็คือถ้า Sprite ก็มีภาพตัวหลัก แล้วก็มีภาพที่เหมือนตัวเขาน่ะ เคลื่อนไหวได้ มีรูปอื่น ๆ ที่ เห็นไหมคะ เสื้อผาอะไรเขาก็เหมือนกันนะคะ เพราะเราต้องการวัตถุของเรานี่ ไอ้ตัวเกมเรานี่ ให้มันเคลื่อนไหวนะคะ ถ้าใครหาได้แล้ว ให้โหลด แล้วเอาไปใส่ไว้ใน...ตอนนี้โหลดมาแล้วนะคะ จะเอาภาพนี้ รอแป๊บหนึ่ง ใครยังไม่โหลด โหลดเลยนะคะ ก็คือให้มันมีตัวหลาย ๆ ตัว อย่างน้อย อย่างน้อยมีภาพตัวเกมนี่ สัก 4 ตัวเป็นอย่างน้อยนะ มีมากกว่านั้นก็ได้นะคะ โฟลเดอร์ที่เราดาวน์โหลดนะคะ เดี๋ยวจะ Move ไปไว้ที่ Disk C ของเรานะคะ เอาไปไว้ที่เราเก็บโปรแกรมที่เราเขียนไว้น่ะที่เราเก็บไว้ Extrack ไฟล์แล้วนะคะ จะเข้า Cat แล้วกัน นี่ ๆ ๆ เดี๋ยวจะเลือกเฉพาะที่เขาเป็น ขอเอาเป็นเดินนะคะ จะเดินหรือจะ... ขอเป็นรูปเดินแล้วกัน เอามาทดลองให้ดูก่อนนะคะ สัก วันนี้มีหลายตัวหน่อย เขาพิมพ์หมายเลข 12 นี่นะคะ เราจะต้องมีรูปตัวเกมเราอยู่ใน Folder อย่างนี้นะคะ โฟลเดอร์ชื่อเกมที่เราสร้างน่ะค่ะ ให้สังเกตว่าเรามีไฟล์ Sublime pygame อยู่ตรงไหน มีรูป อยู่ตรงนั้นล่ะ มันจะได้หากันเจอนะคะเด็ก ๆ ก่อนอื่นเด็ก ๆ เปิดโฟลเดอร์ตัวเองเข้ามาไว้ด่วยเดี๋ยวจะไปเดินเช็กว่ามีรูปแบบนี้กันหรือยัง เลือกสัก 1 ตัวนะ เลือกตัวเกมสัก 1 ตัว ดูนะคะ คำค้นที่ใช้ ดูคำที่ใช้ค้น เห็นไหม บนหน้าสไลด์นี่ Free download Sprite Sheet นะคะ ให้ค้นด้วยคำนี้ เพราะถ้าค้นด้วยค่ะว่า sprites sheet น่ะมันจะได้ภาพที่บอกว่ามีหลาย ๆ ตัวค่ะ ที่เขาทำไว้แล้วน่ะ ใน...ในโฟลเดอร์เด็ก ๆ ทุกคน เมื่อกี้ไปตรวจแล้วนะคะ ตัวเกมที่เราจะเอามาลงแล้ว ไปไหนล่ะ อยู่ไหนเอ่ย อยู่ไหนเอ่ย นี่นะคะ อันดับแรก อันดับที่ 1 เหมือนเดิมลองวางก่อน เราจะเอาไอ้ตัวนี้เข้ามาวางในฉากได้ไหม เพราะฉะนั้นนะคะ คำสั่งยังเป็นคำสั่งเดิมอยู่นะ ก็คือคำสั่งที่จะนี่ ๆ ๆ เอารูปมาใส่นี่นะคะ แต่เราจะต้องประกาศตัวแปรใหม่ ตอนนี้ ไปที่บรรทัด ตำแหน่งที่ 14 บรรทัดที่ 14 ก่อน เด็ก ๆ เลื่อนลงมาประมาณบรรทัดที่ 14 เพราะในสัปดาห์ก่อน เรามี Background มีอะไรแล้วนะคะ เรากำหนดหน้าจอได้แล้ว สิ่งที่เราจะทำต่อมาใส่ Hashtag นะคะ หรือเครื่องหมาย # ก่อน แล้วก็บอกว่า เราจะเอาตัวเกมเข้ามาแล้ว ก็เลยใส่ # ตรงส่วนนี้จะเป็นส่วนที่เราเอาตัวเกมเข้ามานะคะ นำเข้าเกม นำเข้าตัวเกม ใส่ # ไว้ แล้วก็กดเว้น 2 ที เว้น 2 บรรทัด เราจะอยู่บรรทัด15 จะได้เช็กง่าย ๆ ไปตามบรรทัดก่อนตอนนี้ก่อนอื่นเหมือนเดิมนะคะ รปแบบจะคล้าย ๆ นะคะ ก็คือให้ pygame มันไปโหลดภาพตัวเกมเรามาก่อนอื่นเราต้องมากำหนดตัวแปรเราก่อนตัวแปรเรา สมมติเมื่อกี้ให้เด็ก ๆ ดูที่อะไรดูที่ตัวละครของเรามันเป็นตัวอะไร นึกออกไหมลูก เช่น ตัวนี้เป็นแมว เพราะฉะนั้น ชื่อตัวแปรก็คือตัวอะไรคะ ตัว Cat ภาษาอังกฤษของใครเป็นตัวอะไรบ้าง ถ้าใครเป็นนก ไหนใครเป็นรูปนกยกมือขึ้น มีใครมีรูปนกไหมคะ ไม่มีหรือ อย่างว่า เห็นอยู่กุ้งก็ตั้งชื่อตัวแปร Bird เลยลูก นึกออกไหม เอาชื่อตัวเกมเรา มาเป็นตัวแปรเลย เราจะได้รู้ว่าอันนี้เป็นนกของเรา เพราะฉะนั้น ใครที่ตัวที่ตัวรูปเกมตัวเองเป็นรูปสัตว์ชนิดไหน นึกออกนะคะ ให้ใช้ชื่อตามตัวสัตว์ชนิดนั้น หรือตัวเกมชนิดนั้น เหมือนของแม่เอาแมวตัวเกมแม่ก็จะชื่อ Cat ก่อน boy ก็ได้ ใช้ boy ก็ได้ เด็กผู้ชาย เป็นรูปเด็กผู้ชายหรือ Girl ของมิ่งเป็นรูปอะไรครับ หมา ก็ Dog นะ ใครไม่รู้ชื่อศัพท์ภาษาอังกฤษ ค้นโดยใช้อะไร Google แปลภาษานะคะ ช่วยประกาศตัวแปรแล้วตามด้วยเครื่องหมายเท่ากับเสมอ เห็นไหมคะ ตรงชื่อตัวแปรน่ะ ชื่อนี้ ก็คือให้เราดูรูป ตัวเกมของเรามันเป็นสัตว์อะไร เราก็ตั้งชื่อตามนั้น อย่ามาพิมพ์ตามแม่นะ แม่ของแม่เป็นตัวแมวไง แม่ก็เลยใช่ cat หมา ก็ใช้ Dog ถ้าใครเป็นนกก้ birdถ้าใครเป็น... โอเค องุ่นเป็นตัวอะไร หมา ก็ dog ดูต่อนะคะ คำสั่งต่อมา เหมือนเดิม พิมพ์ P ก่อน กดตัว P 1 ครั้งแล้วเลือก pygame กด Enter pygame อะไร .image load เราจะใช้คำสั่นี้นะคะ .image load กด . ลงไป กด i แล้วก็เลือก image นึกออกนะ เลือกตัวนี้นะคะ เลือก imageกด Enter กด . อีก 1 ครั้ง พิมพ์ l เห็นไหมคะ เลือก loadใส่วงเล็บนะคะ เพราะรูปแบบเขาคือ ให้ pygame มันไปโหลดรูป เห็นไหมคะ ทีนี้ ตรงนี้นะ ก็คือชื่อชื่อรูปเด็ก ๆ ดูจากไหน เหมือนเดิมนะคะ เช็กชื่อภาพของเรา สังเกตดูชื่อดี ๆ มันมีหลายตัว แล้วมันมีวงเล็บ1 พิมพ์ให้เหมือน ถ้ากลัวพิมพ์ผิดทำอย่างไรคะ ก๊อบปี้ใช่ไหม วิธีการเพื่อจะไม่ให้พิมพ์ผิดนะ เด็ก ๆ คลิดขวาที่ชื่อเรานี่ Properti เห็นไหมคะ ก็อบจากตรงนี้เลย จะได้พิมพ์ไม่ผิด นึกออกนะ ชื่อมันก็จะเหมือนกัน จะได้หาเจอ ไม่อย่างนั้นเดี๋ยวมันหาไม่เจอ ไม่ต้องไปพิมพ์เอง นึกออกไหมลูก ให้เด็ก ๆ เอาใหม่นะ ทำให้ดูใหม่นะเราคลิกที่รูปที่เราจะใช้ 1 ครั้ง แล้วคลิกเมาส์ขวานะ คลิกไอ้ตรงนี้ นี่ ๆ คลิกที่นิ้ว นิ้วกลางเราน่ะ คลิกเมาส์ที่ตรงที่นิ้วกลางอยู่ 1 ครั้ง แล้วเลือกProperties นามสกุลด้วยเห็นไหม อย่างลืมดูนามสกุลด้วยว่ามันเป็น .png เพราะฉะนั้น เราก๊อบชื่อมันก็จะไม่ผิดนะ มันจะเว้นวรรคมันก็จะเหมือนกันเลย กด copy Ctrl + Cเสร็จแล้วก็เอามาวาง... ไหนล่ะ วงเล็บหายไปไหนแล้ว เนื่องจากเป็นชื่อ อย่าลืมนะคะ ถ้าเป็นชื่อรูป ต้องใส่เครื่องหมาย Single Quote หรือ Double Quote ก็ได้ ขีดเดียวก็ได้ ขีด...อยู่ไหนล่ะ อย่างนี้ ขีดเดียวหรือ 2 ขีดก็ได้ นี่คือ Double Quote นี่คือ Double เห็นไหม ก็คือเครื่องหมายคำพูดแบบอันเดียวกับ 2 อันน่ะ นะคะนะคะ กด Ctrl + V วางไฟล์นั้น แล้วตามด้วยนามสกุล เวลาระบุนามสกุลรูป ก็คือต้องใส่ . ก่อน . แล้วก็ เผื่อใครจำไม่ได้ก็ย้อนกลับไปดู ชื่ออะไรนะ นะคะ properties เหมือนเดิม แล้วตามด้วยเราก็ใส่ png ลงไปนะคะ . แล้วก็ตามด้วยนามสกุลเขา เห็นไหมคะ เอารูปเข้ามาแล้ว อย่าลืมเรียกใช้รูป เราเอารูปเขามาแล้วนะคะ เราจะรู้ได้อย่างไรว่ารูปเข้ามา เราก็ต้องไปเรียกใช้รูปนั้นมานะคะ ตอนนี้ในบรรทัดนี้คือคำสั่งpygame.image.load นี่ ก็คือไปโหลดภาพที่เราจะใช้ ดูนะ ดูชื่อดี ๆ นะ มันมีเว้นวรรคอะไรน่ะ เอาตามมันเลย เหมือนที่บอก Copy จะได้พิมพ์ไม่ผิด แล้วอย่างไร ให้เราเข้ามาในตำแหน่ง loop ของเกมเรา เห็นไหมคะ Screen blit สิ่งต่อมาที่เราจะใส่ คำสั่งเดียวกันเลย แต่เปลี่ยนจาก pic bgbgpic เป็นนี่ ๆ ๆ เราจะเรียกตัวแปรนี้มานะคะ cat มานะคะ พร้อมหรือยังคะ ให้เด็ก ๆ เข้ามาที่บรรทัดต่อจากที่เราเรียกใช้ Background screen.blti bg pic นี่คือ background picture เรานี่ดูนะคะ กด Enter เพื่อให้เคอร์เซอร์มันบอกแล้วว่าอย่ากดเป็นอย่างนี้ อย่ากดแป้น Spacebar ถ้าเห็นจุด ๆ เดี๋ยวมันขึ้น Error นะคะเด็ก ๆ ไปท้ายบรรทัดของคำสั่งที่เราจะเริ่มเขียนแล้วกด Enter เห็นไหมคะ มันจะตัด โครงสร้างมันจะจัดระเบียบมาให้ กด S 1 ครั้ง แล้วเลือก screen เหมือนเดิม .blit เหมือนเดิม เลือก blit นะคะ เลือกเอานะไม่ต้องพิมพ์จะได้ไม่ผิด ใส่วงเล็บตรงนี้ ก็คือชื่อ ชื่อตัวนี้นะคะ เราก็ต้องเรียกใช้ cat เรียกน้อง cat ของแม่เรียก cat เด็ก ๆ เป็นตัวอะไร ตัวแปรของเด็ก ๆ นึกออกนะ ใครเป็น boy ก็เรียก boy ใครเป็น dog ก็เรียก dog ใครเป็น Bird ก้เรียก Birdนะคะ เวลาเอามา เราจะระบุตำแหน่งให้มันแล้ว ดูดี ๆ ตำแหน่งจอ เริ่มต้นคือ นึกออกนะ มันมีแกนที่เรียกว่า แกน x กับแกน y นะคะ สูงคือ ตำแหน่งข้างบน แล้วมันจะลงมาข้างล่างอย่างนี้ ไม่เชื่อ เดี๋ยวลองดูนะคะ ถ้ายังไม่เปลี่ยนตำแหน่ง เด็ก ๆ ลองดูก็ได้ เอาเหมือนเดิมเลย เอาเหมือนคำสั่งแรกเลย นี่ เอาเหมือนตำแหน่งนี้เลยนะ เด็ก ๆ ลองดูนะ cat ปุ๊บ ใส่ : แล้วก็ใส่ตำแหน่ง , แล้วก็ใส่ตำแหน่ง 0, 0 เหมือนตัวแรกเลยนะ ให้ดูเลยว่ามัน ตำแหน่งมันเริ่มมาจากไหน ใครพิมพ์คำสั่งนี้เสร็จแล้วกดอะไรคะ เมื่อเราต้องการทดสอบโปรแกรมหรือ Run โปรแกรม กดปุ่ม Ctrl + B นี่ เห็นไหม เราใส่ 0 0 ตำแหน่งน้องแมวมันลอยอยู่บนท้องฟ้า เราอยากให้มันลงมา ให้เราดูอะไรคะ ดูแนวของภาพ Background เราด้วยนะ ก็คือน้องแมวควรจะมายืนอยู่ตรงนี่พื้นดินนี่พอดี เพราะฉะนั้นเราจะต้องเลื่อน 0 ตัวแรกคือ 0 ในแนว เขาเรียกว่าอะไรล่ะ แนวตั้งน่ะคอลัมน์น่ะ นึกออกนะ แล้ว0 ตัวที่ 2 ก็คือ แนวที่เป็นแถวก็คือบรรทัด เพราะฉะนั้น เราจะต้องเพิ่มจำนวนบรรทัด น้องแมวก็ตัวใหญ่ไปด้วยใช้ transform ลดไซซ์ลงหน่อยก็ได้นะคะเด็ก ๆ นี่ Load มาแล้วตัวมันใหญ่นี่ ใช้ตัวนี้ก็ได้นะลด แต่ถ้าไม่ใช้ตัวนี้ลด นึกออกนะ เดี๋ยว...เดี๋ยวค่อยไปแก้ การลดขนาดไซซ์สอนไปแล้วนะ เดี๋ยวค่อยไปแก้ที่หลังก็ได้ เดี๋ยวเรามาเปลี่ยนตำแหน่ง เดี๋ยวจะเพิ่มสัก... เพิ่มจำนวนบรรทัดนะคะ ที่ 250 ดูจากอะไร 1. อันดับแรก เด็ก ๆ เช็กจากนี่ได้ เช็คจากตัว screen เราเห็นไหมคะ ตำแหน่งบรรทัดนี่ เห็นไหม ตำแหน่งคอลัมน์น่ะ สูงสุดก็คือ 1,600 บรรทัดสูงสุดคือ 800 ตอนนี้นี่เอาบรรทัดที่ 250 กด Ctrl + B ดูว่าน้องแมวเราเลื่อนลงมาหรือยัง ได้พอดีเลย เห็นไหมคะ น้องแมวอยู่ตรงพื้นดินพอดี บางคนเลื่อนลงไปเยอะให้นึกถึงนะ ไม่ใช่ว่าเราจะเอาลงมาจนสุดไอ้นี่ถูกไหมคะ บางทีมันก็ไม่จำเป็นต้องลงมาจนสุดฉากเสมอไป ให้เราดูระดับภาพ พื้นที่ของภาพเราด้วยนะกดหรือยัง Ctrl + B ยัง กดหรือยังกดปุ่นี้หรือยัง นี่ เดี๋ยว Error ไม่ขึ้นหรือError นี่ ทำไมถึง name error บรรทัดที่เท่าไร line 18 ทำไมตัวนี้ Error ดูบรรทัดนี้นะคะ ไอ้กุ้ง กุ้งดูบรรทัดนี้เด้อ หายไปไหน บรรทัดนี้หายไปไหน run trougth หหายไปไหน 1 บรรทัด ไม่นี่ ก่อนหน้าเห็นไหม ข้างบน ข้างบน อันนี้ ถูกแล้ว ขึ้นไป 17 ไม่ ๆ ไม่ต้องตล อีกบรรทัดหนึ่ง แล้วก็...Enter Enter เท่ากับ วรรค ๆ แล้วก็กด Ctrl + B กด มันใหญ่ใช่ไหม เดี๋ยวค่อย จำได้ไหมที่บอกว่า ไหนล่ะ นี่ ใช้อะไรนะ ใช้โปรแกรม Paint อยู่ไหน p p กด P P-Aกดตัว p ตัว i p-a-i- Paint โอเค ทีนี้เปิดหรือยังไปที่เมนู File open ตัวไหน ตัวนี้ใช่ไหม เลือกเดี๋ยว ๆ Select all ก่อน แล้วก้เลือกดตัวนี้ ลดลง 50 50 50 โอเค เอาอีก ลงอีก ทำอีกครั้งหนึ่ง 50 อีก ดูสิ ทีนี้ Ctrl กด Ctrl + B ใหม่ อันนี้หรือเปล่า ชื่อ... ชื่อตัวเดียวกันไหม ลืมดู อันนี้ชื่ออะไร อ๋อ นก 2 open 1 ใช่ไหมนี่ก่อน นี่ก่อนลูก อันนี้ก่อน Cancel ก่อน ต้อง select ก่อนเลือกทั้งหมดก่อน แล้วค่อยมาเลือกอันนี้ อีกทีหนึ่ง อีกทีหนึ่ง อันนี้เหมือนเดิม 50 อีกทีหนึ่ง โอเค โอเค Ctrl + B ใหม่ กด Ctrl + B น่ะ เห็นไหมทีนี้ ในกรณีในกรณีของกุ้งเต้นนี่นะ วิธีการ มันจะมีตัวนี้ เห็นไหม เดี๋ยวค่อย ถ้าอย่างนี้ ถ้าบางคนเอารูปเข้ามานะคะ เด็ก ๆ ดูนะคะ บางคนเอารูปเข้ามาแล้วมันมีกรอบสีขาว ๆ นั่นก็คือมันมี Background มาดูวิธีเอา Background ออกจากรูปเรา จด มีกระดาษจดไหมคะ จดไว้ ทุกคนดู เดี๋ยวจะมาสอนวิธีเอาภาพที่มี Background ออกนะคะ ภาพที่มี Background เช่น...ก่อนนะ ไม่แน่ใจตัวนี้มีหรือเปล่า เดี๋ยวขอลองเปิดดูก่อนนะ นี่นะคะ บางทีรูปที่เอามานี่ มันนี่นะคะ บางทีรูปที่เอามานี่มันมีไอพื้นหลังขาว ๆ อย่างนี้ ชื่ออะไร Tiger เดี๋ยวลองดูนะ เดี๋ยวของลองเอา Tiger เข้ามาดูก่อนนะ แป๊บหนึ่งนะคะ เด็ก ๆ เดี๋ยว Test ให้ดูดูนะคะ ถ้ารูปใครที่มีพื้นหลัง เดี๋ยให้ดู เดี๋ยวให้ดู เหมือนของกุ้งเต้นนี่ ภาพเขามีพื้นหลังสีขาวนะ ดู ถ้าอย่างนี้นะคะ มันจะมี backg ข้างหลัง ดูดี ๆ นะ เดี๋ยว Test ให้ดูนะคะ นี่ เมื่อใดที่ใครเอา ภาพที่เอามาใช้ มีสีขาว ๆ ล้อมกรอบนี่ ก็คือรูปนี้มี Background วิธีจะเอาออก จดด้วยนะคะเด็ก ๆ จดไว้ เพราะอย่าลืมว่าเด็ก ๆ บางคนมีหลายรูปนึกออกนะ เพราะฉะนั้น ต้องไปเอาออกเอง แต่วันนี้จะสอนเอาออกแค่ 1 รูป ให้ไปที่เว็บไซต์ ให้เด็ก ๆ เปิด Google นะคะ แล้วพิมพ์คำว่า bg bg bg แล้วก็ตามด้วยคำว่า "Remover" นี่นะคะ ใช้ Google แล้วพิมพ์คำว่า "bg remover ตัวนี้นะคะเด็ก ๆ นี่ ให้ค้นคำว่า "bg" แล้วก็ตามด้วย r-e-m-o-v-e-r ก็คือมันจะเป็นเว็บสำหรับเอาภาพที่มี... เอาพื้นหลังที่อยู่ในรูปเราออกนะคะ มันก็เลยมีชื่อว่า bgremovนะคะ เห็นไหมคะ ให้เด็ก ๆ เข้าเว็บนี้เลย removebg นี่นะคะ คลิกเข้าไปเลย นี่ ที่มันขึ้น Remove background for image นี่ นะคะ แล้วที่ตัวนี้ Upload image ก็คือให้เราคลิกที่ upแล้วเราก็ไปเปิดไฟล์รูปภาพที่เรามีตัว Background น่ะนะคะอยู่ ตัวอย่างของเราก็คือ tiger 2 เลือกภาพนั้นแล้วคลิก open นี่ ถ้า Background ออกแล้ว ข้างหลังมันจะเป็นไอ้ตารางสีเทา ๆ อย่างนี้หมายถึงเอาออกแล้วนะคะ เด็ก ๆ ก็กด Download ไฟล์มันก็จะมาอยู่ที่ dowload เรานะก็อีกขั้นตอนหนึ่งก็แก้ชื่อน่ะค่ะ เด็ก ๆ ก็ก๊อบฯ ไปวันางใน Drive เรา ในโฟลเดอร์เรานะคะ นี่นะ โฟลเดอร์ที่เราสร้างเกมไว้นี่ ชื่อมันยาวใช่ไหมคะ เราก็ทำการตัด เดี๋ยวนะ มันให้ Rename Windows 11 นี่มันทำไมไม่ขึ้น Rename ให้ ถ้าไม่ขึ้น เราก็เปิด โปรแกรม พอ Save มาแล้ว open with paint ให้เรา Save As นะ save as เ็นรูเรานี่ เดี๋ยวกด Ctrl + B ดูใหม่นะคะ น่ะ ตรงนี้จะปิดนะ สังเกตนะภาพนี้มี Backg นะคะ เมื่อกี้เราเปลี่ยนแล้ว ลอง Ctrl + B ใหม่ ไม่แก้ให้ผมน่ะ ไปไหนล่ะนี่มันคือไม่ให้รี tranrencversion นี้แปลงยากจริง โอเคนะคะ เดี๋ยวค่อยไปแก้เอานะ ก็คือชื่อมันก็จะเปลี่ยนตามไปด้วยนะ ต่อมา ต่อมาเดี๋ยวเราจะต้องไปต่อนะคะเด็ก ๆ เราได้รูปแล้ว สิ่งที่จะทำต่อไป ก็คือไอ้ตัวฉากนี่นะคะ มันจะเคลื่อน ทำให้ฉากมันเคลื่อน ซึ่งก็คือในสไลด์นี้ของเรานั่นเอง ไหนล่ะ Power Point ผมอยู่ไหน มาดูนะคะ คำสั่งที่จะทำให้ฉากเมื่อมีตัวละครเข้ามาแล้วนี่ นั่นก็คือเมือ่แต่ความจริงแล้วตัวละครมันไม่ได้เดินน่ะ เราใช้ฉากมันเคลื่อนนั่นเองนะคะ อันนี้สไลด์คนละอันนะ โทษที โทษที เปิดผิดครับ สิ่งที่เราจะทำต่อมานะคะ Background มาแล้ว นำเข้า Velocity to Backgroมาดูไอ้คำว่า Velocity มันห ว่าอย่างไรนะคะ แปลว่า ความเร็ว ก้คือทำให้ Background มันใส่ความเร็วให้ Background นั่นเองนะคะ วิธีการ ตอนนี้เด็ก ๆ จะมาที่ตำแหน่งของที่ต่อจาก Background นะ เรานำเข้า Background แล้วต่อไปเราก็จะประกาศตัวแปรให้กับ... ก็คือเริ่มจากกำหนดเงื่อนไขให้ Background ของเรานั่นเอง ไปยังตำแหน่งที่ ก่อนนำเข้าเกมนะ นะคะ แล้วก็ใส่ # ไปว่า เป็นภาษาไทยแล้วกัน จะได้เข้าใจง่าย จัดการนะคะ เราจะจัดการตรงส่วนนี้เป็นส่วนของจัดการกับฉากเกม จัดการในส่วนของฉากเกมของเรานั่นเอง ฉ ฉิ่งอยู่ไหนหว่าฉ ฉิ่ง อยู่ไหน ใครรู้ ฉ ฉิ่งอยู่ไหน บอกเราที เราหา ฉ ฉิ่งไม่เจอ เจอแล้วมันอยู่ตรงตัว Cจัดการฉากนะคะ เราจะมาทำการจัดการในส่วนของฉากก่อนนะคะ อันดับแรก ก็คือสร้างตัวแปรนะคะ นะคะ มันจะมีbgx เราจะมีชื่อตัวแปร 3 ตัวนะคะ ตัวแปร bgx ก็คือตำแหน่งของ Background ในแกน x bgy ตำแหน่งของ Background ในแกน ybgvelo velo มาจาก velocity ก็คือกำหนดความเร็วให้ Background ก็คือค่าเริ่มต้นของตัวแปรพวกนี้ คือ 0 ทั้งหมด เราก็เริ่มประกาศตัวแปรแรกก่อน จะให้ตัวแปรตัวที่หนึ่ง bg ขอโทษค่ะ ตัวแปรแรกนะคะ ใช้ชื่อว่า bgx ซึ่งหมายถึงตำแหน่งของBackground ในแกน x เพราะเวลาเราจะเอารูปไปนี่ เราต้องระบุขอบเขตของรูปนั้นน่ะ นึกออกนะ กำหนดค่าเริ่มต้น กด Spacebar 1 ครั้ง ก็เครื่องหมายเท่ากับ 0 นะคะ มี x แล้วก็ต่องมี y bgy = 0 เหมือนกัน ตัวที่ 3 บอกแล้ว ชื่อ bg แล้วก็ v-e-l-o ซึ่งมาจาก Veloคือ ถ้าพิมพ์ Velocity เลยจะยาวไป ค่าเริ่มต้นเหมือนกันค่ะ 0 ก็คือไอ้ค่าเริ่มต้นของฉากเรานี่ เราจะให้เริ่มที่ตำแหน่งที่ 0 ตำแหน่งในแกน x เริ่มที่ 0 y เริ่มที่ 0 แล้วก้ความเร็วก็เริ่มที่ 0 เสมอ ก็คือประกาศตัวแปรนี้ แล้วก็กำหนดค่าเริ่มต้นให้เป็น 0 ทั้ง 3 ตัวแปรตอนนี้เด็ก ๆ จะต้องมีตัวแปรเพิ่มขึ้นมา 3 ตัว เพื่อจัดการฉาก ก็คือ bgx bgy แล้วก็ bgvelo สิ่งที่เราจะทำต่อมา ให้ดูนะคะ การใช้งานและความหมายของ key ความเร็วของตัวเกมน่ะ มันขึ้นอยู่กับเรากด key น่ะ กด Key ในที่นี้ก็คือแป้น แป้นพิมพ์นะคะ คำสั่ง ให้เด็ก ๆ ดูที่คำสั่งเขานะคะ pygame.K นี่ หมายถึงปุ่มนี้ มันจะหมายถึงเป็นปุ่มให้กระโดดนะคะ up ก็คือขึ้น กระโดดขึ้น คือ เลือกได้ 2 ตัว จะใช้ K_UP หรือ K_spcก็คือเราจะใช้ คือ ถ้าใครเคยเล่นเกมผ่าน ผ่านคอมพิวเตอร์นึกออกนะปุ่มที่ใช้กดน่ะนะ เวลากระโดดบางเกมมันให้กด Spacbar ใช่หมลูก แล้วบางเกมมันให้กดแป้นลูกศรชี้ขึ้นน่ะ นึกออกนะ เพราะฉะนั้นมันก็เลย ไม่ใช่มันล่ะ คือ ไอ้ตัวคำสั่งใย library pygameใช้ 2 คำสั่งนี้ ก็คือ K_UP กับ K_SPACE นี่ กำหนดว่า ถ้ากดปุ่มนี้มันจะหมายถึงการการที่ตัวเกมมันกระโดด นึกออกนะคะ ทีนี้ แต่ถ้าเราต้องการให้มันไปทางซ้าย คำสั่งนั้นก็คือ K_LEFT ตัว pygame ต้องใส่อยู่แล้วนะ ตัวคำสั่งแล้วตามด้วย Key น่ะ K มาจาก Key เขาก็เลยย่อเหลือแค่ K นะคะ แล้วก็ _DOWN ก็คือปุ่มที่กดลง เห็นไหมคะ key แล้วก็ Right ก็คือตามลักษณะลูกศร นึกออกนะคะ บน ล่าง ซ้าย ขวา นะคะ มันจะมีทิศทางเคลื่อนไปตามลักษณะลูกศร ทีนี้เมื่อเราได้ เราประกาศตัวแปรแล้ว ก็คือเราจะมากำหนดเงื่อนไขนะคะ เพราะฉากมันจะเคลื่อน ก็คือนั่นหมายความว่าเกมมันเดินไป เดินจากฉากนี่เดิน ก็คือเดินจาก เราเอาตัวเกมวางไว้ทางซ้ายใช่ไหมคะ มันจะเดินจากทางซ้ายไปทางขวาเพราะฉะนั้น ตัวที่เราจะให้มันเคลื่อน ก็คือแป้นลูกศรที่จะให้มันไปทางขวาก็คือ K_RIนะคะ เงื่อนไขก็จะเอามาไว้ที่ ทีนี้ทีนี้เราจะมากำหนดเงื่อนไขเพิ่มนะคะ นะคะ จะอยู่ต่อจากตัวนี้เลยนะครับ ตัวนี้เลยไปที่ที่เรามีลูปนี่เห็นไหม นี่นะคะ foe event มี if ที่ 1 ใช่ไหม มันจะอยู่ตรง if ที่... ไปไหนแล้ว เห็นไหมคะ เป็น if ที่ 2 ที่ต่อจากเงื่อนไขแรกนะ ดูตำแหน่งดี ๆ นะคะ นี่คือ if ที่ 2 ใช่ไหมเด็ก ๆ ใส่ if เข้าไปนะคะเด็ก ๆ กด i ปุ๊บ ให้เลือก if coเพื่อให้มันขึ้นโครงสร้างอย่างนี้นะ เข้าใจนะคะ อย่าไปกด i-f นึกออกนะ ให้กด i แล้วเลือก if condition มันจะได้ขึ้นโคครงสร้างของ pygame เราจะมากำหนดเงื่อนไข เพื่อให้ฉากของเราน่ะ มันทำงานนั่นเองนะ loop กับ event มันจะอยู่ด้วยกัน กำหนดช่วงเวลาและเหตุการณ์ เมื่อใช้คำสั่ง if เสร็จ คำสั่งแรก ก็คือ event.typyเราจะเลือกใช้เหตุการณ์ที่เกี่ยวกับแป้น ก็คือ event.type == นะคะ ถ้า ถ้าถ้า event ก็คือเหตุการณ์ กด e แล้วคลิกที่ event.t t เราเลือก t-y-p-e type เห็นไหมคะตอนนี้เราจะมากำหนดเงื่อนไขนะคะ ในการทำ Loop if นะคะ ซ้ำนะคะ ทวนซ้ำนะคะเด็ก ๆ if กด e ปุ๊บ event ขึ้นมากด . แล้วก็ตามด้วยตัว t เลือก type t-y-p-etype เห็นไหมคะ ถ้าใช้ if จำไว้นะคะ เครื่องหมายเท่ากับใน if ต้องมี 2 ครั้ง บอกเท่ากับ แต่ไม่ได้หมายความว่าใส่เท่ากับครั้งเดียวนะ ถ้าเป็น if = ใน if pygame พิมพ์ p ก่อน แล้วเลือก pygame เลือกอะไรนะ . ใส่ . แล้วก็ตามด้วย คีย์อะไร คีย์แรก K_DOWN นะคะ K_DOWN คำสั่ง K_downK_DOWN ตัวนี้หมายถึงกด กดปุ่มมันโดนกดน่ะ K_DOWNหมายถึง เมื่อปุ่มมีหารกดปุ่มเกิดขึ้นนะคะ ปุ่มที่จะกดก็คือปุ่ม K_RIGHT นะคะ pygame.KEY K ใหญ่นะคะ KEY พิมพ์ด้วยตัวใหญ่นะลูก D-O-W-N ตัวนี้หมายถึง ถ้ามีการกดที่ปุ่ม KEY DOWN ในที่นี้ ปุ่มมันโดนกดน่ะค่ะ ปุ่ม ปุ่มโดนกดแต่เรายังไม่ได้บอกว่าปุ่มอะไร ใส่อะไรคะ เสร็จประโยคของ if จะต้องใส่ : เสมอ นะคะ แล้วมาที่ pass ลบ pass ออกตัวโครงสร้างมันนะ คำสั่งต่อมาที่เราจะใช้ ก็คือ ใส่ if อีกครั้งหนึ่งนะคะ เพราะต้องการระบุว่าไอ้ Key ที่เราจะใช้กดน่ะ คือคีย์อะไร กด i แล้วเลือก if กด e แล้วเลือก event นะคะ event.KEY = เท่ากับ เท่ากับนะคะก็คือ if แรกบอกว่าเมื่อเหตุการณ์ที่เกิดขึ้น ก็คือเมื่อมีการกดปุ่ม if ที่ 2 บอกว่า อันที่โดนกดคีย์ที่โดนกดนี่ จะต้องเป็ฯคีย์ที่ชื่อว่า พิมพ์ pygame นะคะ พิมพ์ p แล้วเลือก pygame.K K ใหญ่ _ K_RIGHT สังเกตคำสั่งตรงนี้นะคะ เด็ก ๆ ดูดี ๆ นะ จะใช้ตัวใหญ่นะคะ K_RIGHT ก็เป็ตัวใหญ่ จะใช้ตัวใหญ่เสมอที่เกี่ยวกับคีย์น่ะลูก กดด้วยตัวพิมพ์ใหญ่ทั้งหมดนะคะ R-I-G-H-T pygame . ไม่ใช่ ,: ไม่ใช้ , . นะคะ K_RIGHT อธิบายนะคะ ถ้ามีรเหตุการณ์พิมพ์ พิมพ์เกิดขึ้น ก็คือมีการกดปุ่มนะคะ K KEYDOWN ก็คือถ้ามันมีการกดปุ่ม แล้วไอ้ปุ่มนี้นะคะ จะต้องเป็นปุ่มอะไรนะ ลูกศรที่ไปทางขวานะคะ ถ้ามีการกดปุ่มลูกศรที่ไปทางขวาปุ๊บ อย่าลืมนะคะ ทุกครั้งที่จบประโยคของ if เราจะต้องใส่ : เสมอ นะคะ เพราะกด Enter เด็ก ๆ สังเกตแทบมันจะปรับให้อัตโนมัติอัตโนมัตินะคะ เพราะฉะนั้น เวลาพิมพ์โค้ดดูด้วยนะคะ ใช้ sublime สิ่งที่เราจะทำต่อมา ก็คือเลือกเรียกตัวแปรความเร็ว เพราะเราต้องการรู้ว่าไอฉากนี่นะคะ ตัวแปร b พิมพ์ bg แล้วเลือก velo นะ ไปเลือกคำว่า "velo" ค่าความเร็วมันเริ่มที่ 0 เพราะฉะนั้นพอมีการกดปุ่ม ปุ๊บ เราจะให้ความเร็วของฉากมันเพิ่มขึ้น จาก 0 เพิ่มเป็นเท่าไหร่ อย่าเพิ่งเพิ่มเยอะ ก็จะ... ลองเพิ่มที่ 5 ก่อน = 5 ส่วนต่อมานะคะ เราจะมาทำให้มันแสดงผล มือไปไวกว่า ไหนล่ะ นะคะ กด Enter แล้วดูตำแหน่งนะคะ เด็ก ๆ ดูตำแหน่งดี ๆ นะ มันจะอยู่ตรงกับ เห็นไหมคะ เพราะฉะนั้น เด็ก ๆ จะต้อง นี่นะ ดูตำแหน่ง for คือตรงนี้ พอ Enter ลงมา กด Backspace ย้อนไป for ก็คืออีก tab หนึ่ง 2 ครั้ง ย้อนไป เห็นไหมคะ จะอยู่ตรงกับตำแหน่ง screen.fill นี่ โอเคไหม เรียกใช้ตัวแปรที่ชื่อว่า bgx นะคะ เพราะมันเคลื่อนไปทางขวา ตำแหน่งของแกน ก็คือแกน x แกน x คือเป็นคอลัมน์ มันจะอยู่ในแนวคอลัมน์ เพราะฉะนั้น ต้องเลือกตัวแปรที่เป็นแกน x ก็คือ bgx = - = ใช้เครื่องหมาย ลบนะคะ แล้วก็ bgvelo ใส่เครื่องหมาย - ก่อน -= เรียก bgvelo มาใช้ ตัวนี้ยังไม่ run นะคะ ยังไม่จบโค้ดมันยาวหน่อย เพราะมันเพิ่งระบุว่าถ้าเกิดเหตุการณ์อย่างนี้ แล้วกดปุ่มนี้สิ่งที่จะทำ ก็คือให้แสดง ไอ้ Background ให้มันเคลื่อน แต่ตอนนี้เรายังไม่ได้สั่งให้แสดง กำหนดมันนี่ ทีนี้ตรงส่วนที่จะแสดง ก็คือตัวนี้ screen.blit background เรานี่ color เราไม่ใช้และ้เดี๋ยวจะลบออก กดลบทิ้งได้เลยเด็ก ๆ เช่นเดียวกัน ตัวแปรก็ไปลบออกเลยนะคะ bgcolor เราไม่ใช้ ใช้ background ที่เป็นรูปภาพไปแล้ว ลบเสีย พื้นที่จะได้ลดลงนะคะ ลบ 2 ตัวนะคะ ลบ backgroundcolor กับเรียกใช้ backgroundcolor ลบออก ทีนี้ ตำแหน่งที่จะมาเปลี่ยนนะคะ ก็คือเปลี่ยนจาก 0 0 นี่ ไปเรียกใช้ตัวแปรแกน x bgx นะ พิมพ์ b แล้วเลือก bgx อีกตัวหนึ่งก็คือ b แล้วเลือก bgy เห็นไหมคะ แต่สิ่งที่อยู่ในวงเล็บจะเปลี่ยนเป็น... ไม่ใช่วงเล็บเล็กอย่างนี้นะคะเด็ก ๆ ดุ เปลี่ยนเป็น อะไรล่ะ วงเล็บที่เป็นสีเหลี่ยมน่ะ แทน ไม่ใช่ ไม่ใช่ปีกกานะ ปีกกาก็ไม่ใช่ กดอย่างไร กดธรรมดา อย่างนี้นะคะ เป็นตัวนี้นะลูก เป็นสี่เหลี่ยมอย่างนี้นะ ต่างกันนะ ไม่ใช่วงเล็บอย่างนี้นึกออกนะ วงเล็บที่เป็นรูปสี่เหลี่ยมอย่างนี้เห็นไหม เด็ก ๆ เห็นไหม อยู่ตรงตำแหน่งปุ่ม ปุ่มที่อยู่ตรงถัดจากแถวตัวแรกลงมาน่ะ อยู่ตรงตัว ฐ ฐาน บ ใบไม้ กับ ล ลิง ไหมคะ นะคะ เปลี่ยนนะคะ เปลี่ยนเป็นวงเล็บที่เป็นรูปสี่เหลี่ยมนะคะ เพราะเราเรียกใช้ตัวแปรแทนกำหนดค่าโอเคนะคะ ส่วนต่อไป ต้องมากำหนดต่อให้ไอ้ตัว ตัว ตัวฉากน่ะค่ะ ไหลไปเรื่อย ๆ เมื่อกี้มันแค่ถ้ากด 1 ครั้ง มันก็จะเคลื่อนเป็น 1 ครั้งนึกออกไหม กำหนดตัวนี้กำหนดเงื่อนไขให้ Background เคลื่อนไหวไม่สิ้นสุด เขาบอกเคลื่อนไหวไม่สิ้นสุดนะคะ เด็ก ๆ ไปที่ตำแหน่งของต่อจากนี่นะ ดูตำแหน่ง if นะคะ ตำแหน่ง if จะอยู่ตรงกับ...มือ ๆ ๆ ๆ เห็นไหมคะ เลื่อนเข้าไปจาก 2 if แรก 1 อันนะคะ ดูดี ๆ นะคะ 2 if แรก เลื่อนไปครั้งที่ 1 เห็นไหมคะตำแหน่งที่ 2 ไม่ใช่ อยู่ตรงกับตำแหน่งนี้ กด i แล้วก็เลือก if contition เหมือนเดิม นี่นะคะ จะอยู่ตรงตำแหน่งนี้นะคะ ดูตำแหน่งดี ๆ นะ เพราะถ้าใครวางตำแหน่งโครงสร้างมันไม่ถูกนี่ นึกออกนะ เจ้าน้อง if มันจะงงนะ มันจะบอก ใช้ตรงไหนนี่มันไม่ใชช่ มันไม่ใช่ มันจะบอกเรานะ คำสั่ง เงื่อรนไขแรกนะคะ if ตัวแปรที่ชื่อว่า bgx เลือก bgx ค่ะ กำหนดค่าให้ bgx ให้เท่ากับ- คอลัมน์เราน่ะนะ นี่ เห็นไหม 1600 น่ะ นะคะ ครึ่งหนึ่งของ 1,600 ก็คือ 800 -800 หาร 2 ว่าอย่างนั้นเถอะ ถ้า bgx นี่นะคะ มันเท่ากับ - 800 เมื่อไหร่ บอกแล้วเป็นคำสั่ง if อย่าลืมปิดด้วย : เสมอ มาที่ pass กด Delete ออก กด Delete Pass ออกนะคะ คำสั่งต่อมา กำหนดให้ bgx = 0 ในเงื่อนไขเป็นอย่างนี้ อย่างงนะเด็ก ๆ นะ เพราะมันเป็นเงื่อนไขไง มันจะคืนค่ากลับไปกลับมาอย่างนี้ สิ่งที่เราจะต้องทำต่อมา ก็คือไปเรียกใช้ตัวนี้นะคะ เหมือนเดิม ต่อจากบรรทัดที่ เราเรียกไอ้นี้แล้วนะคะ กด s เพื่อเลือก screen คำสั่ง screen นะคะ เรียกใช้ฉากนี้ นี้ blit ใส่วงเล็บ แล้วใส่... เรียกใช้ bgpic เหมือนเดิม เรียกใช้ตัวแปร bg pic นะคะ คือตัวแปร Background เรา ใส่ : เอ้ย ไม่ใช่สิ่ : นะ แล้วก็ตามด้วยวงเล็บสี่เหลี่ยมนะคะเด็ก ๆ เธอกดไอ้นี่ทุกทีเลย วงเล็บสี่เหลี่ยมไม่ต้องกด Shift ท่องไว้ ๆ พิมพ์ b แล้วเลือก bgx ค่ะ ค่าของ bgx ให้เพิ่มเข้าไป บวกเข้าไป 800 ใส่เครื่องหมาย + แล้วก้ใส่ตัวเลข 800 ลงไป เราก็เรียก bgy มาใช้งาน เลือกbg เลือก y เลือก bgy ตอนนี้เราจะมีโค้ดเพิ่มมาอีก 2-3 บรรทัดนะคะเด็ก ๆ ลองกด Ctrl + B ดู อาจจะขึ้น error ก็ได้ ลองกด แล้วก็ B แล้วกดแป้นดู เด็ก ๆ เห็นอะไรไหม เห็นอะไรไหม เห็นไหมตัวฉากน่ะ มันเลื่อนใช่ไหม คือ ภาพรอยต่อฉากมันอาจจะไม่เนียน ก็คือตำแแหน่งที่เราไปตัดมันน่ะค่ะ - 800 อะไรอย่างนี้ เดี๋ยวจะลองตัดที่มันไม่ใช่ -800 ดู เดี๋ยวขอลองนะคะ ขอลองเป็น -1000 ขอเปลี่ยน ขอเปลี่ยนตัวเลข นี่เห็นไหม ตำแหน่งที่ภาพมันตัดน่ะ มันไม่ต้อใช่ไหม เพราะฉะนั้น เราก็เลือกตำแหน่งที่ตัด = เท่าไรคะ แกน x เราคือเท่าไร 1,600 สูงสุดเราคือ 1600 เพราะฉะนั้นตรงนี้ เราก็ต้องเท่ามันนั่นล่ะ มันจะได้เนียน ๆ รอยตัดมันจะได้เนียน ๆ นึกออกไหม เอาใหม่นะ Ctrl + B ใหม่ กดแป้น นี่ เห็นไหม มันเริ่มใหม่ แต่นะคะ มันจะมีเว้นนิดหนึ่ง เพราะฉะนั้นเราควรเพิ่ม เพิ่มตำแหน่งตรงนี้เข้าไปเข้าไป นี่ เห็นไหมคะ รอยต่อมันไม่เนียนนะ เพราะฉะนั้น ตรงตำแหน่งตัดก็จะเป็น 1599 แล้วก็ ไอ้นี่ลบที่ 1,600 อาจจะสลับนะคะ 1600 ให้เด็ก ๆ ดูที่อะไร ดูที่ตัว screen ตัวนี้ ของตัวเองเท่าไร ดูดี ๆ นะคะ ไปเทียบกับตัวนี้เอาลูก ลบอันนั้นแล้วเพิ่มอันนี้หรือเปล่า 1599 ลองได้มันลองได้ นี่เห็นไหมมันมีรอยต่อนิดหนึ่งนี่ เราจะต้องทำให้มันพอดีกัน เพราะฉะนั้น ไอ้นี้ก็ต้องเริ่ม 1599 เหมือนกันไหม นี่ ๆ เห็นไหม รอยตัดหายไปแล้ว มันมี มันมีอะไรล่ะ มันมี มันมีส่วนขาด ส่วนเกินนิด ๆ หน่อย ๆ นะคะ เราเขียนเราก็ต้องทวนอย่างนี้ล่ะนะคะ เรายืมภาพเขามาใช้ไงมันก็เลยไม่เป๊ะ นี่เห็นไหม เคลื่อนเร็วหรือเคลื่อนช้าใช้เลขตัวนี้นะคะ เลขไอ้ 5 นี่ ไอ้ 5 ไอ้ 6 ไอ้ 10 นี่ ดูนะคะ เดี๋ยวให้ดู น้องวิ้งเป็นจรวดเลย ใส่ 10 เข้าไปก็คือถ้าเป็นวิ่งเราอาจจะเพิ่มความเร็วได้ เห็นหรือเปล่า ใครไม่เคลื่อน ยกมือ อันดับแรกเช็ค Coding เราก่อนนะคะ สิ่งที่เด็ก ๆ จะต้องมีเงื่อนไขแรก ดูบรรทัดนี้ ใน loop จาก run = false เราเพิ่มเงื่อนไขในการกดแป้นใช่ไหม เข้าไป 1 2 ทั้งหมดกี่อันนี่ นี่นะคะ 3 เงื่อนไขนี้จะต้องมี เนื่องจากของข้าพเจ้าเป็นเดินข้าพเจ้าลดลงมา 5 เหมือนเดิมนะครับ bgvelo นี่คือความเร็วของการเคลื่อนที่ ของฉากเรานั่นเองนะคะเด็ก ๆ ตำแหน่งค่าตัวนี้บอกแล้วให้ดูที่คำสั่งตัวแปรที่ชื่อ screen ของเรานี่ ที่เรา set ไว้เท่าไรเด็ก ๆ บอกแล้วนะคะ ถ้าใครขึ้น error อันดับแรก ดูบรทัดที่มัน error นะ สังเกตนะคะ ตำแหน่งที่ผิด ถ้าใช้ Sublime บรรทัดมันจะบอก ดูตรงนี้เขาผิดนี่เด็ก ๆ เด็ก ๆ เวลา บอกแล้ว เวลา เวลาเราทำไอ้นี่ บางคนมาทีหลังแล้วไม่ทัน พอมาดู if มันอยู่ตรงตำแหน่งนี้ เด็ก ๆ จะชอบไปใช้วิธีกด Spacebar เดี๋ยว Ctrl + Bเดี๋ยวดูนะคะ Ctrl + B ให้ดู มันจะชี้เลย บรรทัดแล้วให้เด็ก ๆ ดูตรงข้อความนะลูก นี่ ถ้ามันขึ้นว่า นี่ Tab Error เห็นไหม ถ้าขึ้น TabError ให้เด็ก ๆ เช็กตำแหน่งตรงนี้เลย ถ้ามันขึ้น .. อย่างนี้ เด็ก ๆ ไปกด space bar ไม่ได้กด Tab ตำแหน่งบรรทัดมันจะบอกชัดเจนเลยว่าอยู่ตำแหน่งไหน สิ่งที่ผิดคืออะไร เห็นไหมคะ โปรแกรม Sublime มันจะแจ้ง Error ของตำแหน่ง บรรทัด บอกสาเหตุที่ Error เสมอให้ดูตรงนี้ด้วยประกอบกันนะคะ เราก็ต้องกด delete ลบออกแล้วก็กด Tab ไป ให้ตำแหน่งมันตรงแค่นั้นเอง เห็นหรือเปล่า ได้แล้ว แก้ได้ เพราะฉะนั้นเช็ก Error ดี ๆ นะคะ ของใครยังไม่ออกอีก ใครยังไม่สามารถเดินได้ เดินได้ ไม่หอนสิ ดูบรรทัดที่ Error คือ line line 33 ตรงตำแหน่ง error บอกว่า name error ยังไม่ได้ประกาศตัวแปรนี้หรือ bgy นี่มันไม่รู้จัก เพระาฉะนั้น ต้องย้อนไปดู ที่ตำแหน่งที่ นั่น เห็นไหม ประกาศตัวแปรซ้ำชื่อตัวแปร บอกแล้วว่าตัวแปรจะมีชื่อได้แค่ 1 ชื่อมันจะไม่ซ้ำ เอากด...ดูตำแหน่งตัดต่อรูปด้วยเห็นไหม มันตัดไม่เนียนนี่ นึกออกนะ ให้มาเช็กว่าอาจจะเริ่ม หยุดไม่ได้ แสดงว่ามันลืม KEY นี้หรือเปล่าscreen.blit นี่ไง เดี๋ยวเด้อ pic บวก 800 Velo -0 -805 pygame get event getK_DOWN K_RIGHT ไม่ขึ้น Error เสียด้วย ไม่เป็นไร หยุดไม่ได้ไม่เป็นไร แค่นั้นพอ เช็กว่า ไปไหนล่ะ ดูรูปนะ ตำแหน่งให้เขากด Ctrl + B ใหม่Ctrl+ B กด นี่ เห็นไหม ตำแหน่งที่ตัดรูป ดูอย่างไร ดูตรงนี้นี่ที่เปลี่ยนน่ะเห็นไหม ที่แม่บอกว่าตรง Screen ตัวเองตั้งไว้ที่เท่าไรเห็นหรือเปล่า เพราะฉะนั้น ตรงนี้ ตรงนี้แก้เลข ตรงนี้เห็นไหม ใช่ไหมรูปมันสูงสุด ก็คือความกว้างมันสูงสุด 1200 ลองแก้ แก้เป็น 12 Ctrl + B ใหม่กดเลื่อนนี่ แล้วทีนี้ตำแหน่งนี้เห็นไหม ถ้าเราปรับตรงนี้ปุ๊บนี่ เอาปรับมันมาตรงนี้ เราอาจจะตัดให้มันเกินมาสักหน่อยลองเพิ่มจาก 800 เป็น 1000 สิ ลองเพิ่ม Ctrl + B ใหม่ นี่นะ ก็คือให้นึกถึงว่า1000 มันเยอะไป 900 ลอง 900 อยากได้ใบไม้ นึกออกนะ ให้เขาลองปรับลดไอ้ค่าตรงนี้ ก็คือให้รอยต่อของรูปมันเนียนไม่ใช่ตัดแล้วต้นไม้ขาดครึ่ง ภูเขาขาดครึ่ง นึกออกไหม อาจจะมาเริ่มที่ภูเขาก็ได้ อะไรอย่างนี้นะคะ เวลาตัดตำแหน่งรูปน่ะลูก นึกออกนะ อย่างที่บอกน่ะค่ะ 1 ความกว้างของ screen เรานะ ค่าตรงนี้ เราจะตัดตรงนี้ที่เท่าไร ลองดู เราจะตัดตรงนี้ที่เท่าไร ลองใส่ไปดู ลองมาตัดตรงนี้นะคะ ตำแหน่งที่จะตัดน่ะ ตัดภาพนะคะ ใครยังไม่ออกอีก ทีนี้บางคนนะคะ ทำภาพไม่สมดุล คือ ฉากตัวเองอันสักกะติ๋วหนึ่ง ตัวเกมมันตัวใหญ่ คือเหมือน เหมือนให้นึกถึงนะ พอเอาเกมเข้าไปในฉาก ตัวเกมปาเข้าไปครึ่งฉากแล้ว พอใส่ความเร็วไป นยึกออกไห5 วินาที แต่ฉากมันสั้นไง แล้วตัวเกมมันยาว มันก็จะ ปึ้บเดียวหาย ขยายพื้นที่ฉากน่ะค่ะ นี่ เพระาตัวแรกเราปรับค่าได้นะ เห็นไหมนะคะ นี่ เห็นไหม อย่างแม่ใช้ฉากยาวเลยนะคะ อันนี้เห็นไหมมันก็ไปได้เรื่อย ๆ ความเร็ว ตัวของเจ้าเกมเรา กับฉากเรามันก็ควรจะสอดคล้อง แล้วให้เด็ก ๆ ดูการตัดภาพด้วย นึกออกนะลูก ภาพมันตัดไม่สวย อาจจะมาเริ่มตัดต้นนี้ก็ได้ ลองปรับค่าไปนะคะ ให้ดูให้มันแมตกับด้วย ให้มันเนียนน่ะ ให้มันภาพมันเนียน ๆ คือ คือเหมือนภาพนี้มันมีจุดเด่นคือ ไอ้ต้นไม้ใหญ่น่ะ พอตัดไปมันเลยไม่เนียน นึกออกนะ แต่ไม่เป็นไร บอกแล้วเราเอามาเทสต์โปรแกรมเราเฉย ๆ คือ เวลาเราไปทำเกมจริง ๆ นี่ ฉากเราก็ควรจะวาดเองฉากต่อไป เพื่อจะให้มันเคลื่อนนี่ ลักษณะของต้นไม้น่ะมันควรจะเป็นไซซ์เท่า ๆ กัน แล้วจุดวางตำแหน่งเท่า ไ กัน การต่อฉากมันก็จะไปต่อ ๆ กัน แต่อันนี้เราไปยืมเขามา พอหมดโขดหินนี่ มาต่อใช่ไหม มันกลายเป็นไม่ต่อกันน่ะ ภาพมันไม่ต่อเนื่อง นึกออกนะ แต่ให้รู้ไว้ว่ามันคือหลักการในการทำนะคะ ยังไม่เสร็จนะ นี่พึ่งให้ฉากมันเคลื่อนเองนะคะ เดี๋ยวสัปดาห์นี้เราจะพอแค่นี้ก่อน เพราะบางคนยังมีพื้นหลังนะ ยังมี background ไปเอาออก ตัว Big เลย ลดไซซ์เกมลง ให้นึกถึงความสมดุลนะลูก นี่ เหมือนแมวแม่นี่ ก็ยังใหญ่อยู่ แม่ก็ต้องลดลงนะ ดูสิ ต้นไม้กับแมวตัวเท่ากับเลย มันใช่ไหม มันก็ไม่ใช่ใช่ไหมคะ นะคะนะคะ เราก็ต้องปรับสมดุลของภาพ ของเกม ให้มันสอดคล้องกันด้วยนะคะ เพราะฉะนั้น บางฉากมันตัดแล้วมันไม่เนียน เราอาจจะหาฉากมาเปลี่ยนก็ได้นะเด็ก ๆ นึกออกนะ ที่มันเป็นในระนาบ หรือแนวเดียวกัน แล้วไม่มี พอเอามาวางแล้วไม่เห็นรอยต่อที่ชัดเจน มันระนาบเดียวกันก็จริง แต่มันมีต้นไม้ใหญ่มันมาเพิ่มกับก้อนหินนี่มันไม่ต่อเนื่อง บางทีเราอาจจะตัดภาพเฉพาะถึงตรงนี้ก็ได้ นึกออกนะ เพื่อไม่ให้มันเห็นอันนี้ พื้นมันเป็นแนวเดียวกัน มันก็จะต่อกันก็ได้ เราจะเอาภาพประกอบสักเล็กน้อยด้วยนะคะ เพราะตัวนี้ ตัวเกมมันจะไม่นิ่ง ๆ อย่างนี้ เพราะเมื่อกี้เรา เราไปดาวน์โหลด Sprite มาแล้ว มันมีท่าทางการเดินจริง ๆ ซึ่งจะเป็นในสัปดาห์หน้า เพราะฉะนั้น ในสัปดาห์นี้ ท้ายชั่วโมง ที่ยังมี Background ไซซ์ตัวเกมเรายังใหญ่ เด็ก ๆ จะต้องปรับขนาดให้มันเท่ากันทุกตัวก่อนนะลูก นึกออกนะ เช่น เหมือนนกของเจ้ากุ้งเต้นมันใหญ่ กุ้งเต้นทำนกไว้ใหญ่ใช่ไหมคะ กุ้งเต้นต้องไปปรับไซซ์ตัวอื่นด้วย ไม่ใช่แค่ตัวเดียว เข้าใจนะคะ มันจะมีตัวที่ 1 ตัวที่ 2 ตัวที่ 3 ใช่ไหม ในคอลเลกชั่น กุ้งเต้นจะต้องปรับตัวอื่น ๆ ให้มันได้ขนาดเท่ากับตัวแรก เพราะไม่อย่างนั้นให้นึกถึง เวลาเราให้เกมมันเคลื่อนไหว เดี๋ยวมันจะกลายเป็นตัวเล็ก ตัวใหญ่ นึกออกไหม พอภาพ พอไปเรียกภาพมาต่อ ๆ กันใช่ไหม มันจะกลายเป็นเดี๋ยวตัวนี้ตัวเล็กกระโดดมาทำไมมันตัวใหญ่นึกออกไหม อันนั้นเราไม่ได้เล่นเกมเสกคาถา ถ้าอย่างนั้นใช้ได้ เป็นตัวเล็กแล้วก็เป็นตัวใหญ่ อันนี้อยากให้เห็นว่าแล้วมันวิ่งมันเดินให้เห็นการเคลื่อนไหวของมันก่อนนะคะ ถ้าทำ Effect ตัวเล็กตัวใหญ่ หมายถึงว่า เราต้องการจากตัวเล็ก ให้เป็นตัวใหญ่ ไปเพิ่มไซซ์ให้เป็นตัวใหญ่อย่างนี้ทำอย่างไร เหมือน ที่พอกินเห็นหรืออะไรตัวจะใหญ่ขึ้นถ้าอย่างนั้นน่ะ ถึงจะไปใช้เทคนิคที่เรียกว่า "ภาพเล็กกลายเป็นภาพใหญ่ แต่เราจะให้เห็นว่าไอ้ภาพนี้ ไอ้ตัวนี้มันเคลื่อนไหวโดยการเดิน หรือการวิ่ง หรืออะไรก็แล้วแต่นี่ ตัวเท่านี้มันเดินไปอย่างไร มันวิ่งไปอย่างไร ให้เห็นมุมมองอย่างนี้ก่อน ซึ่งเราจะมาต่อในสัปดาห์หน้า เพราะฉะนั้นสัปจะต้องเคลียร์รูปที่จะใช้ให้เรียบร้อยเสียก่อนนะค คือก็จะพาเรียกใช้รูป ในกลุ่มนี้ทุกรูปเลย จะเรียกอย่างไร เราจะสร้าง สร้างฟังก์ชันเพื่อให้มันมาเรียกใช้ไอ้รูปที่มันมีเยอะ ๆ นะคะ ไม่อย่างนั้นเราจะเขียน KEY ไง KEYเยอะ ๆ ซึ่งมันไม่ใช่วิธีการเขียนโปรแกรม โปรแกรมจะต้องลดขึ้นตอนการคีย์เพื่อเรียกใช้รูป ก็คือเราจะเรียกใช้มันแค่ครั้งเดียว เราอาจจะสร้างเพื่อไปเรียกใช้ในครั้งหน้าได้อีก โอเคนะคะ สัปดาห์นี้เราจะพอแค่นี้นะคะ อันดับแรก อย่าลืมไปแก้รูป ให้เอาออก ใครรูปตัวการ์ตูนใหญ่อยู่ ลดไซซ์ให้มันเท่ากัน ปรับไซซ์ให้มันเท่ากันทุกตัวนะคะ เพราะเราจะใช้ทั้งเซ็ตเลยนะคะ ทั้งเซ็ตที่อยู่ในตัวนี้เราน่ะ ในดฟลเดอร์เราน่ะ นึกออกไหมลูก นี่ มี 12 รูป ก็แก้ทั้ง 12 รูปนะคะ ให้มันไปในแนวทางเดียวกัน เพราะวิธีการแก้มันก็ทำซ้ำ เหมือนเดิม เพียงแค่เปลี่ยนแก้ไปทีละรูปแค่นั้นเองนะคะ โอเคนะคะ อย่างนั้นสัปดาห์นี้ พอแค่นี้ สวัสดีค่ะ ทุกคนทำออกได้หมดแลว้นะคะ อย่าลืม Save ไว้ก่อน ปิดได้เลย ปิดได้เลย ว่าอย่างไร จะถามหรือเปล่า