(อาจารย์สุธิรา) ก็คือตัว ก่อนอื่น ก่อนอื่น เปิด Sublime text ขึ้นมาเหมือนเดิม เปิดโปรแกรมเรา ตัวสีส้มนี่ สีส้มนี่เปิดขึ้นมา กด ctrl + B ก่อน 1 ครั้งเพื่อเช็กว่าทุกคนมี blackground ที่มีภาพพื้นหลังอยู่แล้วนะคะ ใครยังไม่มีหน้าต่างพื้นที่การทำงานของตนเองที่มีรูป background ยกมือนะคะ เดี๋ยวไปต่อไม่ได้ ที่เราจะทำต่อไปก็คือเราจะเอาตัวเกมของเราเข้ามานะคะ แล้วจะทำให้มันเคลื่อนไหว ของใครยังไม่ขึ้น ขึ้นหมดคนแล้วหรือยังคะ อะไรนี่ cancel ไป ทำไมหน้าต่างนี้มันไม่ยอมให้ย่อลง ทำไม PowerPoint ย่อลงไม่ได้ล่ะ เราต้องการพื้นที่โฟลเดอร์ก็ได้ โอเคนะคะ สิ่งแรกเด็ก ๆ ไปดูไฟล์ของเราใน disk c โฟลเดอร์เรา ยังไม่ได้โหลดภาพหรือ จำได้ไหมครับ ตัวเกมที่จะใช้ ทำไมย่อสไลด์ PowerPoint ตัวนี้ลงไม่ได้ ปิดก็ไม่ได้คือ ขอปิดก่อนแป๊บหนึ่ง จำได้ไหมคะ ที่บอก sprite sheet น่ะ ค่ะ คือเราต้องการภาพที่มันมีลักษณะของภาพที่มีหลาย ๆ ภาพ ก็คือภาพการเคลื่อนไหวต่อเนื่องกันนะคะ ก็คือเด็ก ๆ จะต้องเลือกตัวการ์ตูนหรือที่เราจะทำให้เขาเคลื่อนไหว เราจะไม่มาเสียเวลาวาดเองก็เลยจะให้ค้นจากเน็ตนะก็ต้องเลือกใช้ฟรีดาวน์โหลดด้วยนะคะ เพื่อจะได้ไม่ติดปัญหาลิขสิทธิ์ จะต้องพิมพ์ free download เสมอเวลาค้นนะ แล้วก็ตามด้วยคำว่า sprite sheet s-p-r-it e Seeds นะคะ แล้วก็กดค้นหานี่ลักษณะ sprite ก็คือจะมีภาพตัวหลักแล้วก็มีภาพที่เหมือนตัวเขาเคลื่อนไหวได้มีรูปอื่นที่เสื้อผ้าเขาก็เหมือนกันอย่างนี้นะคะ เราต้องการวัตถุของเรานี่ ไอ้ตัวเกมเรานี่ให้มันเคลื่อนไหวนะคะ ถ้าใครหาได้แล้วให้โหลดแล้วเอาไปใส่ใน ตอนนี้โหลดมาแล้วนะคะ จะเอาภาพนี้ รอแป๊บหนึ่งใครยังไม่โหลดโหลดเลยนะคะ ก็คือให้มันมีตัวหลาย ๆ ตัว อย่างน้อยอย่างน้อยมีภาพตัวเกมนี่สัก 4 ตัวเป็นอย่างน้อยนะ มีมากกว่านั้นก็ได้นะคะ โฟลเดอร์ที่เราดาวน์โหลดนะคะ เดี๋ยวจะ move ไปไว้ที่ disk C ของเรานะคะ เอาไปไว้ที่เราเก็บโปรแกรมที่เราเขียนเกมไว้น่ะ เดี๋ยวจะ Extract file แล้วนะคะ Extract All จะเอาแล้วกันนี่ ๆ เดี๋ยวจะเลือกเฉพาะที่เขาเป็นขอเอาเป็นเดินนะคะ จะเดินหรือจะขอเป็นรูปเดินแล้วกัน เอามาทดลองให้ดูก่อนนะคะ สักตอนนี้มีหลายตัวหน่อย เขาถึงหมายเลข 12 นี่นะคะ เราจะต้องมีรูปตัวเกมเราอยู่ในโฟลเดอร์อย่างนี้นะคะ โฟลเดอร์ชื่อเกมที่เราสร้างให้สังเกตว่าเรามีไฟล์ Sublime อยู่ตรงไหนเราต้องมีรูปอยู่ตรงนั้นแหละมันจะได้หากันเจอนะคะ คนอื่นเด็ก ๆ เปิดโฟลเดอร์ตัวเองขึ้นมาไว้ด้วย เดี๋ยวจะไปเดินเช็dว่ามีลูกแบบนี้กันหรือยัง เลือกสัก 1 ตัวนะ เลือกตัวเกมสัก 1 ตัว ดูนะคะ คำค้นที่ใช้ ดูคำที่ใช้ค้นเห็นไหมบนหน้าสไลด์นี่ Free Download sprites sheet นะคะ ให้คนด้วยคำนี้ แล้วถ้าค้นด้วยคำนี้สไปรท์ชีสมีหลาย ๆ ตัวนะคะ ที่เขาทำไว้แล้วน่ะ ในในโฟลเดอร์เด็ก ๆ ทุกคน เมื่อกี้ไปตรวจแล้วนะคะ มีตัวเกมที่เราจะเอามาลงแล้ว ไปไหนล่ะ อยู่ไหนเอ่ย อยู่ไหนเอ่ย อยู่ไหนเอ่ย นี่นะคะ อันดับแรก อันดับที่ 1 เหมือนเดิม ลองวางก่อน เพราะเราต้องรู้ว่าเราจะเอาไอ้ตัวนี้ไปวาง เอาไปวางในฉากเราได้ไหม เพราะฉะนั้นนะคะ คำสั่งยังเป็นคำสั่งเดิมอยู่นะ ก็คือคำสั่งที่จะนี่ ๆ เอารูปมาใส่นี่นะคะ แต่เราจะต้องประกาศตัวแปรใหม่ ตอนนี้ไปที่บรรทัดตำแหน่งที่ 14 บรรทัดที่ 14 ก่อน เด็ก ๆ เลื่อน เลื่อนลงมาประมาณบรรทัดที่ 14 ในสัปดาห์ที่แล้วเรามี background มีอะไรแล้วนะ เรากำหนดหน้าจอเกมได้แล้วสิ่งที่เราจะทำต่อมาใส่ Hashtag หรือเครื่องหมาย ก่อนแล้วก็บอกว่า เราจะเอาตัวเกมเข้ามาแล้วก็เลยใส่ Hashtag ไว้ตรงส่วนนี้จะเป็นส่วนที่เรานำตัวเกมเข้ามานะคะ นำเข้าเกม นำเข้าตัวเกมใส่แฮชแท็กไว้ แล้วก็กด Enter ลงไป 2 ที เว้น 2 บรรทัด เราจะอยู่บรรทัดที่ 15 จะได้เช็กง่าย ๆ ไปตามบรรทัดก่อนตอนนี้ ก่อนอื่นเหมือนเดิมนะคะ รูปแบบจะคล้าย ๆ กับตัวนี้นะคะ ก็คือให้ Pygame มันไปโหลดภาพตัวเกมเรามาก่อนอื่น เราต้องมากำหนดค่าตัวแปรก่อน ตัวแปรเราสมมติเมื่อกี้ให้เด็ก ๆ ดูที่อะไร ดูที่ตัวละครของเรามันเป็นตัวอะไรนึกออกไหมลูก เช่นตัวนี้เป็นแมว เพราะฉะนั้น ชื่อตัวแปร ก็คือตัวอะไรคะ cat นะ ภาษาอังกฤษใครเป็นตัวอะไรบ้าง ถ้าใครเป็นนกไหนใครเป็นรูปนกยกมือขึ้น มีใครเป็นรูปนกไหมคะ ไม่มีหรือว่าเห็นอยู่กุ้ง ก็ตั้งชื่อแปร bird เลยลูกนึกออกไหม เอาชื่อตัวเกมเราตัวแปรเลยเราจะได้รู้ว่านี้คือตัวนกของเราใครที่ตัวลูกเกมตัวเองเป็นรูปสัตว์ชนิดไหนนึกออกนะคะ ให้ใช้ชื่อตามตัวสัตว์ชนิดนั้น หรือตัวเกมชนิดนั้นเหมือนของแม่ แม่เอาแมว เพราะฉะนั้น เกมแม่ก็จะชื่อ cat ก่อน boy ก็ได้ ใช้ boy ก็ได้เด็กผู้ชาย เป็นรูปเด็กผู้ชาย Boy Girl ก็ได้ของมิ่งเป็นรูปอะไรครับ หมา Dog นะ อะไรไม่รู้ชื่อสัตว์ภาษาอังกฤษโดยใช้อะไร Google แปลภาษานะคะ ช่วยประกาศตัวแปรแล้วตามด้วยเครื่องหมายเท่ากับเสมอ เห็นไหมคะ ตรงชื่อตัวแปรน่ะ ชื่อนี้ก็คือให้เราดูรูปไอ้ตัวเกมของเรา มันเป็นสัตว์อะไร เราก็ตั้งชื่อตามนั้น อย่ามาพิมพ์ตามแม่นะ ของแม่เป็นตัวแมวไง แม่ก็เลยใช้ cat ถ้าของเด็ก ๆ เป็นหมาก็ใช้ Dog ถ้าเป็นนกก็ใช้ bird ถ้าใครเป็นOK องุ่นเป็นตัวอะไร อ๋อ หมาก็ได้ dog ดูต่อนะคะ คำสั่งต่อมาเหมือนเดิมพิมพ์ b ก่อนกดตัว P 1 ครั้ง แล้วเลือกไฟล์เกมกด enter เกมอะไร .image.load เราจะใช้คำสั่งนี้ .image โหลดกดจอดลงไปแล้วก็เลือก image นึกออกนะ เลือกตัวนี้นะคะ เลือก Image กด enter อีก 1 ครั้ง พิมพ์ l เลือกโหลดใส่วงเล็บนะคะ เพราะรูปแบบของเขาก็คือให้ Pygame มันไปโหลดรูปเห็นไหมคะ ตรงนี้นะก็คือชื่อเจอรูปเด็ก ๆ ดูจากไหน เหมือนเดิมนะคะ เช็กชื่อภาพของเรา สังเกตดูชื่อดี ๆ มันมีหลายตัว แล้วมันมีวงเล็บ 1 พิมพ์ให้เหมือน ถ้ากลัวพิมพ์ผิดทำอย่างไรคะ copy ใช่ไหม วิธีการให้พิมพ์ผิดคลิกขวาที่รูปของเรานี่ แล้วเลือก properties เห็นไหมคะ ก๊อบฯ จากตรงนี้เลยจะได้พิมพ์ไม่ผิดนึกออกนะ ชื่อมันก็จะเหมือนกันจะได้หาเจอไม่อย่างนั้นมันจะหาไม่เจอต้องไปกินเองออกไหมลูกให้เด็ก ๆ เอาใหม่นะ ทำให้ดูใหม่นะ เราคลิกที่รูปที่เราจะใช้ 1 ครั้ง แล้วคลิกเมาส์ขวานะไอ้ตรงนี้คลิกที่นิ้ว นิ้วกลางเราน่ะ คลิกเมาส์ด้วยคงที่นิ้วกลางเราอยู่ 1 ครั้ง แล้วเลือก properties นามสกุลด้วย เห็นไหมอย่าลืมดูนามสกุลด้วยมันเป็น PNG เพราะฉะนั้น เราก๊อบฯ ชื่อเราจะได้พิมพ์ไม่ผิดนะ เว้นวรรคอะไรมันจะได้เหมือนกันเลย Copy ctrl + c แล้วก็เอามาวางไหนล่ะ วงเล็บหายไปไหนแล้วเนื่องจากเป็นชื่ออย่าลืมนะคะ ถ้าเป็นชื่อลูกต้องใส่เครื่องหมายอะไรคะ Single quote หรือ Double Code ก็คือขีดเดียวก็ได้อยู่ไหนล่ะขีดเดียวหรือ 2 ขีดก็ได้นี่คือ Single quote นี่คือ Double quote ก็คือเครื่องหมายคำพูดแบบอันเดียวกัน 2 อันน่ะนะคะ กด Ctrl + V วางไฟล์นั้นนะคะ เห็นไหมคะ แล้วตามด้วยนามสกุลเวลาระบุนามสกุลรูปก็คือใส่ . ก่อนแล้วก็ใครจำไม่ได้ก็ย้อนกลับไปดูชื่ออะไรหว่านะคะ copy เหมือนเดิมนะคะ เห็นไหมคะ สกุล PNG เราก็ใส่ PNG ลงไปแล้วก็ตามด้วยนามสกุลเขาเห็นไหมคะ เอารูปเข้ามาแล้วอย่าลืมเรียกใช้รูปตอนนี้เราเอารูปเข้ามาแล้วนะคะ เราจะรู้ได้อย่างไร เอารูปเข้ามาเราก็ต้องไปเรียกใช้รูปนั้นขึ้นมาตอนนี้ในบรรทัดนี้คือคำสั่ง pygame.image.load นี่ก็คือให้ไปโหลดภาพที่เราจะใช้ดูชื่อดี ๆ นะเอาตามนั้นเลยอย่างที่บอก copy ctrl + v จะได้พิมพ์ไม่ผิดแล้วอย่างไรให้เราเข้ามาในตำแหน่งรูปของเกมเราเห็นไหมคะ screen.blit นี่ใส่รูปสิ่งมาที่เราจะใส่คำสั่งเดียวก็เลยจะเปลี่ยนจาก BGPicตัวนี้แทนเราจะเรียกตัวแปรนี้มานะคะ มานะคะ พร้อมหรือยังคะให้เด็ก ๆ เข้ามาที่บรรทัดที่ต่อจากที่เราเรียกใช้ Background screen.blit BG pic me คือ background Pictures เราดูนะคะ กด Enter เพื่อให้เคอร์เซอร์มันอยู่บอกแล้วว่าอย่ากดเป็นอย่างนี้อย่ากดแป้น Space Bar ให้เห็นจุดเดี๋ยวมันขึ้น Error นะเด็ก ๆ เด็ก ๆ ไปท้ายบรรทัดของคำสั่งที่เราจะเริ่มเขียนแล้วกด enter เห็นไหมคะ มันจะตัดโครงสร้างมันจะจัดระเบียบมาให้ เราจะลงไปตำแหน่งเดิม กด s 1 ครั้งแล้วเลือก Screen เหมือนเดิม .blit เหมือนเดิมเลือกเอานะ จะได้ไม่ต้องพิมพ์ใส่วงเล็บตรงนี้ ก็คือชื่อชื่อตัวนี้นะคะ เราก็ต้องเรียกใช้ cat เรียกน้อง cat ของแม่เรียกเด็ก ๆ เป็นอะไรตัวแปรของเด็ก ๆ นึกออกนะ ใครเป็น boy ก็เรียก boy ใครเป็น dogเรียกดอกใครเป็นเบิร์ดก็เรียก ิรนะคะ เวลาเอามาเราจะระบุตำแหน่งให้มันแล้วทีนี้ดูดี ๆ ตำแหน่งจอเริ่มต้นคือนึกออกนะมันมีแผนที่เรียกว่าแกน x กับแกน Y นะคะ 0 คือตำแหน่งข้างบนแล้วมันจะลงมาข้างล่างอย่างนี้ ไม่เชื่อเดี๋ยวลองดูนะคะ ถ้ายังไม่เปลี่ยนตำแหน่งเดี๋ยวเด็ก ๆ ลองดูก็ได้ เอาเหมือนเดิมเลย เอาเหมือนคำสั่งแรกเลย เอาเหมือนตำแหน่งนี้เลยนะ เด็ก ๆ ลองดูนะ catปุ๊บ ใส่ , แล้วก็ใส่ตำแหน่ง 0, 0 เหมือนตัวแรกเลยนะ ให้ดูเลยว่ามันตำแหน่งมันเริ่มจากไหนใครพิมพ์คำสั่งนี้เสร็จแล้วกดอะไรคะ เมื่อเราต้องการทดสอบโปรแกรมหรือร้า run โปรแกรม ก็คือกด ctrl + B นะคะ Control Bเห็นไหมเราใส่ 000 ตำแหน่งน้องแมวมันรออยู่บนท้องฟ้าเราอยากให้มันลงมาให้เราดูอะไรคะ ดูแนวของภาพ background ของเราด้วยเมื่อคืนน้องแมวควรจะยืนอยู่ตรงนี้ พื้นดินตรงนี้พอดี เพราะฉะนั้น เราต้องเลื่อน 1 0 0 ตัวแรก คือศูนย์ในแนวเรียกว่าอะไรล่ะ แนวตั้ง Column 1 ออกนะแล้วศงก็คือแมวที่เป็นแถวก็คือบรรทัด เพราะฉะนั้น เราต้องเพิ่มจำนวนบรรทัดน้องแมวก็ตัวใหญ่ไปด้วยใช้ถ่านปลอมลดไซส์ลงหน่อยก็ได้นะคะ เด็ก ๆ นี่ตัวมันใหญ่นี่ ก็ได้บอกนะเดี๋ยวค่อยไปแก้การลดขนาด size สอนไปแล้วนะเดี๋ยวค่อยไปแก้ทีหลังก็ได้ เรามาเปลี่ยนตำแหน่งเพิ่มจำนวนบรรทัดนะคะ สัก 250 เช็กด้วยอะไร 1. อันดับแรกเด็ก ๆ เช็กจากนี่ได้เช็กจากตัว screen เราเห็นไหมคะ ตำแหน่งบรรทัดนี่เห็นไหมตำแหน่งคอลัมน์น่ะ สูงสุดก็คือ 1,600 บรรทัดบนสุดคือ 800 ตอนนี้นี่เอาบรรทัดที่ 250 กด ctrl + b ดูว่าน้องแมวเราเลื่อนลงมาหรือยังได้พอดีเลยนะคะ น้องแมวอยู่ตรงพื้นดินพอดีบางคนเลื่อนลงไปเยอะให้นึกถึงนะไม่ใช่ว่าเราจะเอามาจนไอ้นี่ถูกไหมคะ บางทีมันไม่จำเป็นต้องลงมาจนสุดฉากเสมอไป ให้เราดูระดับภาพพื้นที่ของภาพเราด้วยนะ ไหนหมดกดหรือยัง ctrl + b หรือยัง กดหรือยังกดปุ่มนี้หรือยังเดี๋ยวไม่ขึ้นหรือเดี๋ยวนะ name error ทำไมถึงขึ้น name error บรรทัดที่เท่าไร line 18 อยู่ที่ไหนนะ ทำไมตัวนี้ error ดูบรรทัดนี้นะคะ บรรทัดนี้เด้อหายไปไหน บรรทัดนี้หายไปไหน run trought หายไปไหนหายไปไหน 1 บรรทัดนี่ ก่อนหน้าเห็นไหมข้างบนข้างบนอันนี้ถูกแล้วขึ้นไป 17 ไม่ ๆ ไม่ต้องลบขึ้นมาอีกบรรทัดหนึ่ง แล้วก็ Enter Enter เท่ากับ ctrl แล้วก็กด ctrl + b กดอันใหญ่ใช่ไหมเดี๋ยวค่อยจำได้ไหม ที่บอกว่าไหนล่ะนี่ใช้อะไรนะ ใช้โปรแกรม paint อยู่ไหน P กด p p-a กดตัว P ตัว i paint OK ทีนี้ไปที่เมนู file>open ไหน ตัวไหนตัวนี้ใช่ไหม เลือกเดี๋ยว ๆ select All ก่อน แล้วก็เลือกตรงนี้ ลดลง 50 50 50 OKเอาอีกลงอีกทำอีกครั้งหนึ่ง 50 อีกsave ย่อนะ ลดแล้วทีนี้ ctrl กด ctrl + B ใหม เดี๋ยว ๆ อันนี้หรือเปล่าชื่อ ๆตัวเดียวกันหรือเปล่าลืมดูอันนี้ชื่ออะไรขอนก 2 Open 1 ใช่ไหมนี่ก่อนนี่ก่อนลูกนี่ก่อน cancel ก่อนต้อง select ก่อนเลือกทั้งหมดก่อนต้องเลือกอันนี้ก่อน แล้วค่อยมาเลือกอันนี้ อีกที่หนึ่งอีกที่หนึ่ง อันนี้เหมือนเดิม 50 อีกทีหนึ่ง OK แล้วก็ save OK ctrl + B ใหม่กด ctrl + B เห็นไหมที่นี้ในกรณีของกุ้งเต้นนี่ วิธีการมันจะมีตัวนี้ เห็นไหมดูนะคะ บางคนเอารูปเข้ามาแล้วมันมีกรอบสีขาว ๆ นั่นก็คือมันมี Background มาดูวิธีเอา background ออกจากรูปเรา มีกระดาษจดไหมคะ จดไว้ทุกคนดู เดี๋ยวจะมาสอนวิธีเอาภาพที่มีที่มี background ออกนะคะ ภาพที่มี background เช่น หาตัวอย่างก่อนนะ ไม่แน่ใจตัวนี้มีหรือเปล่า เดี๋ยวขอลองเปิดดูก่อนนะ นี่นะคะ บางทีรูปที่เอามานี่ มันมีไอ้พื้นหลังขาว ๆ นี่ ชื่ออะไร Tiger เดี๋ยวลองดูนะ เดี๋ยวขอลองเอา Tiger เข้ามาดูก่อนนะ แป๊บหนึ่งนะคะเด็ก ๆ เดี๋ยว test ให้ดู ดูนะคะ ถ้ารูปใครที่มีพื้นหลัง เดี๋ยวให้ดูเดี๋ยวให้ดู เหมือนของกุ้งเต้นนี่ เขามีพื้นหลังสีขาวนะ ดูถ้าอย่างนี้นะคะ มันจะมี background ข้างหลังนะดูดี ๆ นะ เดี๋ยว test ให้ดูนะคะ นี่เมื่อไรที่ใครเอาภาพที่เลือกมาใช้ แล้วมันไม่อย่างนี้ มีสีขาวล้อมกรอบนี่ นั่นก็คือภาพนี้มันมี Background วิธีที่จะเอาออกจดด้วยนะคะ เด็ก ๆ จดไว้เพราะอย่าลืมว่าเด็ก ๆ บางคนมีหลายรูป นึกออกนะ เพราะฉะนั้น ต้องไปเอาออกแล้วออกเองทุกรูปแต่จะสอนเอาออกแค่ 1 รูปให้ไปที่เว็บไซต์ให้เด็ก ๆ เปิด Google นะคะ แล้วพิมพ์คำว่า BG แล้วก็ตามด้วยคำว่า "remover" นี่นะคะ ใช้ Google แล้วพิมพ์คำว่า "BG remover" ตัวนี้นะคะเด็ก ๆ นี่ให้ค้นคำว่า "BG" แล้วก็ตามด้วย r-e-m-o-v-e-r ก็คือมันจะเป็นเว็บสำหรับเอาภาพที่มี เอาพื้นหลังที่อยู่ในรูปเราออกนะคะ มันก็เลยมีชื่อว่า BG remover นะคะ เห็นไหมคะ ให้เด็ก ๆ เข้าเว็บนี้เลย remove BG นี่นะคะ คลิกเข้าไปเลย ที่มันขึ้นว่า remove background from image นี่ คลิกเข้าไปเลยแล้วที่ตัวนี้ Upload Image ก็คือให้เราคลิกที่ Upload Image แล้วเราก็ไปเปิดไฟล์รูปภาพที่เรามีตัว Background น่ะนะคะอยู่ ตัวอย่างของเรา ก็คือ Tiger2 เลือกภาพนั้นแล้วคลิก Open นี่ ถ้า background ออกแล้ว ข้างหลังมันจะเป็นไอ้ตารางสีเทา ๆ อย่างนี้ หมายถึงเอาออกแล้วนะคะ เด็ก ๆ ก็กด Download ไฟล์มันก็จะมาอยู่ที่ Download เรานะก็อีกขั้นตอนหนึ่ง ก็คือแก้ชื่อน่ะค่ะ เด็ก ๆ ก็ก๊อบไปวางไว้ใน disk เราในโฟลเดอร์เราน่ะค่ะ นี่นะ โฟลเดอร์ที่เราสร้างเกมไว้นี่ ชื่อมันยาวใช่ไหมคะ เราก็ทำการตัดเดี๋ยวนะมันให้ rename หรือ Windows 11 นี่ทำไมไม่ขึ้น rename ให้ ถ้าไม่ขึ้นเราก็เปิดโปรแกรม paint ก็ได้เพราะ save มาแล้ว Open with เพ้นท์ให้เรา save as นะ save as เป็นรูปหลักเรานี่เดี๋ยวกด ctrl + B ดูใหม่นะคะ ตัวนี้จะปิดนะอันเดิมสังเกตอันเดิมมีภาพเดิมมี Background เมื่อกี้เราเปลี่ยนแล้ว ลอง ctrl + B ดู ใหม่แกให้ผมน่ะ ไหนนะนี่ขึ้นมาให้ rename นะ อันนี้ transperlency เวอร์ชันนี้นี่แปลงยากจริง โอเคนะคะ เดี๋ยวค่อยไปแก้เอานะ ก็คือชื่อมันจะเปลี่ยนตามไปด้วยนะ ต่อมาต่อมา เดี๋ยวเราจะต้องไปต่อนะคะเด็ก ๆ เราได้รูปแล้ว สิ่งที่จะทำต่อไป ก็คือไอ้ตัวฉากนี่นะคะ มันจะเคลื่อนทำให้ฉากมันเคลื่อน ซึ่งก็คือในสไลด์นี้ของเรานั่นเอง ไหนล่ะ PowerPoint ผมอยู่ไหน มาดูนะคะ คำสั่งที่จะทำให้ฉากถ้ามีตัวละครเข้ามาแล้วนี่ก็คือถ้าตัวละครเดินแต่ความจริงตัวละครไม่ได้เดิน นี่เราก็ใช้ให้ฉากมันเคลื่อนนั่นเองนะคะ อันนี้สไลด์โทษทีโทษทีเปิดผิดครับ สิ่งที่เราจะทำต่อมานะคะ background มาแล้วนำเข้า velocity to Background มาดูไอ้คำว่า velocity นี่มันหมายความว่าอย่างไรนะคะ แปลว่า ความเร็ว ก็คือทำให้ Background ใส่ความเร็วให้ background นั่นเองนะคะ วิธีการ ตอนนี้เด็ก ๆ จะมาที่ตำแหน่งของที่ต่อจาก background นะ เรานำเข้า background แล้ว การแล้ต่อไปเราก็จะประกาศตัวแปรให้กลับเมื่อคืนเริ่มจากกำหนดเงื่อนไขให้ background เรานั่นเองนะคะ ไปยังตำแหน่งก่อนนำเข้าเกมนะนะคะ แล้วก็ใส่แฮชแท็กไปว่าเป็นภาษาไทยแล้วกันจะได้เข้าใจง่าย จัดการนะคะ เราจะจัดการตรงส่วนนี้ เป็นส่วนของจัดการแล้วก็ฉากเกม จัดการในส่วนของฉากเกมของเรานั่นเอง ฉ ฉิ่งอยู่ไหน เด็ก ๆ ฉ ฉิ่ง อยู่ไหน ใครรู้ ฉ ฉิ่ง อยู่ไหนบอกเราที เราหา ฉ ฉิ่งไม่เจออยู่ตรงตัว Cจัดการฉากนะคะ เราจะมาทำการจัดการฉากก่อนนะคะ อันดับแรก ก็คือสร้างตัวแปรนะคะ มันจะมี BGX เราจะมีชื่อตัวแปร 3 ตัวนะคะ ตัวแปรแรก BGX ก็คือตำแหน่งของ background ของแกน x bgy ตำแหน่ง background ในแกน Y แล้วก็ BGV วีดีโอมาจาก Vivo Cityก็คือกำหนดความเร็วให้ background ก็คือค่าเริ่มต้นของตัวแปรพวกนี้คือ 0 ทั้งหมดเราก็เริ่มประกาศตัวแปรแรกก่อน สร้างตัวแปรตัวที่ 1 BG ขอโทษค่ะ ตัวแปรแรกนะคะ ใช้ชื่อว่า BGX ซึ่งหมายถึงตำแหน่งของ background ในแกน X เพราะเวลาเราจะเอารูปไปนี่ เราต้องระบุขอบเขตของรูปนั้นน่ะ นึกออกนะ กำหนดค่าเริ่มต้นกด Space Bar 1 ครั้ง กดเครื่องหมาย = 0 นะคะ มี x แล้วก็ต้องมี y BGY เท่ากับศูนย์เหมือนกันตัวที่ 3 บอกแล้วชื่อ BG แล้วv eเขาโอนมาจากvelocity City นะคะ ถ้าพิมพ์ Vivo City เลยจะยาวไปเริ่มต้นเหมือนกันค่ะ 0ก็คือI ค่าเริ่มต้นของฉากเรานี่ เราจะให้เริ่มที่ตำแหน่งที่ศูนย์ตำแหน่งในแกน x เริ่มที่ 0 แกน Y เริ่มที่ 0 แล้วความเร็วเริ่มที่ 0 เสมอนะคะ ก็คือประกาศตัวแปรนี้แล้วกำหนดค่าเริ่มต้นมันเป็น 0 ทั้ง 3 ตัวแปร วันนี้เด็กจะต้องมีตัวแปรเพิ่มขึ้นมา 3 ตัวเพื่อจัดการฉากนะคะ ก็คือ BGX BGY และ BG velo สิ่งที่เราจะทำต่อมาให้ดูนะคะ การใช้งานและความหมายของ key คือความเร็วของตัวเกมนี่มันขึ้นอยู่กับเมื่อเรากดคีย์น่ะ ในที่นี้ก็คือกดแป้นแป้นพิมพ์คำสั่งให้เด็ก ๆ ดูที่คำสั่งเขาเกมขีดอันเดอร์สกอร์อัปหมายถึงหมายถึงปุ่มนี้มันจะหมายถึงเป็นปุ่มให้กระโดดเห็นไหมก็คือขึ้นก็คือกระโดดขึ้นเลือกได้ 2 ตัวจะใช้ K_UP หรือ KSpace ก็ได้ 2 ตัวนี้ก็คือเราจะใช้ถ้าใครเคยเล่นเกมผ่านคอมพิวเตอร์นึกออกนะปุ่มที่ใช้กดนะเกมให้กด Space Bar ใช่ไหมลูกแล้วบางเกมให้กดแป้นไอ้ลูกศรชี้ขึ้นน่ะ นึกออกนะ เพราะฉะนั้น มันก็เลยไม่ใช่มันล่ะ คือไอ้ตัวคำสั่ง libary pygame ของเรามันก็เลยใช้ 2 คำสั่ง K_UP กับ K นี่เพื่อเป็นตัวกำหนดถ้ากดปุ่มนี้น่าจะหมายถึงตัวเกมมันกระโดดนึกออกไหมคะ ที่นี้ถ้าเราต้องการให้มันไปทางซ้ายคำสั่งนั้นก็คือunderscore ไฟล์เกมต้องใส่ทุกครั้งอยู่แล้วตัวคำสั่งแล้วตามด้วยตัวคีย์น่ะ K คือตัว K แต่ไม่ต้องพิมพ์เต็มเขาเลยยอดเหลือแค่เคนะคะ K แล้วอันเดอร์สกอร์ดาวดาวก็คือลงปุ่มที่กดนะคะ แล้วก็ก็คือลักษณะลูกศรนะคะ บนล่างว้ายขวานะคะ มันจะมีทิศทางเคลื่อนไปตามลักษณะลูกศรทีนี้เมื่อเราได้เราประกาศตัวแปรแล้ว สิ่งต่อมาก็คือเราจะมากำหนดเงื่อนไขนะคะ เพราะฉากมันจะเคลื่อน ก็คือนั่นหมายความว่าเกมมันเดินไปเดิมรัจากฉากนี้ปกติตัวเกมเดินเกมวางไว้ทางซ้ายมันก็จะเดินจากซ้ายไปทางขวา เพราะฉะนั้น ตัวที่เราจะให้มันเคลื่อนก็คือแป้นลูกศรที่จะให้มันไปทางขวาก็คือ K_RIGHT นะคะ เงื่อนไขก็จะเอามาไว้ทีนี้เราจะมาต้องกำหนดเงื่อนไขเพิ่มนะคะ จะอยู่ต่อจากตัวนี้เลยนะครับ ตัวนี้เลย ไปที่ที่เรามี loop นี้เห็นไหม นี่นะคะ for event มี if ที่ 1 ใช่ไหม มันจะอยู่ตรง if ที่ไปไหนแล้ว เห็นไหมคะ เป็น if ที่ 2 ที่ต่อจากเงื่อนไขแลกนะดูตำแหน่งดี ๆ นะคะ นี่คือ if ที่ 2 ใช่ไหมเด็ก ๆ ใส่ if เข้าไปนะคะเด็ก ๆ กด i ปุ๊บให้เลือก if condition ให้มันขึ้นโครงสร้างอย่างนี้นะคะ เข้าใจนะคะ อย่าไปกด i-f นึกออกนะแม่กดไอแล้วเลือก condition มันจะได้ขึ้นโครงสร้างของภายเกมขึ้นมาอย่างนี้นะคะ เราจะมากำหนดเงื่อนไขเพื่อให้ฉากของเราน่ะมันทำงานนั่นเอง นะ loop กับ Event มันจะอยู่ด้วยกันนะคะ กำหนดช่วงเวลาและเหตุการณ์สิ่งที่เด็กต้องทำเมื่อไรคำสั่งแรก event เราจะเลือกใช้เหตุการณ์ที่เกี่ยวกับแป้น ก็คือ Event == นะคะ ถ้า Event ก็คือเหตุการณ์เห็นไหมคะ กด e แล้วเลือก event.type ที่เราเลือก type ตอนนี้เราจะมากำหนดเงื่อนไขนะคะ ในการทำ loop if นะคะ ซ้ำนะคะ ทวนซ้ำนะคะ เด็ก ๆ event ขึ้นมา Enter กดแล้วก็ตามด้วยตัว T เลือก type t-y-p-e type เห็นไหมคะ ถ้าใช้ if จำไว้นะคะ ต้องมีเครื่องหมาย == 2 ครั้งอย่างนี้ ถึงจะถูกบอกเท่ากับไม่ใช่หมายความว่าใส่เครื่องหมายเท่ากับครั้งเดียวนะ ถ้าเป็นอีกใส่เครื่องหมาย == 2 ครั้งนะ ยPC ก่อนแล้วเลือกไฟล์เกมเลือกอะไรนะ ใส่ด.แล้วก็ตามด้วยมีอะไรทีแรกพี่ดาวนะคะ คําสั่ง Key dowตัวนี้หมายถึงเมื่อมีการปลดมันอดน่ะ หน้าตอนนี้หมายถึงเมื่อผมมีการกดปุ่มเกิดขึ้นนะคะ ผมที่จะกดก็คือปุ่มดีไลท์นะคะ คำว่ายาวไปกินด้วยตัวใหญ่นะลูก down ตัวนี้หมายถึงถ้ามีการกดปุ่มนี่ key_down ที่มีปุ่มกดลักษณะแต่เรายังไม่ได้บอกว่าเป็นปุ่มอะไร ใส่อะไรคะ เสร็จประโยคของ if จะต้องใส่โคลอนเสมอนะคะ แล้วมาที่ลบพาสออก ตัวโครงสร้างกันนะ คำสั่งต่อมาที่เราจะใช้ก็คือให้อีกครั้งหนึ่งนะคะ เราต้องการระบุว่า key ที่เราจะใช้กดน่ะ คือคีย์อะไร กดไอ้นี่แล้วเลือก if แล้วเลือก event นะคะ event.key = = นะคะ ก็คือ if แรกบอกว่าเมื่อเหตุการณ์ที่เกิดขึ้น ก็คือเมื่อมีการที่กดปุ่มเขาบอกว่าผมที่โดนกดทีที่บนจะต้องเป็น key ที่ชื่อว่าพิมพ์ pygame นะคะ พิมพ์ผิดแล้วเลือก pygame_like สังเกตคำสั่งตรงนี้นะคะ เด็ก ๆ ดูดีนะคะ เห็นแม่จะใช้ตัวใหญ่นะคะ _RIGHT เอาเป็นตัวใหญ่และใช้ตัวใหญ่เสมอนะคะ ที่เกี่ยวกับคีย์นะลูกกดด้วยตัวพิมพ์ใหญ่ทั้งหมดนะคะ R-I-G-H-T pygame ไม่ใช่. ไม่ใช่ Commart=นะคะ อธิบายนะคะ ก็คือถ้ามีเหตุการพิมพ์พิมพ์เกิดขึ้นก็คือมีการกดปุ่มเห็นไหมคะ Play Game With Me Now ทำการกดปุ่มแล้วไอ้พวกนี้นะคะ จะต้องเป็นปุ่มอะไรนะลูกศรที่ไปทางขวานะคะ ถ้ามีการกดปุ่มลูกศรชี้ไปทางขวาปุ๊บ อย่าลืมนะคะ ทุกครั้งที่จบประโยคของ if เราจะต้องใส่โคลอนเสมอนะคะ พอกด Enter เด็ก ๆ จะสังเกตเห็นแถบจะปรับให้อัตโนมัตินะคะ เพราะฉะนั้น เวลาพิมพ์โค้ดดูด้วยนะคะ เวลาใช้ sublime นี่ สิ่งที่เราจะทำต่อมาก็คือเลือกเรียกตัวแปรความเร็ว เพราะเราต้องการรู้ว่าไอ้ฉากนี่นะคะ ตัวแปรพิมพ์ BG เราเลือก velo นะคะ ไปหาคำว่า velo ค่าความเร็วมันเพิ่มที่ศูนย์ เพราะฉะนั้น การกดปุ่มเราจะให้ความเร็วของฉันเพิ่มขึ้นหลักสูตรเพิ่มเป็นเท่าไร อย่าเพิ่งเพิ่มเดี๋ยวนี้เพิ่มเยอะมากมันก็จะลองเพิ่มที่ 5 ก่อนเท่ากับ 5 ส่วนต่อมานะคะ เราจะทำให้มาให้มันแสดงผล มือไปไวกว่าไหนล่ะนะคะ กด enter แล้วดูตำแหน่งนะคะ เด็ก ๆ ดูตำแหน่งดี ๆ นะมันจะอยู่ตรงกับ for เห็นไหมคะ เพราะฉะนั้น เด็ก ๆ จะต้องนี่นะ ดูนะคะ ตำแหน่ง for คือตรงนี้ for โกด Back Space ย้อนหลังไป 1คลิปแล้วอ๋อก็คืออีกแบบsนึง 2 ครั้งกด Back Space อยู่ตรงตำแหน่งสกรีนฟิวส์โอเคไหมเรียกใช้ตัวแปรที่ชื่อว่า bgx นะคะ เพราะมันเคลื่อนไปทางขวาตำแหน่งของแกนก็คือแกน Xแกรน x ก็คือเป็นคอลัมน์มันจะอยู่ในแนวคอลัมน์เราต้องเรียกตัวแปรที่เป็นตัว X BGX นะคะ = เท่ากับ - = ใช้เครื่องหมายลบเท่ากับนะคะ แล้วก็ BG ใส่เครื่องหมายลงก่อนลบเท่ากับเรียก BGvelo โลมาใช้วันนี้ยังไม่รันนะคะ ยังไม่จบโค้ดมันจะยาวหน่อย เพราะว่ามันเพิ่งระบุว่าถ้าเกิดเหตุการณ์แบบนี้แล้วกดปุ่มนี้ที่สิ่งจะทำ ก็คือให้แสดงไอ้ background ที่มันเคลื่อนให้ background มันเคลื่อนน่ะค่ะ แต่ตอนนี้เรายังไม่ได้สั่งให้แสดงกำหนดแค่กำหนดมัน ที่นี้ตรงส่วนที่จะแสดง ก็คือตัวนี้ screen.blit.background เรา นี่เห็นไหม Color เราไม่ใช้แล้วนะคะ เดี๋ยวเราจะลบออกกดลบทิ้งได้เลยเด็ก ๆ วันนี้เราไม่ใช้แล้ว เช่นเดียวกันตัวแปรก็ลบออกเลยนะคะ BGColor เราไม่ใช้แล้วเราใช้อะไรคะ ใน background ที่เป็นรูปภาพไปแล้วลบเสีย พื้นที่จะได้ลดลงนะคะ ลบ 2 ตัวนะคะ ลบ background Color เรียก background Color ลบออกปีนี้ตำแหน่งที่จะมาเปลี่ยนนะคะ ก็คือเปลี่ยนจาก 00 ไปเรียกใช้ตัวแปรแกรน x BGX นะพิมพ์ผิดแล้วเลือก BGX อีกตัวหนึ่งก็คือแล้วเลือก BGY เห็นไหมคะ แต่สิ่งที่อยู่ในวงเล็บจะเปลี่ยนเป็นไม่ใช่วงเล็บอย่างนี้นะคะ เด็ก ๆ ดูเปลี่ยนเป็นอะไรล่ะ วงเล็บที่เป็นสี่เหลี่ยมน่ะ แทนไม่ใช่ปีกกานะ ก็ไม่ใช่กดอย่างไรธรรมดาอย่างนี้นะคะ เป็นตัวนี้นะลูก เป็นสี่เหลี่ยมอย่างนี้นะ ต่างกันนะ ไม่ใช่วงเล็บอย่างนี้นึกออกนะ วงเล็บที่เป็นรูปสี่เหลี่ยมอย่างนี้ เห็นไหมเด็ก ๆ เห็นไหมอยู่ตรงตำแหน่ง ปุ่มที่อยู่ตรงถัดจากแถวตัวเลขลงมาน่ะ อยู่ตรงตัว ฐ ฐาน บ ใบไม้ กับ ล ลิง ไหมคะ นะคะ เปลี่ยนนะคะ เปลี่ยนเป็นวงเล็บที่เป็นรูปสี่เหลี่ยมนะคะ เพราะเราเรียกใช้ตัวแปรการกำหนดค่า โอเคนะคะ ส่วนต่อไป ลงมากำหนดต่อให้ไอ้ตัวค่ะ มันไหลไปเรื่อย ๆ เพราะเมื่อกี้เมื่อกี้มันแค่กด 1 ครั้งก็เลื่อนไป 1 ครั้งใช่ไหมก็คือตัวนี้กำหนดเงื่อนไขให้ background เคลื่อนไหวไม่สิ้นสุด นี่เขาบอกเคลื่อนไหวไม่สิ้นสุดนะคะ เด็ก ๆ ไปที่ตำแหน่งของต่อจากนี่นะ ดูตำแหน่ง if นะคะ ตำแหน่ง if จะอยู่ตรงกับมือ ๆ ๆ เห็นไหมคะ เลื่อนเข้าไปจัดส่งอีกแรก 1 อันนะคะ ดูดี ๆ นะคะ คลิปแรกใช่ไหมเลื่อนไปครั้งที่ 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 เลือก blit วงเล็บแล้วใส่เรียกใช้ bgpic เหมือนเดิมเรียกตัวแปร bgpic เลือก background เราใส่โคลอนไม่ใช่สิ โคลอนนะแล้วก็ตามด้วยวงเล็บสี่เหลี่ยมนะคะ เด็ก ๆ นี่กดไอ้นี่ทุกทีเลย วงเล็บสี่เหลี่ยมไม่ต้องกด Shift ท่องไว้ ท่องไว้ พิมพ์ b แล้วเลือก bgx ค่ะ ค่าของ bgx เพิ่มเข้าไป ห็นไหมบวกเข้าไป 800ใส่เครื่องหมายบวกแล้วก็ใส่ตัวเลข 800 ลงไปเราก็เรียก bgy มาใช้งาน bg เลือก bgy 7 วันนี้เราจะมีโค้ดเข้ามาอีก 2-3 บรรทัดนะคะเด็ก ๆ ลองกด ctrl + B ดูอาจจะขึ้น Error ก็ได้ ctrl แล้วก็ B แล้วกดแป้นดู เด็ก ๆ เห็นอะไรไหมเห็นอะไรไหมเห็นไหมตัวฉากน่ะ มันเลื่อนใช่ไหม คือภาพลวงตาฉากเปิดจะไม่ได้เรียนก็คือตำแหน่งที่เราอัดมันน่ะค่ะ -800 อะไรอย่างนี้เดี๋ยวจะลองตัดที่มันไม่ใช่ -800 ดูเดี๋ยวขอลองนะคะ ขอร้องเป็น -1,000 เปลี่ยนขอเปลี่ยนตัวเลข เห็นไหมตำแหน่งที่ภาพมันตัดน่ะ มันไม่ต่อใช่ไหม เพราะฉะนั้น เราก็เลือกตำแหน่งที่ตัดเท่ากับอะไรคะ แกน x เรา ซึ่งเท่าไร 1,600 สูงสุดเราคือ 1,600 เพราะฉะนั้น ตรงนี้เราต้องมันนั่นละ มันจะได้เนียนรอยสักมันจะได้เนียน นึกออกไหม เอาใหม่นะ ctrlใหม่กดแป้นนี่เห็นไหมมันเริ่มใหม่แต่นะคะ มันจะมีเว้นนิดหนึ่ง เพราะฉะนั้น เราควรทำเพิ่มเพิ่มตำแหน่งตรงนี้เข้าไป เห็นไหมคะ รอยต่อมันไม่เนียนนะ เพราะฉะนั้น ตรงตำแหน่งตัดก็ต้องเป็น 1599 แล้วก็ไอ้นี่ลบที่ 1,600 อาจจะสลับนะคะ 1600 ให้เด็ก ๆ ดูที่อะไรที่ตัว screen ของตัวเองตัวนี้นึกออกนะ หน้าตัวเองเท่าไรดูดี ๆ นะ ไปเทียบกับตัวนี้เอาลูกลบอันนั้นแล้วเพิ่มอันนี้เปล่า 599 ลองได้มันลองได้ นี่เห็นไหมมันมีรอยต่อนิดหนึ่งนี่ มันต้องทำให้มันพอดีกันเป๊ะ เพราะฉะนั้น ไอ้นี่ต้องเริ่ม 1599 เหมือนกันไหม นี่ ๆ เห็นไหมรอยตัดหายไปแล้วมันมีมันมีอะไรล่ะ มันมี มันมีส่วนขาดส่วนเกินนิด ๆ หน่อย ๆ นะคะ เราเขียนเราก็ต้องทนอย่างนี้ล่ะ เพราะเรายืมภาพเขามาใช้ไง มันก็เลยไม่เป๊ะ นี่เห็นไหม เคลื่อนเร็วหรือเคลื่อนช้าขึ้นอยู่กับเลขตัวนี้นะคะ เลข 5 นาทีนี่ พาดูนะคะ เดี๋ยวให้ดูน้องวิ่งเป็นจรวดเลยใส่ 10 เข้าไปก็คือถ้าเป็นวิ่งเราอาจจะเพิ่มความเร็วได้เห็นหรือเปล่า ใครไม่เคลื่อนยกมือ อันดับแรกเช็ก coding เราก่อนนะคะ สิ่งที่เด็ก ๆ จะต้องมีเงื่อนไขแรก ดูบรรทัดนี้ใน loop จาก run false เพิ่มเงื่อนไขในการกดแป้นใช่ไหม 1 2 ทั้งหมดกี่อันนี่ 1 2 3 นี่นะคะ 3 เงื่อนไขนี้จะต้องมี เนื่องจากของข้าพเจ้าเป็นเดิน ข้าพเจ้าก็จะลดลงมาเป็น 5 เหมือนเดิมนะครับ bgvelo นี่คือความเร็วของการเคลื่อนที่ของฉากเรานั่นเองนะคะ เด็ก ๆ ตำแหน่งค่าตัวนี้บอกแล้วให้เด็ก ๆ ดูที่คำสั่งตัวแปรที่ชื่อ screen ของเรานี่ที่เรา save ไว้เรา save ไว้เท่าไร เด็ก ๆ บอกแล้วนะคะ ถ้าใครขึ้น Error อันดับแรกดูที่บรรทัดที่มัน Error นะ สังเกตดูนะคะ มันจะมีบรรทัดที่ผิด เด็ก ๆ เวลาบอกแล้วเวลาเราทำไอ้นี่ if มันอยู่ตำแหน่งนี้ เด็ก ๆ จะชอบไปกด space bar ใครยังไม่สามารถเดินได้ ไม่หอนสิ ดูบรรทัดที่ error คือ line 33 line 33 ตรงตำแหน่งบอกว่า name error ยังไม่ได้ประกาศตัวแปรนี้ เหรอ bgy นี่มันไม่รู้จัก เพราะฉะนั้น ขึ้นไปดูตำแหน่งที่นั่นเห็นไหม ประกาศตัวแปรซ้ำ คือตัวแปรบอกแล้วว่าตัวแปรจะมีชื่อได้แค่ 1 นะคะ ชื่อมันจะไม่ซ้ำ กด ดูตำแหน่งตัดต่อรูปด้วยเห็นไหมมันตัดไม่เนียนนี่ ก็ต้องนึกออกนะ ให้มาเช็กว่าอาจจะเริ่ม หยุดไม่ได้แสดงว่ามันเลย key ตรงนี้หรือเปล่า screen.blit นี่ไงเดี๋ยวก่อน screen + 8ร้อย - 800 - 5 pygemเกมIncrediblesKey Down Key Light ไม่ขึ้น Error สะ ด้วยไม่เป็นไรไม่ได้ไม่เป็นไรให้เช็กตรงนี้ไปไหนดูรูปตำแหน่งรูป ให้เขากด ctrl + b ใหม่ ctrl + b กดนี่เห็นไหมตำแหน่งที่ตัดรูป ดูอย่างไรดูตรงนี้นี่ ที่เปลี่ยนน่ะ เห็นไหมที่แม่บอกว่าตรง screen ตัวเองตั้งไว้ที่เท่าไร เพราะฉะนั้น ตรงนี้ ตรงนี้เห็นไหมใช่ไหมรูปมันสูงสุด คือความสูงสุดมันคือ 1200 ต้องแก้เป็น 12 ctrl + b ใหม่ กดเลื่อนแล้วที่นี้ตำแหน่งนี้ นี่เห็นไหมถ้าเราตัดตรงนี้ปุ๊บมันมาตรงนี้เราอาจจะตัดเกินตรงนี้ให้ตรงนี้มาอีกสักหน่อย ลองเพิ่มจาก 800 เป็น 1000 สิ ลองเพิ่ม Ctrl + B ใหม่นี่นะ ก็คือให้ให้นึกถึงว่า 1000 มันเยอะไป 900 ลอง 900 นึกออกนะให้เขาลองปรับลดไอ้ตั้งค่าตรงนี้ ก็คือให้รอยต่อของรูปมันดูเนียนน่ะ ไม่ใช่ตัดแล้วต้นไม้มันขาดครึ่งภูเขาขาดครึ่งอาจจะมาเริ่มที่ภูเขาก็ได้อะไรอย่างนี้นะคะ เวลาจัดตำแหน่งรูปนะลูกออกนะอย่างที่บอกนะคะ เช็กอะไร เช็คตำแหน่งความกว้างของสกรีนเรานะคะ ถ้าค่าตรงนี้เราจะตัดตรงนี้ที่เท่าไร ลองตัดตรงนี้ดูแล้วก็มาเช็กตำแหน่งตรงนี้นะคะ ตำแหน่งที่จะตัดน่ะ ตัดภาพนะคะ ใครยังไม่ออกอีก ทีนี้บางคนนะคะ ทำภาพไม่สมดุลคือฉากตัวเอง สักประติ๋วหนึ่งบนตัวใหญ่อยู่ในฉากหนักแล้วความเร็วเข้าไปนึกออกไหมถ้าภาพฉากมันสั้นไง โปรแกรมมันยาวฉะนั้นให้เขาไปขยายขยายพื้นที่ฉากน่ะค่ะ ขอตัวเลขเราปรับค่าได้นะคะ อย่างแม่ใช้ฉากยาวเลยนะคะ อันนี้เห็นไหมมันก็ไปได้เรื่อย ๆ ความเร็วคือขนาดตัวของเจ้าเกมเรากับฉากเรา มันก็ควรจะสอดคล้องให้เด็ก ๆ ดูการตัดภาพด้วย นึกออกนะลูกภาพมันตัดไม่สวยนี่ เราอาจจะเลือกมาเริ่มตัดต้นนี้ก็ได้ ลองปรับค่าไปให้ดูให้มัน match กันด้วยให้มันเนียนให้ภาพมันเนียน คือเหมือนภาพนี้มันมีจุดเด่นคือต้นไม้ใหญ่น่ะ พอตัดไปมันมันเลยไม่เนียนน่ะ ออกนะแต่ไม่เป็นไรบอกแล้วเราเอามา Test โปรแกรมเราเฉย ๆ นะคะ พอเวลาเราไปทำเกมจริง ๆ นี่ เราก็ควรจะวาดเองเพราะเราจะรู้ว่าฉากต่อไปจะให้มันลักษณะของต้นไม้น่ะ มันควรจะเป็นไซส์เท่า ๆ กันและจัดวางตำแหน่งเท่ากันการต่อฉากมันก็จะไปออกกันวันนี้เราไปยืมเขามาพอหมดโขดหินนี่มันต้องเป็นโขดหินมาต่อใช่ไหม มันกลายเป็นงานมันไม่ต่อเนื่องนะค่ะ นึกออกนะให้รู้ไว้ว่ามันคือหลักการในการทำนะคะ ยังไม่เสร็จนะคะ นี่เพิ่งให้ฉากมันเคลื่อนนะคะ เดี๋ยวสัปดาห์นี้เราจะพอแค่นี้ก่อน เพราะบางคนยังมีพื้นหลัง ยังมี background ให้เอาออกบางคนตัวเกมตัว background ใหญ่เบ้อเริ่มเทิ่มเลยนึกออกนะลดไซส์เกมลงให้นึกถึงความสนดูนะรูปเหมือนแมวแมวแม่และลูกแมวแม่ก็ยังใหญ่อยู่แม่ก็ต้องลดลงนะคะ ดูสีต้นไม้กับแมวตัวเท่ากันเลยมันก็ไม่ใช่นะคะ นะคะเราปรับสมดุลของภาพของเกมให้มันสอดคล้องกันด้วยนะคะ เพราะฉะนั้น บางฉากมันตัดแล้วไม่เนียน เราอาจจะหาฉากมาเปลี่ยนก็ได้นะคะ เด็ก ๆ หาย ๆ ที่มันใน ระนาบหรือแนวเดียวกันแล้วไม่มีพอเอามาวางแล้วไม่เห็นรอยต่อชัดเจนเหมือนอย่างนี้ระนาบเดียวคือต้นไม้ใหญ่ที่มาเพิ่มกับก้อนหินมันไม่ต่อเนื่องบางทีเราอาจจะตัดภาพเฉพาะถึงตรงนี้ก็ได้นึกออกนะ เพื่อไม่ให้มันเห็น อันนี้พื้นมันก็จะเป็นแนวเดียวกันมันก็จะดูต่อกันก็ได้เราอาจจะต้องไปตัดประกอบเอามาใช้ตอบสักเล็กน้อยด้วยนะคะ เพราะตัวนี้เกมมันจะนิ่ง ๆ อย่างนี้ เพราะเมื่อกี้เราไปดาวน์โหลด sprite มาแล้วทีนี้เราจะให้เห็นว่าโปรแกรมมันมีท่าทางการเดินจริง ๆ คงจะเป็นในสัปดาห์หน้าเพราะฉะนั้น ในสัปดาห์นี้เดี๋ยวทายชั่วโมงถ้าลูกมันเครื่องเรายังใหญ่เด็ก ๆ จะต้องขนาดให้มันเท่ากันตัวก่อนนะลูกนึกออกนะ เช่น เหมือนนกของเจ้ากุ้งเต้นมันใหญ่กุ้งเต้นนกตัวใหญ่ใช่ไหมวงเพื่อนกว้างไปโต๊ะอื่นด้วยไม่ใช่ป่ะ แค่ตัวเดียวเข้าใจนะคะ มันจะมีตัวที่ 1 ตัวที่ 2 ตัวที่ 3 ใช่ไหม ในคอลเลคชันเงินจะต้องปรับตัวอื่น ๆ ให้มันได้น่ะเท่ากับตัวแรก ๆ เพราะไม่อย่างนั้นให้นึกถึงเวลาเราให้แกมันเคลื่อนไหว เดี๋ยวมันจะกลายเป็นตัวเล็กตัวใหญ่ตัวเล็กตัวใหญ่ตัวเล็กตัวใหญ่ออกมาเพราะเราปรับลูกได้เท่ากันนึกออกไหมต่อไปเรียกภาพมาน่ะ ภาพมันไปต่อต่อกันใช่ไหมมันจะกลายเป็นเดี๋ยวตอนนี้เป็นคนเล็กเดี๋ยวทำไมกระโดดมามันเป็นตัวใหญ่ อันนี้เราไม่ได้เล่นกันเกมเสกคาถาแล้วเป็นตัวใหญ่อันนี้คือเห็นว่าตัวนี้แล้วมันวิ่งมันเดินให้เห็นการเคลื่อนไหวของมันก่อน Effect ไอ้ตัวเล็กตัวใหญ่เพราะเราต้องการจากตัวเล็กแล้วเราต้องการเพิ่มไซส์ให้เป็นตัวใหญ่เหมือนมาริโอ้น่ะนะ เขากินเห็ดหรืออะไรไปแล้วเขาจะตัวใหญ่ขึ้นถ้าอย่างนั้นถึงจะใช้ภาพเล็กกลายเป็นภาพใหญ่ ตอนนี้ให้เห็นว่าไอ้ตัวนี้มันเคลื่อนไหวตัวเท่านี้ยังไม่เห็นมุมมองนี้ก่อนซึ่งเราจะมาต่อในสัปดาห์หน้า เพราะฉะนั้น สัปดาห์นี้เด็ก ๆ จะต้องเคลียร์รูปให้ที่จะใช้ให้เรียบร้อยสะก่อน พอจะพาเรียกใช้รูปในกลุ่มนี้ทุกรูปเลยจะเรียกอย่างไรเราจะสร้างเขาเรียกว่าจะสร้างฟังก์ชันไอ้รูปที่เรามีเยอะ ๆ นี่ ไม่อย่างนั้นเราจะต้องมาเขียนมันไม่ใช่วิธีการเขียนโปรแกรมโปรแกรมมันจะต้องลดการใช้รูป เราจะเรียกใช้คำเดียวคือเราอาจจะสร้างเป็นฟังก์ชันที่จะใช้ในครั้งหน้าได้อีกนะคะ โอเคนะคะ สัปดาห์นี้เราจะพอแค่นี้ก่อนนะคะ อันดับแรกรูปพื้นหลังออกให้รู้ตัวการ์ตูนกดไซซ์ให้มันเท่ากันกับไซส์ให้มันเข้ากันทุกตัวนะคะ เพราะเราจะใช้ทั้งเซตเลยทั้งเซตที่อยู่ในในตัวนี้เราในโฟลเดอร์เรานึกออกไหมมี 12 รูปเราก็ต้องแก้ทั้ง 12 รูปนะคะ ให้มันไปในแนวทางเดียวกัน เพราะวิธีการแก้มันก็คือแนวทางทีละรูปเท่านั้นเองนะคะ โอเคนะคะ อย่างนั้นสัปดาห์นี้พอแค่นี้สวัสดีค่ะ คนทำออกได้หมดแล้วนะคะ อย่าลืมเซฟไว้ก่อน ปิดได้เลยปิดได้เลย ว่าอย่างไรว่าอย่างไรจะถามหรือเปล่า