(อาจารย์สุธิรา) ก่อนอื่น ๆ เปิด Sublime Text ขึ้นมาเหมือนเดิมนะคะเด็ก ๆ เปิดโปรแกรมเรา ไอ้ตัวสีส้ม ๆ นี่ ไอ้สีส้มนี่ เปิดขึ้นมา กด Ctrl + B ก่อน 1 ครั้ง เพื่อเช็กว่าตอนนี้ทุกคนมี Background ที่มี ภาพพื้นหลังอยู่แล้วนะคะ ใครยังไม่มีหน้าต่างพื้นที่การทำงานของตัวเองที่มีรูป Background ยกมือนะคะ เดี๋ยวไปต่อไม่ได้เด๊ เพราะสิ่งที่เราจะทำต่อไป ก็คือเราจะเอาตัวเกมของเราเข้ามานะคะ แล้วจะทำให้มันเคลื่อนไหว ของใครยังไม่ขึ้น ขึ้นหมดทุกคนแล้วหรือยังคะ อะไรนี่มีเวอร์ชัน... Cancel ไปก่อน ทำไมหน้าต่างนี้มันไม่ยอมให้ย่อลง ทำไม PowerPoint ย่อลงไม่ได้ล่ะ เราต้องการพื้นที่ โอเคนะคะ สิ่งแรกเด็ก ๆ ไปดูไฟล์ของเราใน Drive C: โฟลเดอร์เรา ยังไม่ได้โหลดภาพเหรอ จำได้ไหมครับ ตัวเกมที่จะใช้... ทำไมมันย่อสไลด์ PowerPoint ตัวนี้ลงไม่ได้ ปิดก็ไม่ได้ คือ... ขอปิดก่อนแป๊บหนึ่ง จำได้ไหมคะ ที่บอกให้ค้น Sprites Sheet น่ะ คือเราต้องการภาพที่มันมีลักษณะของภาพที่มีหลาย ๆ ภาพ ก็คือภาพการเคลื่อนไหวต่อเนื่องกันนะคะ ก็คือเด็ก ๆ จะต้องเลือกตัวการ์ตูน หรือตัวเกมที่เราจะทำให้เขาเคลื่อนไหว เราจะไม่มาเสียเวลาวาดเอง ก็เลยจะให้ค้นจากเน็ตนะ ก็ต้องเลือกใช้ Free Download ด้วยนะคะ เพื่อจะได้ไม่ติดปัญหาลิขสิทธิ์ ต้องพิมพ์คำว่า "Free Download" เสมอเวลาค้นนะ แล้วก็ตามด้วยคำว่า "sprite sheet "s-p-r-i-t-e sprite แล้วก็ sheet s-h-e-e-t นะคะ แล้วก็กดค้นหา นี่ ลักษณะภาพ sprite sheet ก็คือจะมีภาพตัวหลัก แล้วก็มีภาพที่เหมือนตัวเขาน่ะ เคลื่อนไหวได้ มีรูปอื่น ๆ ที่ เห็นไหมคะ เสื้อผ้าอะไรเขาก็เหมือนกันอย่างนี้นะคะ เพราะเราต้องการวัตถุของเรานี่ ไอ้ตัวเกมเรานี่ ให้มันเคลื่อนไหวนะคะ ถ้าใครหาได้แล้ว ให้โหลดแล้วเอาไปใส่ไว้ใน... ใช่หรือเปล่า ตอนนี้โหลดมาแล้วนะคะ จะเอาภาพนี้ รอแป๊บหนึ่ง ใครยังไม่โหลด โหลดเลยนะคะ ก็คือให้มันมีตัวหลาย ๆ ตัว อย่างน้อย อย่างน้อยมีภาพตัวเกมนี่ สัก 4 ตัวเป็นอย่างน้อยนะ มีมากกว่านั้นก็ได้นะคะ โฟลเดอร์ที่เราดาวน์โหลดนะคะ เดี๋ยวจะ Move ไปไว้ที่ Drive C: ของเรานะคะ เอาไปไว้ที่เราเก็บโปรแกรมที่เราเขียนเกมไว้น่ะ นึกออกนะ เดี๋ยวจะ Extract ไฟล์แล้วนะคะ Extract All จะเอา Cat แล้วกันนี่ ๆ ๆ เดี๋ยวจะเลือกเฉพาะที่เขาเป็น ขอเอาเป็นเดินนะคะ จะเดินหรือจะ... ขอเป็นรูปเดินแล้วกัน เอามาทดลองให้ดูก่อนนะคะ สัก... วันนี้มีหลายตัวหน่อย เอาถึงหมายเลข 12 นี่นะคะ เราจะต้องมีรูปตัวเกมเราอยู่ใน Folder อย่างนี้นะคะ โฟลเดอร์ชื่อ เกมที่เราสร้างน่ะค่ะ ให้สังเกตว่าเรามีไฟล์ Sublime pygame น่ะ อยู่ตรงไหน เราต้องมีรูปอยู่ตรงนั้นล่ะ มันจะได้หากันเจอนะคะเด็ก ๆ ก่อนอื่นเด็ก ๆ เปิดโฟลเดอร์ตัวเองขึ้นมาไว้ด้วยเดี๋ยวจะไปเดินเช็กว่ามีรูปแบบนี้กันหรือยัง เลือกสัก 1 ตัวนะ เลือกตัวเกมสัก 1 ตัว ดูนะคะ คำค้นที่ใช้ ดูคำที่ใช้ค้นเห็นไหม บนหน้าสไลด์นี่ free download sprite sheet นะคะ ให้ค้นด้วยคำนี้แล้ว เพราะถ้าค้นด้วยคำว่า "sprite sheet" น่ะ มันจะได้ภาพที่บอกว่ามีหลาย ๆ ตัวค่ะ ที่เขาทำไว้แล้วน่ะ ใน... ในโฟลเดอร์เด็ก ๆ ทุกคน เมื่อกี้ไปตรวจแล้วนะคะ มีตัวเกมที่เราจะเอามาลงแล้ว ไปไหนล่ะ อยู่ไหนเอ่ย ๆ ๆ นี่นะคะ อันดับแรก อันดับที่ 1 เหมือนเดิมลองวางก่อน เพราะเราต้องรู้ว่าเราจะเอาไอ้ตัวนี้เข้าไปวางในฉากเราได้ไหมใช่ไหม เพราะฉะนั้นนะคะ คำสั่งยังเป็นคำสั่งเดิมอยู่นะ ก็คือคำสั่งที่จะ นี่ ๆ ๆ เอารูปมาใส่นี่นะคะ แต่เราจะต้องประกาศตัวแปรใหม่ ตอนนี้ ไปที่บรรทัดตำแหน่งที่ 14 บรรทัดที่ 14 ก่อน เด็ก ๆ เลื่อน... เลื่อนลงมาประมาณบรรทัดที่ 14 เพราะในสัปดาห์ก่อน เรามี Background มีอะไรแล้วนะ เรากำหนดหน้าจอเกมได้แล้ว สิ่งที่เราจะทำต่อมาใส่ Hashtag นะคะ หรือเครื่องหมาย # ก่อน แล้วก็บอกว่า เราจะเอาตัวเกมเข้ามาแล้ว ก็เลย ใส่ # ไว้ตรงส่วนนี้จะเป็นส่วนที่เราจะนำตัวเกมเข้ามานะคะ นำเข้าเกม นำเข้าตัวเกม ใส่ # ไว้ แล้วก็กด Enter ลงไป 2 ที เว้น 2 บรรทัด เราจะอยู่ที่บรรทัดที่ 15 จะได้เช็กง่าย ๆ ไปตามบรรทัดก่อนตอนนี้ ก่อนอื่นเหมือนเดิมนะคะ รูปแบบจะคล้าย ๆ กับตัวนี้นะคะ ก็คือ ให้ pygame มันไปโหลดภาพตัวเกมเรามา ก่อนอื่นก็คือเราต้องมากำหนดตัวแปรก่อน ตัวแปรเรา สมมติเมื่อกี้ให้เด็ก ๆ ดูที่อะไร ดูที่ตัวละครของเรามันเป็นตัวอะไร นึกออกไหมลูก เช่น ตัวนี้เป็นแมว เพราะฉะนั้น ชื่อตัวแปรมันก็คือตัวอะไรคะ Cat นะ ภาษาอังกฤษ ของใครเป็นตัวอะไรบ้าง ถ้าใครเป็นนก ไหนใครเป็นรูปนกยกมือขึ้น มีใครมีรูปนกไหมคะ ไม่มีหรือ ยังว่าเห็นอยู่ กุ้ง กุ้งก็ตั้งชื่อตัวแปร Bird เลยลูก นึกออกไหม เอาชื่อตัวเกมเราน่ะ มาเป็นตัวแปรเลย เราจะได้รู้ว่าไอ้ตัวนี้เคือตัวนกของเรา นึกออกไหม เพราะฉะนั้น ใครที่ตัวที่ตัวรูปเกมตัวเองเป็นรูปสัตว์ชนิดไหน นึกออกนะคะ ให้ใช้ชื่อตามตัวสัตว์ชนิดนั้น หรือตัวเกมชนิดนั้น เหมือนของแม่ แม่เอาแมว เพราะฉะนั้นตัวเกมแม่ก็จะชื่อ cat ก่อน boy ก็ได้ ใช้ 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 พิมพ์ให้เหมือน ถ้ากลัวพิมพ์ผิด ทำอย่างไรคะ ก๊อบปี้ใช่ไหม วิธีการเพื่อจะไม่ให้พิมพ์ผิดนะ เด็ก ๆ คลิกขวาที่รูปเรานี่ แล้วเลือก Properties เห็นไหมคะ ก๊อบจากตรงนี้เลย จะได้พิมพ์ไม่ผิด นึกออกนะ ชื่อมันก็จะเหมือนกัน จะได้หาเจอ ไม่อย่างนั้นเดี๋ยวมันหาไม่เจอ ไม่ต้องไปพิมพ์เองน่ะ นึกออกไหมลูก ให้เด็ก ๆ เอาใหม่นะ ทำให้ดูใหม่นะ เราคลิกที่รูปที่เราจะใช้ 1 ครั้ง แล้วคลิกเมาส์ขวานะ คลิกไอ้ตรงนี้ นี่ ๆ ๆ คลิกที่นิ้วกลางเราน่ะ คลิกเมาส์ที่ตรงที่นิ้วกลางอยู่ 1 ครั้ง แล้วเลือก Properties นามสกุลด้วยเห็นไหม อย่าลืมดูนามสกุลด้วยว่ามันเป็น .png เพราะฉะนั้น เราก๊อบชื่อ จะได้พิมพ์ไม่ผิดนะ มันจะเว้นวรรคอะไร มันก็จะเหมือนกันเลย กด copy Ctrl + C เสร็จแล้วก็เอามาวาง... ไหนล่ะ วงเล็บหายไปไหนแล้ว เนื่องจากเป็นชื่อ อย่าลืมนะคะ ถ้าเป็นชื่อรูป ต้องใส่เครื่องหมายอะไรคะ Single Quote หรือ Double Quote ก็คือเครื่องหมายคำพูดอย่างนี้นะคะ ขีดเดียวก็ได้ เอ้ย อยู่ไหนล่ะ ขีด... อยู่ไหนล่ะ อย่างนี้ ขีดเดียวหรือ 2 ขีดก็ได้ นี่คือ Single Quote นะคะ นี่คือ Double Quote เห็นไหม ก็คือเครื่องหมายคำพูดแบบ อันเดียวกับ 2 อันน่ะ นะคะ กด Ctrl + V วางไฟล์นั้น เห็นไหมคะ แล้วตามด้วยนามสกุล เวลาระบุนามสกุลรูป ก็คือต้องใส่ . ก่อน . แล้วก็ เผื่อถ้าใครจำไม่ได้ก็ย้อนกลับไปดู ชื่ออะไรนะ นะคะ Properties เหมือนเดิม เห็นไหมคะ นามสกุลเป็น png เราก็ใส่ png ลงไปนะคะ . แล้วก็ตามด้วยนามสกุลเขา เห็นไหมคะ เอารูปเข้ามาแล้ว อย่าลืมเรียกใช้รูป ตอนนี้เราเอารูปเข้ามาแล้วนะคะ เราจะรู้ได้อย่างไรว่ารูปเข้ามา เราก็ต้องไปเรียกใช้ เรียกรูปนั้นมานะคะ ตอนนี้ ในบรรทัดนี้คือคำสั่ง pygame.image.load นี่ ก็คือให้ไปโหลดภาพที่เราจะใช้ ดูนะ ดูชื่อดี ๆ นะ มันมีเว้นวรรคอะไรน่ะ เอาตามมันเลย เหมือนที่บอกนะคะ Copy เอา จะได้พิมพ์ไม่ผิด แล้วอย่างไร ให้เราเข้ามาในตำแหน่ง loop ของเกมเรา เห็นไหมคะ screen.blit นี่ใส่รูปใช่ไหม สิ่งต่อมาที่เราจะใส่ คำสั่งเดียวกันเลย แต่เปลี่ยนจาก pic bgpic เป็นนี่ ๆ ๆ ตัวนี้แทน เราจะเรียกตัวแปรนี้มานะคะ cat มานะคะ พร้อมหรือยังคะ ให้เด็ก ๆ เข้ามาที่บรรทัดที่ต่อจากที่เราเรียกใช้งาน Background screen.blit (bg pic) นี่คือ background picture เรานี่นะคะ ดูนะคะ กด Enter เพื่อให้เคอร์เซอร์มันอยู่ บอกแล้วว่าอย่ากดเป็น อย่างนี้ อย่ากดแป้น Space Bar ถ้าเห็นจุด ๆ เดี๋ยวมันขึ้น Error นะเด็ก ๆ เด็ก ๆ ไปท้ายบรรทัด ของคำสั่งที่เราจะเริ่มเขียนแล้วกด Enter เห็นไหมคะ มันจะตัด โครงสร้างมันจะจัดระเบียบมาให้ เราก็จะลงไปตำแหน่งเดิม กด s 1 ครั้ง แล้วเลือก screen เหมือนเดิม .blit เหมือนเดิม เลือก blit นะคะ เลือกเอานะไม่ต้องพิมพ์จะได้ไม่ผิด ใส่วงเล็บ ตรงนี้ก็คือชื่อ ชื่อตัวนี้นะคะ เราก็ต้องเรียกใช้ cat เรียกน้อง cat ของแม่เรียก cat เด็ก ๆ เป็นตัวอะไร ตัวแปรของเด็ก ๆ นึกออกนะ ใครเป็น boy ก็เรียก boy ใครเป็น dog ก็เรียก dog ใครเป็น bird ก็เรียก bird นะคะ เวลาเอามาเราจะระบุตำแหน่งให้มันแล้ว ทีนี้ดูดี ๆ ตำแหน่งจอ เริ่มต้น คือ นึกออกนะ มันมีแกนที่เรียกว่า แกน x กับแกน y นะคะ 0 คือ ตำแหน่งข้างบน แล้วมันจะลงมาข้างล่างอย่างนี้ ไม่เชื่อเดี๋ยวลองดูนะคะ ถ้ายังไม่เปลี่ยนตำแหน่ง เด็ก ๆ ลองดูก็ได้ เอาเหมือนเดิมเลย เอาเหมือนคำสั่งแรกเลย นี่ เอาเหมือนตำแหน่งนี้เลยนะ เด็ก ๆ ลองดูนะ cat ปึ๊บ ใส่ : แล้วก็ใส่ตำแหน่ง 0,0 เหมือนตัวแรกเลยนะ แล้วก็ใส่ตำแหน่ง 0, 0 เหมือนตัวแรกเลยนะ ให้ดูเลยว่ามัน ตำแหน่งมันเริ่มมาจากไหน ใครพิมพ์คำสั่งนี้เสร็จแล้วกดอะไรคะ เมื่อเราต้องการทดสอบโปรแกรม หรือ Run โปรแกรม ก็คือกดปุ่ม Ctrl + B นะคะ Ctrl + B นี่เห็นไหม เราใส่ 0, 0 ตำแหน่งน้องแมวมันลอยอยู่บนท้องฟ้า เราอยากให้มันลงมา ให้เราดูอะไรคะ ดูแนวของภาพ Background เราด้วยนะ ก็คือน้องแมวควรจะมายืนอยู่ตรง นี่พื้นดินนี้พอดี เพราะฉะนั้น เราจะต้องเลื่อน 0 ตัวแรกคือ 0 ในแนว เขาเรียกว่าอะไรล่ะ แนวตั้งน่ะ คอลัมน์น่ะ นึกออกนะ แล้ว 0 ตัวที่ 2 ก็คือแนวที่เป็นแถวก็คือบรรทัด เพราะฉะนั้นเราจะต้องเพิ่มจำนวนบรรทัด น้องแมวก็ตัวใหญ่ไปด้วยใช้ transform ลดไซซ์ลงหน่อยก็ได้นะคะเด็ก ๆ นี่ Load มาแล้วตัวมันใหญ่นี่ ใช้ตัวนี้ก็ได้นะลด แต่ถ้าไม่ใช้ตัวนี้ลด นึกออกนะ เดี๋ยว... เดี๋ยวค่อยไปแก้ การลดขนาดไซซ์สอนไปแล้วนะ เดี๋ยวค่อยไปแก้ทีหลังก็ได้ เรามาเปลี่ยนตำแหน่ง เดี๋ยวจะเพิ่มสัก... เพิ่มจำนวนบรรทัดนะคะที่ 250 ดูจากอะไร 1. อันดับแรก เด็ก ๆ เช็กจากนี่ได้ เช็กจากตัว screen เราเห็นไหมคะ ตำแหน่งบรรทัดนี่ เห็นไหม ตำแหน่งคอลัมน์น่ะ สูงสุดก็คือ 1,600 บรรทัดสูงสุด คือ 800 ตอนนี้นี่ เอาบรรทัดที่ 250 กด Ctrl + B ดูว่าน้องแมวเราเลื่อนลงมาหรือยัง ได้พอดีเลย เห็นไหมคะ น้องแมวอยู่ตรงพื้นดินพอดี บางคนเลื่อนลงไปเยอะให้นึกถึงนะ ไม่ใช่ว่าเราจะเอาลงมาจนสุดไอ้นี่ถูกไหมคะ บางทีมันก็ไม่จำเป็นต้องลงมาจนสุด ฉากเสมอไป ให้เราดูระดับภาพ พื้นที่ของภาพเราด้วยนะ ไหน กดหรือยัง Ctrl + B ยัง กดหรือยัง กดปุ่มนี้หรือยัง นี่ เดี๋ยว Error ไม่ขึ้นเหรอ เดี๋ยวนะ Name Error นี่ ทำไมถึง Name Error บรรทัดที่เท่าไร line 18 ไปดูสิ ทำไมตัวนี้ Error ดูบรรทัดนี้นะคะ ไอ้กุ้ง กุ้งดูบรรทัดนี้เด้อ หายไปไหน บรรทัดนี้หายไปไหน run = True หายไปไหน หายไปไหน 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 ให้ดู ดูนะคะ ถ้ารูปใครที่มีพื้นหลัง เดี๋ยวให้ดู ๆ เหมือนของกุ้งเต้นนี่ ภาพเขามีพื้นหลังสีขาวนะ ดูถ้าอย่างนี้นะคะ มันจะมี Background ข้างหลัง ดูดี ๆ นะคะ เดี๋ยว Test ให้ดูนะคะ นี่ เมื่อใดที่ใครเอาภาพที่เลือกมาใช้แล้วมันมีอย่างนี้ มีสีขาว ๆ ล้อมกรอบนี่ นั่นก็คือภาพนี้มันมี Background วิธีจะเอาออก จดด้วยนะเด็ก ๆ จดไว้ เพราะอย่าลืมว่าเด็ก ๆ บางคนมีหลายรูปนึกออกนะ เพราะฉะนั้น ต้องไปเอาออกเองทุกรูป แต่วันนี้จะสอนเอาออกแค่ 1 รูป ให้ไปที่เว็บไซต์ ให้เด็ก ๆ เปิด Google นะคะ แล้วพิมพ์คำว่า bg bg แล้วก็ตามด้วยคำว่า "Remover" นี่นะคะ ใช้ Google แล้วพิมพ์คำว่า "bgremover" ตัวนี้นะคะเด็ก ๆ นี่ ให้ค้นคำว่า "bg" แล้วก็ตามด้วย r-e-m-o-v-e-r ก็คือมันจะเป็นเว็บสำหรับเอาภาพที่มี... เอาพื้นหลังที่อยู่ในรูปเราออกนะคะ มันก็เลยมีชื่อว่า bg remover นะคะ เห็นไหมคะ ให้เด็ก ๆ เข้าเว็บนี้เลย removebg นี่นะคะ คลิกเข้าไปเลย นี่ที่มันขึ้น Remove background from image นี่ คลิกเข้าไปเลยนะคะ แล้วที่ตัวนี้ Upload Image ก็คือให้เราคลิกที่ Upload Image แล้วเราก็ไปเปิดไฟล์รูปภาพที่เรามีตัว Background น่ะ นะคะอยู่ ตัวอย่างของเราก็คือ Tiger 2 เลือกภาพนั้นแล้วคลิก Open นี่ ถ้า Background ออกแล้ว ข้างหลังมันจะเป็นไอ้ตารางสีเทา ๆ อย่างนี้นี่ หมายถึงเอาออกแล้วนะคะ เด็ก ๆ ก็กด Download ไฟล์มันก็จะมาอยู่ที่ Download เรานะ ก็อีกขั้นตอนหนึ่ง ก็คือแก้ชื่อน่ะค่ะ เด็ก ๆ ก็ก๊อบไปวางไว้ใน... ใน Drive เรา ในโฟลเดอร์เราน่ะค่ะ นี่นะ โฟลเดอร์ที่เราสร้างเกมไว้นี่ ชื่อมันยาวใช่ไหมคะ เราก็ทำการตัด เดี๋ยวนะ มันให้ Rename Windows 11 นี่มันทำไมไม่ขึ้น Rename ให้ [เสียงหัวเราะ] ถ้าไม่ขึ้นเราก็เปิด โปรแกรม Paint ก็ได้ พอ Save มาแล้ว Open with Paint ให้เรา Save As นะ Save As เป็นรูปหลักเรานี่ เดี๋ยวกด Ctrl + B ดูใหม่นะคะ น่ะ ตัวนี้จะปิดนะ อันเดิมมัน... สังเกตนะ อันเดิม ภาพเดิมมี Background นะคะ เมื่อกี้เราเปลี่ยนแล้ว ลอง Ctrl + B ใหม่ ไม่แก้ให้ผมน่ะ ไปไหนล่ะนี่ มันคือไม่ให้รี Any transparency Version นี้นี่แปลงยากจริง โอเคนะคะ เดี๋ยวค่อยไปแก้เอานะ ก็คือชื่อมันก็จะเปลี่ยนตามไปด้วยนะ ต่อมา ต่อมา เดี๋ยวเราจะต้องไปต่อนะคะเด็ก ๆ เราได้รูปแล้ว สิ่งที่จะทำต่อไป ก็คือ ไอ้ตัวฉากนี่นะคะ มันจะเคลื่อน ทำให้ฉากมันเคลื่อน ซึ่งก็คือในสไลด์นี้ของเรานั่นเอง อยู่ไหนล่ะ PowerPoint ผมอยู่ไหน มาดูนะคะ คำสั่งที่จะทำให้ฉากเมื่อมีตัวละครเข้ามาแล้วนี่ นั่นคือถ้าตัวละครเดิน แต่ความจริงแล้วตัวละครไม่ได้เดินน่ะ เราใช้ให้ฉากมันเคลื่อนนั่นเองนะคะ เอ้ย อันนี้สไลด์คนละอัน อยู่ไหนนะ โทษที โทษที เปิดผิดครับ สิ่งที่เราจะทำต่อมานะคะ Background มาแล้ว นำเข้า velocity to background มาดูไอ้คำว่า 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 เพราะเวลาเราจะเอารูปไปนี่ เราต้องระบุขอบเขตของรูปนั้นน่ะ นึกออกนะ กำหนดค่าเริ่มต้น กด Space Bar 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 ก็ได้ 2 ตัวนี้นะคะ ก็คือเราจะใช้ คือ ถ้าใครเคยเล่นเกมผ่านคอมพิวเตอร์นึกออกนะ ปุ่มที่ใช้กดน่ะนะ เวลากระโดดบางเกมมันให้กด Space Bar ใช่ไหมลูก แล้วบางเกมมันให้กดไอ้แป้นลูกศร ชี้ขึ้นน่ะ นึกออกนะ เพราะฉะนั้น มันก็เลย ไม่ใช่มันล่ะ คือ ไอ้ตัวคำสั่งใน library pygame เรามันก็เลยใช้ 2 คำสั่งนี้ ก็คือ K_UP กับ K_SPACE นี่ เพื่อเป็นตัวกำหนดว่าถ้ากดปุ่มนี้ มันจะหมายถึงการที่ตัวเกมมันกระโดด นึกออกนะคะ ทีนี้ แต่ถ้าเราต้องการให้มันไปทางซ้าย คำสั่งนั้นก็คือ K_LEFT เพราะตัว pygame ต้องใส่อยู่แล้วทุกครั้งนึกออกนะ ตัวคำสั่ง แล้วตามด้วย Key น่ะ K มาจาก Key แต่ไม่ต้องพิมพ์เต็ม เขาก็เลยย่อเหลือแค่ K นะคะ Key แล้วตามด้วย _DOWN DOWN ก็คือลง ก็ปุ่มที่กดลงเห็นไหมคะ Key แล้วก็ Right เห็นไหม ก็คือตามลักษณะลูกศร นึกออกนะคะ บน ล่าง ซ้าย ขวา นะคะ มันจะมีทิศทางเคลื่อนไปตามลักษณะลูกศร ทีนี้เมื่อเราได้ เราประกาศตัวแปรแล้ว สิ่งต่อมาก็คือเราจะมากำหนดเงื่อนไขนะคะ เพราะฉากมันจะเคลื่อน ก็คือนั่นหมายความว่าเกมมันเดินไป เดินจากฉากนี่เดินโดยปกติตัวเกมเดิม ก็คือเดินจาก เราเอาตัวเกมวางไว้ทางซ้ายใช่ไหมคะ มันก็จะเดินจากทางซ้ายไปทางขวา เพราะฉะนั้น ตัวที่เราจะให้มันเคลื่อน ก็คือแป้นลูกศรที่จะให้มันไปทางขวาก็คือ K_RIGHT นะคะ เงื่อนไขก็จะเอามาไว้ที่ ทีนี้เราจะมากำหนดเงื่อนไขเพิ่มนะคะ จะอยู่ต่อจากตัวนี้เลยนะครับ ตัวนี้เลย ไปที่ที่เรามี 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 ขึ้นมากด Enter กด . แล้วก็ตามด้วยตัว t เลือก type t-y-p-e type เห็นไหมคะ ถ้าใช้ if จำไว้นะคะ เครื่องหมายเท่ากับใน if จะต้องมี 2 ครั้งอย่างนี้ถึงจะถูก บอกเท่ากับ แต่ไม่ได้หมายความว่าใส่เท่ากับครั้งเดียวนะ ถ้าเป็น if = ใน if จะต้องใส่ 2 ครั้ง pygame พิมพ์ p ก่อน แล้วเลือก pygame เลือกอะไรนะ . ใส่ . แล้วก็ตามด้วย คีย์อะไรคีย์แรก K_DOWN นะคะ K_DOWN คำสั่ง K_DOWN ตัวนี้หมายถึงเมื่อมีการกด กดปุ่มมันโดนกดน่ะ K_DOWN ในตัวนี้หมายถึง เมื่อปุ่มมีการกดปุ่มเกิดขึ้นนะคะ ปุ่มที่จะกดก็คือปุ่ม K_RIGHT นะคะ pygame.KEY KEY ใหญ่นะคะ KEYDOWN นี่เป็น KEY ตัวใหญ่ K-E-Y พิมพ์ด้วยตัวใหญ่นะลูก D-O-W-N ตัวนี้ หมายถึง ถ้ามีการกดที่ปุ่มนี่ KEYDOWN ในที่นี้ ปุ่มมันโดนกดน่ะค่ะ ลักษณะก็คือปุ่มโดนกด แต่เรายังไม่ได้บอกว่าปุ่มอะไร ใส่อะไรคะ เสร็จประโยคของ if จะต้องใส่ : เสมอนะคะ แล้วมาที่ pass ลบ pass ออก ตัวโครงสร้างมันนะ คำสั่งต่อมาที่เราจะใช้ ก็คือ ใส่ if อีกครั้งหนึ่งนะคะ เพราะต้องการระบุว่าไอ้ Key ที่เราจะใช้กดน่ะคือคีย์อะไร กด i แล้วเลือก if กด e แล้วเลือก event นะคะ event.KEY = == นะคะ ก็คือ if แรกบอกว่าเมื่อเหตุการณ์ที่เกิดขึ้น ก็คือเมื่อมีการกดปุ่ม if ที่ 2 บอกว่า ไอ้ปุ่มที่โดนกดน่ะ คีย์ที่โดนกดนี่ จะต้องเป็นคีย์ที่ชื่อว่า พิมพ์ pygame นะคะ พิมพ์ p แล้วเลือก pygame.K K ใหญ่ _RIGHT สังเกตคำสั่งตรงนี้นะคะ เด็ก ๆ ดูดี ๆ นะ เห็นไหมคะ จะใช้ตัวใหญ่นะคะ K_RIGHT ก็เป็นตัวใหญ่ จะใช้ตัวใหญ่เสมอนะคะ ที่เกี่ยวกับคีย์น่ะลูก กดด้วยตัวพิมพ์ใหญ่ทั้งหมดนะคะ R-I-G-H-T pygame . ไม่ใช่ : ไม่ใช่ , . นะคะ . K_RIGHT อธิบายนะคะ ก็คือ ถ้ามีเหตุการณ์ พิมพ์เกิดขึ้น ก็คือมีการกดปุ่มเห็นไหมคะ pygame.KEYDOWN ก็คือ ถ้ามันมีการกดปุ่มนี่ แล้วไอ้ปุ่มนี้นะคะ จะต้องเป็นปุ่ม อะไรนะ ลูกศรที่ไปทางขวานะคะ ถ้ามีการกดปุ่มลูกศรที่ไปทางขวาปุ๊บ อย่าลืมนะคะ ทุกครั้งที่จบ ประโยคของ if เราจะต้องใส่ : เสมอนะคะ เพราะกด Enter เด็ก ๆ สังเกตเห็น Tab มันจะปรับให้อัตโนมัตินะคะ เพราะฉะนั้น เวลาพิมพ์โค้ดดูด้วยนะคะ ใช้ Sublime นี่ สิ่งที่เราจะทำต่อมา ก็คือ เลือกเรียกตัวแปรความเร็ว เพราะเราต้องการรู้ว่าไอ้ฉากนี่นะคะ เอ้ย ตัวแปร b... พิมพ์ bg แล้วเลือก velo นะ ไปหาที่คำว่า "velo" เพราะเราจะ ค่าความเร็วมันเริ่มที่ 0 เพราะฉะนั้น พอมีการกดปุ่มปุ๊บ เราจะให้ความเร็วของฉากมันเพิ่มขึ้น จาก 0 เพิ่มเป็นเท่าไร อย่าเพิ่งเพิ่มเยอะ บางทีเพิ่มเยอะมาก ก็จะ... ลองเพิ่มที่ 5 ก่อน = 5 ส่วนต่อมานะคะ เราจะทำให้มันแสดงผล เอ้ย มือไปไวกว่า ไหนล่ะนะคะ กด Enter แล้วดูตำแหน่งนะคะ เด็ก ๆ ดูตำแหน่งดี ๆ นะ มันจะอยู่ตรงกับ for เห็นไหมคะ เพราะฉะนั้น เด็ก ๆ จะต้องนี่นะ ดูนะคะ ตำแหน่ง for คือตรงนี้ พอ Enter ลงมา กด Back Space ย้อนหลังไป 1 if แล้ว for ก็คืออีก tab หนึ่ง 2 ครั้ง กด Back Space ย้อนไป เห็นไหมคะ จะอยู่ตรงกับตำแหน่ง screen.fill นี่ โอเคไหม เรียกใช้ตัวแปรที่ชื่อว่า bgx นะคะ เพราะมันเคลื่อนไปทางขวา ตำแหน่งของแกน ก็คือแกน x แกน x คือเป็นคอลัมน์ มันจะอยู่ในแนวคอลัมน์ เพราะฉะนั้น ต้องเลือกตัวแปรที่เป็นแกน x ก็คือ bgx นะคะ = = -= ใช้เครื่องหมาย -= นะคะ แล้วก็ bgvelo ใส่เครื่องหมาย - ก่อน -= เรียก bgvelo มาใช้ ตัวนี้ยังไม่ run นะคะ มันยังไม่จบโค้ดมันจะยาวหน่อย เพราะว่ามันเพิ่งระบุว่า ถ้าเกิดเหตุการณ์อย่างนี้ แล้วกดปุ่มนี้ สิ่งที่จะทำก็คือ ให้แสดงไอ้ Background ที่มันเคลื่อน ให้ 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 ในเงื่อนไขเป็นอย่างนี้อย่างงนะเด็ก ๆ นะ เพราะมันเป็นเงื่อนไขไง มันจะคืนค่ากลับไปกลับมาอยู่อย่างนี้นะคะ สิ่งที่เราจะต้องทำต่อมา ก็คือไปเรียกใช้ตัวนี้นะคะ เหมือนเดิม ต่อจากบรรทัดที่เราเรียก Background ไอ้นี่แล้วนะคะ กด s เพื่อเลือก screen คำสั่ง screen นะคะ เรียกใช้ฉากนี้ blit กด b เลือก blit ใส่วงเล็บ แล้วใส่... เรียกใช้ bgpic เหมือนเดิม เรียกตัวแปร bgpic นะคะ ก็คือรูป Background เรา ใส่ : เอ้ย ไม่ใช่สิ : นะ แล้วก็ตามด้วยวงเล็บสี่เหลี่ยมนะคะ เด็ก ๆ แหม เผลอกดไอ้นี่ทุกทีเลย วงเล็บสี่เหลี่ยมไม่ต้องกด Shift ท่องไว้ ๆ พิมพ์ b แล้วเลือก bgx ค่ะ ค่าของ bgx ให้เพิ่มเข้าไป เห็นไหม บวกเข้าไป 800 ใส่เครื่องหมาย + แล้วก็ใส่ตัวเลข 800 ลงไป เราก็เรียก bgy มาใช้งาน bg เลือก y เลือก bgy ตอนนี้เราจะมีโค้ดเพิ่มมาอีก 2-3 บรรทัดนะคะเด็ก ๆ ลองกด Ctrl + B ดู อาจจะขึ้น error ก็ได้ ลองกด Ctrl ก่อน Ctrl แล้วก็ B แล้วกดแป้นดู เด็ก ๆ เห็นอะไรไหม เห็นอะไรไหม เห็นไหมตัวฉากน่ะ มันเลื่อนใช่ไหม คือ ภาพรอยต่อฉากอาจจะไม่เนียน ก็คือตำแแหน่งที่เราไปตัดมันน่ะค่ะ - 800 อะไรอย่างนี้ เดี๋ยวจะลองตัดที่มันไม่ใช่ - 800 ดู เดี๋ยวขอลองนะคะ ขอลองเป็น -1000 ขอเปลี่ยน ขอเปลี่ยนตัวเลข นี่เห็นไหม ตำแหน่งที่ภาพมันตัดน่ะ มันไม่ต่อใช่ไหม เพราะฉะนั้น เราก็เลือกตำแหน่งที่ตัด = เท่าไรคะ แกน x เรา แกน x เราคือเท่าไร 1600 สูงสุด เราคือ 1600 เพราะฉะนั้น ตรงนี้เราก็ต้องเท่ามันนั่นล่ะ มันจะได้เนียน ๆ รอยตัดมันจะได้เนียน ๆ นึกออกไหม เอาใหม่นะ Ctrl + B ใหม่ เอ้ย กดแป้น นี่เห็นไหม มันเริ่มใหม่แต่นะคะ มันจะมีเว้นนิดหนึ่ง เพราะฉะนั้น เราควรเพิ่ม เพิ่มตำแหน่งตรงนี้เข้าไป นี่เห็นไหมคะ รอยต่อมันไม่เนียนนะ เพราะฉะนั้น ตรงตำแหน่งตัดก็จะเป็น 1599 แล้วก็ เอ้ย ไอ้นี่ลบที่ 1600 อาจจะสลับนะคะ 1600 ให้เด็ก ๆ ดูที่อะไร ดูที่ตัว screen ของตัวเองตัวนี้ นึกออกนะ ค่าตัวเองเท่าไร ดูดี ๆ นะคะ ไปเทียบกับตัวนี้เอาลูก ลบอันนั้นแล้วเพิ่มอันนี้หรือเปล่า 1599 ลองได้ มันลองได้ นี่เห็นไหมมันมีรอยต่อนิดหนึ่งนี่ เราจะต้องทำให้มันพอดีกันเด๊ะ เพราะฉะนั้น ไอ้นี้ก็ต้องเริ่ม 1599 เหมือนกันไหม นี่ ๆ เห็นไหม รอยตัดหายไปแล้ว มันมี มันมีอะไรล่ะ มันมี มันมีส่วนขาดส่วนเกินนิด ๆ หน่อย ๆ นะคะ เราเขียนเราก็ต้องทวนอย่างนี้ล่ะนะคะ เพราะเรายืมภาพเขามาใช้ไงมันก็เลยไม่เป๊ะ นี่เห็นไหม เคลื่อนเร็วหรือเคลื่อนช้าขึ้นอยู่กับเลขตัวนี้นะคะ เลขไอ้ 5 นี่ ไอ้ 5 ไอ้ 6 ไอ้ 10 นี่ ดูนะคะ เดี๋ยวให้ดู น้องวิ่งเป็นจรวดเลย ใส่ 10 เข้าไป ก็คือถ้าเป็นวิ่งเราอาจจะเพิ่มความเร็วได้ เห็นหรือเปล่า ใครไม่เคลื่อนยกมือ อันดับแรกเช็ก Coding เราก่อนนะคะ สิ่งที่เด็ก ๆ จะต้องมีเงื่อนไขแรก ดูบรรทัดนี้ใน loop จาก run = false เราเพิ่มเงื่อนไขในการกดแป้นใช่ไหม เข้าไป 1 2 ทั้งหมดกี่อันนี่ 1 2 3 นี่นะคะ 3 เงื่อนไขนี้จะต้องมี เนื่องจากของข้าพเจ้าเป็นเดินข้าพเจ้าก็ลดลงมา 5 เหมือนเดิมนะครับ bgvelo นี่คือความเร็วของการเคลื่อนที่ ของฉากเรานั่นเองนะคะเด็ก ๆ ตำแหน่งค่าตัวนี้บอกแล้วว่าให้ดูที่คำสั่ง เอ้ย ตัวแปรที่ชื่อ screen ของเรานี่ ที่เรา set ไว้ เรา set ไว้เท่าไร เด็ก ๆ บอกแล้วนะคะ ถ้าใครขึ้น Error อันดับแรก ดูที่บรรทัดที่มัน Error นะ สังเกตนะคะ ตำแหน่งที่ผิด ถ้าใช้ Sublime บรรทัดมันจะบอก นี่ดูตรงนี้เขาผิดนี่ เด็ก ๆ เด็ก ๆ เวลาบอกแล้ว เวลา เวลาเราทำไอ้นี่ บางคนมาทีหลังแล้วไม่ทัน พอมาดู if มันอยู่ตรงตำแหน่งนี้ เด็ก ๆ จะชอบไปใช้วิธีกด Space Bar พอกด Space Bar เดี๋ยวดูนะคะ Ctrl + B ให้ดู ตำแหน่ง Error มันจะชี้เลย บรรทัดแล้วให้เด็ก ๆ ดูตรงข้อความนะลูก นี่ถ้ามันขึ้นว่านี่ Tab Error เห็นไหม ถ้าขึ้น Tab Error ให้เด็ก ๆ เช็กตำแหน่งตรงนี้เลยนะคะ ถ้ามันขึ้น .. อย่างนี้ แสดงว่าเด็ก ๆ ไปกด Space Bar ไม่ได้กด Tab นึกออกไหม เห็นไหม ตำแหน่งบรรทัดมันจะบอกชัดเจนเลยว่าอยู่ตำแหน่งไหน สิ่งที่ผิดคืออะไร เห็นไหมคะ โปรแกรม Sublime มันจะแจ้ง Error บอกตำแหน่งบรรทัดบอกสาเหตุที่ Error เสมอนะ ให้ดูตรงนี้ด้วยประกอบกันนะคะ เราก็ต้องกด Delete ลบออกแล้วก็กด Tab ไป ให้ตำแหน่งมันตรงแค่นั้นเอง แล้วค่อยกด Ctrl + B ใหม่ เห็นหรือเปล่า ได้แล้ว แก้ได้นะคะ เพราะฉะนั้น เช็ก Error ดี ๆ นะคะ ของใครยังไม่ออกอีก ใครยังไม่สามารถเดินได้ ไม่หอนสิ ดูบรรทัดที่ Error คือ line 33 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 ไว้ก่อน ปิดได้เลย ปิดได้เลย ว่าอย่างไร ว่าอย่างไร จะถามหรือเปล่า [สิ้นสุดการถอดความ]