(เจ้าหน้าที่) พี่ล่ามได้ยินไหมคะ (อาจารย์สุธิรา) สวัสดีค่ะ (ล่าม) สวัสดีค่ะ (อาจารย์สุธิรา) มองไม่เห็นล่าม เด็ก ๆ เปิดเครื่องหมดทุกคนหรือยัง เปิดเครื่องกันหรือยังเอ่ย ก่อนอื่นนะคะ เมิื่แเปิดเครื่องแล้วเด็ก ๆ จะต้องเปิดอะไรคะ โปรแกรมที่ชื่อว่า sublime ไปที่ตัว... เห็นไหมคะ ตัวนี้ เปิดโปรแกรมนี้ขึ้นมาเลยค่ะ นะคะ จะต้องอยู่หน้านี้นะ ถ้ามันขึ้น Update เราก็ Cancel ไปเลย อัปฯ แล้วนะคะ ก่อนจะเขียนโปรแกรมนะคะ ให้เด็ก ๆ ดู ภาพบนหน้าจอก่อน เห็นไหม โครงสร้างในการจะเขียนโปรแกรมด้วย pygame ของเรานี่เห็นไหมคะ มีองค์ประกอบทั้งหมด... ดูนะคะ 1. แสดงว่าล่ามไม่ได้หรือ อ๋อ ล่ามได้อยู่ใช่ไหม โอเค ดูนะคะ องค์ประกอบในการจะเขียนนี่มันแบ่งออกเป็นทั้งหมดนะคะ หลัก ๆ น่ะ ก็คือเวลาเราจะเขียนเกมเสร็จ 1 เกมนี่ มันจะต้องมีส่วนประกอบในการเขียนโปรแกรมเรานี่อยู่ 7 ส่วน ให้ดูที่ส่วนที่ 1 เห็นไหมคะ ส่วน import ทุกครั้ง บอกแล้วทุกครั้งเราต้อง import import เพื่ออะไร เพื่อจะนำเข้าโมดูล ซึ่งโมดูลของเราตัวนี้ ก็คือโมดูลที่ชื่อว่า pygame นะ ที่สัปดาห์ก่อน ก่อนที่ส่วนหัวที่ให้เขียนไว้ ทีนี้มาดูส่วนที่ 1 นี่ ขาดไม่ได้ พอเปิดโปรแกรมมาจะต้องมีเสมอนะคะ แล้วก็ส่วนต่อมาในส่วนที่ 2 หมายเลข 2 เห็นไหม init() init แล้วก็มีวงเล็บนี่ มันหมายถึงฟังก์ชัน ฟังก์ชัน init() หมายถึง ฟังก์ชันที่จัดการค่าเริ่มต้น ในที่นี้ฝั่งนี้ที่เป็นขาว ๆ แล้วมีหมายเลขกำกับแล้วก็มีคำอธิบายนะคะ แล้วเวลาเขียน เราต้องมาดูที่ฝั่งที่เป็นสีดำ ก็คือที่เราใช้ Sublime เขียน ในหมายเลข 2 เห็นไหมคะ วิธีการจะใช้ฟังก์ชันนี้ ก็คือ 1. เมื่อเรา import โมดูลใดเข้ามา เพราะฉะนั้น เราต้องจัดการค่าเริ่มต้นมันเราก็ต้องเรียกโมดูลนั้น ก็คือ pygame เห็นไหมคะ ก็เลยขึ้นด้วยคำว่า "pygame." ก็คือ . นะคะ พิมพ์คำว่า pygame แล้วก็ก็ตามด้วยฟังก์ชัน init() เห็นไหมคะ บรรทัดที่ 2 คำสั่งมีแค่นี้ล่ะ ชื่อโมดูลแล้วก็ตามด้วยฟังก์ชันที่ชื่อ init() ทีนี้มาดูในส่วนที่ 3 คือ เวลาเราจะทำเกม 1 เกมนี่นะคะ ไม่ใช่ว่าอยู่ดี ๆ เกมมันมาวิ่งได้เลย เราจะต้องสร้างพื้นที่ พื้นที่สำหรับให้เกมทำงาน สังเกตเมื่อเวลาเราเปิดเกมเข้าไปเล่น มันก็จะมีหน้า หน้าต่างของเกมขึ้นมา นึกออกนะ เพราะฉะนั้น อยู่เฉย ๆ เกมมันขึ้นมาบนหน้าจอไม่ได้นะคะ ต้องบอกให้มันรู้ก่อนว่าจะให้มันไปทำงานอยู่ตรงพื้นที่ไหน เพราะฉะนั้น ก็เลยมาเป็นตรงส่วนที่ 3 ส่วนที่จะเป็นการกำหนดค่า ส่วนนี้นะคะ อาจจะไม่ใช่แค่บรรทัดที่ 4 ถึงบรรทัดที่ 14 ก็ได้ ก็คือถ้าเรามีกำหนด... ถ้ามันมีการกำหนดค่าอื่น ถ้ามันมีการกำหนดค่าอื่นนะคะ เราก็็มีเพิ่ม ก็คือโดยที่หลัก ๆ นี่นะคะ ในส่วนที่ 3 นี่ สิ่งที่เราต้องกำหนดค่าลงไป ก็คือ 1. หน้าจอที่จะใช้ทำงานแหละ แน่นอนแหละ 2. รูปภาพในทีนี้ ก็หมายถึง Background หรือฉากในเกมเราน่ะ นึกออกนะ ในที่สัปดาห์ก่อน เอาตัวอย่างให้ดูแล้ว ฉากเกมเขาก็จะมีเหมือน... เหมือนถ้าเป็นเกมมาริโอมันก็จะเป็นที่มี... เป็นเหมือนอะไรนะ เหมือนพื้นที่ ที่ให้วิ่งไปตามแนวนอนอย่างนี้ใช่ไหมคะ นะคะ ส่วนต่อมาสิ่งที่ต้องกำหนดต่อมาอีก เสียง เกมเรามีเสียงไหม อยากให้มีเสียงไหม มันจะอยู่ในส่วนที่ 3 นี่ เราอยากกำหนดอะไรเข้าไปก่อนเริ่มให้เกมเราสมบูรณ์น่ะ กำหนดไว้ที่ส่วนที่ 3 เราจะต้องเอาไปกำหนดไว้ที่ส่วนนี้นะคะ เพราะอะไร เพราะหลักการเขียนโปรแกรมน่ะ โปรแกรมมันจะทำงานแบบเรียงคำสั่ง นึกออกไหม จากคำสั่งแรกลงไปหาคำสั่งสุดท้ายนะ เหมือนตอนที่เรียนในเทอมที่แล้ว อัลกอริทึม มีเริ่มต้นก็ต้องมีสิ้นสุด จำ Flow Chart ได้ใช่ไหม แล้วก็ไล่ลงมา เห็นไหม ผังงานมันจะเรียงลงมาตามลำดับ เขียนกระโดดไปกระโดดมามันไม่ใช่ ไม่อย่างนั้นคอมพิวเตอร์มันจะงง เวลาทำงาน เหมือนเราน่ะ เวลาแม่สั่ง บอกทำอันนี้เสร็จ เปลี่ยนไปทำอันนี้มันก็จะงงใช่ไหมคะ คอมพิวเตอร์ก็เหมือนกัน ก็เหมือนคนนั่นแหละ ไม่ใช่ว่าสั่งอย่างหนึ่ง แล้วมาสั่งอีกอย่างหนึ่งเพิ่ม ลัดไป ลัดมา งงตายนะคะ เพราะฉะนั้น ก็เลยทำให้ดูเป็น Box Box นี่ ทำให้ดูเป็นส่วน ๆ อย่างนี้ และมีเสียงมีอะไรได้อีก มีตัวเกมที่เป็นตัวเดินเรื่องของเรา หรือตัวเล่นของเรานั่นเองนะคะ หรือนอกจากตัวเกมแล้ว อาจจะมีองค์ประกอบอื่น เช่น ไอ้ภาพประกอบเล็ก ๆ น้อย เช่น มีเหมือนในมาริโอมีตัวอะไรนะ ตัวศัตรูที่วิ่งเข้ามาอะไรอย่างนี้นะคะ มันจะอยู่ในส่วนนี้ เราจะกำหนดไว้ในส่วนนี้ อาจจะมากกว่า 14 บรรทัดก็ได้ ก็แล้วแต่ว่าเราจะกำหนด ก็คือเราจะใส่อะไรลงไปนะคะ มาดูส่วนถัดมา จะอยู่ด้วยกัน 4 กับ 5 เพราะตรง 4 นี่คือ loop ก็คือส่วนของ loop กับส่วนของ loop กับส่วนของ event นี่ เวลาเราทำเกมนะ มันไม่ใช่ว่าเล่นรอบเดียวจบใช่ไหม เกมมันจะไปเรื่อย ๆ แต่ในรอบของมันเรื่อย ๆ นี่ อาจจะไม่ใช่รอบที่มันจบ อาจจะเป็นรอบของมันผ่านด่านที่ 1 นึกออกไหม เพื่อไปต่อด่านที่ 2 ด่านที่ 3 นึกออกไหม เพื่อจะไปต่อด่านที่ 2 ด่านที่ 3 เกมจะต้องสามารถวน loop ได้ กลับไปสู่จุดเริ่มต้นใหม่ได้ หรือสิ้นสุดใหม่ได้ ในส่วนนี้เราจะใส่ทั้ง loop แล้วก็ใส่ทั้ง event event ก็คือกำหนดค่าให้เกมมันดำเนินไป เช่น เราอยากให้เกมตัวนี้กระโดดได้ นั่นคือ event หรือให้เกมนี้มันเดินไปก่อน วิ่งไปก่อน แล้วพอไปเจออะไรนะ ถ้าเหมือนใน มาริโอเก็บเห็ดใช่ไหม กระโดดเก็บเห็ด เจอเหรียญกระโดดเก็บเหรียญ นั่นคือ event ที่จะอยู่ให้เกมเรา ใน event จริง ๆ นี่ ก็ไม่ได้ยาวแค่ 1 2 3 4 10 บรรทัดแบบนี้นึกออกนะ ให้นึกถึงว่ายิ่งเกมเรามีอะไรน่ะ เขาเรียกว่า มีความซับซ้อนหรือมีด่าน นึกออกนะ ยิ่งด่านยากขึ้น event มันก็จะต้องยากเข้าไปอีกอะไรอย่างนี้นะคะ เพราะฉะนั้น เหตุการณ์ตรงนี้ ก็ขึ้นอยู่กับที่เรากำหนดว่าให้มันทำอะไรได้บ้าง เหมือนให้นึกถึงถ้าเด็ก ๆ ชอบเล่นเกมอะไรนะ เดี๋ยวนี้ฮิตเล่นเกมอะไรกัน ถามสิ ถามตี๋น้อย ตี๋น้อยเล่นเกมหรือเปล่า แม่จะถามตี๋น้อย ตี๋น้อยเล่มเกมในคอมฯ น่ะ เล่นเกมอะไร เล่นหรือเปล่า เล่นเกมหรือเปล่า เล่นเกมอะไรครับ อยากรู้ อยากรู้ (ล่าม) พวกเกมที่มีวิ่ง มีกระโดด อย่างนี้ครับ (อาจารย์สุธิรา) เกมกระโดด เกมอะไรนะ เป็นเกมที่มันกระโดดหรือ เหมือนที่ฮิต ๆ กัน ไอ้ที่ช่วงหนึ่งที่มันอะไรนะ ไอ้เกมที่ขี่รถบนหน้าผาอะไรน่ะ นึกออกนะ อย่างนั้นน่ะ เห็นไหมความยากของเกมนั้น ก็คือขีี่อย่างไร ไม่ให้ตกไอ้นั่นใช่ไหม แล้วอะไรนะ ความเร็วใช่ไหมคะ แล้วก็อะไรอีก ต้องหลบ มีอุปสรรคมาให้หลบ เห็นไหมคะ นั่นก็คือ event จะใส่มันจะอยู่นี่ล่ะ ก็คือเราจะเป็นตัวกำหนดว่าเกมนั้นจะมีความยาก ความง่ายอย่างไร กำหนดลำดับเหตุการณ์ให้มันนะคะ ทำอะไรได้ พอมาถึงลำดับที่ 6 เป็นส่วนของการอัปเดตค่า นั่นหมายถึงว่าเมื่อบางครั้งนี่ ที่เกมมันทำงานไปแล้ว นึกออกนะ แต่บางทีมันอาจจะต้องกลับมาเพื่อมาเริ่มต้นใหม่ หรืออะไรก็แล้วแต่ เหมือนตายน่ะ นึกออกนะ มันก็ต้องมีการอัปเดตใช่ไหมคะ ไม่ใช่ว่าทำเสร็จแล้วจบตอนนั้น เพราะฉะนั้น จะต้องมีส่วนที่ให้เกมมันอัปเดต อัปเดตค่าต่าง ๆ นะคะ เช่น เหมือนเราไปกำหนดค่าเริ่มต้นของฉากนี้ไว้ ตั้งแต่ตอนจะเริ่มวิ่ง กำหนดที่ 0 ใช่ไหม พอวิ่งไปจนสุดฉากนี่ สมมติถ้าเรากำหนดหน้าจอไว้ที่ ความกว้าง 800 มันวิ่งมาถึงจุดที่ 800 น่ะ มันจะทะลุหน้าจอออกมา นึกออกไหม แล้วต้องการไปเริ่มที่จุดที่ 1 ใหม่ มันก็ต้องไปอัปเดตไง ให้ค่ามันคืน คืนกลับว่าเป็นเริ่มต้น หน้าจอนั้นก็จะ... ไอ้โหมดตัววิ่งก็จะ... ให้นึกถึงนะ เหมือนเราเล่มเกมไป วิ่งไปเรื่อย ๆ แล้วพอจุดนี้ก็จะมาเริ่มด่านใหม่ มันก็จะโผล่มาเริ่มต้นใหม่ใช่ไหมคะ อย่างนี้เป็นต้น ก็คือเกมมันก็ต้องมีส่วนให้มันอัปเดตด้วยนะคะ และส่วนสุดท้าย บอกแล้วว่าเวลาเราเขียนโปรแกรม ในบางโปรแกรมไม่ต้องมีคำสั่งเพื่อ start แต่ที่ขาดไม่ได้มันต้องมีคำสั่งจบนะคะ คือ ตอนในเราเขียนแบบผังหรืออะไรนี่ต้องเริ่มจากตรงไหน ในผังถ้าเริ่มต้นนี่ให้นึกถึงเลย เพราะถ้าเราไม่สั่งคำสั่ง import น่ะ เราก็จะใช้งาน Library ที่ชื่อ pygame ไม่ได้ เพราะฉะนั้น จุดเริ่มต้นของคำสั่งนี้ ก็คือเริ่มที่ import เสมอนะคะ แต่จุดที่จะจบ ก็คือฟังก์ชันที่ชื่อว่า quit() quit() ในที่นี้ ก็คือออกจากโปรแกรมนะคะ ออกจากโปรแกรมในที่นี้ไม่ใช่ออกจากโปรแกรม Sublime แต่หมายถึงออกจากเกมที่เราสร้างไว้น่ะ บอกให้เกมมันรู้ว่าจะออกแล้ว ต้องออกได้ ไม่ใช้เกมวน วิ่งวนอยู่นั่นล่ะ เล่นไม่จบปิดเครื่องไม่ได้นะคะ เพราะฉะนั้น นั่นคือส่วนประกอบของตัวโปรแกรม Sublime ที่เราจะเขียนตัว pygame ด้วย ทีนี้บอกโครงสร้างไปแล้ว วันนี้เราจะทำเกมได้ ก่อนอื่น ก็คือเราจะต้องมาสร้างหน้าจอให้มัน สร้างพื้นที่ให้ตัวเกมของเรานะคะ เพราะฉะนั้น เด็ก ๆ เปิด Sublime กันหรือยัง ถ้าเปิดมาแล้วนะคะ ให้เด็ก ๆ นำเข้าโมดูลนะ ถ้าเปิดมาในสัปดาห์ก่อน หน้าจอเรามันก็จะมาอยู่ไฟล์ที่เราเปิดไว้ จำได้ไหมเด็ก ๆ ที่เราใส่ Comment มันไว้ว่าทดสอบน่ะ ทีนี้เราจะไม่ใช้ Comment ว่าทดสอบนะ เพราะตอนนี้เราจะทำอะไรคะ เราจะกำหนดใช่ไหมคะ กำหนดจอเกม วันนี้เราจะมากำหนดหน้าจอเกม เพราะฉะนั้น ใน Comment เราก็จะเปลี่ยนเป็น... บอกให้รู้ว่าไอ้ตัวนี้ตอนนี้นะคะ เราจะมากำหนดหน้าจอให้เกมก่อน Comment สามารถเปลี่ยนได้ เพราะอะไร เพราะเวลาเราเขียนโปรแกรมไม่จำเป็นว่าเราจะต้องเขียนครั้งเดียวแล้วเสร็จหมดนะ นะคะ อันดับแรก ก็คือต้องมีคำสั่ง import pygame ใช่ไหมคะ ทีนี้เราจะเอาคำว่า "print" ออกนะคะ ส่วนที่ 2 ฟังก์ชันที่ชื่อ init() ดูนะคะ เดี๋ยวให้ดูสไลด์ ไม่ไปสไลด์ล่ะนี่ ไหนล่ะ เห็นไหมคะ เริ่มการทำงานให้ pygame ใช่ไหมคะ เริ่มด้วยฟังก์ชัน init() วิธีการในบรรทัดต่อไปที่ต่อจาก import นะคะ ให้พิมพ์ py... เอ้ย เปลี่ยนภาษาก่อน ขอโทษ เด็ก ๆ ดูนะคะ ดูก่อนนะอย่าเพิ่งพิมพ์ มี p ถ้ามันมีอย่างนี้ขึ้นมา ให้เด็ก ๆ คลิกไปที่ตัวนี้ได้เลย เห็นไหม ไม่ต้องพิมพ์นะ เห็นไหมคะ ดูดี ๆ นะคะ เอาใหม่นะ กด p ปุ๊บ กด Enter ก็ได้ ถ้าไม่เอาเมาส์ไปคลิกที่ pygame นึกออกนะ พอมี p ขึ้นมานี่ ถ้าไม่เอาเมาส์ไปคลิก เราสามารถกดปุ่ม Enter คำว่า "pygame" จะมา อย่างนี้เด็ก ๆ จะพิมพ์ไม่ผิด นึกออกไหม เห็นไหม นึกออกไหม สะดวกและรวดเร็ว แต่ต้องดูด้วยไม่ใช่พิมพ์ปุ๊บ มันจะไม่ได้มีแค่ตัวเดียว พอเราเริ่มโค้ดเยอะ ๆ น่ะค่ะ Sublime เขาจะ... เขาเรียกว่าอะไร มันจะไปจำพวกค่าหรือคำสั่งพวกนี้เก็บไว้ นึกออกนะ พอเราเริ่มจะเรียกใช้ มันจะขึ้นมาอย่างนี้ แล้วพอกด Enter ปุ๊บ เด็ก ๆ จะไม่เกิดการ... ปัญหา ก็คือการพิมพ์ชื่อไอ้พวกนี้ผิด เข้าใจไหมคะ นะคะ ต่อมาตามด้วยอะไร ตามด้วย . 1 . จุดลงไป แล้วก็ตามด้วยฟังก์ชันที่ชื่อว่า init() นะคะ แล้วก็ให้เด็ก ๆ กดวงเล็บ กดแค่วงเล็บเปิด เดี๋ยววงเล็บปิดมันจะมาอัตโนมัติ เวลาเช็ก Sublime เด็ก ๆ ดูอย่างไร เห็นไหมดูที่สีพวกนี้นะคะ ถ้าเราพิมพ์คำสั่งถูกนี่ พวกสีพวกนี้มันจะปรับเปลี่ยนไปอัตโนมัติเลย บอกให้รู้ว่านี่เป็นฟังก์ชันนะ นี่เป็นคำสั่งที่อยู่ใน Library อะไรอย่างนี้นะคะ เห็นไหมคะ เราได้ 2 บรรทัดแล้ว ก็คือนำเข้าโมดูล pygame แล้วก็สั่งให้โปรแกรมนี้มันเริ่มทำงานนะคะ ในบรรทัดที่ 4 สิ่งที่เด็ก ๆ จะต้องทำต่อมานะคะ กดผิดอีกแล้ว เราจะสร้าง loop ให้มันก่อน เห็นไหม กระโดดข้ามได้นะคะ ในการ Coding นี่ แต่... แต่อะไร แต่จะ... ในทุกส่วนนี่ ถ้าอยากให้เข้าใจว่าเราไปทำส่วนไหนไว้ Comment มีส่วนสำคัญนะคะ เพราะฉะนั้น เมื่อเรานำเข้าโมดูล แล้วก็เริ่มการทำงาน pygame แล้ว เว้น 1 บรรทัด กด Enter ให้มันขึ้นเลข 5 ตอนนี้เด็ก ๆ จะอยู่ที่บรรทัดหมายเลข 5 เห็นไหม เราต้องการใส่ Comment เข้าไป เพื่ออธิบายส่วนต่าง ๆ ที่เราทำ ตอนนี้เราจะสร้าง loop พิมพ์ทับศัพท์เลยนะคะ loop game บอกให้รู้ว่าตรงนี้เป็น loop game เพราะอะไร เพราะเวลาเราโค้ดเขียนโปรแกรมไปแล้วมันผิด แล้วแม่บอกว่าผิดตรง loop นึกออกนะ ถ้าเรามาดูที่ Comment เราก็จะรู้ว่า loop loop เกมเราอยู่ตรงไหนนะคะ คำสั่งที่ใช้ในการทำ loop เกมของเรานะคะ ก็จะมีตัวแรกนะคะ ตัวแรกนี่ เป็นคำสั่งในการตรวจ loop ที่เราจะใช้นี้ เป็น loop แบบใช้ while loop เห็นไหม while loop while จะทำงานเมื่อเงื่อนไขเป็นจริง เห็นไหมคะ เมื่อเงื่อนไขเป็นจริง มันถึงจะทำงาน เห็นไหมคะ while run ใส่ for event เหตุการณ์เข้าไป เมื่อรับค่า event.type == นะคะ pygame.quit() นะทำเมื่อเป็นจริง ก็คือถ้าเมื่อ pygame สิ้นสุด ก็คือจะออก แต่ถ้ายังไม่จบเกมก็จะ run ก็คือทำงานไปเรื่อย ๆ นะคะ ก็ยังทำงานอยู่ ก็ยังวิ่งอยู่อย่างนี้นะคะ คำสั่งแรกเลยนะคะ ก็คือประกาศตัวแปร ไหนล่ะ ประกาศ ตรงนี้นะคะ เราจะประกาศตัวแปรก่อนบอกแล้วว่าเวลาตั้งชื่อตัวแปรนี่นะคะ เด็ก ๆ จะต้องตั้งด้วยตัวเล็ก นะคะ ตัวแปรแล้วก็กำหนดค่าให้ตัวแปร เท่ากับ TRUE ตัวแปรนี้ มีค่าให้เป็นจริงเสมอ ค่าเริ่มต้นของตัวแปรเป็นจริงเสมอนะคะ เริ่มที่ประกาศตัวแปรนะคะ ตัวแปรที่เราจะใช้นะคะ ที่ใช้ Run นั่นก็คือหมายถึงเกม เกมมันวิ่งหรือ active ก็ได้ เอา active แล้วกัน คือ active ก็จะยาว เด็ก ๆ ก็จะว่ามันยาวน่ะ เอา Run นั่นล่ะ สั้นดี Run นะคะ ตัวแปรนี้ หมายถึง เราต้องการให้โปรแกรมมันวนรอบการทำงานน่ะค่ะ เด็ก ๆ run นะคะ ประกาศตัวแปรชื่อว่า run เสร็จแล้ว = ใส่เครื่องหมาย = สังเกตนะคะ แม่กดวรรคนี่เด็ก ๆ ก็ต้องวรรคตามนะ = คำสั่งต่อมา run = ใส่เครื่องหมาย = ต้องการบอกว่าตัวแปรนี้เราจะกำหนดค่าให้มันเป็น true true ที่แปลว่าจริง เดี๋ยวนะพิมพ์อะไรผิด run t-r-u-e พิมพ์คำสั่งผิดนี่เอง Memory อาจจะ Error นะคะ วันนี้กินยา การประมวลผลไม่ทำงาน = True True ตัวนี้ใช้ T ตัวใหญ่ T-r-u-e นี่ ถ้าพิมพ์ถูกนะคะ สีมันจะเปลี่ยนเห็นไหม เห็นไหมคะ True ในที่นี้มันมาจาก... มันไปดึงมาจากโมดูลของ Pygame นั่นเองนะคะ ก็คือ loop จะรู้เลยว่า อ๋อ ถ้าเป็นจริงปุ๊บ สิ่งต่อมาที่จำให้มันทำ ก็คือคำสั่งวน loop ก็คือคำสั่ง while เห็นไหมคะ มันจะขึ้น while loop กด Enter เลือกตัวนี้ได้เลยเด็ก ๆ เห็นไหมถ้ากด Enter มันจะขึ้นโครงสร้างของคำสั่ง while อย่างนี้มาให้นะคะ ใครไม่ขึ้นแบบนี้ เอาใหม่นะ ดูใหม่นะคะ ดูที่คำสั่ง while นี่ เพราะเราจะทำ while loop พอเห็น while แล้วก็มีคำว่า while loop ตาม ถ้าเห็นกด Enter ได้เลย เห็นไหมคะ มันจะแบ่งส่วนอย่างนี้ขึ้นมาเห็นไหม โครงสร้างมันจะขึ้น อันนี้ดีอย่างไร เด็ก ๆ จะพิมพ์ไม่ผิดก็คือตัวโครงสร้าง ก็คืออยู่ตำแหน่งนี้ ถ้าเด็ก ๆ พิมพ์เอง เด็ก ๆ จะมาพิมพ์ที่ตำแหน่งเริ่มต้น นึกออกนะคะ เพราะฉะนั้น ถ้าเป็นอย่างนี้ตำแหน่งมันจะไม่เพี้ยน มันจะใส่ : อะไรมาให้เลย มันจะแก้ปัญหาให้ที่เหมือนตอนที่เราใช้ Colab บางที บางคำสั่งถ้าเราไม่มีโคลอนหรือเซมิโคลอน นึกออกนะ นั่นก็คือเราเขียนโค้ดผิด แต่ถ้าขึ้นอย่างนี้มันจะไม่ได้ทำให้ผิดนะคะ ของใครไม่ขึ้นแบบนี้ยกมือ ไอ้มิ่งแก้หรือยังตอนนั้นน่ะ ที่มันลงไอ้นั่นไม่ได้ ที่ลง Pygame ไม่ได้ไง มันต้องเปลี่ยนเครื่องนี่ เพราะโมดูล pygame มันไม่มีนี่ จำได้ไหม เพราะตอนลง เพราะที่ตอนเรียกใช้ Pygame น่ะ เครื่องไอ้มิ่งมันเรียกใช้ไม่ได้น่ะ ไม่ใช่เครื่องไอ้มิ่ง เครื่องไอ้กุ้งเต้นมันลงไม่ได้ไง ที่เราลง ตอนแรกน่ะ ของไอ้... พอเราเรียกใช้ Pygame มันจะขึ้น Finish แต่ของไอ้นี่มันไม่ขึ้นน่ะ มัน... มันน่าจะมีไวรัสน่ะ มันลงไม่ได้ บอกอยู่ว่าต้องเปลี่ยนเครื่องให้มัน แล้วเครื่องออฟต้ามันยังไม่ได้ลงไม่ใช่หรือ ลงแล้วหรือ ลองเรียก ลองเรียกขึ้นมาสิ ในระหว่างนั้นเพื่อน ๆ ได้หมดทุกคนแล้วนะ ไอ้มิ่งเดี๋ยวค่อยตามทีหลัง เดี๋ยวไล่ให้ทีหลังนะคะ พาเพื่อนทำก่อน ให้เพื่อนได้หน้าจอไว้เล่นเกมก่อน เพื่อนอยากเห็นหน้าจอมันจะเป็นอย่างไร กดผิดอีกแล้ว เห็นไหมคะ while while แล้วตามด้วยอะไร เห็นไหมตัวแปรที่เราประกาศ เราก็ต้องเรียกมันมาใช้ เห็นไหมคะ เห็นไหมคะ ก่อนหน้าโคลอน ให้เด็ก ๆ พิมพ์ตัวแปรที่เราประกาศไปมานะคะ นี่นะคะ เราจะต้องใช้ตัวแปรนี้ ก็คือพิมพ์ r ปุ๊บ run ขึ้นมากด Enter เห็นไหมเด็ก ๆ จะได้ไม่พิมพ์ผิด เห็นไหมคะ while run ก็คือถ้าคำสั่ง run นี่ค่าเริ่มต้นเป็น True ปุ๊บ สิ่งที่ให้มันวนลูปปุ๊บ ให้มันวิ่ง run เห็นไหมคะ แล้วตรง pass เด็ก ๆ มาตำแหน่งนี้นะคะ ทำแถบสีตรงคำว่า "pass" เราตำแหน่งมันจะต้องอยู่ที่นะคะ คำสั่งต่อมา ก็คือ while แล้วก็ตามด้วย for ค่ะเด็ก ๆ for ในที่นี้เป็น for loop ถูกต้องแล้ว Enter ได้เลย ตัว Box ถัดไปของ for จะขึ้นมา ใครยังไม่ขึ้นแบบนี้ยกมือ ใครไม่ขึ้นแถบโซนนี้ 2 บรรทัดนี้ยกมือนะคะ วิธีการจำได้นะ พิมพ์ f ลงไป แล้วพอขึ้นว่า for for loop พิมพ์ f ลงไปแล้วขึ้นคำว่า for loop กด Enter เพื่อเลือกเห็นไหมคะ ถ้าไม่ขึ้นต้องให้ import pygame ก่อน เปิด Command prompt ของใครไม่ขึ้น กุ้งเต้นไม่ขึ้นหรือ ไม่ ตี๋น้อยพิมพ์ใหม่ พิมพ์ f ใหม่ ให้ตี๋น้อยลบตั้งแต่ while ก่อน ลบตั้งแต่ while ก่อน ดูนะคะ มันจะต้องเริ่มที่พอพิมพ์ while นี่ ขึ้นแบบนี้ไหม เขามีบรรทัดที่ 6 หรือยัง เอาใหม่บอกเขาลบออก ลบตั้งแต่ 6 เลยนะบางคนน่ะ พิมพ์ตัวแปรที่ชื่อว่า run ประกาศตัวแปรให้ run ประกาศตัวแปร run วรรค เครื่องหมาย = ตามด้วยกำหนดค่าเริ่มต้นของ run เป็น True ก็คือเป็นจริง T-r-u-e True เสร็จแล้วพิมพ์ w 1 ตัว แล้วกด Enter ไม่ขึ้นอย่างนี้หรือ คนที่ไม่ขึ้นดูนะคะ สัปดาห์ก่อนตอนเวลาเราจะตั้งค่าให้โปรแกรม pygame นี่ นามสกุลมันจะต้องเป็น .py ตอนนี้คนที่ไม่ขึ้นคือนามสกุลไม่ได้เป็น .py เพราะฉะนั้น คลิกไฟล์แล้วก็เลือก Save As ลูก เมนู File ค่ะ มันจะขึ้นสีไอ้นี่มันจะขึ้นอย่างนี้เลย เป๊ะ ตี๋น้อยทำตาม แล้วก็เลือก Save As มิ่งด้วย ตรงนี้เห็นไหมลูก ใส่ . . ข้างหลังชื่อไฟล์นี้ . ลงไป จุดน่ะลูก กดจุดแล้วก็ตามด้วย py แล้วก็คลิก Save ทีนี้ มิ่งลองพิมพ์ while ใหม่ เห็นไหมสีเปลี่ยนแล้ว w ขึ้น Enter เรียกใช้อะไรคะ run พิมพ์ run ไอ้มิ่ง แม่บอกว่าอย่างไร ไอ้โปรแกรมนี้ลบ ไม่ต้องรีบพิมพ์ พิมพ์แค่ตัว r ปุ๊บ พอมันขึ้นมิ่งกด Enter เห็นหรือเปล่า มันจะได้ไม่ผิดใช่ไหม ให้ลบออก แล้วกด f ตัว f เห็นไหม ถ้าขึ้นอย่างนี้ให้กด Enter เห็นหรือเปล่า มันจะทำให้มิ่งไม่พิมพ์ผิด มิ่งจะรู้ตำแหน่ง มันจะเว้นให้นึกออกหรือเปล่า เพราะเหมือนที่เราเรียนเทอม 1 จำได้ไหม แค่ไม่เว้นวรรค แค่ไม่ใส่ไอ้นี่ นึกออกไหม โปรแกรมก็ Run ไม่ได้ใช่ไหมคะ Sublime มันจะช่วยให้เด็ก ๆ พิมพ์โปรแกรมไม่ผิดนั่นเอง เพราะอะไร เพราะถ้าอย่างนี้ปุ๊บนะคะ เพราะเมื่อกด while เมื่อพิมพ์ w นี่ มันมาเล็งแล้วว่าตรงนี้ใส่ค่า True นั่นหมายถึง บอกแล้วมันก็จะไปเรียกใช้คำสั่งในโมดูล pygame มันก็จะไปเรียก while loop มา ถ้ามันขึ้นอย่างนี้มา บอกแล้วกด Enter เวลาเขียนโค้ดนะคะ ไม่ต้องรีบพิมพ์ r-u-n เลย เด็ก ๆ พิมพ์แค่ r ถ้ามันขึ้น run Enter เหมือนตัวนี้เหมือนกัน ตัวเดียว ถ้ามันขึ้น while loop ให้เด็ก ๆ กด Enter หลังเคอร์เซอร์ให้พิมพ์ r 1 ครั้ง เห็นไหมคะ มันจะไปดึงตัวแปรที่ประกาศก่อนหน้า เพราะมันรู้แล้วว่า loop นี้ทำเพื่อเช็กค่าของ run มันจะก็ไปวิ่งไปหา run อัตโนมัตินะคะ ชักเริ่มเจ็บคอ กด Enter ค่ะ แล้วในส่วนที่เป็นสีชมพูดอย่างนี้ เด็ก ๆ ทำแถบใช่ไหมคะ คำว่า "pass" นี่ เราไม่ได้ใช้ มันเขาเรียกว่าอะไรน่ะ มันเป็นโครงของโปรแกรมที่มันสร้างไว้ให้ เราก็ Delete ออกนะคะ บรรทัดต่อมาเราจะใส่ event for เพื่อให้มันตรวจสอบ เพื่อให้มัน run เห็นไหมคะ กด f ปุ๊บ ถ้าคำว่า "for loop" ขึ้นมา ให้เด็ก ๆ กด Enter มันก็จะมีโครงสร้าง ตรง x ตรง x นี่สิ่งที่เราจะใส่คืออะไร มาดูสไลด์เราต่อ ทันหรือยัง 2 คนนี้ ่ตี๋น้อยทันไหม ตรง while ปุ๊บนะคะ ไหนล่ะ ตรง for ตรงตัว x สิ่งที่เราจะใส่ เราจะใส่เหตุการณ์ ก็คือ e-v-e-n-t นะคะ ใส่ตัวแรกที่ชื่อว่า event อันนี้ถ้าไม่มีอะไรขึ้นมานี่ เด็ก ๆ พิมพ์ตามอย่างนี้ก่อน ครั้งแรกสังเกต ครั้งแรกสังเกตเวลาเราประกาศตัวแปรครั้งแรก เวลาเราประกาศตัวแปรอะไรมา เพราะมันยังไม่รู้ว่ามีตัวแปรชื่อนี้ for event ปุ๊บ ถึงบรรทัดนี้หรือยังตี๋น้อย คนอื่นทันนะคะ ตรง x range นี่ตรงค่าตรงนี้นะคะ เด็ก ๆ ที่ทำไฮไลท์ไว้ตรงค่านี้ เห็นไหมคะ เราจะไปเรียกเห็นไหม pygame.event.get นั่นก็คือเมื่อมัน... มันจะเป็นโมดูลที่ชื่อว่า get น่ะค่ะ ฟังก์ชัน get เห็นไหม get ตามนะคะ p เลือก pygame เห็นไหมถ้าขึ้นอย่างนี้ เอาเมาส์ไปคลิกที่คำว่า "pygame" แล้วก็ใส่ . พิมพ์ e เห็นไหม event ขึ้นมาแล้ว ตัวแปร event ขึ้นมาแล้ว แล้วก็ใส่ . อีก 1 ครั้ง ไม่ใช่จุด... ไม่ใช่ , พูดผิด g-e-t นะคะ get แล้วก็ตามด้วยวงเล็บเปิด... ไม่ใช้วงเล็บเปิดต้องมี _ ก่อน _ ก็คือขีดล่าง ใส่ขีดล่างนะคะ จะไปใช้ฟังก์ชันที่ชื่อว่า get ลบในไอ้วงเล็บนี้ออก get แล้วก็ตามด้วย _ อย่างนี้นะคะ เอาใหม่นะ ขีดล่างก่อน แล้วก็วงเล็บ เห็นหรือเปล่า อย่างนี้นะคะ ถึงจะถูก บรรทัดที่ 8 คำสั่ง for event ตัวแปรสำหรับตัวแปรที่ชื่อว่า event นะคะ in อธิบายนะคะ ตอนนี้กำลังอธิบาย ว่าในบรรทัดที่ 8 นี่ เราใช้คำสั่ง for เพื่อเรียก... เพื่อประกาศ... เพื่อเรียกตัวแปรที่ชื่อว่า event กำหนดตัวแปรที่ชื่อว่า event ใน pygame.event.get นะคะ เสร็จแล้ว มาดูบรรทัดที่ 9 สิ่งที่เราจะทำต่อมาในบรรทัดที่ 9 คือ เห็นไหมคะ if นะคะ เราจะใช้ if นะคะ กำหนดเงื่อนไขให้ for เสียก่อนนะคะ ตรง pass ลบออกเหมือนเดิม แล้วใส่ i 1 ที ให้เลือก if condition นะคะเด็ก ๆ ให้เลือกตัวแรกนะ ไม่ใช่ if then if นะ เราเลือกตัวนี้ if condition เราจะได้โครงสร้างของ if แบบนี้มา เห็นไหมคะ ตรงตำแหน่งถัดจาก if ก็คือตำแหน่งหน้าโคลอน ให้พิมพ์ e เพื่อเลือก event Enter ค่ะ เห็นไหม event ขึ้นมาแล้ว if event ยาวขนาดไหน บอกแล้ว Memory ไม่ดี ต้องเปิดดูโค้ดตลอดเลยวันนี้ if event.type == ถ้ารูปแบบของ python นะคะ ถ้าใช้คำสั่ง if นี่ เครื่องหมาย = ของ if จะต้องมี 2 ตัวนะ ไม่ใช่มีตัวเดียว นั่นก็คือบอกว่าตัวแปรที่ชื่อว่า event.type นี่นะคะ มีค่าเท่ากับ pygame.QUIT pygame.QUIT ก็คือออกนั่นเองนะคะ event ใส่เครื่องหมาย ใส่ . แล้วก็ตามด้วย t เมื่อกี้ T ใหญ่ t เล็ก กินยาละมึน ไม่ดี เป็นมันเป็นอย่างนี้นี่เอง tt y-p-e .type วรรคแล้วก็ = 2 ตัว == py เลือก pygame นะคะเด็ก ๆ p pygame. Q ตัวใหญ่ค่ะ QU... .QUIT นะคะ () เสร็จแล้ว ถูกต้องไหมล่ะ ไม่ใช่สิ พิมพ์อะไรผิดแน่ ๆ เลย สอนแบบป่วย ๆ นี่มันเป็นแบบนี้นี่เอง QUIT Q-U-I-T ตัวใหญ่ทั้งหมดนะคะ pygame.QUIT ใช้ตัวใหญ่ Q-U-I-T จบ ตรงบรรทัดที่ 10 คำสั่งต่อไป ก็คือเมื่อเรากำหนดเงื่อนไขเสร็จนะคะ if then else นั่นเองนะคะ while for if if แล้วก็ต่อไปก็ then ให้ if เช็กค่า ค่าที่จะเช็กใน if ก็คือตัวแปรที่ชื่อว่า run ใช่ไหม เป็นจริงไหม เพราะมี True แล้ว ต้องปิดด้วย False run เป็นจริง เพราะฉะนั้น พอมันออกนี่ นั่นหมายถึงมันจะทำงาน มันจะวนลูป ก็คือตำแหน่งนี้นะคะนี่ เห็นไหมคะ ถ้า run เป็นเท็จปุ๊บนี่ เห็นไหมคะ มันก็จะวนกลับไป run ใหม่ จนกว่าจะเป็นจริง ก็คือ pygame.QUIT เป็นจริง มันถึงจะออก มันถึงจะโดดมานี่นะคะ นี่ถ้าเป็นจริง จะมานี่ก็จะออกจากเกม เลือกตัวแปร run มา แล้วก็ใส่กำหนดค่าให้ run เป็น False F... False False False F ตัวใหญ่ด้วยนะเด็ก ๆ F ตัวใหญ่ แบบเดียวกับ True นั่นล่ะ F ตัวใหญ่นะคะ F-a-l-s-e False True จริง False เท็จ เห็นไหมคะ เงื่อนไขนี้ ถ้าเป็น if นี่ มันเช็กว่าเมื่อเราพิมพ์ออกนี่ ไปกดปุ่มออกหรืออะไรก็แล้วแต่นี่นะคะ ถ้าเป็นจริงปุ๊บบรรทัดนี้ ก็คือ pygame แล้วก็ถามด้วย . quit ตัวเล็กนะคะนี่ ตัวใหญ่นี้ไม่ใช่นะคะ มันจะเป็นคนละตัวกัน มันจะไปเรียกใช้ฟังก์ชัน quit() ใส่วงเล็บเข้าไปนี่ แล้วต้องปิดด้วย ปิดไหมน่ะ ไม่ปิด ไม่ปิด ไม่ปิด นั่นก็คือมันเข้ามาเช็กตัวแปรที่ชื่อว่า run ถ้าเป็นจริงเข้าไปทำงาน ในขณะที่ while run นี่ มีเงื่อนไขว่าถ้า event หรือเหตุการณ์ที่เกิดขึ้นนี่ รับค่าเข้าไปปุ๊บ แล้วค่าที่พิมพ์เข้าไปนี่เป็น quit ปุ๊บนะคะ ก็จะสิ้นสุดโปรแกรม แต่ถ้ายังไม่พิมพ์มันก็จะวน วนรอบ วนไป วนอยู่นี่ล่ะ จนไปเจอว่าปุ่มนี้เป็นปุ่มให้ออก มันก็จะออกนะคะ กำหนด loop และ event ไปแล้วนะคะ loop and event loop กับเหตุการณ์กำหนด loop loop แล้วก็เหตุการณ์ในเกม ส่วนต่อมาที่เราจะกำหนดค่าให้นะคะ บอกแล้ววันนี้เราจะออกแบบหน้าจอมันให้ได้ ถัดไป เราจะมาสร้างหน้าต่างเกม ทำไมมันไม่กดคลิกถัดไปให้ หน้าต่างเกมนะคะ ค่าที่จะกำหนดมีค่าในแกน x y ตัวแปร x x นี่คือค่าของ... ก็คือถ้าเป็นกรอบสี่เหลี่ยมก็จะมี tital ก็คือชื่อจอ หรือชื่อพื้นที่นั่นนะคะ hight hight นั่นก็คือความสูง width คือ ความกว้าง ก็คือเราจะกำหนดค่าความสูงแล้วก็ความกว้างของกรอบให้มันนะคะ แล้วก็กำหนดชื่อให้มันด้วย ในหน้าจอหนึ่งหน้าจอนี่จะมีองค์ประกอบอยู่ในแกน x แกน y พวกนี้นะคะ ตัวแปร x ตัวแปร y นี่ ก็คือค่าความสูง ความกว้างนั่นเองนะคะ ทีนี้ถ้าตัวแปร x นั่นหมายถึงตำแหน่งของแกน เอ้ย ของความกว้าง ถ้าตัวแปร y หมายถึง ตำแหน่งของความสูงนะลูก นี่ y อันนี้ x เห็นไหมคะ อธิบายไว้ว่าให้ y คือ ความกว้างของหน้าต่าง ให้ h คือ hight hight คือ ความสูง flags จะเป็นการตั้งค่าคุณสมบัติของหน้าต่าง ซึ่งจะมีค่าก็ตามตาราง เดี๋ยวจะให้ดูนะคะ ค่าตามตารางคืออะไร วิธีทำก็คือเราจะต้องกำหนดตัวแปรให้หน้าต่างนี้นะคะ แล้วก็ตามด้วยเครื่องหมายเท่ากับ คำสั่งนะคะ ก่อนอื่น ก็คือประกาศตัวแปรคำสั่งหน้าต่างนี้ แล้วก็ตามด้วยกำหนดค่าให้ตัวแปรนี้ว่า pygame.display.set_mode ในวงเล็บ resolution resolution ก็คือความละเอียดของจอนะคะ แล้วก็เท่ากับเท่าไหร่ ความกว้างแล้วก็ความสูง w คือ ความกว้าง high คือ ความสูง หมายเลขกว้างเท่าไหร่ สูงเท่าไหร่ลงไปแล้วก้ถ้าใส่ flags บอกว่าเป็นค่าคุณสมบัติของหน้าต่างนะคะ ที่มีค่าตามตาราง ซึ่งค่า flags ก็คือนี่เห็นไหมคะ ถ้าเลือก flags ว่า pygame.full screen เลือก flags ว่า pygame.fulls หน้าต่างแบบเต็มจอ ถ้าเลือกแบบ pygame.DOUBLEBUF ที่เขียนไว้นี่ถ้าบอกว่า หมายถึงให้มันไปเปิด pygame.OPENGL มา เพราะฉะนั้น ส่วนต่อไปที่เราจะทำ นั่นก็คือกำหนดค่าหน้าต่างนั่นเอง ตำแหน่งของกำหนดค่าหน้าต่าง ก็จะอยู่ก่อน loop นะคะ ใช่ไหม เพราะรูปแบบให้เด็ก ๆ ดูนะคะ ในองค์ประกอบในนี้ของเรานี่ มันมีทั้งหมด 6 ส่วน กำหนดค่ามันจะอยู่ก่อน loop กับ event เห็นไหมคะ จะอยู่ที่ส่วนของหมายเลข 3 เพราะฉะนั้น การกำหนดค่าหน้าจอมันจะอยู่ก่อน เพราะฉะนั้น เราจะกำหนด Enter ลงไป 2 บรรทัด เพื่อให้ loop มันเลื่อนลงไปนะคะ แล้วใส่ # เหมือนเดิม กำหนดหน้าจอแล้ว เราจะมากำหนดหน้าจอเกมตรงส่วนนี้นะคะ ตั้งแต่บรรทัดที่ 6 เป็นต้นไปนะลูก บอกแล้วว่าถ้าเราใส่ # นี่ เราจะรู้ว่าแต่ละส่วน เราทำอะไรในส่วนนี้ เวลาเราจะมาแก้ ถ้าโค้ดมันผิดนี่ เราก็จะรู้ว่าจอเราเล็ก เราต้องมาแก้จอ เพราะฉะนั้น เราก็ต้อง... ใช่ไหมคะ หรือ loop เรามันผิดนี่นะ เราก็มาแก้ใน loop ถ้าเราใส่ Comment ไว้ เราก็จะรู้ มันก็จะช่วยได้ เราจะเริ่ม... ใครใส่ # เสร็จแล้ว เราก็จะมาเตรียมพร้อมที่จะเริ่มนะคะ กำหนดตัวแปรชื่อ... ชื่อนี้นะคะ screen screen แปลว่าหน้าจอใช่ไหม กำหนดความกว้างเท่ากันเลย 800 600 แต่ถ้าใครพอสร้างเสร็จแล้ว แล้วคิดว่าจอมันเล็ก ไปเพิ่มขนาด อันนี้ทำให้ดูก่อนว่า ถ้ากดไอ้นี่นะคะ หน้าจอเท่านี้แล้ว ค่า flags เราจะยังไม่ใส่นะคะ วันนี้เราจะยังไม่ใส่ค่า flags เพราะทำหน้าจอเฉย ๆ ก่อนอื่นต้องได้ตัวคำสั่ง screen ออกมา ตัวนี้ออกมานะคะ เพราะฉะนั้น บรรทัดที่ต่อจาก Comment screen ค่ะ s... s-c-r-e-e-n screen = p-y pygame.display d-i-s-p-l-a-y . . อะไรต่อ . อะไรต่อ . อะไรต่อ สไลด์ สไลด์ สไลด์ .display.set_mode นะคะ .set_ แล้วก็ m-o-d-e mode ทำวงเล็บ 2 ครั้งลูก y เลขชุดแรก 800 คือ y ก็คือความกว้างของหน้าจอนะคะ ก็คือ hight 600 800 600 เดี๋ยวจะ run แล้วนะคะ เช็ก ก่อนจะ run เราจะเช็กคำสั่งก่อนว่าถูกหรือเปล่า 800, 600 กด Ctrl+B นะคะ โอเค ลอง Run แล้วนะครับ เวลาสั่งให้ Run อยู่ตรงนี้นะคะ tool นี่เห็นไหมคะ เราจะใช้คีย์ลัด ก็คือกดปุ่ม Ctrl แล้วก็ตามด้วย B เมื่อกี้มันขึ้นมาแล้วนะ มันขึ้นแล้วมันหาย มันไม่ได้หายนะ เด็ก ๆ ดูดี ๆ เดี๋ยวนะ ขอย่อหน้าต่างนี้ก่อน ไปไสล่ะ ย่อจนได้เรื่อง เมื่อกี้มันขึ้นมาแป๊บหนึ่งนะ เดี๋ยวนะ เดี๋ยวนะ ถ้าใครไม่ขึ้น เห็นหรือเปล่า เห็นหน้าต่างตัวเองหรือยัง ไปกดโดนอะไรนี่ Ctrl + V ใหม่อีกรอบก็ได้ เห็นไหม มันขึ้นมาแป๊บเดียว ดูดี ๆ นะคำสั่ง get get ผิดหรือ Module pygame get you mean get ทำไมไอ้นี่มันขึ้นมาเยอะแท้นะ นี่ ๆ ๆ มันบอกตรงนี้ผิด get อะไรล่ะ บรรทัด for เราผิดหรือ ไปไหนแล้ว มันเลยหลุดตรงเงื่อนไขน่ะ ตรงเงื่อนไขมันหลุดออกไปนะคะ ต่อไปนะคะ แป๊บหนึ่งนะคะ ย้อนกลับสิครับ รออะไร โอเค รู้แล้ว เราผิดเองล่ะ แล้วทำไมมันขึ้น _ เดี๋ยวนะ ขอแก้ Ctrl + B ขอโทษที นี่ตรง get เด็ก ๆ เอาไอ้ขีดล่างออกนะเด็ก ๆ ขีดล่างอย่างนี้ออก ตรงคำสั่งนี้เห็นไหมคะ for event ตรง loop น่ะค่ะ เพราะหน้าต่างมันจะต้องขึ้นมาอย่างนี้เห็นไหม จะได้ขนาดหน้าต่าง ใครยังไม่ได้หน้าต่างไปแก้ที่บรรทัดนี้ สไลด์เราผิดนี่เอง ไม่เป็นไร เดี๋ยวก๊อปฯ โค้ดบรรทัดอื่นมาใส่ เอาไว้แก้สไลด์ โอเคนะคะ ใครยังไม่ได้หน้าจอ ยกมือ มิ่งมาดูบรรทัดที่ 11 สิลูก .get เอาไอ้ขีดล่างนี่ออก นี่ ๆ ๆ ลบออก ลบหรือยัง อย่างนั้นไปดูบรรทัดนี้ screen ครบไหม pygame.display.set set mode ขนาด 800 x 600 กด Crtl + B ดูหรือยัง กดปุ่ม Ctrl แล้วก็ตามด้วย B Ctrl ค้าง แล้วก็ตามด้วย B ขึ้นไหม โอเค สังเกตหน้าจอ มันจะมีรูป... มันจะมีคำว่า "pygame windows" ด้านบน เห็นไหม ใครยังไม่ได้จอนี้ยกมือ เครื่องใคร ทั้ง 2 จุดที่จะแก้ดูนะครับ ตรงคำสั่ง for นะ ตรง get นี่ นี่ ๆ ๆ เอาเครื่องหมาย _ อุบลออกแล้วใช่ไหม ออกไหมครับ โอเค 2 คนนั้นออกไหม โอเค แสดงว่าตามทันไหน ยังไม่ได้ไอ้นี่เข้าไปใช่ไหม พิมพ์ไอ้นี่หรือยัง ไปที่ Command เครื่องกุ้งเต้นน่ะ เครื่องไอ้กุ้งเต้นน่ะ เปิด Command prompt แล้วพิมพ์ pip install pygame แล้วกด Enter มันจะต้อง Install ก่อน ยังไม่ Install pygame มันเลยบ่รู้จัก โอเคนะคะ ตอนนี้ทุกคนจะได้หน้าจอของตัวเอง 1 อันแล้ว สิ่งที่เราจะทำต่อมานะครับ นะครับ นะครับ เราจะกำหนดชื่อให้มัน เห็นไหม ตรงนี้มันจะมีคำว่า "pygame windows" มันเป็นชื่อที่โปรแกรมมันตั้งนะ ตอนนี้เกมเรา ตอนนี้ให้เด็ก ๆ คิดว่าจะทำเกม แล้วจะตั้งชื่อเกมเราว่าอะไร เพราะฉะนั้น สิ่งที่เราจะเปลี่ยน ก็คือตรงนี้ตรง pygame windows นี่ ก็จะเป็นชื่อเกมของเรา คำสั่งที่จะใช้เป็น pygame.display.set_caption แล้วก็ตามด้วยข้อความนะคะ ตัวนี้ เดี๋ยวย่อลงก่อน อันนี้ตั้งชื่อว่า Fish Game แต่เด็ก ๆ ให้นึกถึงนะ ตรงชื่อตรงนี้ ให้เป็นชื่อของตัวเองน่ะ ตัวเองจะตั้งชื่อเกมว่าอะไร วันนี้เราจะทำ... วันนี้ชื่อเกมเราจะตั้งชื่อเกมเราจะตั้งชื่อว่า tikky ที่แปลว่าเสือ เสือน้อย ๆ เกมเสือน้อยนะครับ ของเด็ก ๆ จะตั้งชื่ออะไร แล้วค่อยมาเปลี่ยนก็ได้ จะเอาตามที่แม่ตั้งก่อนก็ได้นะ โอเคไหม ตัวนี้เราสามารถมาเปลี่ยนชื่อทีหลังได้ เราก็แค่มาเปลี่ยนตรงที่มันมีเครื่องหมายคำพูดนี่ ตรงนี้ก็จะเปลี่ยนตามที่เราเปลี่ยน โอเคนะ เพราะฉะนั้น เราก็จะไปต่อที่บรรทัดที่ต่อจาก screen นะคะเด็ก ๆ ก็คือบรรทัดที่ 7 พิมพ์ pygame pygame Enter .dispaly เหมือนกัน d เห็นไหมคะ เลือก กisplayเด็ก ๆ จะได้พิมพ์ไม่ผิด .set set เหมือนกันค่ะ แต่เปลี่ยนจาก set_mode เป็น set caption c-a-p-t-i-o-n แล้วก็ใส่วงเล็บ เครื่องหมายคำพูดค่ะ แล้วก็ข้อความ เพราะว่าเป็นข้อความ แล้วก็ตามด้วยชื่อ ชื่อเกมที่เราต้องการให้มันแสดงตรงหน้าจอนะคะ ซึ่งในที่นี้แม่ตั้งชื่อมันว่า Tiggy Tiggy Game เขาจะตั้งชื่อนี้ ใครจะทำไม เกมเสือน้อยนั่นเองนะครับ แปลเป็นไทย Tiggy แปลว่าเสือน้อย มาจาก Tiger นั่นเอง อยากรู้ เปลี่ยนไหม กดอะไร Build Ctrl + B เสมอ กด Ctrl แล้วตามด้วย B นะคะ ชื่อตรงนี้ก็จะเปลี่ยนเป็นเห็นไหมคะ Tiggy Game เหมือนกันแล้ว เห็นหรือเปล่า ไอ้ตัวรูปตรงนี้ก็เปลี่ยนได้นะเด็ก ๆ Icon นี่เปลี่ยนได้ มีรูปหรือเปล่า ใครมีรูปไว้แล้ว หารูปไอคอนมาใส่ได้นะครับ ใครยังไม่เปลี่ยน ชื่อยังไม่เปลี่ยน ดู ๆ ดูตรงนี้ ชื่อตรงกับในวงเล็บที่เราเขียนไว้ไหม เห็นเปล่า เห็นเปล่า เปลี่ยนหรือยังครับ เห็นเปล่าครับ เห็นเปล่าครับ เห็นเปล่าครับ เป็นอย่างนี้... จะเปลี่ยนไอคอนหรือเปล่า ถ้าเปลี่ยนเด็ก ๆ ต้องไปหารูปไอคอนก่อน เปิด... เปิด Google แล้วก็พิมพ์คำว่า "ไอคอน" นะคะ เวลาจะเอาของเขามาใช้ เราจะต้องยึดหลักว่าต้องเป็นของที่เขาให้ใช้ฟรี ต้องเป็น Free Download เท่านั้น D-o-w-n-l-o-a-d ให้ใช้คำว่า "Free Download" I-c-o-n ใส่เครื่องหมายบวก เพื่อจะระบุภาพที่เราต้องการ Tiger Tiggy หรือ Tiggy อะไรก็แล้วแต่ มันก็จะแสดงโลโก้พวกนี้ขึ้นมานะเด็ก ๆ ไอคอนขึ้นมา อยากได้เสือน่ะ ของเราเป็น... เราจะทำเกมเสือ เราก็เลยใช้คำว่า "Tiger" เราได้แล้วน่ารักตุ๊งนิ๊ง เอาแค่หน้าน้องก็พอ หรือจะเอาทั้งตัวก็ได้นะครับ อย่าลืมว่ามันต้องดาวน์โหลดได้ฟรีนะเด็ก ๆ ไม่ฟรีไม่เอานะ เอาไอ้หน้าที่กากบาทนี่ดีกว่า เห็นไหม นี่ไง ๆ มันก็จะขึ้น Free animal อย่างนี้ให้ฟรีแล้ว เห็นไหม Free Pic ใช่แล้ว เลือก Free Download ได้แล้วนะครับ ไฟล์ไอคอนที่เราดาวน์โหลดมาได้ ให้เอาไปเก็บไว้ในโฟลเดอร์ที่เราสร้างไว้น่ะลูก จำได้ไหม นี่นะ Test โปรแกรมเราอยู่ที่ Drive C นะ จำไว้นะ เพราะฉะนั้น ตัวดาวน์โหลดอยู่ไหนล่ะ อยู่ไหน Download ต่อไป เอาไว้ที่ C: เกมเขาอยู่ไหนน่ะ Game Image น่ะค่ะ จะเอาไปใส่ Image ไหนดี โอเค ตอนนี้เราจะเปลี่ยนไอคอนให้มันนะคะ คำสั่งที่จะใช้นะคะ ก็คือคำสั่ง... ก่อนอื่นเราจะต้องประกาศตัวแปร icon ก่อนนะคะ แล้วก็ตามด้วยคำสั่ง pygame.image.load เพื่อจะไปโหลดไฟล์นั้นมานะคะ แล้วก็ตามด้วยชื่อไฟล์ แล้วก็นามสกุลมัน ทีนี้เด็ก ๆ จะรู้ได้อย่างไรว่าไฟล์ตัวเองนามสกุลอะไร วิธีการ คลิกไปที่่ไฟล์ที่เราไปโหลดมาอยู่ไหนเอ่ย ในโฟลเดอร์ตัวเองใช่ไหมคะ ที่สอนไว้ คลิกขวาแล้วเลือก Properties เห็นไหมคะ นามสกุลอยู่ตรงนี้ Type of file เช่น png นามสกุลแต่ละคนที่โหลดมา บางคนอาจจะเป็น jpg นึกออกนะ เพราะฉะนั้น เช็กนามสกุลโดยการคลิกที่ไฟล์ไอคอนที่เราไปโหลดมา แล้วเลือกคำว่า "Poperties" นะคะ มันจะมีชื่อ... มันจะมีนามสกุลของไฟล์ขึ้นมานะคะ png file jpg file เด็ก ๆ ก็ก๊อปฯ มาอย่างนี้นะคะ เด็ก ๆ ก็มันมาได้เลยนะคะ ชื่อไฟล์แล้วก็ตามด้วย ประกาศตัวแปรเพื่อจะไปโหลดไฟล์มาเสร็จนะคะ แล้วเราก็มาเรียกใช้ ก็คือคำสั่ง pygame.display.set_icon แล้วก็ตามด้วยตัวแปรที่เราประกาศไป ก็คือตัวนี้นะคะ เพราะฉะนั้น เข้าไปที่... ตรงบรรทัดที่ 8 เริ่ม ใครยังไม่ได้ไอคอนอีก ยกมือ ได้หมดหรือยัง ใครยังไม่ได้ ได้แล้วนะ คำสั่งแรกประกาศตัวแปรค่ะ icon ประกาศตัวแปรชื่อ icon = ตามด้วยคำสั่งนะคะ Icon = pygame.image i-m-a-g-e .load l-o-a-d แล้วก็ตามด้วยเครื่องหมายวงเล็บ pygame.image.ioad ชื่อไฟล์ใช่ไหม tiger ชื่อไฟล์ไอคอนที่เราไปโหลดมานะคะ ตามด้วยนามสกุล ก็คือ .png โหลดแล้ว โหลดแล้วก็เรียก ตามด้วยคำสั่ง pygame อีก .display display นะคะ .set แต่ไม่ใช่ set_caption แต่เป็น set_icon แล้วก็ตามด้วยวงเล็บ ในวงเล็บก็คือชื่อของ icon ที่เรา... ชื่อตัวแปร icon นั่นเองนะคะ Enter กด Ctrl + B ให้เครื่องมันตรวจ ผิด เดี๋ยวมัน Error มันจะขึ้นเอง นั่นไง C: บรรทัดที่ 8 in... บอกว่าตัวนี้ มันบอกว่าหาไฟล์ไม่เจอ เดี๋ยวตัวเองตั้งใช่ผิดหรือ ย้อนกลับไปดู ถูกแล้ว tiger Ctrl+ B ใหม่ name tiger รู้แล้วผิดอะไร ใส่เครื่องหมายคำพูด backslash อยู่ไหนนี่ โอเค บางคนนะคะ บางคนถ้าขึ้นว่า file location อะไรน่ะ หาไม่เจอน่ะ 1. รูปอยู่ตำแหน่งไหน นึกออกนะ ให้เรายึดที่ไฟล์โปรแกรมที่เราเก็บ เพราะอะไร โปรแกรมเราอยู่ตรงไหนนี่ เวลามันหาน่ะ มันจะไปตามที่โปรแกรมเราอยู่ นึกออกไหม เพราะฉะนั้น รูปมันก็ต้องไปอยู่ในโฟลเดอร์โปรแกรมที่เราอยู่นะคะ หลักการง่าย ๆ ไม่มีอะไรพิสดาร ตำแหน่งรูปภาพ ไฟล์รูปภาพก็ต้องไปอยู่กับที่ไฟล์โปรแกรมเราอยู่นะลูก ทีนี้บางคนนะคะ ชื่อไฟล์ภาพตัวเองน่ะ ตรงนี้ ตรง image.load แล้วก็ไอ้ tiger.png เป็นชื่อไฟล์รูปแม่นะคะ ชื่อไฟล์รูปของเด็ก ๆ ชื่ออะไร ต้องเปลี่ยนชื่อเป็นชื่อไฟล์รูปตัวเองนะลูก ไปเรียก tiger.png มันก็ไปหาไม่เจออยู่แล้ว tiger.png อยู่ไหนล่ะ ให้เด็ก ๆ ดูไฟล์ชื่อรูปตัวเองชื่อว่าอะไร ขนาดมีเลขบรรทัดยังโค้ดผิดนะคะ ดูเช็กเลข แม่ก็อุตส่าห์บอกนะ จะได้ดูง่าย ๆ ดูเลขบรรทัดใช่ไหม แล้วก็มาดูข้อความ ดูคำสั่งที่อยู่ในบรรทัดนั้นด้วย พยายามบอกว่าตอนนี้เด็ก ๆ อยู่บรรทัดไหน เพื่อเวลาถ้าผิดมาจะได้เช็กได้ว่าตรงกับโค้ดที่เราเขียนไหม นะคะ เมื่อกี้เลขบรรทัดนี้อยู่ แต่ตัวคำสั่งตรงท่อนนี้ผิดหมดเลย ดันไปเอาคำสั่งจากท่อนนี้มาใส่บรรทัดนี้ มันก็เลยผิด เดี๋ยวสัปดาห์หน้า part ที่ 2 อย่างนั้นสัปดาห์นี้เราจะพอแค่นี้นะคะ แม่มีธุระไปทำต่อ เราได้หน้าจอแล้วนะ สัปดาห์หน้า เราจะ... คือ หน้าจอดำ ๆ นี่ มันก็เปลี่ยนสีได้ แต่เราไม่ใช้สีนะ เราจะไปหารูปใช่ไหมคะ เด็ก ๆ หารูปไว้แล้วหรือยัง รูป Background จอที่จะใช้มาลงนะคะ เอาไว้ต่อสัปดาห์หน้า คือ จอดำ ๆ นี่มันเปลี่ยนสีได้นะ แต่วันนี้ยังไม่พาทำ เดี๋ยวจะพาลองเปลี่ยนสีก่อน แล้วเปลี่ยนเป็นรูปใส่นะ เอาไว้สัปดาห์หน้านะคะ ใครที่ยังไม่ได้หารูป ท้ายชั่วโมงว่างหารูปไว้ แล้วเอาไฟล์รูปไปไว้ที่ไหนจำได้ไหม เอาไปไว้ในโฟลเดอร์ที่เราเขียนโปรแกรมนะเด็ก ๆ ไม่อย่างนั้นเดี๋ยวสัปดาห์หน้าไฟล์รูปอยู่อีกโฟลเดอร์หนึ่ง พอเขียนโปรแกรม สั่งให้เอารูปมาใช้ก็จะหาไม่เจอ เพราะฉะนั้น โยกรูปมาใส่ในโฟลเดอร์ตัวเองด้วยนะคะ โฟลเดอร์ที่เราเขียนโปรแกรมเราอยู่ที่ไหน จำได้หรือเปล่าคะ Drive อะไร Drive C นะคะ เด็ก ๆ แล้วก็ชื่อโฟลเดอร์ของเราใช่ไหม เพราะฉะนั้น รูปภาพที่เราหาไว้นะคะ ต้องเอามาใส่องเราใช่ไหม เพราะฉะนั้น รูปภาพที่เราหาไว้นะคะ ต้องเอามาใส่ในโฟลเดอร์ที่อยู่โฟลเดอร์ที่เราเขียนโปรแกรมที่เราสร้างไว้ที่ Drive C เอามาไว้ที่ Drive C นะลูกนะ ให้ดูง่าย ๆ ไฟล์ Test เรา ชื่อไฟล์โปรแกรมเราอยู่ที่ไหน ชื่อภาพอยู่ด้วยกันเอามาอยู่ด้วยกันโอเคนะ มันจะได้หากันเจอ โอเคค่ะ อย่างนั้นสัปดาห์นี้จะพอแค่นี้ค่ะ สวัสดีค่ะ ขอบคุณพี่ล่ามนะคะ เจอกันสัปดาห์หน้าค่ะ ขอบคุณค่ะ [สิ้นสุดการถอดความ]