(อาจารย์สุธิรา) สวัสดีค่ะ (ล่าม) สวัสดีค่ะ (อาจารย์สุธิรา) โอเคค่ะ ได้ยินนะคะ เดี๋ยวเราจะมาทำต่อนะคะ จากสัปดาห์ที่แล้ว สัปดาห์ที่แล้วเราลงตัวเกมเราไปแค่ 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 ที่ชื่อว่า sys หรือ system ทีนี้พอ Import Module นี้เสร็จนะคะ module นี้จะเอาไว้ทำอะไร มันจะช่วยในเรื่องของเวลานะคะ System ก็คือตัวระบบนั่นเอง นี่เห็นไหมค่าทั่วไปที่จะตั้ง clock = pygame.time.clock นะคะ จะกำหนดระยะะเวลา แล้วพอในส่วนของการแสดงผล เรียกใช้ตัวแปรที่ชื่อ clock เราสร้างตัวแปรชื่อ clock เพื่อเก็บเวลานี่ clock. tick (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 clock ที่แปลว่า นาฬิกาน่ะลูก วิธีการประกาศตัวแปร ก็คือชื่อตัวแปรตามด้วยเครื่องหมาย = วรรค เครื่องหมาย = กดวรรคนะคะ กด Space Bar แล้วก็ใส่เครื่องหมาย = แล้วก็กด Space Bar อีก 1 ครั้ง แล้วก็พิมพ์ libary.pygame.time พิมพ์ตัว p ปุ๊บนะคะ คลิกเลือก pygame บอกแล้วว่าเราจะไม่พิมพ์ยาว เพราะ Sublime มันจะขึ้นตัว โค้ดที่เราเขียนไปแล้วหรือตัวอะไรก็แล้วแต่ เราก็มาเลือกเอานะคะ . . นะคะ . t-i-m-e time .time แล้วก็ .clock อีกทีหนึ่ง เลือก clock นะคะ เห็นไหม มันจะช่วยให้เราไม่ไปพิมพ์ผิด บอกให้รู้ว่าอ๋อเราจะใช้ตัวแปรชื่อว่า clock ตัวนี้ แล้วก็ใส่วงเล็บ เห็นไหมคะ นี่ มันจะไม่มีปัญหาว่าพิมพ์ตัว o เป็นตัว a อะไรอย่างนี้ เพราะบางทีเด็ก ๆ มองแล้วดันเห็นไม่ชัด นี่ขยายนะคะ ตรงนี้คือส่วนของการตั้งค่าทั่วไป ใครยังไม่เสร็จบรรทัดนี้ ทำให้เสร็จนะคะ ไม่อย่างนั้นไปขั้นตอนต่อไปไม่ได้นะ ตอนนี้เรา Import แล้ว แล้วเรามาตั้งค่ากำหนดค่าให้มัน ก็คือให้เป็นตัวแปรที่ชื่อว่า clock ทีนี้เราจะไปเรียกใช้งาน เราจะไปที่ตำแหน่งท้าย ๆ แสดงผลจะอยู่ประมาณตรง... เดี๋ยวนะ เอาไปไว้ท้าย ๆ ก่อน นี่ ๆ ๆ แถว ๆ พวกนี้นี่ แถว screen.blit อะไรพวกนี้นะเด็ก ๆ อย่างนั้นเดี๋ยวใส่... ใส่ไอ้นี่ให้ก่อนนะคะ ใส่ # ก่อน ใส่ # เข้าไป ตรงนี้ส่วนของการแสดงผลนะ คั่นส่วนไว้จะได้รู้ เห็นไหมคะ สังเกตตรงการแสดงผลเรา เพราะ screen.blit ก็คือให้มันแสดงไอ้ภาพพื้นหลังเราน่ะนะคะ ความจริงตัวเดียวก็ได้นะนี่ ลบออกก็ได้ ลบตัวนี้ได้เลยนะนี่ เดี๋ยวค่อยมาลบนะคะ ไล่ลบ เพราะฉะนั้น คำสั่งที่ 3 ก็คือให้... เดี๋ยวนะ เราจะ... นี่นะคะ ตรงส่วนของการแสดงผลที่บอก ก็คือเราจะเรียก ตัวแปร clock นะคะ clock.tick นี่ แล้ว ระบุ ระบุว่าไอ้เวลาน่ะ เวลาที่ให้มันทำงานนี่ อยู่ที่ประมาณ 60 วินาทีนะคะ วินาทีนะคะ ไม่ใช่นาที เพราะฉะนั้น ตำแหน่งก็จะอยู่ตรงเมื่อกี้ที่มาร์กไว้นะ การแสดงผลก็คือตรงนี้นะคะ อย่ากด Space Bar กดอะไรคะ กด 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 บรรทัดแน่นอนนะคะ กดผิดอันอีก ไปไสล่ะ เดี๋ยวเอาตัวชี้ออก ไปที่ถัดไปนะคะ ลำดับต่อมานะคะ เรากำหนดไอ้นี่ไปเรียบร้อยแล้วนะ ข้ามนะคะ เราตั้งค่าหน้าจอเกมเราตั้งไปแล้ว set mode หรือ เราจะมาทำ Loop นะคะ ทำ Loop ให้เขา เราทำไปแล้ว เดี๋ยวจะข้ามส่วนนี้ เพราะเรามาทำต่อจากอันเดิมนะ นี่ ๆ ๆ เราจะใส่ moving_sprites เข้าไปได้นี่ นี่นะคะ เราต้องไปตรงนี้ก่อน เราจะมาสร้าง class ให้ก่อนนะคะ สร้าง class เพื่อ... เพื่อที่จะทำอะไร จำได้นะ ตัวเกมบอกแล้ว ในหนก่อน เราใส่เข้าไปแค่ตัวเดียว แต่ทีนี้ เราจะเอาน้องมาทั้งเซ็ตเลย น้องการ์ตูนเราน่ะมาทั้งเซ็ตเลยนะคะ เพราะฉะนั้น เราจะต้องสร้าง class ให้น้อง เพื่อจะได้เรียกใช้ เราจะได้ เรียกตามชื่อ class ครั้งเดียวพอจบนะคะ ทีนี้ตอนจะสร้าง class นี่นะคะ รูปแบบก็คือเราจะต้องพิมพ์คำว่า "class" แล้วก็ตามด้วยชื่อของ class คือ ในการเขียนโปรแกรมนี่ การสร้าง class จะช่วยให้เราไม่ต้อง เขียนโปรแกรมใหญ่มาก ๆ หลาย ๆ ครั้ง หรือเขียนเรียกใช้ตัวอะไรก็แล้วแต่นะคะ ตัวรูปภาพนี่หลาย ๆ ครั้ง เหมือนใน class นี้ รูปมันมีหลายรูปน่ะ ไม่อย่างนั้นเราต้องไป เรียกรูปหลายรูปเลยว่าอย่างนั้นเถอะนะคะ เราจะเรียกแค่ตรงใน class ครั้งเดียวนะคะ แล้วก็ใส่ : พอเสร็จชื่อ class ปุ๊บนี่จะต้องระบุ : เข้าไปนะคะ แล้วก็ใส่ statements ก็คือเงื่อนไขอะไรตามทีหลังมา พร้อมนะคะ เราจะไปต่อนะคะ ดูดี ๆ นะคะ ชื่อ class จำไว้เลยนะคะ ถ้าเมื่อไหร่ที่ให้สร้าง class เวลาตั้งชื่อ class เด็ก ๆ จะต้อง พิมพ์ชื่อ class ตัวแรกด้วยตัวพิมพ์ใหญ่ เพราะฉะนั้น เตรียมกด Caps Lock ได้เลยนะคะ นะคะ เมื่อเราสร้าง class เสร็จ ลำดับต่อมา เราจะมาสร้าง method นะคะ ให้ class ของเรานั่นเองนะคะ method นี่ 1 ตัวนะคะ method_init_( ) นะคะ ก่อนหน้า เราจะเปิดหน้านี้ไว้นะคะ เริ่มค่ะ ไปที่ Sublime เราเหมือนเดิม ทีนี้ เขาบอกว่าอยากให้มันรู้อะไรมันต้องอยู่ข้างบนเสมอเลย class จะอยู่ตรงส่วนที่ เมื่อกี้นะ ในที่โค้ดจะเห็นว่า class จะอยู่ต่อจากส่วนของ import นะคะ ใส่ # ค่ะ เพื่อจะได้รู้ว่าตรงนี้เป็น... เราจะทำอะไร เราจะสร้าง class อยู่ต่อจาก... เดี๋ยวนะ เพราะเมื่อกี้มันต้องอยู่ต่อจาก... อยู่ต่อจากการตั้งค่าทั่วไปนะคะ เราจะอยู่ตำแหน่งนี้ ถัดมา เพราะตรงนี้จะต้องโดนเรียกใช้ก่อน แล้วก็ค่อยมาตรงนี้ได้ ทำไมเป็นภาษาไทย กดผิดหรือนะคะ ตอนนี้ใส่ # เพื่ออธิบายว่าเราจะสร้าง class เพื่อนำเข้าภาพต่อเนื่อง หรือ Sprite Sheet เรานั่นเองนะคะ อธิบายไว้เด็ก ๆ จะได้รู้นะคะ ถ้าใครพิมพ์ # หรือคอมเมนต์เสร็จแล้วนะคะ ก็จะจะสร้าง class ได้เลยนะคะ พิมพ์นะคะ พิมพ์ C บางคนพิมพ์ C ยังไม่ขึ้น พิมพ์ C-l ก็ได้นะคะ แล้วเลือกตัวแรก ClassNew class นะคะ คลิกเข้าไป หรือกด Enter เห็นไหมคะ มันจะสร้าง โครงสร้างของ class ขึ้นมาเลย มี ClassName นะคะ แล้วก็มี Definition ที่จะตั้งค่าเห็นไหมคะ รูปแบบเหมือนไหม เหมือนในสไลด์เราไหม เห็นไหมคะ สร้าง Class แล้วก็มีตัวนี้เห็นไหม ส่วนของ class ต่าง ๆ นี่นะคะขึ้นมา ทีนี้มาดูตรงนี้ ClassName ที่เขียว ๆ แล้วมีไฟกะพริบ เด็ก ๆ ทำแถบครอบ ตรง ClassName นี่ ที่มันขึ้นสีเขียว ๆ นี่ คือเราจะต้องเป็นคน ตั้งชื่อให้ class ของเรานะคะ เพราะฉะนั้น class นี้ ภาพที่จะนำมาใช้หรือตัวเกมที่เรานำมาใช้คือตัวอะไรคะเด็ก ๆ จำได้นะ ของใครให้ดูที่ตัวนี้ ตัวเกมที่เราเอามาใช้ในครั้งก่อนนี่ เราใช้คำว่า "cat" ใช่ไหม ของเด็ก ๆ ชื่ออะไรคะ เพราะฉะนั้น เอาชื่อ class เป็นตัวนี้ แต่อย่าลืมว่าตัวต้นของมันคืออะไรคะ ตัวใหญ่ใช่ไหม เดี๋ยวเราค่อยไปลบบรรทัดนั้น เรายังไม่ Run ไม่มีปัญหา กด C-a-t เป็นตัวใหม่นะคะ class กับ Cat เห็นไหม class จะพิมพ์ด้วยตัวแรก จะต้องเป็นตัวพิมพ์ใหญ่เสมอ ชื่อ class จะต้องขึ้นต้นด้วยตัวใหญ่เสมอนะคะ ทีนี้มาดูในส่วนไอ้เขียว ๆ นี้อีกที่เราจะต้องแก้ object มันนะคะ วัตถุที่เราจะเอามาวาง เราจะระบุอะไรลงไปนะคะ ใน object ของอุบลตัวอะไรนะลูก ก็ Boy แต่เดิม Boy เล็ก ก็เป็นตัวใหญ่นะคะ อย่าลืมนะคะ ตัวอักษรตัวแรกต้องเป็นตัวใหญ่นะลูก ถ้าเป็นชื่อ Class เวลาเราตั้งชื่อ class สังเกตชื่อตัวแปรตัวเล็กตัวใหญ่ก็ได้ แต่เมื่อตั้งไปแล้วต้องเช็กนึกออกนะ แต่ถ้าชื่อ class น่ะ ต้องขึ้นต้นด้วยตัวใหญ่เสมอนะคะ ต่อมา Object ใน Object นี้เราจะใส่อะไรเข้าไปใน class ของเรานะคะ มาดูกัน Object ที่เราจะใส่ ก็คือเรียกใช้ sprite คือ pygame นี่มันจะมี library บอกแล้ว เพราะฉะนั้น Library ที่จะใช้ก็คือ ดูนะคะ เด็ก ๆ ดูดี ๆ Sprite 2 ครั้งนี่ sprite ตัวแรก ตัวพิมพ์เล็ก มันจะเป็นคนละตัว นึกออกนะ เพราะอะไร เพราะเห็นไหม Sprite ตัวที่ 2 ขึ้นต้นตัว S มันเป็นตัวใหญ่ สังเกต แล้วถ้าเวลาแม่บอกว่าเรียกใช้ Sprite ตัวใหญ่ เราต้องพิมพ์ตัวใหญ่ก่อน นึกออกนะ แต่ถ้าเรียก sprite เล็ก ก็คือพิมพ์ตัวพิมพ์เล็กทั้งหมดนะคะ มันจะมี 2 ตัวนะคะ เพราะฉะนั้น ใน Object เราจะเรียกใช้ Library pygame ที่ใช้ sprite เล็ก.Sprite ใหญ่ ว่าอย่างนั้นเถอะ โอเคไหมนะคะ เพราะฉะนั้น กลับมาที่ตัวนี้เรา ใน Object เห็นไหมคะ เราพิมพ์ p ตัว p แล้วกด pygame กด Enter ได้เลย พอขึ้น pygame เลือก pygame แล้วกด Enter นะ . ใส่ . นะคะ sprite ขึ้น 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 ตอนนี้ sprites เรามี 3 sprites นะคะ โอเคนะคะ บรรทัดที่เหลือจะเริ่มไปเรียกใช้คำสั่งที่มันให้โหลดรูป ที่เราเก็บไว้น่ะมานะคะ เราต้องวางเรียงเป็นครบทั้งหมด เรามีกี่รูปเราก็ต้องใส่เข้าไปทั้งหมด จำนวนรูปนั้นนะคะ เดี๋ยวเขียนให้ดูก่อน ตอนนี้เราระบุ sprite ไปแล้ว sprites ไปแล้ว สิ่งที่เราจะทำต่อมา บรรทัดต่อไป เราก็พิมพ์ self เหมือนเดิม เลือกนะคะ s-e เลือก self เหมือนเดิมนะคะ .sprites เหมือนกัน แต่เลือก sprites sprites ที่มีตัว s เห็นไหมคะ เลือกให้ถูก ตามด้วย . self.sprites. เพราะตัวแรก sprites ตัวแรก เราแจ้งโปรแกรมไปแล้ว เราสร้าง sprites มานะ เพราะฉะนั้น ครั้งที่ 2 เราเรียกใช้มันได้เลยนะคะ . แล้วก็ตามด้วย โค้ดจะยาวหน่อย รอบหนึ่ง ขออีกรอบหนึ่ง .append แล้วก็ pygame.image.load โอเค .append a-p-p-e-n-d นะคะ เรียกใช้คำ... ใน Library append. พิมพ์ append ผิดตรงไหนนะ . ในวงเล็บ ใส่วงเล็บนะคะ (pygame) . p-y กด py แล้วกด Enter ให้มันเรียกใช้ pygame.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 แล้วก็ไปเปลี่ยนหมายเลขถูกไหม ถ้าของใครมีหมายเลข แต่ถ้าของใครไม่มี นึกออกนะ นะคะแล้วก็วาง จนกว่ามันจะครบจำนวนไอ้ตัวนั้นของเรานะคะ เดี๋ยววางของตัวเองก่อน ตรงนี้นะคะ ชื่อไฟล์ภาพนี่ ให้ดูในเครื่องตัวเองนะลูก ไม่ใช่มาพิมพ์ตาม ก็คือชื่อภาพใครภาพมัน... ภาพของใครของมัน อันนี้เป็นชื่อไฟล์ภาพที่อยู่ในเครื่องของแม่ ของเด็ก ๆ ชื่ออะไร เด็ก ๆ ก็ดูเอาในโฟลเดอร์ตัวเองน่ะค่ะนะคะ มีกี่รูปหว่า เดี๋ยวขอไปดูก่อนนะ ว่าของเรามีทั้งหมดกี่รูป ของเครื่องแม่มีถึง Walk 10 นะคะ เพราะฉะนั้น ก็จะใส่เพิ่มอีก 5 ตัว มีเยอะก็จะก๊อบแผงใหญ่ ๆ เลย 5 แล้วก็นับต่อ 6 7 8 9 10 เพราะฉะนั้น ให้เด็ก ๆ ดูในโฟลเดอร์ตัวเองนะ ไฟล์ภาพใครชื่ออะไรก็ก๊อบมาวาง แล้วค่อยมาแก้อย่างนี้นะคะ อันนี้ของแม่มี 10 ภาพแม่ก็ใส่จนครบแล้ว 10 รูปนะคะ ของเด็ก ๆ มีกี่รูป เดี๋ยวไปช่วยดูให้ จะตรวจให้นะคะ ของใครมีกี่รูป ใส่วงเล็บน่ะถูกแล้ว เห็นไหมล่ะ เดี๋ยวเราว่าไม่ใส่ถึงว่าทำไมมันไม่ขึ้น ตรง pygame ใส่วงเล็บให้ด้วยนะ นั่นล่ะ ก็ว่าใส่แล้วจำไม่ได้ แล้วก็กดใส่ ตอนแรกน่ะใส่แล้ว แล้วก็ว่ามันไม่ขึ้นก็เลยเข้าใจว่าเจ้าของใส่ผิด เดี๋ยวไปเดินดูนะคะ มันจะต้องขึ้นอย่างนี้ เป็นเซ็ต ๆ เลย self สีส้ม มี append คั่นเป็นสีฟ้า แล้วก็ไปปิดด้วย load ทีนี้เดี๋ยวดูนะคะ ชื่อไฟล์ เราลืมแน่ ๆ เลย เมื่อกี้เดินไป ผิดแน่ ๆ มันต้องใส่อะไร เครื่องหมายอะไร คำพูด นึกออกนะ ใส่เครื่องหมายคำพูด จะเอา ' ' หรือ… ' ' หรือ " " ก็ได้ ตรงชื่อไฟล์นี่ เห็นไหม ใส่ลงไป ลืม ๆ นะคะ เห็นไหมคะ เด็ก ๆ ใส่เครื่องหมายคำพูดลงบนชื่อไฟล์ที่เราจะเรียกใช้ด้วย ลืม เยอะ เยอะหลายน่ะลืม นี่นะ เมื่อกี้ลืมใส่นะคะ ใส่เครื่องหมายคำพูดเข้าไปให้น้องด้วย เห็นไหม เพราะถ้าเช็กจาก... จากสไลด์นี่ ตรงชื่อไฟล์มันจะเป็นสีเหลืองเห็นไหมคะ เห็นไหม มันถึงจะถูกต้องนะคะ เพราะฉะนั้น แก้ ใส่ single quote หรือ double quote ก็ได้ ใส่ตัวไหนก็ได้นะคะ ตัวใดตัวหนึ่ง เลือกเอานะคะ ใครถนัดใส่ single ก็ใส่ ใครจะใส่ double ก็ใส่ double เดี๋ยวทีนี้บางรูปของบางคนนี่รูปมันไม่ต่อนี่ เดี๋ยวตอน Run ออกมามันจะเป็นฮา ๆ นะเด็ก ๆ เพราะฉะนั้น เลือกรูปมาใช้ก็มีส่วนนะคะ เช็กนะคะเช็ก อันดับแรกเช็กที่ชื่อไฟล์ภาพที่เราจะนำมาใช้ ว่าชื่อถูกต้องโอเคไหม แล้วก็จำนวนรูปที่เอามาใช้ มีทั้งหมดกี่รูป สังเกตนะคะ ถ้าใครแก้ครบแล้ว ไอ้ตัวชื่อไฟล์ภาพจะเป็นสีเหลืองทั้งหมด นั่นแสดงว่าถูกต้องแล้วนะเด็ก ๆ ต้องเป็นอย่างนี้นะคะ ในโค้ดเราต้องเป็นอย่างนี้ถึงจะถูก ของแถม ๆ คือ คำสั่งมันเยอะนะคะ เพราะมันเป็น class คือ มันจะลำบากตอนแรกเท่านั้นนะคะ ไหนลองสิ ไม่มีส่วน ตัวเล็กตัวใหญ่ ไม่เกี่ยว เพราะอันนี้มันเป็นนามสกุลไฟล์ภาพ เออ มันได้อยู่มันเป็นนามสกุลน่ะนะ แต่ชื่อน่ะ ชื่อน่ะมันห้ามผิด นามสกุลมันรู้อยู่ โปรแกรมมันจะรู้อยู่ มันน่าจะเว้นวรรคผิด เดี๋ยวตอน Error ก็จะรู้กัน สร้าง method แล้ว ทำอะไรต่อ โหลด sprite sheet แล้ว มีบรรทัดต่อนะคะเด็ก ๆ นี่ เราจะระบุตำแหน่งว่าตำแหน่งปัจจุบันของตัว sprite เราจะเริ่มที่ 0 นะคะ แล้วก็จะมาเรียกใช้ จะสร้าง จะทำ Animation เห็นไหม Create Animation แล้ว ขั้นต่อไปนะ เราโหลด... ตอนนี้เราสั่งให้มันไปโหลดภาพ ต่อมาเราจะสร้างส่วนของ Animation นะคะ เดี๋ยว ใส่ # ค่ะ ใส่ # เราจะเข้าสู่การสร้าง Animation แล้ว สร้าง... สร้างภาพเคลื่อนไหวก็ได้ เดี๋ยวจะงง เอาเป็นภาษาไทย สร้างการเคลื่อนไหวนะคะ # ไว้ จะได้รู้ส่วน ตำแหน่งอยู่ตรง self นะคะ กด Tab นะคะเด็ก ๆ ใช้วิธีกด Tab นะคะ อย่าไปกด Space Bar กด Tab เข้าไปให้ตรงกับตำแหน่ง self เดิมเรานะคะ พิมพ์ 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_sprite = 0 นะคะ คำสั่งแรก ก็คือกำหนดให้ตัวแปรที่ชื่อ current_sprite มีค่าเริ่มต้นที่ 0 ไอ้ตัวนี้ ก็คือเป็นคำสั่งที่บอกว่านี่ค่าเริ่มต้นของภาพนะคะ จะต้องเริ่มที่ 0 เสมอนะคะ กำหนดไว้ self.current_sprite = 0 current ใส่ _ ด้วย คือ แยก 2 คำน่ะ บางที สาเหตุที่มี _ มีอะไรอย่างนี้ คือบางทีประโยคมันยาวนี่ ถ้าเราไปพิมพ์ติดกัน เวลาเราเช็กโค้ดมันจะลายตา นึกออกนะ เพราะฉะนั้น เราใช้ตัว _ เพื่อในการแยกคำน่ะค่ะ ไปบรรทัดต่อไปนะคะ เราจะกำหนดให้เรียกใช้ เรียกรูปนั่นเองนะคะ พิมพ์ s แล้วเลือก self เหมือนเดิม ตามด้วยเครื่องหมาย . . อะไร .image นะคะ คลิก i-m-a-g-e เห็นไหมคะ .image = ใส่เครื่องหมายเท่ากับนะคะ วรรค = self อีกครั้งหนึ่งค่ะ เรียกใช้ self อีกครั้งหนึ่ง กด s แล้วเลือก self .sprite sprites ที่เราจะใช้ตัวนี้ ก็คือ sprites นะเด็ก ๆ ไปหา sprites นะคะ sprites ที่มี s ข้างหลังน่ะค่ะ เราเลือกตัวนี้นะคะ แล้วก็ใส่วงเล็บสี่เหลี่ยมใหญ่เข้าไป แล้วพิมพ์ เรียกใช้ self.current_sprites นะคะ รอบต่อมา ในวงเล็บ สี่เหลี่ยมใหญ่นี่ เราจะเรียกใช้ self. พิมพ์ c แล้วเลือก current... c-u 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 นะคะ ตอนนี้ ตรงตำแหน่งนี้ เรียกผิดชีวิตเปลี่ยนนะ มันจะไม่ขึ้น ไม่อย่างนั้นก็จะ 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 ตัวเล็กที่ p เอ้ยไม่มี s ดูดี ๆ นะคะ sprite ตัวที่เลือกใน 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 นี้ใช้ sprites ที่มี s sprites ที่เติม s นะคะ ดูดี ๆ เรียกไม่เหมือนกันนะลูก .add add ก็คือเพื่อจะให้มัน add อะไรเข้าไป ให้มัน add ตัวแปร cat เล็กของเราเข้าไป c-a-t cat เล็ก โอเคนะคะ ให้มันเอาไปไว้ที่ cat นี้ ตอนนี้คือเป็นเอาภาพที่มันต่อกันหลาย ๆ ภาพนี่ มาให้มันทำให้มันเป็นภาพเดียวน่ะค่ะ รวมกันเป็นภาพ 1 ภาพ ให้มันดูเหมือนเป็นรูปเดียวนะคะ 3 บรรทัดนี้เสร็จหรือยังคะ ใครยังไม่เสร็จ ยังนะคะ ถ้าอย่างนั้นเดี๋ยวไปต่อไม่ได้ มันจะขาดตอน เช็กนะคะ เช็กตรง sprite sprite แรก sprite ไม่มี s นะคะ ดูดี ๆ sprites ที่ 2 ที่เรียกใช้หลัง . นี่มี 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 เห็นไหมคะ เลือก defFunction นะคะเด็ก ๆ def แล้วก็เลือก Function นะคะ definition ชื่อฟังก์ชัน ก็คือ Run ตัวแรก ๆ ตัวเขียว ๆ นี่ ในวงเล็บนี่ เอ้ยไม่ใช่ในวงเล็บ ที่ขึ้นคำว่า "function" นี่ เราแก้เป็น run นะคะ เพราะ function ที่เราใช้มันชื่อว่า run เราจะใช้มันว่า run นะคะ แล้วก็เรียก self มา กด s แล้วเลือก self ในส่วนของบรรทัดที่ 2 นะคะ พิมพ์ self ค่ะ กด s เลือก self.run_animate นะคะ animate มาจาก animation นี่แหละ จะยาวไป animate run_anime anime anime anime ดีกว่า anime นี่สั้นกว่าอีก run_anime จะงงไหมล่ะนี่ เอา animate แล้วกัน = True ทำงานเมื่อเป็นจริง จะใส่เงื่อนไขแล้วนะคะ เท่ากับ... True ใช้ True ใหญ่นะ t เลือก True True ใหญ่ เห็นไหมคะ เรามี 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 if เราต้องกด 2 ตัวนะคะ == True ค่ะ True พิมพ์ T แล้วเลือก True ใหญ่นะคะ ตรงส่วน statements pass เราจะเรียก current_sprite มานะคะ พิมพ์ self เหมือนเดิม self self self. cu เลือก current_sprite กด Enter เราจะเพิ่ม นึกออกนะ พอเวลา... เวลาที่มันเคลื่อนน่ะค่ะ ตำแหน่งปัจจุบันมันเริ่มที่ 0 เพราะฉะนั้น เราจะต้องเพิ่มค่าให้มัน + นะคะ + ใส่เครื่องหมาย + แล้วก็ = ก็คือเพิ่ม ถ้าในความหมาย ก็คือถ้าใส่ + แล้วก็ = นี่ แสดงว่าเพิ่มนะคะ + ก็คือบวก บวกอะไรเข้าไป ให้บวกเข้าไปใน speed speed ที่เราสร้างไว้ กด sp แล้วเลือก speed กด Enter นะคะ เราจะเพิ่มเงื่อนไขซ้อนเงื่อนไข เพราะอันนี้เพิ่มแค่ speed นะ เพิ่มความเร็วเข้าไป กด i แล้วเลือก if condition เหมือนเดิมนะคะ if int i-n-t ตัวแปรนี้นะคะ ไม่ใช่ตัวแปร มันเป็น... วงเล็บค่ะ ใส่เปิดแล้วปิดใส่เข้ามาทีเดียวเลยนะ จะได้... วงเล็บจะได้ไม่หายว่าอย่างนั้นเถอะ พิมพ์ 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 ที่ 1 เห็นไหม ดูดี ๆ นะเด็ก ๆ if ที่ 1 พิมพ์ self ค่ะ s self.i เลือก image = self เหมือนเดิม เลือก self.sprites นะคะ sprites ที่เติม s เลือก sprites ที่เติม s สี่เหลี่ยมใหญ่ วงเล็บสี่เหลี่ยมใหญ่ เรียก... เรียก int เรียก int int น่ะค่ะ เลือก int ใส่วงเล็บเข้าไป ในวงเล็บเลือก self.current_sprite นะคะ เลือก self มือไวจริง ๆ เลย self.current_sprite ตอนนี้เราทำส่วนของฟังก์ชัน run กับ update เสร็จแล้วนะคะ มี 2 4 6 8 10 นี่นะคะ ตั้งแต่บรรทัดนี้เลย เดี๋ยวจะไปเช็กตำแหน่งนะคะเด็ก ๆ ตำแหน่งของฟังก์ชัน ดูต่อนะคะ วันนี้อาจจะยาวหน่อย แต่ผลน่าจะคุ้มค่าพอใจ น่าจะเป็นที่พอใจของเด็ก ๆ อยู่ เราจะมาเรียกใช้ตัวนี้นะ key เรากำหนดแล้ว แต่เราต้องเรียกใช้มันน่ะนะคะ ตรง... เดี๋ยวนะ เงื่อนไข if key bgvelo moving cat ตำแหน่งจะต้องเป็น pygame.QUIT ตรง key if keys เป็น K_RIGHT เป็น K_RIGHT ตำแหน่งนี้นะครับ ดูนะคะ เด็ก ๆ จะเรียกใช้ตัวแปร Cat ที่ เรียกฟังก์ชัน run มาทำงานนะคะ ทีนี้ที่เราจะไปลบ ก็จะมีเดี๋ยวเด้อลบตรงไหนบ้าง เราจะเริ่มลบแล้วนะ ลบตรงนี้นะคะ นำเข้าภาพนี่ ลบออกเลย เพราะเราเอาไปไว้ที่ class แล้ว เด็ก ๆ ไปหาตัวเดิม โค้ดเดิมเก่าน่ะ ลบออกนะคะ เดี๋ยวมันจะงง ที่เรานำรูปเข้าในสัปดาห์ก่อนน่ะนะ เราเขียน # ไว้อยู่ ลบออกนะคะ ไปไหนอีก icon เดี๋ยวเด้อ โอเค ลองกด B ดู Test ค่ะ Ctrl + B Test อ้าว Error ก็มา บรรทัดที่เท่าไรนี่ line 75 line 75 ไหนหว่า ไหนหว่า ดูบรรทัดนะคะ ของใครของมัน มันบอกว่าอย่างไร Indentation: unexpected indent 75 clock มันบอกว่า Indentation error : unexpected indent Finished 1 shell_cmd: python clock.tick error เดี๋ยวนะ ขอดูต่อ ขอดูโค้ด เดี๋ยวย้อนโค้ดนะคะ ไปที่การตั้งค่าทั่วไป พอย้ายตำแหน่ง เอา screen ไปใส่ข้างล่างนะคะ เอ้ย clock.tick ไปใส่ล่างไอ้ screen.blit นี่นะคะ โอเค แล้วก็... ไปต่อ ๆ เราน่าจะต้องสร้างอีกตัวหนึ่ง รู้แล้วเราลืมตรงนี้ไปด้วย โอเคนะคะ เพิ่มโค้ดอีก 3 บรรทัดนี่เห็นไหม moving_sprite ที่เราสร้างเสร็จแล้วน่ะ จะต้องมาอยู่ตรงนี้ เยอะจนเบลอเหมือนกัน เราจะไปที่ตำแหน่งการแสดงผลของเรานะคะ เพิ่มโค้ดอีก แล้วก็ให้เด็ก ๆ เดี๋ยวก่อนอื่น เลือกตรงส่วนของการตั้งค่าทั่วไป 3 บรรทัดนี้นะ แล้วก็กด Ctrl + X เอาไปไว้ข้างล่าง class นะคะเด็ก ๆ นี่เอามาไว้ก่อนหน้ากำหนดหน้าจอเกม ต้องขยับตำแหน่งอะไรสักอย่างหนึ่ง พิมพ์ moving เห็นไหม เลือก moving_sprites นะ .draw ให้มันวาดนะคะ ให้มันวาด d-r-a-w draw ให้มันวาด screen แล้วก็เลือกใช้คำสั่ง update นะคะ moving พิมพ์ m แล้วเลือก moving_sprite.update เลือกฟังก์ชันอัปเดต ให้ค่าเริ่มต้นอยู่ที่ 0 ตำแหน่งนะคะ 25 แล้วก็ เรียก pygame.display มาใช้งาน เลือก display นะคะ .flip f-l-i-p flip นะคะ ใส่วงเล็บ น่าจะ Ctrl + B ดู 76 มันบอกว่าอย่างไร screen.blit unexpected ไม่รู้จัก attribute Module ผิดตรงไหน อ๋อ เรียกฟังก์ชันผิดนี่เอง ไม่เป็นอะไร ทำไมมาขึ้น moving_sprite add(cat) ‘function’ object has no attribute ‘add’ ผิดอีกหรือ บอกว่าไม่รู้จัก attribute ‘add’ แล้วนะ เดี๋ยวนะ มีความ... clock เล็ก เลือก clock เล็ก 74 line 74 in <module> Traceback moving_sprites AttributeError ‘function’ object has no attribute ‘add’ มันจะเป็นไปได้อย่างไร ไม่รู้จัก add ผิดเหรอ ไม่รู้จัก add ใช้ Dino เข้าไม่ได้ error ได้อย่างไรนะ ข้ามตัวไหนไป len current self self.image True event Dino moving_sprite.add มีไหม ไม่นี่ หา add ไม่เจอ หมดแล้วนี่หว่า เดี๋ยวติดไว้ก่อน error อยู่ 1 บรรทัดนะครับ เดี๋ยวจะไปลอง run อยู่ในเครื่องตัวเอง บางทีเรื่องของเรื่องคือ Run เครื่องตัวเองออก แล้วมา run ในนี้ไม่ออกคือ... คืออะไรครับพี่น้อง โอเคนะคะเด็ก ๆ Save ไว้ก่อน เดี๋ยวเรามาต่อสัปดาห์หน้า มันยังไม่วิ่งให้เรา มันขึ้น Error attribute ‘add’ มันหายไปไหนท่อนหนึ่ง สำหรับวันนี้จะพอแค่นี้ก่อนนะคะ ขอบคุณพี่ล่ามนะคะ เดี๋ยวเราจะมาต่อกันในสัปดาห์หน้าค่ะ ขอบคุณค่ะ display.update [สิ้นสุดการถอดความ]