--- title: การเขียนโปรแกรมภาษาคอมพิวเตอร์ subtitle: date: วันอังคารที่ 6 ธันวาคม 2565 เวลา 08.50 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) OUND ภาพพื้นหลังอยู่แล้วนะคะ ใครยังไม่มีหน้าต่างพื้นที่การทำงานของตัวเองที่มีรูป Background ยกมือนะคะ เดี๋ยวไปต่อไม่ได้ เพราะสิ่งที่เราจะทำต่อไป ก็คือเราจะเอาตัวเกมของเราเข้ามานะคะ แล้วจะทำให้มันเคลื่อนไหว ของใครยังไม่ขึ้น ขึ้นหมดทุกคนแล้วหรือยังคะ อะไรนี่มีเวอร์ชัน... Cancel ไปทำไหมหน้าต่างนี้มันไม่ยอมให้ย่อลง ทำไม PowerPoint ย่อลงไม่ได้ล่ะ เราต้องการพื้นที่ โอเคนะคะ สิ่งแรกเด็ก ๆ ไปดูไฟล์ของเราใน Disk : C โฟลเดอร์เรา ยังไม่ได้โหลดภาพหรือจำได้ไหมครับ ตัวเกมที่จะใช้... ทำไมมันย่อสไลด์ PowerPoint ตัวนี้ลงไม่ได้ ปิดก็ไม่ได้ คือ... ขอปิดก่อนแป๊บหนึ่ง จำได้ไหมคะ ที่บอกให้ค้น sprites sheet น่ะ คือ เราต้องการภาพที่มันมีลักษณะของภาพที่มีหลาย ๆ ภาพ คือ ภาพที่มีการเคลื่อนไหวต่อเนื่องกันนะคะ ก็คือเด็ก ๆ จะต้องเลือกตัวการ์ตูน หรือตัวเกมที่เราจะทำให้เขาเคลื่อนไหว เราจะไม่มาเสียเวลาวาดเอง เลยจะให้ค้นจากเน็ตนะ ก็ต้องเลือกใช้ Free Download ด้วยนะคะ เพื่อจะได้ไม่ติดปัญหาลิขสิทธิ์ ต้องพิมพ์คำว่า "Free Download" เสมอเวลาค้นนะ แล้วก็ตามด้วยคำว่า "Spirte sheet "S-p-r-i-t-e Sprite แล้วก็ sheet s-h-e-e-t แล้วก็กดค้นหา นี่ลักษณะภาพ sprite sheet ก็คือถ้า Sprite ก็มีภาพตัวหลัก แล้วก็มีภาพที่เหมือนตัวเขาน่ะ เคลื่อนไหวได้ มีรูปอื่น ๆ ที่ เห็นไหมคะ เสื้อผ้าอะไรเขาก็เหมือนกันนะคะ เพราะเราต้องการวัตถุของเรานี่ ไอ้ตัวเกมเรานี่ ให้มันเคลื่อนไหวนะคะ ถ้าใครหาได้แล้ว ให้โหลดแล้วเอาไปใส่ไว้ใน... ตอนนี้โหลดมาแล้วนะคะ จะเอาภาพนี้ รอแป๊บหนึ่ง ใครยังไม่โหลด โหลดเลยนะคะ ก็คือให้มันมีตัวหลาย ๆ ตัว อย่างน้อย อย่างน้อยมีภาพตัวเกมนี่ สัก 4 ตัวเป็นอย่างน้อยนะ มีมากกว่านั้นก็ได้นะคะ โฟลเดอร์ที่เราดาวน์โหลดนะคะ เดี๋ยวจะ Move ไปไว้ที่ Disk C ของเรานะคะ เอาไปไว้ที่เราเก็บโปรแกรมที่เราเขียนเกมไว้น่ะที่เราเก็บไว้ Extract ไฟล์แล้วนะคะ จะเข้า 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 พิมพ์ให้เหมือน ถ้ากลัวพิมพ์ผิดทำอย่างไรคะ ก๊อบปี้ใช่ไหมวิธีการเพื่อจะไม่ให้พิมพ์ผิดนะ เด็ก ๆ คลิกขวาที่ชื่อเรานี่ Property เห็นไหมคะ ก็อบจากตรงนี้เลย จะได้พิมพ์ไม่ผิด นึกออกนะ ชื่อมันก็จะเหมือนกัน จะได้หาเจอ ไม่อย่างนั้นเดี๋ยวมันหาไม่เจอ ไม่ต้องไปพิมพ์เอง นึกออกไหมลูก ให้เด็ก ๆ เอาใหม่นะ ทำให้ดูใหม่นะ เราคลิกที่รูปที่เราจะใช้ 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 bgpic เป็นนี่ ๆ ๆ เราจะเรียกตัวแปรนี้มานะคะ cat เข้ามานะคะ พร้อมหรือยังคะ ให้เด็ก ๆ เข้ามาที่บรรทัดต่อจากที่เราเรียกใช้งาน Background screen.blt bg pic นี่คือ background picture เรานี่ ดูนะคะ กด Enter เพื่อให้เคอร์เซอร์มันบอกแล้วว่าอย่ากดเป็นอย่างนี้ อย่ากดแป้น Spacebar ถ้าเห็นจุด ๆ เดี๋ยวมันขึ้น Error นะคะ เด็ก ๆ ไปท้ายบรรทัดของคำสั่งที่เราจะเริ่มเขียนแล้วกด Enter เห็นไหมคะ มันจะตัด โครงสร้างมันจะจัดระเบียบมาให้ กด S 1 ครั้ง แล้วเลือก screen เหมือนเดิม .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 to หหายไปไหน 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 อีก ดูสิ ทีนี้ Ctrl กด Ctrl + B ใหม่ เดี๋ยว ๆ อันนี้หรือเปล่าชื่อ... ชื่อตัวเดียวกันไหม ลืมดู อันนี้ชื่ออะไร อ๋อ นก 2 open 1 ใช่ไหม นี่ก่อน นี่ก่อนลูก อันนี้ก่อน Cancel ก่อน ต้อง select ก่อนเลือกทั้งหมดก่อน เลือกอันนี้ก่อน แล้วค่อยมาเลือกอันนี้ อีกทีหนึ่ง อีกทีหนึ่ง อันนี้เหมือนเดิม 50 อีกทีหนึ่ง โอเค โอเค Ctrl + B ใหม่ กด Ctrl + B น่ะ เห็นไหม ทีนี้ ในกรณีของกุ้งเต้นนี่นะ วิธีการ นี่มันจะมีตัวนี้ เราทำ... เห็นไหม เดี๋ยวค่อย ถ้าอย่างนี้ ถ้าบางคนเอารูปเข้ามานะคะ เด็ก ๆ ดูนะคะ บางคนเอารูปเข้ามาแล้วมันมีกรอบสีขาว ๆ นั่นก็คือมันมี Background มาดูวิธีเอา Background ออกจากรูปเรา จดมีกระดาษจดไหมคะ จดไว้ ทุกคนดู เดี๋ยวจะมาสอนวิธีเอาภาพที่มี Background ออกนะคะ ภาพที่มี Background เช่น... หาตัวอย่างก่อนนะ ไม่แน่ใจตัวนี้มีหรือเปล่า เดี๋ยวขอลองเปิดดูก่อนนะ นี่นะคะ บางทีรูปที่เอามานี่ บางทีรูปที่เอามานี่มันมีไอ้พื้นหลังขาว ๆ อย่างนี้ ชื่ออะไร Tiger เดี๋ยวลองดูนะ เดี๋ยวของลองเอา Tiger เข้ามาดูก่อนนะ แป๊บหนึ่งนะคะเด็ก ๆ เดี๋ยว Test ให้ดู ดูนะคะ ถ้ารูปใครที่มีพื้นหลัง เดี๋ยวให้ดู เหมือนของกุ้งเต้นนี่ ภาพเขามีพื้นหลังสีขาวนะ ดูถ้าอย่างนี้นะคะ มันจะมี background ข้างหลัง ดูดี ๆ นะคะ เดี๋ยว Test ให้ดูนะคะ นี่เมื่อใดที่ใครเอาภาพที่เอามาใช้มีสีขาว ๆ ล้อมกรอบนี่ ก็คือรูปนี้มี Background วิธีจะเอาออก จดด้วยนะเด็ก ๆ จดไว้ เพราะอย่าลืมว่าเด็ก ๆ บางคนมีหลายรูปนึกออกนะ เพราะฉะนั้น ต้องไปเอาออกเองแต่วันนี้จะสอนเอาออกแค่ 1 รูป ให้ไปที่เว็บไซต์ให้เด็ก ๆ เปิด Google นะคะ แล้วพิมพ์คำว่า bg bg แล้วก็ตามด้วยคำว่า "Remover" นี่นะคะ ใช้ Google แล้วพิมพ์คำว่า "bg remover" ตัวนี้นะคะเด็ก ๆ นี่ให้ค้นคำว่า "bg" แล้วก็ตามด้วย r-e-m-o-v-e-r ก็คือมันจะเป็นเว็บสำหรับเอาภาพที่มี... เอาพื้นหลังที่อยู่ในรูปเราออกนะคะ มันก็เลยมีชื่อว่า bg remover นะคะ เห็นไหมคะ ให้เด็ก ๆ เข้าเว็บนี้เลย removebg นี่นะคะ คลิกเข้าไปเลย นี่ที่มันขึ้น Remove background for image นี่ นะคะ แล้วที่ตัวนี้ Upload image ก็คือให้เราคลิกที่ upload แล้วเราก็ไปเปิดไฟล์รูปภาพที่เรามีตัว Background น่ะนะคะ ตัวอย่างของเราก็คือ tiger 2 เลือกภาพนั้นแล้วคลิก open นี่ ถ้า Background ออกแล้ว ข้างหลังมันจะเป็นไอ้ตารางสีเทา ๆ อย่างนี้หมายถึงเอาออกแล้วนะคะ เด็ก ๆ ก็กด Download ไฟล์มันก็จะมาอยู่ที่ dowload เรานะ ก็อีกขั้นตอนหนึ่ง ก็คือแก้ชื่อน่ะค่ะ เด็ก ๆ ก็ก๊อบฯ ไปวางไว้ใน Drive เรา ในโฟลเดอร์เราน่ะค่ะ นี่นะ โฟลเดอร์ที่เราสร้างเกมไว้นี่ ชื่อมันยาวใช่ไหมคะ เราก็ทำการตัด เดี๋ยวนะ มันให้ Rename Windows 11 นี่มันทำไมไม่ขึ้น Rename ให้ ถ้าไม่ขึ้นเราก็เปิด โปรแกรม Paint ก็ได้ พอ Save มาแล้ว open with paint ให้เรา Save As นะ Save As เป็นรูปหลักเรานี่ เดี๋ยวกด Ctrl + B ดูใหม่นะคะ น่ะ ตัวนี้จะปิดนะ สังเกตนะ ภาพนี้มี Background นะคะ เมื่อกี้เราเปลี่ยนแล้ว ลอง Ctrl + B ใหม่ ไม่แก้ให้ผมน่ะ ไปไหนล่ะนี่ มันคือไม่ให้รี transparency version นี้แปลงยากจริง โอเคนะคะ เดี๋ยวค่อยไปแก้เอานะ ก็คือชื่อมันก็จะเปลี่ยนตามไปด้วยนะ ต่อมา ต่อมาเดี๋ยวเราจะต้องไปต่อนะคะ เด็ก ๆ เราได้รูปแล้ว สิ่งที่จะทำต่อไป ก็คือไอ้ตัวฉากนี่นะคะ มันจะเคลื่อน ทำให้ฉากมันเคลื่อน ซึ่งก็คือในสไลด์นี้ของเรานั่นเอง ไหนล่ะ PowerPoint ผมอยู่ไหน มาดูนะคะ คำสั่งที่จะทำให้ฉากเมื่อมีตัวละครเข้ามาแล้วนี่ นั่นคือเมื่อแต่ความจริงแล้วตัวละครมันไม่ได้เดินน่ะ เราใช้ฉากมันเคลื่อนนั่นเองนะคะ อันนี้สไลด์คนละอันนะ โทษที โทษที เปิดผิดครับ สิ่งที่เราจะทำต่อมานะคะ Background มาแล้ว นำเข้า velocity to backgrond มาดูไอ้คำว่า Velocity มันหมายความว่าอย่างไรนะคะ แปลว่า ความเร็ว ก็คือทำให้ Background มันใส่ความเร็วให้ Background นั่นเองนะคะ วิธีการ ตอนนี้เด็ก ๆ จะมาที่ตำแหน่งของที่ต่อจาก Background นะ เรานำเข้า Background แล้วต่อไปเราก็จะประกาศตัวแปรให้กับ... ก็คือเริ่มจากกำหนดเงื่อนไขให้ Background ของเรานั่นเอง ไปยังตำแหน่งที่ก่อนนำเข้าเกมนะ นะคะ แล้วก็ใส่ # ไปว่า เป็นภาษาไทยแล้วกัน จะได้เข้าใจง่าย จัดการนะคะ เราจะจัดการตรงส่วนนี้เป็นส่วนของจัดการกับฉากเกม จัดการในส่วนของฉากเกมของเรานั่นเอง ฉ ฉิ่งอยู่ไหนหว่า ฉ ฉิ่ง อยู่ไหน ใครรู้ ฉ ฉิ่งอยู่ไหนบอกเราที เราหา ฉ ฉิ่งไม่เจอ เจอแล้วมันอยู่ตรงตัว C จัดการฉากนะคะ เราจะมาทำการจัดการในส่วนของฉากก่อนนะคะ อันดับแรก ก็คือสร้างตัวแปรนะคะ มันจะมี bgx เราจะมีชื่อตัวแปร 3 ตัวนะคะ ตัวแรก bgx ก็คือตำแหน่งของ Background ในแกน x bgy ตำแหน่งของ Background ในแกน y bgvelo velo มาจาก velocity ก็คือกำหนดความเร็วให้ Background ก็คือค่าเริ่มต้นของตัวแปรพวกนี้ คือ 0 ทั้งหมด เราก็เริ่มประกาศตัวแปรแรกก่อน จะให้ตัวแปรตัวที่ 1 bg ขอโทษค่ะ ตัวแปรแรกนะคะ ใช้ชื่อว่า bgx ซึ่งหมายถึงตำแหน่งของ Background ในแกน x เพราะเวลาเราจะเอารูปไปนี่ เราต้องระบุขอบเขตของรูปนั้นน่ะ นึกออกนะ กำหนดค่าเริ่มต้น กด Spacebar 1 ครั้ง กด = ก็เครื่องหมายเท่ากับ 0 นะคะ มี x แล้วก็ต่องมี y bgy = 0 เหมือนกัน ตัวที่ 3 ชื่อบอกแล้ว ชื่อ bg แล้วก็ v-e-l-o ซึ่งมาจาก Velocity คือ ถ้าพิมพ์ Velocity เลยจะยาวไป ค่าเริ่มต้นเหมือนกันค่ะ 0 ก็คือไอ้ค่าเริ่มต้นของฉากเรานี่ เราจะให้เริ่มที่ตำแหน่งที่ 0 ตำแหน่งในแกน x เริ่มที่ 0 y เริ่มที่ 0 แล้วก็ความเร็วก็เริ่มที่ 0 เสมอ ก็คือประกาศตัวแปรนี้ แล้วก็กำหนดค่าเริ่มต้นให้เป็น 0 ทั้ง 3 ตัวแปรตอนนี้เด็ก ๆ จะต้องมีตัวแปรเพิ่มขึ้นมา 3 ตัว เพื่อจัดการฉาก นะคะ ก็คือ bgx bgy แล้วก็ bgvelo สิ่งที่เราจะทำต่อมา ให้ดูนะคะ การใช้งานและความหมายของ key คือความเร็วของตัวเกมน่ะ มันขึ้นอยู่กับเรากด key น่ะ กด Key ในที่นี้ก็คือแป้น แป้นพิมพ์นะคะ คำสั่ง ให้เด็ก ๆ ดูที่คำสั่งเขานะคะ pygame.K_UP นี่ หมายถึงปุ่มนี้ มันจะหมายถึงเป็นปุ่มให้กระโดดนะคะ UP ก็คือขึ้น กระโดดขึ้น คือ เลือกได้ 2 ตัว จะใช้ K_UP หรือ K_SPACE ก็คือเราจะใช้ คือ ถ้าใครเคยเล่นเกมผ่านคอมพิวเตอร์นึกออกนะ ปุ่มที่ใช้กดน่ะนะ เวลากระโดดบางเกมมันให้กด Spacbar ใช่ไหมลูก แล้วบางเกมมันให้กดแป้นลูกศรชี้ขึ้นน่ะ นึกออกนะ เพราะฉะนั้น มันก็เลยไม่ใช่มันล่ะ คือ ไอ้ตัวคำสั่ง library pygame ใช้ 2 คำสั่งนี้ ก็คือ K_UP กับ K_SPACE นี่ กำหนดว่าถ้ากดปุ่มนี้มันจะหมายถึงการการที่ตัวเกมมันกระโดด นึกออกนะคะ ทีนี้ แต่ถ้าเราต้องการให้มันไปทางซ้าย คำสั่งนั้นก็คือ K_LEFT ตัว pygame ต้องใส่อยู่แล้วนะ ตัวคำสั่งแล้วตามด้วย Key น่ะ K มาจาก Key แต่ไม่ต้องพิมพ์เต็ม เขาก็เลยย่อเหลือแค่ K นะคะ แล้วก็ _DOWN ก็คือปุ่มที่กดลง เห็นไหมคะ key แล้วก็ Right ก็คือตามลักษณะลูกศร นึกออกนะคะ บน ล่าง ซ้าย ขวา นะคะ มันจะมีทิศทางเคลื่อนไปตามลักษณะลูกศร ทีนี้เมื่อเราได้เราประกาศตัวแปรแล้ว ก็คือเราจะมากำหนดเงื่อนไขนะคะ เพราะฉากมันจะเคลื่อน ก็คือนั่นหมายความว่าเกมมันเดินไป เดินจากฉากนี่เดิน ก็คือเดินจาก เราเอาตัวเกมวางไว้ทางซ้ายใช่ไหมคะ มันจะเดินจากทางซ้ายไปทางขวา เพราะฉะนั้น ตัวที่เราจะให้มันเคลื่อน ก็คือแป้นลูกศรที่จะให้มันไปทางขวาก็คือ K_RIนะคะ เงื่อนไขก็จะเอามาไว้ที่ ทีนี้ทีนี้เราจะมากำหนดเงื่อนไขเพิ่มนะคะ จะอยู่ต่อจากตัวนี้เลยนะครับ ตัวนี้เลย ไปที่ที่เรามี loop นี่เห็นไหม นี่นะคะ for event มี if ที่ 1 ใช่ไหม มันจะอยู่ตรง if ที่... ไปไหนแล้ว เห็นไหมคะ เป็น if ที่ 2 ที่ต่อจากเงื่อนไขแรกนะ ดูตำแหน่งดี ๆ นะคะ นี่คือ if ที่ 2 ใช่ไหมเด็ก ๆ ใส่ if เข้าไปนะคะเด็ก ๆ กด i ปุ๊บ ให้เลือก if condition เพื่อให้มันขึ้นโครงสร้างอย่างนี้นะ เข้าใจนะคะ อย่าไปกด i-f นึกออกนะ ให้กด i แล้วเลือก if condition มันจะได้ขึ้นโครงสร้างของ pygame เราจะมากำหนดเงื่อนไข เพื่อให้ฉากของเราน่ะ มันทำงานนั่นเอง นะ loop กับ event มันจะอยู่ด้วยกัน กำหนดช่วงเวลาและเหตุการณ์ เมื่อใช้คำสั่ง if เสร็จ คำสั่งแรก ก็คือ event.type เราจะเลือกใช้เหตุการณ์ที่เกี่ยวกับแป้น ก็คือ event.type == นะคะ ถ้า ถ้า ถ้า event ก็คือเหตุการณ์ กด e แล้วคลิกที่ event.t t เราเลือก t-y-p-e type เห็นไหมคะ ตอนนี้เราจะมากำหนดเงื่อนไขนะคะ ในการทำ Loop if นะคะ ซ้ำนะคะ ทวนซ้ำนะคะเด็ก ๆ if กด e ปุ๊บ event ขึ้นมากด . แล้วก็ตามด้วยตัว t เลือก type t-y-p-e type เห็นไหมคะ ถ้าใช้ if จำไว้นะคะ เครื่องหมายเท่ากับใน if ต้องมี 2 ครั้ง บอกเท่ากับ แต่ไม่ได้หมายความว่าใส่เท่ากับครั้งเดียวนะ ถ้าเป็น if = ใน if pygame พิมพ์ p ก่อน แล้วเลือก pygame เลือกอะไรนะ . ใส่ . แล้วก็ตามด้วย คีย์อะไร คีย์แรก K_DOWN นะคะ K_DOWN คำสั่ง K_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 เห็นไหมคะ เพราะฉะนั้น เด็ก ๆ จะต้องนี่นะ ดูตำแหน่ง for คือตรงนี้ พอ Enter ลงมา กด Backspace ย้อนไป for ก็คืออีก tab หนึ่ง 2 ครั้ง ย้อนไป เห็นไหมคะ จะอยู่ตรงกับตำแหน่ง screen.fill นี่ โอเคไหม เรียกใช้ตัวแปรที่ชื่อว่า bgx นะคะ เพราะมันเคลื่อนไปทางขวา ตำแหน่งของแกน ก็คือแกน x แกน x คือเป็นคอลัมน์ มันจะอยู่ในแนวคอลัมน์ เพราะฉะนั้น ต้องเลือกตัวแปรที่เป็นแกน x ก็คือ bgx = - = ใช้เครื่องหมายลบนะคะ แล้วก็ bgvelo ใส่เครื่องหมาย - ก่อน -= เรียก bgvelo มาใช้ ตัวนี้ยังไม่ run นะคะ ยังไม่จบโค้ดมันยาวหน่อย เพราะมันเพิ่งระบุว่าถ้าเกิดเหตุการณ์อย่างนี้ แล้วกดปุ่มนี้สิ่งที่จะทำ ก็คือให้แสดง ไอ้ Background ให้มันเคลื่อน แต่ตอนนี้เรายังไม่ได้สั่งให้แสดง กำหนดมันนี่ ทีนี้ตรงส่วนที่จะแสดง ก็คือตัวนี้ screen.blit background เรานี่ color เราไม่ใช้แล้วเดี๋ยวจะลบออก กดลบทิ้งได้เลยเด็ก ๆ เช่นเดียวกัน ตัวแปรก็ไปลบออกเลยนะคะ bgcolor เราไม่ใช้ ใช้ background ที่เป็นรูปภาพไปแล้ว ลบเสีย พื้นที่จะได้ลดลงนะคะ ลบ 2 ตัวนะคะ ลบ background color กับเรียกใช้ background color ลบออก ทีนี้ ตำแหน่งที่จะมาเปลี่ยนนะคะ ก็คือเปลี่ยนจาก 0 0 นี่ ไปเรียกใช้ตัวแปรแกน x bgx นะ พิมพ์ b แล้วเลือก bgx อีกตัวหนึ่งก็คือ b แล้วเลือก bgy เห็นไหมคะ แต่สิ่งที่อยู่ในวงเล็บจะเปลี่ยนเป็น... ไม่ใช่วงเล็บเล็กอย่างนี้นะคะเด็ก ๆ ดู เปลี่ยนเป็น อะไรล่ะ วงเล็บที่เป็นสีเหลี่ยมน่ะ แทนไม่ใช่ ไม่ใช่ปีกกานะ ปีกกาก็ไม่ใช่ กดอย่างไร กดธรรมดา อย่างนี้นะคะ เป็นตัวนี้นะลูก เป็นสี่เหลี่ยมอย่างนี้นะ ต่างกันนะ ไม่ใช่วงเล็บอย่างนี้นึกออกนะ วงเล็บที่เป็นรูปสี่เหลี่ยมอย่างนี้เห็นไหม เด็ก ๆ เห็นไหม อยู่ตรงตำแหน่งปุ่ม ปุ่มที่อยู่ตรงถัดจากแถวตัวแรกลงมาน่ะ อยู่ตรงตัว ฐ ฐาน บ ใบไม้ กับ ล ลิง ไหมคะ นะคะ เปลี่ยนนะคะ เปลี่ยนเป็นวงเล็บที่เป็นรูปสี่เหลี่ยมนะคะ เพราะเราเรียกใช้ตัวแปรแทนกำหนดค่า โอเคนะคะ ส่วนต่อไป ต้องมากำหนดต่อให้ไอ้ตัวฉากน่ะค่ะ มันไหลไปเรื่อย ๆ เมื่อกี้มันแค่ถ้ากด 1 ครั้ง มันก็จะเคลื่อนเป็น 1 ครั้ง นึกออกไหม กำหนดตัวนี้กำหนดเงื่อนไขให้ Background เคลื่อนไหวไม่สิ้นสุด เขาบอกเคลื่อนไหวไม่สิ้นสุดนะคะ เด็ก ๆ ไปที่ตำแหน่งของต่อจากนี่นะ ดูตำแหน่ง if นะคะ ตำแหน่ง if จะอยู่ตรงกับ... มือ ๆ ๆ ๆ เห็นไหมคะ เลื่อนเข้าไปจาก 2 if แรก 1 อันนะคะ ดูดี ๆ นะคะ 2 if แรก เลื่อนไปครั้งที่ 1 เห็นไหมคะ ตำแหน่งที่ 2 ไม่ใช่ อยู่ตรงกับตำแหน่งนี้ กด i แล้วก็เลือก if condition เหมือนเดิมนี่นะคะ จะอยู่ตรงตำแหน่งนี้นะคะ ดูตำแหน่งดี ๆ นะ เพราะถ้าใครวางตำแหน่งโครงสร้างมันไม่ถูกนี่ นึกออกนะ เจ้าน้อง if มันจะงงนะ มันจะบอก ใช้ตรงไหนนี่มันไม่ใช่ มันไม่ใช่ มันจะบอกเรานะ คำสั่ง เงื่อนไขแรกนะคะ if ตัวแปรที่ชื่อว่า bgx เลือก bgx ค่ะ กำหนดค่าให้ bgx ให้เท่ากับ - คอลัมน์เราน่ะนะ นี่เห็นไหม 1,600 น่ะ นะคะ ครึ่งหนึ่งของ 1,600 ก็คือ 800 - 800 หาร 2 ว่าอย่างนั้นเถอะ ถ้า bgx นี่นะคะ มันเท่ากับ - 800 เมื่อไหร่ บอกแล้วเป็นคำสั่ง if อย่าลืมปิดด้วย : เสมอ มาที่ pass กด Delete ออก กด Delete Pass ออกนะคะ คำสั่งต่อมา กำหนดให้ bgx = 0 ในเงื่อนไขเป็นอย่างนี้อย่างงนะเด็ก ๆ นะ เพราะมันเป็นเงื่อนไขไง มันจะคืนค่ากลับไปกลับมาอย่างนี้ สิ่งที่เราจะต้องทำต่อมา ก็คือไปเรียกใช้ตัวนี้นะคะ เหมือนเดิม ต่อจากบรรทัดที่เราเรียกไอ้นี้แล้วนะคะ กด s เพื่อเลือก screen คำสั่ง screen นะคะ เรียกใช้ฉากนี้ blit ใส่วงเล็บ แล้วใส่... เรียกใช้ bgpic เหมือนเดิม เรียกใช้ตัวแปร bgpic นะคะ คือตัวแปร Background เรา ใส่ : เอ้ย ไม่ใช่สิ่ : นะ แล้วก็ตามด้วยวงเล็บสี่เหลี่ยมนะคะ เด็ก ๆ เธอกดไอ้นี่ทุกทีเลย วงเล็บสี่เหลี่ยมไม่ต้องกด Shift ท่องไว้ ๆ พิมพ์ b แล้วเลือก bgx ค่ะ ค่าของ bgx ให้เพิ่มเข้าไป บวกเข้าไป 800 ใส่เครื่องหมาย + แล้วก็ใส่ตัวเลข 800 ลงไป เราก็เรียก bgy มาใช้งาน เลือก bg เลือก y เลือก bgy ตอนนี้เราจะมีโค้ดเพิ่มมาอีก 2-3 บรรทัดนะคะเด็ก ๆ ลองกด Ctrl + B ดู อาจจะขึ้น error ก็ได้ ลองกด Ctrl ก่อนแล้วก็ B ลองกดแป้นดู เด็ก ๆ เห็นอะไรไหม เห็นอะไรไหม เห็นไหมตัวฉากน่ะ มันเลื่อนใช่ไหม คือ ภาพรอยต่อฉากมันอาจจะไม่เนียน ก็คือตำแแหน่งที่เราไปตัดมันน่ะค่ะ - 800 อะไรอย่างนี้ เดี๋ยวจะลองตัดที่มันไม่ใช่ - 800 ดู เดี๋ยวขอลองนะคะ ขอลองเป็น -1000 ขอเปลี่ยน ขอเปลี่ยนตัวเลข นี่เห็นไหม ตำแหน่งที่ภาพมันตัดน่ะ มันไม่ต่อใช่ไหม เพราะฉะนั้น เราก็เลือกตำแหน่งที่ตัด = เท่าไรคะ แกน x เราคือเท่าไร 1,600 สูงสุดเราคือ 1,600 เพราะฉะนั้น ตรงนี้เราก็ต้องเท่ามันนั่นล่ะ มันจะได้เนียน ๆ รอยตัดมันจะได้เนียน ๆ นึกออกไหม เอาใหม่นะ Ctrl + B ใหม่ กดแป้น นี่เห็นไหม มันเริ่มใหม่แต่นะคะ มันจะมีเว้นนิดหนึ่ง เพราะฉะนั้น เราควรเพิ่ม เพิ่มตำแหน่งตรงนี้เข้าไปเข้าไปนี่ เห็นไหมคะ รอยต่อมันไม่เนียนนะ เพราะฉะนั้น ตรงตำแหน่งตัดก็จะเป็น 1599 แล้วก็ ไอ้นี่ลบที่ 1,600 อาจจะสลับนะคะ 1,600 ให้เด็ก ๆ ดูที่อะไร ดูที่ตัว screen ตัวนี้ ของตัวเองเท่าไร ดูดี ๆ นะคะ ไปเทียบกับตัวนี้เอาลูก ลบอันนั้นแล้วเพิ่มอันนี้หรือเปล่า 1,599 ลองได้มันลองได้ นี่เห็นไหมมันมีรอยต่อนิดหนึ่งนี่ เราจะต้องทำให้มันพอดีกันเด๊ะ เพราะฉะนั้น ไอ้นี้ก็ต้องเริ่ม 1599 เหมือนกันไหม นี่ ๆ เห็นไหม รอยตัดหายไปแล้ว มันมี มันมีอะไรล่ะ มันมีส่วนขาดส่วนเกินนิด ๆ หน่อย ๆ นะคะ เราเขียนเราก็ต้องทวนอย่างนี้ล่ะนะคะ เรายืมภาพเขามาใช้ไงมันก็เลยไม่เป๊ะ นี่เห็นไหม เคลื่อนเร็วหรือเคลื่อนช้าขึ้นอยู่กับเลขตัวนี้นะคะ เลขไอ้ 5 นี่ ไอ้ 5 ไอ้ 6 ไอ้ 10 นี่ ดูนะคะ เดี๋ยวให้ดูน้องวิ่งเป็นจรวดเลย ใส่ 10 เข้าไป ก็คือถ้าเป็นวิ่งเราอาจจะเพิ่มความเร็วได้ เห็นหรือเปล่า ใครไม่เคลื่อนยกมือ อันดับแรกเช็ก Coding เราก่อนนะคะ สิ่งที่เด็ก ๆ จะต้องมีเงื่อนไขแรก ดูบรรทัดนี้ใน loop จาก run = false เราเพิ่มเงื่อนไขในการกดแป้นใช่ไหม เข้าไป 1 2 ทั้งหมดกี่อันนี่ 1 2 3 นี่นะคะ 3 เงื่อนไขนี้จะต้องมี เนื่องจากของข้าพเจ้าเป็นเดินข้าพเจ้าลดลงมา 5 เหมือนเดิมนะครับ bgvelo นี่คือความเร็วของการเคลื่อนที่ ของฉากเรานั่นเองนะคะ เด็ก ๆ ตำแหน่งค่าตัวนี้บอกแล้วให้ดูที่คำสั่งตัวแปรที่ชื่อ screen ของเรานี่ ที่เรา set ไว้เท่าไร เด็ก ๆ บอกแล้วนะคะ ถ้าใครขึ้น error อันดับแรก ให้ดูที่บรรทัดที่มัน error นะ สังเกตนะคะ ตำแหน่งที่ผิด ถ้าใช้ Sublime บรรทัดมันจะบอก ดูตรงนี้เขาผิดนี่ เด็ก ๆ เด็ก ๆ เวลาบอกแล้ว เวลา เวลาเราทำไอ้นี่ บางคนมาทีหลังแล้วไม่ทัน พอมาดู if มันอยู่ตรงตำแหน่งนี้ เด็ก ๆ จะชอบไปใช้วิธีกด Spacebar เดี๋ยว Ctrl + B เดี๋ยวดูนะคะ Ctrl + B ให้ดู มันจะชี้เลย ฃบรรทัดแล้วให้เด็ก ๆ ดูตรงข้อความนะลูก นี่ถ้ามันขึ้นว่านี่ Tab Error เห็นไหม ถ้าขึ้น Tab Error ให้เด็ก ๆ เช็กตำแหน่งตรงนี้เลย ถ้ามันขึ้น .. อย่างนี้ เด็ก ๆ ไปกด Spacebar ไม่ได้กด Tab ตำแหน่งบรรทัดมันจะบอกชัดเจนเลยว่าอยู่ตำแหน่งไหน สิ่งที่ผิดคืออะไร เห็นไหมคะ โปรแกรม Sublime มันจะแจ้ง Error ของตำแหน่ง บรรทัดบอกสาเหตุที่ Error เสมอให้ดูตรงนี้ด้วยประกอบกันนะคะ เราก็ต้องกด Delete ลบออกแล้วก็กด Tab ไป ให้ตำแหน่งมันตรงแค่นั้นเอง เห็นหรือเปล่า ได้แล้ว แก้ได้ เพราะฉะนั้น เช็ก Error ดี ๆ นะคะ ของใครยังไม่ออกอีก ใครยังไม่สามารถเดินได้ ไม่หอนสิ ดูบรรทัดที่ Error คือ line 33 ตรงตำแหน่ง error บอกว่า name error ยังไม่ได้ประกาศตัวแปรนี้หรือ bgy นี่มันไม่รู้จัก เพราะฉะนั้น ต้องย้อนไปดูที่ตำแหน่งที่ นั่นเห็นไหม ประกาศตัวแปรซ้ำชื่อตัวแปร บอกแล้วว่าตัวแปรจะมีชื่อได้แค่ 1 ชื่อมันจะไม่ซ้ำ เอากด... ดูตำแหน่งตัดต่อรูปด้วยเห็นไหม มันตัดไม่เนียนนี่ นึกออกนะ ให้มาเช็กว่าอาจจะเริ่ม หยุดไม่ได้ แสดงว่ามันลืม KEY นี้หรือเปล่า screen.blit นี่ไง เดี๋ยวเด้อ pic +800 Velo -0 -805 pygame get event get K_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 ตัวเล็กตัวใหญ่ หมายถึงว่า เราต้องการจากตัวเล็ก ให้เป็นตัวใหญ่ ไปเพิ่มไซซ์ให้เป็นตัวใหญ่อย่างนี้ทำอย่างไร เหมือน mario พอกินเห็ดหรือกินอะไรตัวจะใหญ่ขึ้นถ้าอย่างนั้นน่ะ ถึงจะไปใช้เทคนิคที่เรียกว่า "ภาพเล็กกลายเป็นภาพใหญ่ แต่เราจะให้เห็นว่าไอ้ภาพนี้ ไอ้ตัวนี้มันเคลื่อนไหวโดยการเดิน หรือการวิ่ง หรืออะไรก็แล้วแต่นี่ ตัวเท่านี้มันเดินไปอย่างไร มันวิ่งไปอย่างไร ให้เห็นมุมมองอย่างนี้ก่อน ซึ่งเราจะมาต่อในสัปดาห์หน้า เพราะฉะนั้น สัปดาห์นี้จะต้องเคลียร์รูปที่จะใช้ให้เรียบร้อยเสียก่อนนะคะ คือก็จะพาเรียกใช้รูปในกลุ่มนี้ทุกรูปเลย จะเรียกอย่างไร เราจะสร้างฟังก์ชันเพื่อให้มันมาเรียกใช้ไอ้รูปที่มันมีเยอะ ๆ นะคะ ไม่อย่างนั้นเราจะเขียน KEY อย่างไร KEY เยอะ ๆ ซึ่งมันไม่ใช่วิธีการเขียนโปรแกรม โปรแกรมจะต้องลดขึ้นตอนการคีย์เพื่อเรียกใช้รูป ก็คือเราจะเรียกใช้มันแค่ครั้งเดียว เราอาจจะสร้างเพื่อไปเรียกใช้ในครั้งหน้าได้อีก โอเคนะคะ สัปดาห์นี้เราจะพอแค่นี้นะคะ อันดับแรกอย่าลืมไปแก้รูป ให้เอาออก ใครรูปตัวการ์ตูนใหญ่อยู่ ลดไซซ์ให้มันเท่ากัน ปรับไซซ์ให้มันเท่ากันทุกตัวนะคะ เพราะเราจะใช้ทั้งเซ็ตเลยนะคะ ทั้งเซ็ตที่อยู่ในตัวนี้เราน่ะ ในโฟลเดอร์เราน่ะ นึกออกไหมลูก นี่มี 12 รูป ก็ต้องแก้ทั้ง 12 รูปนะคะ ให้มันไปในแนวทางเดียวกัน เพราะวิธีการแก้มันก็ทำซ้ำ เหมือนเดิม เพียงแค่เปลี่ยนแก้ไปทีละรูปแค่นั้นเองนะคะ โอเคนะคะ อย่างนั้นสัปดาห์นี้ พอแค่นี้สวัสดีค่ะ ทุกคนทำออกได้หมดแล้วนะคะ อย่าลืม Save ไว้ก่อน ปิดได้เลย ปิดได้เลย ว่าอย่างไร ว่าอย่างไร จะถามหรือเปล่า [สิ้นสุดการถอดความ]