--- title: การเขียนโปรแกรมภาษาคอมพิวเตอร์ subtitle: date: วันอังคารที่ 13 ธันวาคม 2565 เวลา 08.50 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) (อาจารย์สุธิรา) สวัสดีค่ะ (ล่าม) สวัสดีค่ะ (อาจารย์สุธิรา) โอเคค่ะ ได้ยินนะคะ เดี๋ยวเราจะมาทำต่อนะคะ จากสัปดาห์ที่แล้ว สัปดาห์ที่แล้วเราลงตัวเกมเราไปแค่ 1 ตัว แต่ความจริง ตัวเกมเราที่จะใช้นี่ ก็คือถ้าน้องเดินอย่างนี้นะคะ มันก็จะมีหลายท่าเหมือนรูปเล็ก ๆ อย่างนี้เห็นไหม ท่ามันก็เลยจะเปลี่ยนก็เลยให้ไปค้น Sprite sheet ใครยังไม่มีภาพแบบนี้ยกมือนะคะ ทีนี้โฟลเดอร์อย่าลืม อย่าลืม โฟลเดอร์มันจะต้องอยู่ในโฟลเดอร์ที่ Drive Cนะ แล้วก็โฟลเดอร์ ชื่อ Drive ที่เป็นชื่อของเด็ก ๆ นะคะ นี่เพราะว่าไฟล์ pygame ที่เรา Coding จะอยู่ในนี้ด้วยเหมือนกัน ก็คือตำแหน่งไฟล์ที่เราจะใช้โค้ดกับรูปภาพมันจะอยู่ในที่เก็บเดียวกัน โฟลเดอร์เดียวกันนะคะ พร้อมหรือยัง ถ้าพร้อมแล้ว สิ่งแรกที่เราจะทำนะคะ ให้เปิด Sublime เหมือนเดิม เปิดไฟล์ Sublime Text เก่าเราขึ้นมาเลย ใครอยู่ไหนนะคะ เปิด Sublime แล้วนะคะ แล้ว... ทีนี้เด็ก ๆ ดูนะคะ ข้อแรกสิ่งที่เราจะทำ ก็คือเราจะไป import module ขึ้นมาอีก 1 ตัวนะ คือ ตอนเดิมนี่โมดูลที่เรา import คือ โมดูล pygame แต่ทีนี้จะมีเพิ่มขึ้นมา 1 ตัวนะคะ แล้วลำดับที่ 2 เราก็จะมาตั้งค่า พอเราไป import มา เราก็ต้องมาตั้งค่าเพื่อ... เพื่อจะเรียกใช้โมดูลตัวใหม่เรานี่นะคะ จากนั้นเราก็ไปกำหนดการแสดงผล ให้โมดูลตัวใหม่นี้ว่ามันแสดงผลนะคะ มาดูโค้ดกัน คำสั่งแรกคือ import pygame ใช่ไหม เรา import pygame แล้วเราคั่น ก็คือเราไม่ต้องไปพิมพ์คำว่า "import" ใหม่ คั่นด้วยเครื่องหมายโคลอนนะ แล้วก็ตามด้วย sys s-y-s มาจาก System ตอนนี้เรา import module ที่ชื่อว่า system นะคะ ตัวนี้นะคะ สีนี่ไม่ได้ ไม่กะพริบ เอาใหม่ เลือกตัวสี... สีอะไร นี่นะคะ เราจะ import module ที่ชื่อ pygame, system ทีนี้พอ import Module นี้เสร็จนะคะ module นี้จะเอาไวมันจะช่วยในเรื่องของเวลานะคะ system ก็คือตัวระบบนั่นเอง นี่เห็นไหมค่าทั่วไปที่จะตั้ง clock = pygame.time.clock นะคะ จะกำหนดระคะเวลา แล้วพอในส่วนของการแสดงผล เรียกใช้ตัวแปรที่ชื่อ clock เราสร้างตัวแปรชื่อ clock เพื่อเก็บเวลานี่ clock ในวงเล็บ 60 ก็คือให้ระยะเวลาการทำงานมันอยู่ที่ประมาณ 60 วินาทีนะคะ ในคอมพิวเตอร์ไม่ใช่ 60 นาทีนะ 60 วินาทีนะเด็ก ๆ เพราะฉะนั้น เปิด sublime เราขึ้นมานะคะ แล้วไปที่ตำแหน่งที่ import ก็คือตำแหน่งแรก บรรทัดนี้นะ นะคะ ใส่อะไรคะ : ใช่ไหมคะ แล้วตามด้วยโมดูลที่ชื่อว่า system หรือ sys s-y-s เห็นนะคะ เห็นไหม เพระาคำสั่ง importนะคะ Import Module นี่จะอยู่ที่บรรทัดแรกเสมอเลย เพราะการทำงานของโปรแกรมนี่ ก็คือมันจะอ่านจากบนลงล่าง เพราะฉะนั้น เราอยากจะให้มันไปทำอะไรก่อน เราต้องเอามันไปไว้ข้างบนว่าอย่างนั้นเถอะ เมื่อได้โมดูลนี้แล้ว ส่วนต่อมาจะอยู่ที่ส่วนนี้นะคะ กำหนดค่าทั่วไป ตัวที่ในหมายเลข 2 เด็ก ๆ เห็นนะ นี่ ก็คือเพิ่ม clock. เอ้ย clock = นะคะ เท่ากับนะคะ ตรงนี้ pygame.time เราจะเรียกใช้ library time นั่นเองนะคะ เพราะฉะนั้น เราก็เลยต้องเปิดโมดูลsystem ขึ้นมานะคะ clock = pygame.time.Clock ในวงเล็บ พร้อมนะคะ ใน sublime จะอยู่บรรทัดที่ต่อจากอะไร ดูดี ๆ pygame.init () เห็นไหม ตำแหน่งของการตั้งค่าทั่วไปนะคะ ทำไมมันลบล่ะ ตรงส่วนนี้เดี๋ยวนะคะ ตรงส่วนนี้จะแก้ว่าเป็น... จะเตือนเด็ก ๆ เสมอว่าให้เราใส่ # เพื่ออธิบายว่าตรง Coding นี้นะคะ เราใช้ทำอะไร เราจะได้รู้ว่า อ๋อ คำสั่งนี้นะคะ มันเป็นการสั่งให้นำเข้าโมดูล ซึ่งโมดูลที่เรานำเข้า ก็คือ pygame นะคะ แล้วก็ sys 2 ตัวนี้นั่นเองนะคะ เสร็จแล้วในส่วนของการตั้งค่าทั่วไป ก็คือ pygame.init นี่ มันเรียกใช้ pygame โมดูล pygame และอีกตัวหนึ่ง อันดับแรกประกาศตัวแปรที่ชื่อว่า clock ขอโทษ C นะคะ พิมพ์ด้วย c-l-o-c-k clock ที่แปลว่า นาฬิกาน่ะลูก วิธีการประกาศตัวแปร ก็คือชื่อตัวแปรตามด้วยเครื่องหมายเท่ากับ กดวรรคนะคะ กด Spacebar แล้วก็ใส่เครื่องหมาย = แล้วก็กด Spacebar อีก 1 ครั้งแล้วก็พิมพ์ libary.pygame.time พิมพ์ตัว p ปุ๊บนะคะ คลิกเลือก pygame บอกแล้วว่าเราจะไม่พิมพ์ยาว เพราะ Sublime มันจะขึ้นตัวโค้ดที่เราเขียนไปแล้วหรือตัวอะไรก็แล้วแต่ เราก็มาเลือกเอานะคะ . นะคะ t-i-m-e time แล้วก็ .clock อีกทีหนึ่ง เลือก clock นะคะ เห็นไหม มันจะช่วยให้เราไม่ไปพิมพ์ผิด บอกให้รู้ว่าเราจะใช้ตัวแปรตัวนี้ แล้วก็ใส่วงเล็บ เห็นไหมคะ นี่มันจะไม่มีปัญหาว่าพิมพ์ตัว o เป็นตัว a แบบนี้ บางทีเด็ก ๆ มองแล้วดันเห็นไม่ชัด ไม่ขยายนะคะ ตรงนี้คือส่วนของการตั้งค่าทั่วไป ใครยังไม่เสร็จบรรทัดนี้ ทำให้เสร็จนะคะ ไม่อย่างนั้นไปขั้นตอนต่อไปไม่ได้นะ ตอนนี้เรา Import แล้ว แล้วเรามาตั้งค่ากำหนดค่าให้มัน ก็คือให้เป็นตัวแปรที่ชื่อว่า clock ทีนี้เราจะไปเรียนใช้งาน เราจะไปที่ตำแหน่งท้าย ๆ แสดงผลจะอยู่ประมาณตรง... เดี๋ยวนะ เอาไปไว้ท้าย ๆ ก่อน นี่ ๆ ๆ แถว ๆ พวกนี้นี่ แถว screen.blit อะไรพวกนี้นะ อย่างนั้นเดี๋ยวใส่... ใส่ไอ้นี่ให้ก่อนนะคะ ใส่ # ก่อน ใส่ # เข้าไป ตรงนี้ส่วนของการแสดงผลนะ คั่นส่วนไว้จะได้รู้ นะคะ สังเกตตรงการแสดงผลเรา เพราะ screen.blit ให้มันแสดงภาพพื้นหลังเรานะคะ ความจริงตัวเดียวก็ได้นะนี่ ลบออกก็ได้ ลบตัวนี้ ได้เลยนะนี่ เดี๋ยวค่อยมาลบนะคะ ไล่ลบ เพราะฉะนั้น คำสั่งที่ 3 ก็คือให้... เดี๋ยวนะ เราจะ... นี่นะคะ ตรงส่วนของการแสดงผลที่บอก ก็คือเราจะเรียกตัวแปร clock นะคะ clock.tick นี่ แล้ว ระบุ ระบุว่าเวลาน่ะ เวลาที่ให้มันทำงานนี่อยู่ที่ประมาณ 60 วินาทีนะคะ วินาทีนะคะ ไม่ใช่นาที เพราะฉะนั้น ตำแหน่งก็จะอยู่ตรงเมื่อกี้ที่มาร์กไว้นะ การแสดงผล ก็คือตรงนี้นะคะ อย่ากด Spacebar กด Tab ให้ไปตรงกับตำแหน่ง screen บอกแล้วนะคะ เพราะบางคนจะติด พอเห็นย่อหน้าที่ 2 มันวรรคนี่ ใน sublime มันจะไม่ค่อยใช้วรรค ใช้ระหว่างคำ แต่ว่าคำย่อหน้านี่เราจะใช้ Tab นะคะ เราก็เรียกใช้ clock พิมพ์ c ปุ๊บ เลือก clock ของเรานะคะ แล้วก็ตามด้วย . memory ไม่ดีนะคะ จำไม่ได้ค่ะ ขอบอก สมงสมองไปหมด อากาศเย็น สกลนครหนาวนะคะ บอกเลยว่าหนาว เด็ก ๆ พากันไม่มานี่ t-i... tick นี่เป็นคำสั่งใน library นั่นเองนะคะ แล้วก็ตามด้วยวงเล็บ ใส่ 60 ตัวเดิมน่ะ 60 เดี๋ยวตัวเลขเราแก้ได้ ให้นึกถึงนะ ถ้าเราลอง Run โปรแกรมแล้ว ตัวเกมเรามันวิ่งไปเกินไป เราก็ไปเพิ่มเวลาให้มัน แต่ถ้ามันวิ่งช้า 60 แล้วมันช้า เราก็ลดเวลาลงนะคะ ก็คือให้นึกถึงน่ะ เวลา 1 วินาที 2 วินาที 3 วินาที 1 คือ เพิ่มใช่ไหม พอ 1 มันเร็วไปเราก็ต้องเพิ่มให้มันช้า ก็ต้องเพิ่ม แต่ถ้ามันช้าเราต้องลด ลดตัวเลขลงนะคะ หลักการ นี่คือเราจะได้ ยังไม่ Run นะคะ เพราะตัวที่เรา Run ถ้าเรากดมันก็จะไม่แสดงผลอะไรใด ๆ ทั้งสิ้นนะคะ ยังไม่กด Run นะคะ ไปทำต่อ เรายังเขียนโค้ดไม่เสร็จ อย่าลืมว่าโค้ดไม่ได้มีแค่ 3 บรรทัดแน่นอนนะคะ กดผิดอันอีก ไปไสล่ะ จะเอาตัวชี้ออก t ถัดไปนะคะ ลำดับต่อมานะคะ เรา กำหนดไอ้นี่ไปเรียบร้อยแล้วนะข้ามนะคะ เราตั้งค่าหน้าจอเกมเราตั้งไปแล้ว set mode หรือ เราจะมาทำ Loop นะคะ มาทำ Loop ให้เขา เราทำไปแล้ว เดี๋ยวจะข้ามส่วนนี้ เพราะเรามาทำต่อจากอันเดิมนะ นี่ ๆ ๆ เราจะใส่ moving sprite เข้าไปได้นี่นะคะ เราต้องไปตรงนี้ก่อน เราจะมาสร้าง class ให้ก่อน สร้าง class เพื่อ... เพื่อที่จะทำอะไร จำได้นะ ตัวเกมบอกแล้ว ในหนก่อน เราใส่เข้าไปแค่ตัวเดียว แต่ทีนี้เราจะเอาน้องมาทั้งเซ็ตเลย น้องการ์ตูนเรามาทั้งเซ็ตเลยนะคะ เพราะฉะนั้น เราจะต้องสร้าง class ให้น้อง เพื่อจะเรียกใช้ เราจะได้เรียกตามชื่อ class ครั้งเดียวพอจบนะคะ ทีนี้ตอนจะสร้าง class นี่นะคะ รูปแบบ ก็คือเราจะต้องพิมพ์คำว่า "class" แล้วก็ตามด้วยชื่อของ class คือ ในการเขียนโปรแกรมนี่ การสร้าง class จะช่วยให้เราไม่ต้องเขียนโปรแกรมใหญ่มาก ๆ หลาย ๆ ครั้ง หรือเขียนเรียกใช้ตัวอะไรก็แล้วแต่นะคะ ตัวรูปภาพนี่หลาย ๆ ครั้ง เหมือนใน class นี้รูปมันมีหลายรูปน่ะ ไม่อย่างนั้นเราต้องไปเรียกรูปหลายรูปเลยว่าอย่างนั้นเถอะ เราจะเรียกแค่ตรงใน class ครั้งเดียวนะคะ แล้วก็ใส่ : พอเสร็จชื่อ class ปุ๊บนี่จะต้องระบุ : เข้าไปนะคะ แล้วก็ใส่ statments เงื่อนไขอะไรตามหลังมา พร้อมนะคะ เราจะไปต่อนะคะ ดูดี ๆ นะคะ ชื่อ class จำไว้เลยนะคะ ถ้าเมื่อไรเมื่อให้สร้างclass เด็ก ๆ จะต้องพิมพ์ชื่อ class ตัวแรกด้วยตัวพิมพ์ใหญ่ เพราะฉะนั้น เตรียมกด Caps lock นะคะ นะคะ เมื่อเราสร้าง class เสร็จ ลำดับต่อมา เราจะมาสร้าง method นะคะ ให้ class ของเรานั่นเองนะคะ method method inite ก่อนหน้าเราจะเปิดหน้านี้ไว้นะคะ เริ่มค่ะ ไปที่ Sublimeเหมือนเดิม ทีนี้เขาบอกว่าอยากให้มันต้องอยู่ข้างบนเสมอเลย class มันจะอยู่ตรงส่วนที่เมื่อกี้นะ ในที่โค้ดจะเห็นว่า class จะอยู่ต่อจากส่วนของ import นะคะ ใส่ # ค่ะ เพื่อจะได้รู้ว่าตรงนี้เป็น... เราจะทำอะไร เราจะสร้าง class อยู่ต่อจาก... เดี๋ยวนะ เพราะเมื่อกี้มันต้องอยู่ต่อจาก... อยู่ต่อจากการตั้งค่าทั่วไปนะคะ เราจะอยู่ตำแหน่งนี้ ถัดมา เพราะตรงนี้จะต้องโดนเรียกใช้ก่อนแล้วก็ค่อยมาตรงนี้ได้ ทำไมเป็นภาษาไทย กดผิดหรือนะคะ ตอนนี้ใส่ # เพื่ออธิบายว่าเราจะสร้าง class เพื่อนำเข้าภาพต่อเนื่อง หรือ Sprite Sheet เรานั่นเองนะคะ อธิบายไว้เด็ก ๆ จะได้รู้นะคะ ถ้าใครพิมพ์ # หรือคอมเมนต์เสร็จแล้วนะคะ ก็จะจะสร้าง class ได้เลยนะคะ พิมพ์นะคะ พิมพ์ C บางคนพิมพ์ C ยังไม่ขึ้น พิมพ์ C-l ก็ได้นะคะ แล้วเลือกตัวแรก Class ew class นะคะ คลิกเข้าไป กด Enter เห็นไหมคะ มันจะสร้างโครงสร้างของ class ขึ้นมาเลย มี Class Name นะคะ แล้วก็มี Definition ที่จะตั้งค่านะคะ รูปแบบเหมือนไหม เหมือนในสไลด์เราไหม เห็นไหมคะ สร้าง Class แล้วก็มีตัวนี้เห็นไหม ส่วนของ class ต่าง ๆ นี่นะคะ ขึ้นมาทีนี้มาดูตรงนี้ ClassName ที่เขียว ๆ แล้วมีไฟกะพริบ เด็ก ๆ ทำแถบครอบ ตรง ClassName นี่ ที่มันขึ้นสีเขียว ๆ นี่ คือ เราจะต้องเป็นคนตั้งชื่อให้ class ของเรานะคะ เพราะฉะนั้น class นี้ ที่จะนำมาใช้หรือตัวเกมที่เรานำมาใช้คือตัวอะไรคะ เด็ก ๆ จำได้นะ ของใครให้ดูที่ตัวนี้ ตัวเกมที่เราเอามาใช้ในครั้งก่อนนี่ เราใช้คำว่า "cat" ใช่ไหม ของเด็ก ๆ ชื่ออะไรคะ เพราะฉะนั้น เอาชื่อ class เป็นตัวนี้ แต่อย่าลืมว่าตัวต้นของมันคืออะไรคะ ตัวใหญ่ใช่ไหม เดี๋ยวเราค่อยไปลบบรรทัดนั้น เรายังไม่ Run ยังไม่มีปัญหา กด C-a-t เป็นตัวใหม่นะคะ class กับ Cat เห็นไหม class จะพิมพ์ด้วยตัวแรก จะต้องเป็นตัวพิมพ์ใหญ่เสมอ ชื่อ class ต้อง ใหญ่เสมอนะคะ ทีนี้มาดูในส่วนไอ้เขียว ๆ นี้อีกที่เราจะต้องแก้ Object มัน วัตถุที่เราจะเอามาเราจะระบุอะไรลงไปนะคะ ใน Objects ของอุบลตัวอะไรนะลูก ก็ boy แต่เดิม boy เล็ก ก็เป็นตัวใหญ่นะคะ อย่าลืมนะคะ ตัวอักษรตัวแรกต้องเป็นตัวใหญ่นะลูก ถ้าเป็นชื่อ Class ชื่อ class สังเกตชื่อตัวแปรตัวเล็กตัวใหญ่ก็ได้ แต่เมื่อตั้งไปแล้วตั้งเช็ก นึกออกนะ แต่ถ้าชื่อ class น่ะ ต้องขึ้นต้นด้วยตัวใหญ่เสมอ ต่อมา Object ใน Object นี้เราจะใส่อะไรเข้าไปใน class ของเรานะคะ มาดูกัน Object ที่เราจะใส่ ก็คือเรียกใช้ sprite คือ pygame มันจะมี library บอกแล้ว เพราะฉะนั้น Library ที่จะใช้ก็คือดูนะคะ เด็ก ๆ ดูดี ๆ Sprite Sheet นี่ 2 ครั้งนี่ sprite ตัวแรก ตัวพิมพ์เล็ก มันจะเป็นคนละตัว นึกออกนะ เพราะอะไร เพราะเห็นไหม sprite ตัวที่ 2 ขึ้นต้นตัว s มันจะเป็นตัวใหญ่ แล้วถ้าเวลาแม่บอกว่าเรียกใช้ Sprite ตัวใหญ่ เราต้องพิมพ์ตัวใหญ่ก่อน นึกออกนะ แต่ถ้าพิมพ์เล็กทั้งหมดนะคะ มันจะมี 2 ตัวนะคะ เพราะฉะนั้น ใน Object เราจะเรียกใช้ Library pygame .Sprite ใหญ่ ว่าอย่างนั้นเถอะ เพราะฉะนั้น กลับมาที่ตัวนี้เรา ใน Object เห็นไหมคะ เราพิมพ์ p ตัว p pygame กด Enter ได้เลย พิมพ์ p แล้วกด Enter นะ . ใส่ . นะคะ Sprites ขึ้น Sprite ใหญ่ ยังไม่กดนะเด็ก ๆ เพราะ sprite แรก คือ sprite ตัวเล็กนะคะ s-p-r-i-t-e.Sprite ที่ 2 ต้องเลือก Sprite ตัวใหญ่ ไปไหนแล้ว อยู่เกือบล่างสุดเลยเห็นไหม คือ Sprite ตัวที่ 2 มันสร้างไว้ใน คือ Library มันมีอยู่แล้วนึกออกนะ โอเคนะคะ เพราะตัว : เราไม่ต้องใส่เลย เราอย่างนี้ ไอ้พวกเครื่องหมายมันจะไม่หาย ดูใหม่นะ ไอ้ sprite ที่ 2 นะ กด S ปุ๊บ ให้เลื่อนไปหา Sprite ใหญ่ เห็นไหมคะ กด Enter เพราะมันเป็นตัวที่เป็นอยู่ใน Library แล้วว่าอย่างนั้นเถอะ แต่ Sprite บอกว่า ฉันสร้างตัวนี้ขึ้นมานะคะ เพื่อจะเรียกใช้ เขาบอกตรงนี้เราจะลบออกนะคะ เป็นแค่อธิบาย ซึ่งเราอธิบายไว้ข้างบนแล้ว เรากด Delete ได้เลย เราพยายามลดบรรทัดในการเขียนโค้ด นึกออกนะคะ คือ 1 บรรทัดจะใช้พื้นที่ในการเก็บนะคะ เมื่อกี้เราสร้าง class ไปแล้ว ทีนี้เราจะมาสร้างส่วนของ Statements นี่นะคะ ต่อ ก็คือส่วนนี้ เห็นไหม def def ย่อมาจาก Definition init นะคะ มันจะพิมพ์ของมันมาแล้ว เพราะฉะนั้น ถ้าเด็ก ๆ พิมพ์เอง จะพิมพ์ไม่ถูก มันพิมพ์มาแล้ว เราจะมาแก้เฉพาะในวงเล็บ เอาตัวนั้นออก มันบัง มันบังโค้ดเรานะคะ เราจะพิมพ์จนถึงตัวนี้ก่อน super init () นีน่าจะพิมพ์มาแล้วนะคะ self ต่อจาก self self แล้วตามด้วยอะไรเห็นไหม นะคะ ดูนะคะ pos_x, pos_y ตัวแปร pos_x, pos_y นะคะ ย้ายตำแหน่งนะ เดี๋ยวพิมพ์ไปก่อน pos... ใช้ _x คั่น ตัวเดียวกันน่ะล่ะ แล้วแต่จะตั้ง คือแยกนี่ ใส่ _ เข้าไปนี่ มันจะได้เห็นว่า pos มาจาก position นั่นเองนะคะ นี่ pos นี่ pos มาจาก position นะคะ แล้วก็ตามด้วย _x ก็คือตำแหน่งแกน x ตำแหน่งของแกน x แกน y นั่นเอง ก็คือเราจะเอาไอ้รูปนี้มาวางในตำแหน่งนี้ ในแกน x แกน y ที่ระบุนะคะ บรรทัดนี้นะคะ ก็คือจะเริ่มกำหนดว่าตำแหน่งของสิ่งที่เราจะเรียกมานี่จะอยู่ตรงไหนอะไรอย่างไร บอกตำแหน่ง ระบุตำแหน่งแล้ว บรรทัดต่อมา มันจะเริ่มยาวขึ้นแล้วนะเด็ก ๆ ดูดี ๆ นะ ตรงช่องนี้เห็นไหมคะ class name เราไม่ต้องระบุลงไป ลบออกให้มันเป็นเปล่า ๆ แล้วเหลือแค่นี้ บรรทัดที่ต่อจาก Definition นะคะ บรรทัด Super () นี่ตรงที่อยู่นี้ ลบออกนะคะ บรรทัดนี้ เราจะเหลือแค่นี้ โอเคนะคะ บรรทัดถัดจากนี้ พอเริ่มเรียก self นี่มันจะยาวขึ้นนะคะ แต่เราจะพิมพ์แค่ 1 ครั้ง แล้วใช้วิธีคัดลอกแล้วก็ไปแก้ แก้เฉพาะตัวนะคะ ดูนะคะ ดู self sprite นะคะ self ตัวแรก arg ตัวแรกนี่ sprite sprite เล็ก แล้วเติม s ให้เขาด้วย มันจะเป็นคนละตัวกับตัวบนนะคะเด็ก ๆ เติม s เข้าไป ตรงนี้ค่าที่ใส่ ก็คือสี่เหลี่ยม วงเล็บแบบสี่เหลี่ยม โอเคไหม ดูดี ๆ นะคะ sprite ใน self นี่เป็น sprites ที่เติม s เข้าไปด้วย เราเรียก sprites ปุ๊บ กดมี sprite ขึ้นมานี่นะคะ แล้วเติม s เพิ่มเข้าไป โอเคนะ มันจะเป็นคนละตัวนะ มันมีหลายตัว ถ้าบอก sprites พอเรียกไปแล้วนี่ อย่ารีบ อย่ารีบ เห็นไหม ตัวนี้ 1 ใช่ไหม 2. Sprite ใหญ่ 3 ตอนนี้ sprites เรามี 3 sprites นะคะ โอเคนะคะ บรรทัดที่เหลือจะเริ่มไปเรียกใช้คำสั่งที่มันให้โหลดรูปที่เราเก็บไว้น่ะมานะคะ เราต้องวางเรียงให้ครบหมด เรามีกี่รูปเราต้องวางเรียงจนครบทั้งหมด เรามีกี่รูปเราก็วางไปให้ครบนั้นนะคะ เดี๋ยวเขียนให้ดูก่อน ตอนนี้เราระบุ sprite ไปแล้ว sprites ไปแล้ว สิ่งที่เราจะทำต่อมา บรรทัดต่อไป เราก็พิมพ์ self s-e เลือก self เหมือนเดิมนะคะ .sprites เหมือนกัน แต่เลือก sprites sprites ที่มีตัว s เห็นไหมคะ เลือกให้ถูก ตามด้วย . self.sprites. เพราะตัวแรก sprites ตัวแรกเราแจ้งโปรแกรมไปแล้ว ครั้งที่ 2 เราใช้ sprites มานะ มันได้เลยนะคะ . แล้วก็ตามด้วย โค้ดจะยาวหน่อย ขออีกรอบหนึ่ง ขออีกรอบหนึ่ง .append แล้วก็ pygame.image.load โอเค .append a-p-p-e-n-d นะคะ เรียกใช้คำ... ใน Library append. พิมพ์ append ผิดตรงไหนนะ append. ในวงเล็บ ใส่วงเล็บนะคะ pygame. p-y กด py แล้วกด Enter ให้เลือกใช้ .image เหมือนเดิม i-m เลือก image นะคะ .load เลือก load ถ้าใครไม่ขึ้นแสดงว่าบางทีพิมพ์ผิด ลองลบออกก่อน เดี๋ยวย่อลงก่อนนะคะ ที่ต้องย่อเพราะว่ามันยังมีต่ออีก เดี๋ยวเด็ก ๆ จะไม่เห็นว่าในบรรทัดนี้มันมีอะไรต่อนะคะ ก็คือตอนนี้เราจะมาเรียก self.sprites.append แล้วก็ให้สั่งให้ pygame มันไปโหลดภาพ แล้วมาดูภาพที่เราจะโหลด กดผิดนี่น่ะ วงเล็บทีหลัง วงเล็บหลัง load นะ append.pygame.image.load แล้วก็ชื่อรูป รูปตัวไหน ชื่อรูปเด็ก ๆ ดูนะคะ บอกแล้ว บอกวิธีไปแล้วนะ ถ้าไม่อยากพิมพ์ผิด เหมือนอย่างนี้ เราไปที่ไฟล์ภาพเราแล้วเราคลิกขวาที่ตำแหน่ง Properties แล้วเราก็ก๊อปฯ ชื่อไฟล์มันมาเลย มันจะทำให้เราไม่พิมพ์ชื่อไฟล์ผิด นึกออกนะ แล้วก็เช็กด้วยว่านามสกุลมันเป็นนามสกุลอะไร .png โอเค .png แบบนี้นะคะ มันจะไม่เกิดปัญหาการพิมพ์ชื่อไฟล์ผิด เพราะฉะนั้น ภาพที่เป็น sprites เรามีกี่รูป บรรทัดต่อไปไม่ต้องพิมพ์ใหม่ เด็ก ๆ ดูนะคะ ใช้วิธี Copy บรรทัดที่เราสั่งมันโหลดภาพ กดCtrl + C แล้วก็กด Ctrl + V ลงไป เราก็เปลี่ยนแค่อะไรคะ หมายเลขใช่ไหม 2 ถูกไหมคะ ตรงนี้นะคะ sprites เด็ก ๆ ต้องไปสั่งให้มันโหลดรูปที่เราจะเอามาใช้น่ะ ให้ครบตามจำนวน นึกออกไหมลูก เพราะฉะนั้น เพิ่มบรรทัดเอาเองนะ ของใครมีกี่รูป จำนวนบรรทัดของรูปที่โหลด มันก็จะเท่ากับภาพตัวเอง นึกออกนะ Copy Copy อันที่ 1 แล้วก็ไปเปลี่ยนหมายเลขถูกไหม ถ้าของใครมีหมายเลข ถ้าใครไม่มีหมายเลข นึกออกนะ แล้วก็วาง จนกว่ามันจะครบจำนวนไอ้ตัวนั้นของเรานะคะ เดี๋ยว... วางของตัวเอง ตรงนี้นะคะ ชื่อไฟล์ภาพนี่ ให้ดูในเครื่องตัวเองนะลูก ไม่ใช่มาพิมพ์ตาม ก็คือชื่อภาพใครภาพมัน... ภาพของใครของมัน อันนี้ชื่อไฟล์ภาพที่อยู่ในเครื่องของแม่ ของเด็ก ๆ ชื่ออะไร เด็ก ๆ ก็ดูเอาในโฟลเดอร์ตัวเองนะคะ มีกี่รูปเดี๋ยวขอไปดูก่อนนะ ว่าของเรามีทั้งหมดกี่รูป ของเครื่องแม่มีถึง 10 นะคะ เพราะฉะนั้น ก็จะใส่เพิ่มอีก 5 ตัว มีเยอะก็จะก็อบฯ แผงใหญ่ ๆ เลย 5 แล้วก็นับต่อ 6 7 8 9 10 เพราะฉะนั้น ให้เด็ก ๆ ดูในโฟลเดอร์ตัวเองนะ ไฟล์ภาพใครชื่ออะไรก็ก็อบฯ มาวาง แล้วค่อยมาแก้อย่างนี้นะคะ อันนี้ของแม่มี 10 ภาพ แม่ก็ใส่จนครบแล้ว 10 รูปนะคะ ของเด็ก ๆ มีกี่รูป เดี๋ยวไปช่วยดูให้ จะตรวจให้นะคะ ของใครมีกี่รูป ใส่วงเล็บน่ะถูกแล้ว เห็นไหมล่ะ เราว่าไม่ใส่ถึงว่าทำไมมันไม่ขึ้น ตรง pygame ใส่วงเล็บให้ด้วยนะ นั่นล่ะ ก็ว่าใส่แล้วจำไม่ได้ ตอนแรกน่ะใส่แล้ว แล้วก็ว่ามันไม่ขึ้นก็เลยเข้าใจว่าตัวเองใส่ผิด เดี๋ยวไปเดินดูนะคะ มันจะต้องขึ้นอย่างนี้ เป็นเซ็ต ๆ เลย self สีส้ม มี append คั่นเป็นสีฟ้า แล้วไปปิดด้วย load ทีนี้เดี๋ยวดูนะคะ ชื่อไฟล์เราลืมแน่ ๆ เลย เมื่อกี้เดินไปผิดแน่ ๆ มันต้องใส่อะไร เครื่องหมายอะไร คำพูด นึกออกนะ ใส่เครื่องหมายคำพูด จะเอา ' ' หรือ " " หรือ Dก็ได้ตรงชื่อไฟล์นี่เห็นไหม ใส่ลงไป ลืม ๆ นะคะ เห็นไหมคะ เด็ก ๆ ใส่เครื่องหมายคำพูดตรงที่เราจะเรียกใช้ด้วยลืมเยอะ เยอะหลายน่ะลืม นี่นะ เมื่อกี้ลืมใส่นะคะ ใส่เครื่องหมายคำพูดเข้าไปให้น้องด้วย เห็นไหม เพราะถ้าเช็กจาก... จากสไลด์นี่ ตรงชื่อไฟล์มันจะเป็นสีเหลืองเห็นไหมคะ มันถึงจะถูกต้อง เพราะฉะนั้น แก้ ใส่ single quote หรือ double quote ก็ได้ ใส่ตัวไหนก็ได้นะคะ ตัวใดตัวหนึ่ง ใส่ single ก็ใส่ ใครจะใส่ double ก็ใส่ เดี๋ยวทีนี้บางรูปของบางคนนี่รูปมันไม่ต่อนี่ เดี๋ยวตอน Run ออกมามันจะเป็น ฮา ๆ นะเด็ก ๆ เพราะฉะนั้น เลือกรูปมาใช้ก็มีส่วนนะคะ เช็กนะคะเช็ก อันดับแรกเช็กที่ชื่อไฟล์ภาพที่เราจะนำมาใช้ ว่าชื่อถูกต้องโอเคไหม แล้วก็รูปที่นำมาใช้มีจำนวนกี่รูป สังเกตนะคะ ถ้าใครแก้ครบแล้วไอ้ตัวชื่อไฟล์ภาพจะเป็นสีเหลืองทั้งหมด นั่นแสดงว่าถูกต้องแล้วนะเด็ก ๆ ต้องเป็นอย่างนี้นะคะ ในโค้ดเราต้องเป็นอย่างนี้ถึงจะถูก คือ คำสั่งมันเยอะ เพราะมันเป็น class คือ มันจะลำบากตอนแรกเท่านั้นนะคะ ไหนลองสิ ตัวเล็ก ตัวใหญ่ ไม่เกี่ยว มันอันนี้เป็นนามสกุลไฟล์ภาพ มันได้อยู่มันเป็นนามสกุลนะ แต่ชื่อห้ามผิด มันรู้อยู่ โปรแกรมมันจะรู้อยู่ มันน่าจะเว้นวรรคผิด เดี๋ยวตอน Error ก็จะรู้กัน สร้าง method แล้ว ทำอะไรต่อ โหลด sprite sheet แล้ว มีบรรทัดต่อนะคะเด็ก ๆ นี่ เราจะระบุตำแหน่งว่าตำแหน่งปัจจุบันของตัว sprite เราจะเริ่มที่ 0 นะคะ แล้วก็จะมาเรียกใช้ จะสร้าง จะทำ Animation เห็นไหม Create Animation แล้ว ขั้นต่อไปนะคะ เราโหลด... ตอนนี้เราสั่งให้มันไปโหลดภาพ ต่อมาเราจะสร้างส่วนของ Animation นะคะ เดี๋ยว ใส่ # ค่ะ ใส่ # เราจะเข้าสู่การสร้าง Animation แล้ว สร้าง... สร้างภาพเคลื่อนไหวก็ได้ เดี๋ยวจะงง เอาเป็นภาษาไทย สร้างการเคลื่อนไหว นะคะ # ไว้ จะได้รู้ส่วน ตำแหน่งอยู่ตรง self นะคะ ใช้วิธีกด Tab นะ ใช้วิธีกด Tab นะคะ อย่าใช้ Spacebar เข้าไปให้ตรงกับตำแหน่ง seft เดิมเรา พิมพ์ self ภาษาไม่เปลี่ยน พิมพ์ self พิมพ์ s เลือก self .ดูนะคะ คำสั่งนี้ยาวหน่อยหนึ่ง self.current_sprite sprite ธรรมดานะคะ อันนี้จะเป็นตัวแปรนะ current _sprite เพราะฉะนั้น เราต้องพิมพ์เองนะคะ c-u-r-r-e-n-t _s-p-r-i-t-e นี่เป็น ตัวแปรที่เราจะสร้างเพื่อระบุว่าตำแหน่งเริ่มต้นหรือตำแหน่งปัจจุบันนี้ ก็คือให้มันเริ่มที่ 0 self current_s= 0 1 นะคะ คำสั่งแรก ก็คือกำหนดให้ตัวแปรที่ชื่อ current_sprite มีค่าที่ 0 ไอ้ตัวนี้ ก็คือเป็นคำสั่งที่บอกว่านี่ค่าเริ่มต้นของภาพนะคะ จะต้องเริ่มที่ 0 เสมอนะคะ กำหนดไว้ self.current_sprite = 0 current ใส่ _ ด้วยนะครับ คือ แยก 2 คำน่ะ สาเหตุที่มี _ มีอะไรอย่างนี้ บางทีประโยคมันยาวนี่ ถ้าเราไปพิมพ์ติดกัน เวลาเราเช็กโค้ดมันจะลายตา นึกออกนะ เพราะฉะนั้นเราใช้ตัว _ เพื่อในการแยกคำน่ะค่ะ ไปบรรทัดต่อไปนะคะ เราจะกำหนดให้เรียกใช้ เรียกรูปนั่นเองนะคะ พิมพ์ s แล้วเลือก self เหมือนเดิม ตามด้วยเครื่องหมาย . .อะไร .image นะคะ คลิก i-m-a-g-e เห็นไหมคะ .image = ใส่เครื่องหมายเท่ากับนะคะ วรรค = self อีกครั้งหนึ่งค่ะ เรียกใช้ self อีกครั้งหนึ่ง แล้วเลือก self.sprite sprites ที่เราจะใช้ตัวนี้ ก็คือ sprites นะคะ ไปหา sprites นะคะ เราเลือกตัวนี้นะคะ แล้วก็ใส่วงเล็บสี่เหลี่ยมใหญ่เข้าไปแล้วพิมพ์ เรียกใช้ self.current_sprites นะคะ รอบต่อมา ในวงเล็บสี่เหลี่ยมใหญ่นี่เราจะเรียกใช้ self. พิมพ์ c แล้วเลือก current... c-u เห็นไหมคะ เลือก current_sprite นี่เลย เห็นไหมจะได้ไม่พิมพ์ผิด ที่เราสร้างไว้นั่นเองนะคะ บรรทัดต่อมาเลยนะคะ พิมพ์ self เหมือนเดิม นะคะ เลือก self. อันนี้พิมพ์เองนะคะ rect r-e-c-t rect self.rect = self วรรคก่อน self นะคะ เลือก self. เลือก self.image ค่ะ i เลือก image แล้วก็ .get g เห็นไหมคะ .get_ r-e-c-t rect นะคะ แล้วก็วงเล็บ ก็กำหนดอีกตัวหนึ่งนะคะ self เหมือนเดิม เลือก self เหมือนเดิม . เหมือนเดิมค่ะ อันนี้กำหนดตำแหน่ง rect top นะคะ rect ปุ๊บ เลือก rect แล้วก็ .top t-o-p top แล้วก็บนซ้าย top แล้วก็ left l-e-f-t topleft นะคะ = วงเล็บใหญ่ วงเล็บสี่เหลี่ยมใหญ่ pos เลือก pos_x แล้วก็ใส่ : แล้วก็เลือก pos_y นะคะ เห็นไหมคะ ระบุตำแหน่งแล้ว อยู่ที่ pos_x, pos_y ของเรานะคะ ให้ค่าเริ่มต้นในการทำงานเริ่มที่นี่ เช็กดี ๆ นะคะ ถ้าพิมพ์ถูกแล้ว สีจะขึ้นแบบนี้เลย สี self สีตัวเลข สี = นี่ จะขึ้นอย่างนี้เลย ถ้าใครไม่ขึ้นนี่แสดงว่าพิมพ์ตรงใดตรงหนึ่งผิดแน่นอน โครงสร้างผิดแน่นอนะคะ Sublime จะช่วยในการเช็ก Coding ได้ดีเลยนะคะ ใครยังพิมพ์ 1 2 3 4 4 บรรทัดนี้ไม่เสร็จ พิมพ์เสร็จหรือยังคะ ดูดี ๆ นะคะ sprites ที่ใช้ sprites ที่เรียกใช้ คือ sprites นะคะ ตรงนี้ ตรงตำแหน่งนี้ เรียกผิดชีวิตเปลี่ยนนะ มันจะไม่ขึ้น ไม่อย่างนั้นก็จะ Error ไปเลยนะคะ โอเคนะคะ ยังไม่จบ ยังไม่จบ โค้ดมันเยอะหน่อยหนึ่ง แต่พอเวลาไปเรียกนิดเดียวจริง ๆ class class ก็คือ class จะใหญ่หน่อย เรา Create Animation แล้ว สิ่งที่เราจะทำต่อไป นี่นะคะ เราจะมาเรียกใช้มันแล้วนี่ ๆ ๆ ไม่ใช่เรียกใช้เราจะทำ sprite น่ะ จัดมัน Group มัน Group Group รูปมันน่ะ จากภาพใหญ่ ๆ เป็นภาพเดียวนะคะ นี่นะคะ สร้าง sprite แล้วก็ Group น้องด้วยนะคะ คือ คำสั่งนี้เลย อ๋อ มันเป็นไอ้นี่ อ๋อ มันเรียนรวม สอบแล้วหรือ สอบแต่... ดูนะคะ ส่วนต่อมาเมื่อกี้เราจะเรียกใช้มัน เราจะสร้างแล้วก็ไอ้นี่ตำแหน่งจะอยู่ที่หลังเงื่อนไขนะ ตำแหน่ง โค้ดเสร็จหมดแล้วนะคะ 4 บรรทัดนี้ใครยังไม่เสร็จ โอเคนะคะ เรามาที่ตำแหน่งนี้ เห็นไหมคะ ตำแหน่งของการแสดงผลนี่ ก่อนตำแหน่งนี้นิดหนึ่งนะคะ ใส่ # เข้าไปเพื่อจะอธิบายว่าตรงส่วนนี้เราจะสร้าง สร้างภาพต่อเนื่องแล้วก็ มันไม่สร้างมันสร้างไปแล้ว เราจะทำภาพต่อเนื่องให้มันเป็น... Group มันเข้าไปให้มันเหมือนมันเป็นรูปเดียวน่ะ ชื่อพอแปลเป็นไทยแปลลำบากมากเลย ขอเป็นภาษาอังกฤษแล้วกัน อธิบายยาก คำไทยคำเยอะเกินอธิบาย เรานักคอมพิวเตอร์ เราแปลด้วยภาษาอังกฤษเป็นภาษาอังกฤษดีกว่า c-r-e-a-t-e create_sprites and group คือ ไอ้รูป sprite ที่เราทำเสร็จแล้วนี่ เราจะนำมันมารวมให้มันเป็นเหลือรูปเดียวน่ะ จากหลาย ๆ รูปน่ะ นึกออกนะคะ นะคะ เรียน ๆ ๆ กำหนดตัวแปร moving เคลื่อนไหวนะคะ เคลื่อนไหว moving_ การเคลื่อนไวของภาพ sprite เรา moving_sprite = pygame กด p เลือก pygame.sprite พิมพ์ sprite เลือก sprite เล็กนะคะ sprite ตัวเล็กที่ไม่มี s ดูดี ๆ นะคะ ตัวที่เลือกpygame.sprite นี่เป็น sprite ที่ไม่มี s นะคะ .Group Group นี่ใช้ตัวใหญ่ เพราะตัวนี้มันเป็นฟังก์ชันที่เขาสร้างไว้แล้วนะคะ ชื่อว่า Group ไม่ใช่ฟังก์ชันหลัก ถ้าตัวใหญ่นี่ มันคือ class class ที่ชื่อว่า group อยู่ใน Library นะคะ จะไปเรียกใช้ class จาก group นะคะ เพราะฉะนั้น เลยใช้ตัวใหญ่ สังเกตนะคะ Group ใหญ่นะคะ ต่อไปบรรทัดต่อไปนะคะ สิ่งที่เราจะทำต่อมา ก็คือประกาศตัวแปรเพื่อเรียกใช้ไอ้ตัว class ของเรานะคะ class เราชื่อ class ตัวใหญ่มันใช้คำว่า "Cat" ใช่ไหม เพราะฉะนั้น ตัวแปรเราก็จะใช้เป็นตัวเล็กนะคะ ก็จะเป็น cat เล็ก = Cat เพราะเราจะเรียกใช้ class เราต้องเรียก Cat ใหญ่นะคะ ใน class ก็จะมี ด้วย ในวงเล็บใส่อะไร ตำแหน่งค่ะ ตำแหน่งของไอ้ตัวนี้ ลองใส่ก่อนนะ ขอลองที่10, 10 เสียก่อน อยากรู้เหมือนกันว่ามันจะไปโผล่ตรงไหน แล้วก็กำหนดให้ตัวแปร moving sprite นี่นะคะ นำเข้าไอ้รูปนั้นน่ะ ให้มัน Group พิมพ์ m แล้วเลือก moving_sprites นะคะ sprites นี้ใช้ sprites ที่เติม s นะคะ ดูดี ๆ ไม่เหมือนกันนะคะ ลูก .add เพื่อให้มัน add อะไรเข้าไป ให้มัน add ตัวแปร cat เล็กของเราเข้าไป c-a-t cat เล็ก โอเค ให้มันเอาไปไว้ที่ cat นี้ คือ เป็นเอาภาพที่มันต่อกันหลาย ๆ ภาพนี่มาให้มันทำให้มันเป็นภาพเดียวน่ะค่ะ รวมกันเป็นภาพ 1 ภาพ ให้มันดูเหมือนเป็นรูปเดียวนะคะ 3 บรรทัดนี้เสร็จหรือยังคะ ใครยังไม่เสร็จ ยังนะคะ ถ้าอย่างนั้นเดี๋ยวไปต่อไม่ได้ มันจะขาดตอน เช็กนะคะ เช็คตรง sprite แรก sprite ไม่มี s นะคะ ดูดี ๆ sprites ตัวที่ 2 ที่เรียกใช้หลัง . มี s นะคะ ต่างกันตรงนี้ เพราะมันจะไม่ขึ้น Error เพราะมันี่เรียกใช้หลัง . มี s นะคะ ต่างกันตรงนี้ เพราะมันจะไม่ขึ้น Error เพราะมันสร้างแล้วมันโดนสร้างแล้ว เช็กตรงนี้ 2 จุดนี้พอ sprite ที่กำหนดใน moving_sprite นี่ไม่มี s แต่เวลาเรียกน่ะ เรียกต้องมี s นะคะ เป็นต้น โอเคนะคะ น่าจะเสร็จกันหมดแล้วทุกคน มาดูที่เราจะต้องทำต่อ เราจะสร้างฟังก์ชันให้มันวิ่ง ทีนี้นะคะ กำหนดฟังก์ชัน Run เห็นไหมคะ แล้วก็ Update เมื่อมันวิ่งไปแล้วนะคะ เด็ก ๆ ต้องบอกว่าทำไมวันนี้โค้ดเยอะจังเลย คือ มันยาวน่ะ แต่พอสร้างแล้ว มันจะใช้อันเดียวจบ เอาไปใช้กับครั้งต่อ ๆ ไปได้นะคะ เพราะฉะนั้น ตัวนี้นะคะ เราจะไปที่บรรทัดที่ต่อจาก class เห็นไหมคะ บรรทัดสุดท้ายของ class นี่นะคะ Enter ลงไป ใส่ # หน่อย เราจะบอกเขา บอกโปรแกรมบอกตัวเอง บอกตัวเองนี่ ถ้าใส่ # บอกตัวเองนะคะ ว่าตรงส่วนนี้เราทำอะไร สร้างฟังก์ชันค่ะ สร้างฟังก์ชัน ตรงส่วนนี้เราจะสร้างฟังก์ชัน Run นะคะ ที่ชื่อว่า Run กับ Update Run แล้วก็ Update 2 ตัว รูปแบบของการสร้างฟังก์ชัน ก็คือ Definition คำว่า "def" นั่นเองนะคะ Tab Tab เข้าไปแค่ 1 ครั้งนะคะ มันจะไม่อยู่ตรงกับ self นะ มันจะอยู่ก่อน self d เห็นไหมคะ เลือก def function นะคะเด็ก ๆ function นะคะ definition ชื่อฟังก์ชัน ก็คือ Run ตัวแรก ตัวแรก ตัวเขียว ๆ นี่ ไม่ใช่ในวงเล็บ ที่ขึ้นคำว่า "function" เป็น run นะคะ เพราะ function ที่เราใช้มันชื่อว่า run เราจะใช้ run นะคะ แล้วก็เรียก self มา กด s แล้วเลือก self ในส่วนของบรรทัดที่ 2 นะคะ พิมพ์ self ค่ะ กด s เลือก self.run _animate นะคะ animate มาจาก animation จะยาวไป animate run_anime anime นี่สั้นกว่าอีก run_anime จะงงไหมล่ะนี่ เอา animate แล้วกัน = True ทำงานเมื่อเป็นจริง จะใส่เงื่อนไขแล้วนะคะ เท่ากับ... True นะ t เลือก Ture Ture ใหญ่ เรามี function run แล้ว สร้างอีก 1 ฟังก์ชันนะคะ def เหมือนเดิม เลือก def function เหมือนเดิม ตรงตำแหน่งชื่อฟังก์ชัน เปลี่ยนเป็นเราสร้าง 2 ตัวนะ เราบอกเราจะสร้าง 2 ตัว ก็คือ run กับ update นะคะ ชื่อฟังก์ชันไม่จำเป็นต้องใช้ตัวใหญ่ เรียกใช้ self ค่ะ self แล้วก็ใส่ : แล้วก็เรียกใช้ speed ในส่วนของ statements หรือ pass นี่นะคะ เราจะมากำหนดเงื่อนไขให้มันทำงานนั่นเองนะคะ ก็คือใช้คำสั่ง if ค่ะ if statements นี่ if condition ตัวแรก ไม่พิมพ์เองนะเด็ก ๆ ไม่อย่างนั้นเดี๋ยวรูปแบบมันจะผิด ให้เลือก i แล้วเลือก if condition นะคะ ไม่พิมพ์นะคะ เลือกใช้... เรียก self มา self. เลือก run_animate ที่สร้างไว้มาใช้งาน ถ้ามี if คำสั่ง = มี 2 ตัวนะคะ == Ture ค่ะ True พิมพ์ T แล้วเลือก True ใหญ่นะคะ ตรงส่วน statements pass เราจะเรียก current_sprite มานะคะ พิมพ์ self เหมือนเดิม self self.cu เลือก current_sprite กด Enter เราจะเพิ่ม นึกออกนะ พอเวลาที่มันเคลื่อนน่ะค่ะ ตำแหน่งปัจจุบันมันเริ่มที่ 0 เพราะฉะนั้น + เราจะต้องเพิ่มค่าให้มัน นะคะ ใส่เครื่องหมาย + แล้วก็ = ก็คือเพิ่ม ในความหมาย ก็คือถ้าใส่ + ก็คือบวก บวกอะไรเข้าไป ให้บวกเข้าไปใน speed ที่เราสร้างไว้ กด sp แล้วเลือก speed กด Enter นะคะ เราจะเพิ่มเงื่อนไขซ้อนเงื่อนไข เพราะอันนี้เพิ่มแค่ speed นะ เพิ่มความเร็วเข้าไป กด i แล้วเลือก if condition เหมือนเดิมนะคะ if init int ตัวแปรนี้นะคะ ไม่ใช่ตัวแปร มันเป็น... วงเล็บค่ะ ใส่เปิดแล้วปิดใส่เข้ามาทีเดียวเลยนะ จะได้... วงเล็บจะได้ไม่หายว่าอย่างนั้นเถอะ พิมพ์ self แล้วเลือก self นะคะ .current_sprite ค่ะ พิมพ์ c-u แล้วเลือก current_sprite เงื่อนไข ก็คือให้มันเช็กว่ามันยังน้อยกว่าหรือเท่ากับ len len นะคะ l-e-n len ใส่วงเล็บค่ะ เราจะเลือก self s พิมพ์ s แล้วเลือก self .sprites sprites นะคะ รอบนี้จะเลือก sprites นะ s-p-r-i-t-e-s sprites นะคะ ใน len เลือก self.sprites นะคะ ตรง statements pass นะคะ พิมพ์ self เหมือนเดิม เลือก self . พิมพ์ c-u แล้วเลือก current_sprite = 0 นะคะ ค่าเริ่มต้นของ self.current_sprite = 0 ตอนนี้มันกำลังเช็ก ให้มันเช็กค่ามันจะวนเหมือนวนลูปน่ะค่ะ แล้วก็ self เหมือนเดิม run_animate เลือก run_animate = False มี True แล้วก็ต้องมี False ก็คือถ้าไม่เป็นจริง ก็จะจบการทำงาน จะทำเมื่อเป็นจริง มันจะเข้ามาเช็กค่าค่าก่อน กด F ใหญ่แล้วเลือก False บรรทัดนี้เสร็จแล้ว กดย้อนหลังกลับไปที่ตำแหน่ง if แรกนะคะ if ที่หนึ่งเห็นไหม if ที่ 1 พิมพ์ self ค่ะ s self.i เลือก image = self เหมือนเดิม เลือก self.sprites นะคะ เลือก sprites ที่เติม s สี่เหลี่ยมใหญ่ วงเล็บสี่เหลี่ยมใหญ่ เรียก... เรียก int เรียก int เลือก int ใส่วงเล็บเข้าไป ในวงเล็บเลือก self.current_sprite เลือก self มือไวจริง ๆ เลย self.current_sprite ตอนนี้เราทำส่วนของฟังก์ชัน run กับ update เสร็จแล้วนะคะ มี 2 4 6 8 10 นี่นะคะ เดี๋ยวจะไปเช็กตำแหน่งนะคะเด็ก ๆ ตำแหน่งของฟังก์ชัน ดูต่อนะคะ วันนี้น่าจะยาวหน่อย แต่ผลน่าจะคุ้มค่าพอใจ น่าจะเป็นที่พอใจของเด็ก ๆ อยู่ เราจะมาเรียกใช้ตัวนี้นะ key เรากำหนดแล้ว แต่เราต้องเรียกใช้มันน่ะนะคะ ตรง... เดี๋ยวนะ เงื่อนไข if keyvelo moving cat ตำแหน่งจะต้องเป็น pygame.QUIT ตรง key if key เป็น K_RIGHT เป็น K_RIGHT ตำแหน่งนี้นะครับ ดูนะคะ เด็ก ๆ จะเรียกใช้ตัวแปร Cat ที่เรียกฟังก์ชัน run มาทำงานนะคะ ทีนี้ที่เราจะไปลบก็จะมีเดี๋ยวเด้อลบตรงไหนบ้าง เราจะเริ่มลบแล้วนะ ลบตรงนี้นะคะ นำเข้าภาพนี่ ลบออกเลย เพราะเราเอาไปไว้ที่ class แล้ว เด็ก ๆ ไปหาตัวเดิม โค้ดเดิมเก่าน่ะ ลบออกเดี๋ยวมันจะงง ที่เรานำรูปเข้าในสัปดาห์ก่อนน่ะนะ เราเขียน # ไว้อยู่ เอาออกนะคะ ไปไหนอีก icon เดี๋ยวเด้อ โอเค ลองกด B ดู Test ค่ะ Ctrl + B Test Error ก็มา บรรทัดที่เท่าไรนี่ line 75 line 75 ไหนนะ ไหนนะ ดูบรรทัดนะคะ ใครของมัน มันบอกว่าอย่างไร identity inspect 75 clock มันบอกว่า Identation error shell command python clock.tick error เดี๋ยวนะ ขอดูต่อ ขอดูโค้ด เดี๋ยวย้อนโค้ดนะคะ ไปที่การตั้งค่าทั่วไป พอย้ายตำแหน่ง เอา screen ใส่ข้างล่างนะคะ เอ้ย clock.tick ไปใส่ล่างไอ้ screen.blit นี่นะคะ โอเค แล้วก็... ไปต่อ ไปต่อ เราน่าจะต้องสร้างอีกตัวหนึ่ง รู้แล้วเราลืมตรงนี้ไปด้วย โอเคนะคะ เพิ่มโค้ดอีก 3 บรรทัดนี้เห็นไหม moving_sprite จะต้องมาอยู่ตรงนี้ เยอะจนเบลอเหมือนกัน เราจะไปที่ตำแหน่งการแสดงผลของเรานะคะ เพิ่มโค้ดอีก แล้วก็ให้เด็ก ๆ เดี๋ยวก่อนอื่นให้เลือกตรงส่วนของการตั้งค่าทั่วไป 3 บรรทัดนี้นะ แล้วก็กด Ctlrl + X เอาไปไว้ข้างล่าง class นะคะเด็ก ๆ นี่เอามาไว้ก่อนหน้ากำหนดหน้าจอเกม ต้องขยับตำแหน่งอะไรสักอย่างหนึ่ง พิมพ์ moving เห็นไหม เลือก moving_sprites นะ .draw ให้มันวาดนะคะ ให้มันวาด d-r-a-w ให้มันวาด screen แล้วก็เลือกใช้คำสั่ง update นะคะ moving พิมพ์ m แล้วเลือก moving_sprite.update เลือกฟังก์ชันอัปเดต ให้ค่าเริ่มต้นอยู่ที่ 0 ตำแหน่งนะคะ 25 แล้วก็เรียก pygame.display มาใช้งาน เลือก dispaly นะคะ .flip f-l-i-p flip นะคะ ใส่วงเล็บ น่าจะ Ctrl + B ดู 76 มันบอกว่าอย่างไร screen.blit unexpected ไม่รู้จัก attribute Module ผิดตรงไหน อ๋อ เลือกฟังก์ชันผิดนี่เอง ไม่เป็นอะไร ทำไมมาขึ้น moving_spriteattribute function add ผิดอีกหรือ บอกว่าไม่รู้จัก Attribute add แล้วนะเดี๋ยวนะ มีความ... clock เล็ก เลือก clock เล็ก 74 line 74 in module Track moving_sprites Attribute Error add มันจะเป็นไปได้อย่างไร ไม่รู้จัก add ผิดหรือ ไม่รู้จัก add เข้าไม่ได้ ข้ามตัวไหนไป len current self self.image True event Dino moving_sprite.add มีไหม ไม่นี่ หา add ไม่เจอ หมดแล้วนี่น่ะ เดี๋ยวติดไว้ก่อน error 1 บรรทัดนะครับ เดี๋ยวจะไปลอง run อยู่ในเครื่องตัวเอง บางทีเรื่องของเรื่อง คือ Run เครื่องตัวเองออก ที่นีคือ... คืออะไรครับพี่น้อง โอเคนะคะ Save ไว้ก่อน เดี๋ยวเรามาต่อสัปดาห์หน้า มันยังไม่วิ่งให้เรา มันขึ้น Error Attribute add มันหายไปไหนท่อนหนึ่ง สำหรับวันนี้จะพอแค่นี้ก่อนนะคะ ขอบคุณพี่ล่ามนะคะ เดี๋ยวเราจะมาต่อกันในสัปดาห์หน้าค่ะ ขอบคุณค่ะ display.update [สิ้นสุดการถอดความ]