(เจ้าหน้าที่) พี่ล่ามได้ยินไหมคะ (ล่าม) ได้ยินค่ะ (เจ้าหน้าที่) พี่ล่ามได้ยินไหมคะ (ล่าม) ได้ยินค่ะ ได้ยินค่ะ (เจ้าหน้าที่) พี่ล่ามได้ยินไหมคะ (ล่าม) ได้ยินค่ะ (ล่าม) ได้ยินค่ะ (อาจารย์สุธิรา) สวัสดีค่ะ (ล่าม) สวัสดีค่ะ (อาจารย์สุธิรา) มองไม่เห็นล่าม เด็ก ๆ เปิดเครื่องหมดทุกคนหรือยัง เปิดเครื่องกันหรือยังเอ่ย ก่อนอื่นนะคะ เมื่อเปิดเครื่องเข้ามาแล้ว เด็ก ๆ จะต้องเปิดอะไรคะ โปรแกรมที่ชื่อว่า sublime ไปที่ตัว... เห็นไหมคะ ตัวนี้ เปิดโปรแกรมนี้ขึ้นมาเลยค่ะ นะคะ จะต้องอยู่หน้านี้นะ ถ้ามันขึ้น Update เราก็ Cancel ไปเลย อัปเดตแล้วนะคะ ก่อนจะเขียนโปรแกรมนะคะ ให้เด็ก ๆ ดู ภาพบนหน้าจอก่อน เห็นไหม โครงสร้างในการจะเขียนโปรแกรม ด้วย pygame ของเรานี่ เห็นไหมคะ มีองค์ประกอบทั้งหมด... ดูนะคะ 1. แสดงว่าล่ามไม่ได้หรือ อ๋อ ล่ามได้อยู่ใช่ไหม โอเค ดูนะคะ องค์ประกอบ ในการจะเขียนนี่มันแบ่งออกเป็นทั้งหมดนะคะ หลัก ๆ น่ะ ก็คือ เวลาเราจะเขียนเกมเสร็จ 1 เกมนี่ มันจะต้องมีส่วนประกอบ ในการเขียนโปรแกรมเรานี่อยู่ 7 ส่วน ให้ดูที่ส่วนที่ 1 เห็นไหมคะ ส่วน import ทุกครั้ง บอกแล้วทุกครั้งเราจะต้อง import import เพื่ออะไร เพื่อจะนำเข้าโมดูล ซึ่งโมดูลของเราตัวนี้ ก็คือโมดูลที่ชื่อว่า "pygame" นะ ในสัปดาห์ก่อนที่ส่วนหัวที่ให้เขียนไว้ ทีนี้มาดูส่วนที่ 1 นี่ ขาดไม่ได้ พอเปิดโปรแกรมมาจะต้องมีเสมอนะคะ และก็ส่วนต่อมาในส่วนที่ 2 หมายเลข 2 เห็นไหม init() init แล้วก็มีวงเล็บนี่ มันหมายถึงฟังก์ชัน ฟังก์ชัน init() หมายถึง ฟังก์ชันที่ใช้ในการจัดการค่าเริ่มต้น ในที่นี้ ฝั่งนี้ที่เป็นขาว ๆ แล้วมีหมายเลขกำกับ แล้วก็มีคำอธิบายนะคะ แล้วเวลาเขียน เราจะต้องมาดูที่ฝั่งที่เป็นหน้าจอสีดำ ก็คือที่เราใช้ Sublime เขียน ในหมายเลข 2 เห็นไหมคะ วิธีการจะใช้ฟังก์ชันนี้ ก็คือ 1. เมื่อเรา import โมดูลใดเข้ามา เพราะฉะนั้น เราจะจัดการค่าเริ่มต้นมัน เราก็ต้องเรียกโมดูลนั้น ก็คือ pygame เห็นไหมคะ ก็เลยขึ้นด้วยคำว่า "pygame." dot ก็คือ . น่ะนะคะ พิมพ์คำว่า pygame แล้วก็ตามด้วย . แล้วก็ตามด้วยฟังก์ชัน init() เห็นไหมคะ บรรทัดที่ 2 คำสั่งมีแค่นี้ล่ะ ชื่อโมดูล แล้วก็ตามด้วยฟังก์ชันที่ชื่อ init() ทีนี้มาดูในส่วนที่ 3 คือ เวลาเราจะทำเกม 1 เกมนี่นะคะ ไม่ใช่ว่าอยู่ดี ๆ เกมมันมาวิ่งได้เลย ไม่ใช่ เราจะต้องสร้างพื้นที่ พื้นที่สำหรับให้เกมทำงาน สังเกตเมื่อเวลาเราเปิดเกมเข้าไปเล่น มันก็จะมีหน้า หน้าต่างของเกมขึ้นมา นึกออกนะ เพราะฉะนั้น อยู่เฉย ๆ เกมมันขึ้นมาบนหน้าจอไม่ได้นะคะ ต้องบอกให้มันรู้ก่อนว่ามันจะไปทำงาน อยู่ตรงพื้นที่ไหน เพราะฉะนั้น ก็เลยมาเป็นตรงส่วนที่ 3 ส่วนที่จะเป็นการกำหนดค่า ส่วนนี้นะคะ อาจจะไม่ใช่แค่บรรทัดที่ 4 ถึงบรรทัดที่ 14 ก็ได้ ก็คือถ้าเรามีกำหนด... ถ้ามันมีการกำหนดค่าอื่น ถ้ามันมีการกำหนดค่าอื่นนะคะ เราก็มีเพิ่ม ก็คือ โดยที่หลัก ๆ นี่นะคะ ในส่วนที่ 3 นี่ งที่เราจะต้องกำหนดค่าลงไป ก็คือ 1. หน้าจอที่จะใช้ทำงานแหละ แน่นอนแหละ 2. รูปภาพในทีนี้ ก็คือหมายถึง Background หรือภาพฉากในเกมเราน่ะ นึกออกนะที่ ในสัปดาห์ก่อน เอาตัวอย่างให้ดูแล้ว ฉากเกมเขาก็จะมีเหมือน... เหมือนถ้าเกมมาริโอมันก็จะเป็น ที่มี... เป็นเหมือนอะไรนะ เหมือนพื้นที่ให้วิ่งไปตามแนวนอน อย่างนี้ใช่ไหมคะ นะคะ ส่วนต่อมา สิ่งที่ต้องกำหนดต่อมาอีก เสียง เกมเรามีเสียงไหม อยากให้มีเสียงไหม เห็นไหม มันจะอยู่ในส่วนที่ 3 นี่ เราอยากกำหนดอะไรเข้าไป ก่อนที่เราจะเริ่มให้เกมเราสมบูรณ์น่ะ มันจะกำหนดไว้ที่ส่วนที่ 3 เราจะต้องเอาไปกำหนดไว้ที่ส่วนนี้นะคะ เพราะอะไร เพราะหลักการเขียนโปรแกรมน่ะ โปรแกรมมันจะทำงานแบบเรียงคำสั่ง นึกออกไหม จากคำสั่งแรกลงไปหาคำสั่งสุดท้ายนะ เหมือนตอนที่เรียนในเทอมที่แล้ว อัลกอริทึม มีเริ่มต้นก็ต้องมีสิ้นสุด จำ Flowchart ได้นะ ตัวเริ่มมันจะอยู่บนสุด แล้วก็ไล่ลงมา เห็นไหม ผังงานมันจะเรียงลงมาตามลำดับ ไม่ใช่ เขียนกระโดดไปกระโดดมามันไม่ใช่ ไม่อย่างนั้นคอมพิวเตอร์มันจะงง เวลาทำงาน เหมือนเราน่ะ ถ้าเกิดแม่สั่ง บอกทำอันนี้เสร็จ บอกเปลี่ยนไปทำอันนี้นึกออกไหม มันก็จะงงใช่ไหมคะ คอมพิวเตอร์ก็เหมือนกัน ก็เหมือนคนนั่นแหละ มันไม่ใช่ว่าสั่งอย่างหนึ่ง แล้วมาสั่งอีกอย่างหนึ่งเพิ่ม ลัดไป ลัดมา งงตายนะคะ เพราะฉะนั้น ก็เลยทำให้ดูเป็น Box Box นี่ ให้รู้ว่ามันเป็นส่วน ๆ อย่างนี้นะคะ และมีเสียงมีอะไรได้อีก มีตัวเกมที่จะเป็นตัวเดินเรื่องของเรา หรือตัวเล่นของเรานั่นเองนะคะ หรือนอกจากตัวเกมแล้ว อาจจะมีองค์ประกอบอื่น เช่น ไอ้ภาพประกอบเล็ก ๆ น้อย ๆ เช่น มีเหมือนในมาริโอมีตัวอะไรนะ ตัวศัตรูที่วิ่งเข้ามาอะไรอย่างนี้นะคะ มันจะอยู่ในส่วนนี้ เราจะกำหนดไว้ในส่วนนี้ อาจจะมากกว่า 14 บรรทัดก็ได้ ก็แล้วแต่ ว่าเราจะกำหนด ก็คือใส่อะไรลงไปนะคะ มาดูส่วนถัดมา จะอยู่ด้วยกัน 4 กับ 5 เพราะตรง 4 นี่คือ loop ก็คือส่วนของ loop กับส่วนของ event นี่ เวลาเราทำเกมนะ มันไม่ใช่ว่า เล่นรอบเดียวจบใช่ไหม เกมมันจะไปเรื่อย ๆ แต่ในรอบของมันเรื่อย ๆ นี่ อาจจะไม่ใช่รอบที่มันจบ อาจจะเป็นรอบของมันผ่านด่านที่ 1 นึกออกไหม เพื่อจะไปต่อด่านที่ 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 เห็นไหมคะ ก็คือเราก็เรียกใช้ pygame แล้วก็ตามด้วยฟังก์ชัน init() นะคะ วิธีการ ในบรรทัดต่อไปที่ต่อจาก import นะคะ ให้เด็ก ๆ พิมพ์ p-y... เอ้ย ๆ ๆ เปลี่ยนภาษาก่อน ขอโทษ เด็ก ๆ ดูนะคะ ดูก่อนนะอย่าเพิ่งพิมพ์ พอมี 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 game เราอยู่ตรงไหนนะคะ คำสั่งที่ใช้ในการทำ Loop game ของเรานะคะ ก็จะมี ตัวแรกนะคะ ตัวแรกนี่ เป็นคำสั่งในการตรวจ 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 ที่มันจะ run แล้วก็ขึ้นว่า Finish น่ะ แต่ของไอ้นี่มันไม่ขึ้นน่ะ มัน ๆ... มันน่าจะมีไวรัสน่ะ มันลงไม่ได้ บอกอยู่ว่าต้องเปลี่ยนเครื่องให้มัน แล้วเครื่องไอ้ต้ามันยังไม่ได้ลงไม่ใช่หรือ ลงแล้วหรือ ลองเรียก ลองเรียกขึ้นมาสิ ในระหว่างนั้นเพื่อน ๆ ได้หมดทุกคนแล้วนะ ไอ้มิ่งเดี๋ยวค่อยตามทีหลัง เดี๋ยวมาไล่ให้ทีหลังนะคะ พาเพื่อนทำก่อน ให้เพื่อนได้หน้าจอไว้เล่นเกมก่อน เพื่อนอยากเห็นหน้าจอมันจะเป็นอย่างไร เอ้า กดผิดอีกแล้ว เห็นไหมคะ while while แล้วตามด้วยอะไร เห็นไหมตัวแปรที่เราประกาศ เราก็ต้องเรียกมันมาใช้ เห็นไหมคะ เห็นไหมคะ ก่อนหน้า : ให้เด็ก ๆ พิมพ์ ตัวแปรที่เราเรียก เอ้ย ที่เราประกาศไปมานะคะ นี่นะคะ เราต้องใช้ตัวแปรนี้ ก็คือพิมพ์ r ปุ๊บ r-u-n ขึ้นมากด Enter เห็นไหมเด็ก ๆ จะได้ไม่พิมพ์ผิด เห็นไหมคะ while run ก็คือ ถ้าคำสั่ง run นี่ค่าเริ่มต้นเป็น True ปุ๊บ สิ่งที่จะต้องการให้มันวนลูป ก็คือให้มันวิ่ง run เห็นไหมคะ แล้วตรง pass เด็ก ๆ มาตำแหน่งนี้นะคะ ทำแถบสีตรงคำว่า "pass" เราจะลบออก แต่ตำแหน่งมันจะต้องอยู่ที่เห็นไหมคะ ตำแหน่งนี้ไม่เคลื่อนไปนะคะ คำสั่งต่อมาก็คือ while แล้วก็ตามด้วย for ค่ะเด็ก ๆ นี่ for ในที่นี้เป็น for loop ถูกต้องแล้ว กด Enter ได้เลย เห็นไหมคะ ตัว Box ถัดไปของ for ก็จะขึ้นมา ใครยังไม่ขึ้นแบบนี้ยกมือ ใครไม่ขึ้นแถบโซนนี้ 2 บรรทัดนี้ยกมือนะคะ วิธีการจำได้นะ พิมพ์ f ลงไป แล้วพอขึ้นว่า for 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 ค่ะ สังเกตถ้าเป็นนี่ สีไอ้นี่ก็จะขึ้นอย่างนี้เลย เป๊ะนะคะ ไปที่เมนู File ตี๋น้อยทำตาม แล้วก็เลือก Save As มิ่งด้วย ตรงนี้เห็นไหมลูก ใส่ . ข้างหลังชื่อไฟล์นี้ . ลงไป จุดน่ะลูก กดจุด แล้วก็ตามด้วย py แล้วก็คลิก Save ทีนี้ มิ่งลองพิมพ์ while ใหม่ เห็นไหมสีเปลี่ยนแล้ว w ขึ้น Enter เรียกใช้อะไรคะ run พิมพ์ run ไอ้มิ่ง แม่บอกว่าอย่างไร ไอ้โปรแกรมนี้ลบ ไม่ต้องรีบพิมพ์ พิมพ์แค่ตัว r ปึ๊บ พอมันขึ้นมิ่งกด Enter เห็นหรือเปล่า มันจะได้ไม่ผิด ตรงนี้ลบใช่ไหม ให้ลบออก แล้วกด f ตัว f เห็นไหม ให้ขึ้นอย่างนี้กด Enter เห็นหรือเปล่า โครงสร้างมันจะขึ้น มันจะทำให้มิ่งไม่พิมพ์ผิด มิ่งจะรู้ตำแหน่ง เห็นไหม ตำแหน่งวาง มันจะเว้นให้เข้าใจหรือเปล่า เพราะ เหมือนที่เราเรียนเทอม 1 จำได้ไหม แค่ไม่เว้นวรรค แค่ไม่ใส่ไอ้นี่ นึกออกไหม โปรแกรมก็ Run ไม่ได้ใช่ไหมคะ นะคะ Sublime มันจะช่วยให้เด็ก ๆ พิมพ์โปรแกรมไม่ผิดนั่นเองนะคะ เพราะอะไร เพราะถ้าอย่างนี้ปุ๊บนะคะ เพราะเมื่อกด while เมื่อพิมพ์ w นี่ มันมาเล็งแล้วว่าตรงนี้ใส่ค่า True นั่นหมายถึง น่าจะกำหนด loop ให้โปรแกรมนี้ มันก็เลย บอกแล้วมันก็จะไปเรียกใช้ คำสั่งในโมดูล pygame มันก็ไปเรียก while loop มา ถ้ามันขึ้นอย่างนี้ บอกแล้วกด Enter เวลาเขียนโค้ดนะคะ ไม่ต้องรีบพิมพ์ r-u-n เลย เด็ก ๆ พิมพ์แค่ r ถ้ามันขึ้น run Enter เหมือนตัวนี้เหมือนกัน ไม่ต้องพิมพ์คำว่า while เด็ก ๆ พิมพ์ w ตัวเดียว ถ้ามันขึ้น 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 แล้วก็ตามด้วยวงเล็บเปิด... ไม่ใช่วงเล็บเปิดหรือวงเล็บปิด ต้องมี underscore ก่อน underscore ก็คือขีดล่างก่อน ใส่ขีดล่างนะคะ จะไปใช้ฟังก์ชัน ที่ชื่อว่า 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 เล็ก กินยาละมึน ไม่ดี มันเป็นอย่างนี้นี่เอง t เล็กนะคะ QUIT ถึงจะใหญ่ โอเค ท่อง ๆ ๆ t y-p-e .type วรรคแล้วก็ = 2 ตัว == py เลือก pygame นะคะเด็ก ๆ p pygame.Q ตัวใหญ่ค่ะ Q-U... .QUIT เห็นไหมคะ () เสร็จแล้ว ถูกต้องไหมล่ะ ไม่ใช่สิ พิมพ์อะไรผิดแน่ ๆ เลย สอนแบบป่วย ๆ นี่มันเป็นอย่างนี้นี่เอง Q-U-I-T Q-U-I-T ตัวใหญ่ทั้งหมดนะคะ pygame.QUIT 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 นี่คือค่าของ... ก็คือถ้าเป็นกรอบสี่เหลี่ยม แล้วมันจะมีส่วนของ title ก็คือชื่อจอ หรือชื่อพื้นที่นั้นนะคะ height height นั่นก็คือความสูง width คือ ความกว้าง ก็คือเราจะต้องกำหนดค่าความสูง กับความกว้างของกรอบให้มันนะคะ แล้วก็กำหนดชื่อให้มันด้วย ในหน้าจอหนึ่งหน้าจอนี่จะมีองค์ประกอบ อยู่ในแกน x แกน y พวกนี้นะคะ ตัวแปร x ตัวแปร y นี่ ก็คือ ค่าความสูง ความกว้างนั่นเองนะคะ ทีนี้ถ้าตัวแปร x นั่นหมายถึงตำแหน่งของแกน เอ้ย ของความกว้าง ถ้าตัวแปร y หมายถึงตำแหน่งของความสูงนะลูก นี่ y อันนี้ x เห็นไหมคะ อธิบายไว้ว่าให้ y คือ ความกว้างของหน้าต่าง ให้ h คือ height มาจาก height คือ ความสูง flags จะเป็นการตั้งค่าคุณสมบัติของหน้าต่าง ซึ่งจะมีค่ากับตามตาราง เดี๋ยวจะให้ดูนะคะ ค่าตามตารางคืออะไร วิธีทำก็คือเราจะต้อง กำหนดตัวแปรให้หน้าต่างนี้นะคะ แล้วก็ตามด้วยเครื่องหมายเท่ากับ คำสั่งนะคะ ก่อนอื่น ก็คือประกาศตัวแปรหน้าต่างนี้นะคะ แล้วก็ตามด้วย กำหนดค่าให้ตัวแปรนี้ว่า pygame.display.set_mode ในวงเล็บ resolution resolution ก็คือ ความละเอียดของจอนะคะ แล้วก็เท่ากับเท่าไร เท่ากับความกว้างแล้วก็ความสูง w คือ ความกว้าง height คือ ความสูง ก็คือให้เขียนหมายเลขกว้างเท่าไร สูงเท่าไรลงไป แล้วก็ ถ้าใส่ flags flags บอกว่าเป็น ค่าคุณสมบัติของหน้าต่างนะคะ ที่มีค่าตามตาราง ซึ่งค่า flags ก็คือนี่ เห็นไหมคะ ถ้าเลือก flags ว่า pygame.FULLSCREEN มันจะเปิดหน้าต่างแบบเต็มจอ ถ้าเลือก flags ว่า pygame.DOUBLEBUF นะคะ ก็คือจะมีค่าตามนี้ ที่เขียนไว้นี่ ถ้าบอกว่า pygame.OPENGL หมายถึงให้มัน ไปเปิด Library ที่ชื่อ 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 ก็คือความกว้างของหน้าจอนะครับ 800 แล้วก็ height 600 (800, 600) เดี๋ยวจะ run แล้วนะครับ เช็ก ก่อนจะ run เราจะเช็กคำสั่งก่อน ว่าเราถูกหรือเปล่า (800, 600) กด Ctrl + B โอเค ลอง Run แล้วนะครับ เวลาสั่งให้ Run อยู่ตรงนี้นะ tool นี่เห็นไหมคะ B แต่เราจะไม่… เอ้ย Build เราจะใช้คีย์ลัด ก็คือกดปุ่ม Ctrl แล้วก็ตามด้วย B เมื่อกี้มันขึ้นมาแล้วนะ แล้วมันหาย มันไม่ได้หายนะ เด็ก ๆ ดูดี ๆ เดี๋ยวนะ ขอย่อหน้าต่างนี้ก่อน ไปไสล่ะ ย่อจนได้เรื่อง [เสียงหัวเราะ] เมื่อกี้มันขึ้นมาแป๊บหนึ่งนะ เดี๋ยวนะ เดี๋ยวนะ ถ้าใครไม่ขึ้น เห็นหรือเปล่า เห็นหน้าต่างตัวเองหรือยัง ไปกดโดนอะไรนี่ Ctrl + B ใหม่อีกรอบก็ได้ เห็นไหม มันขึ้นมาแป๊บเดียว ดูดี ๆ นะ คำสั่ง get get ผิดหรือ module ‘pygame event’ has no attribute ‘get_’ Did you mean: ‘get’? ทำไมไอ้นี่มันขึ้นมาเยอะแท้นะ นี่ ๆ ๆ มันบอกตรงนี้ผิด get อะไรล่ะ บรรทัด for เราผิดหรือ ไปไหนแล้ว มันเลยหลุดตรงเงื่อนไขน่ะ ตรงเงื่อนไขมันหลุดออกไปนะคะ แป๊บหนึ่งนะคะ ย้อนกลับสิครับ รออะไร โอเค รู้แล้ว เราผิดเองล่ะ แล้วทำไมมันขึ้น _ เดี๋ยวนะ ขอแก้ Ctrl + B ขอโทษที นี่ตรง get เด็ก ๆ เอาไอ้ขีดล่างออกนะเด็ก ๆ ขีดล่างอย่างนี้ออก ตรงคำสั่งนี้เห็นไหมคะ for event ตรง loop น่ะค่ะ เพราะหน้าต่างมันจะต้องขึ้นมาอย่างนี้เห็นไหม จะได้ขนาดหน้าต่าง ใครยังไม่ได้หน้าต่าง ไปแก้ที่บรรทัดนี้ สไลด์เราผิดนี่เอง ไม่เป็นไร เดี๋ยวก๊อบปี้โค้ดบรรทัดอื่นมาใส่ [เสียงหัวเราะ] เอาไว้แก้สไลด์ โอเคนะคะ ใครยังไม่ได้หน้าจอ ยกมือ มิ่งมาดูบรรทัดที่ 11 สิลูก .get เอาไอ้ขีดล่างนี่ออก นี่ ๆ ๆ ลบออก ลบหรือยัง อย่างนั้นไปดูบรรทัดนี้ screen ครบไหม pygame.display.set_mode ขนาด 800 x 600 กด Ctrl + B ดูหรือยัง กดปุ่ม Ctrl แล้วก็ตามด้วย B Ctrl ค้าง แล้วก็ B ขึ้นไหม โอเค สังเกตหน้าจอ มันจะมีรูป... มันจะมีคำว่า "pygame windows" ข้างบนเห็นไหม ใครยังไม่ได้จอนี้ยกมือ เครื่องใคร เครื่อง 2 จุดที่จะแก้ดูนะครับ ตรงคำสั่ง for นะ ตรง... ตรง get นี่ นี่ ๆ ๆ เอาเครื่องหมาย _ ออก อุบลออกแล้วใช่ไหม ออกไหมครับ โอเค 2 คนนั้นออกไหม โอเค แสดงว่าตามทัน ไหน ยังไม่ได้ไอ้นี่เข้าไปใช่ไหม นี่พิมพ์ไอ้นี่หรือยัง ไปที่ Command เครื่องกุ้งเต้นน่ะ เครื่องไอ้กุ้งเต้นน่ะ เปิด Command prompt แล้วพิมพ์ pip install pygame แล้วกด Enter มันจะต้อง Install ก่อน ยังไม่ Install pygame มันเลยบ่ฮู้จัก โอเคนะครับ ตอนนี้ทุกคนจะได้หน้าจอ ของตัวเอง 1 อันแล้ว สิ่งที่เราจะทำต่อมานะครับ นะครับ นะครับ เราจะกำหนดชื่อให้มัน เห็นไหม ตรงนี้มันจะมีคำว่า "pygame window" มันเป็นชื่อที่โปรแกรมมันตั้งนะ ทีนี้เกมเรา ตอนนี้ให้เด็ก ๆ คิด ว่าจะทำเกม แล้วจะตั้งชื่อเกมเราว่าอะไร เพราะฉะนั้น สิ่งที่เราจะเปลี่ยน ก็คือตรงนี้ ชื่อตรง pygame window นี่ ก็จะกลายเป็นชื่อเกมของเรานะคะ คำสั่งที่จะใช้เป็น pygame.display.set_caption แล้วก็ตามด้วยข้อความนะคะ ตัวนี้ เดี๋ยวย่อลงก่อน อันนี้ ๆ ตั้งชื่อว่า Fish Game นะคะ แต่เด็ก ๆ ให้นึกถึงนะ ตรงชื่อตรงนี้ ก็คือชื่อเกมของตัวเองน่ะ ตัวเองจะตั้งชื่อเกมว่าอะไร อันนี้ วันนี้ชื่อเกมเราจะชื่อ... เราจะตั้งชื่อมันว่า Tiggy Game นะครับ Tiggy ที่แปลว่าเสือ เสือน้อย เสือน้อย เกมเสือน้อยนะครับ ของเด็ก ๆ จะตั้งชื่ออะไร แล้วค่อยมาเปลี่ยนก็ได้ หรือจะเอาตามที่แม่ตั้งก่อนก็ได้นะ โอเคไหมนะคะ ตัวนี้เราสามารถมาเปลี่ยนชื่อทีหลังได้ เราก็แค่มาพิมพ์ตรงที่มันมีเครื่องหมายคำพูดนี่ ตรงนี้มันก็จะเปลี่ยนตามที่เราเปลี่ยน โอเคนะ เพราะฉะนั้น เราก็จะไปต่อที่บรรทัดที่ต่อจาก screen นะคะเด็ก ๆ ก็คือบรรทัดที่ 7 พิมพ์ pygame pygame Enter .dispaly เหมือนกัน d เห็นไหมคะ เลือก display นะคะเด็ก ๆ จะได้พิมพ์ไม่ผิด .set set เหมือนกันค่ะ แต่เปลี่ยนจาก set_mode เป็น set caption c-a-p-t-i-o-n แล้วก็ใส่วงเล็บ เครื่องหมายคำพูดค่ะ เพราะว่าเป็นข้อความ แล้วก็ตามด้วยชื่อ ชื่อเกมที่เราจะต้องการ ให้มันแสดงตรงหน้าจอนะคะ ซึ่งในที่นี้แม่ตั้งชื่อมันว่า Tigger เอ้ย Tiggy Tiggy Game เขาจะตั้งชื่อนี้ ใครจะทำไม เกมเสือน้อยนั่นเองนะครับ แปลเป็นไทย Tiggy แปลว่าเสือน้อย มาจาก Tiger นั่นเองนะคะ อยากรู้ เปลี่ยนไหม กดอะไร Build Ctrl + B เสมอ กด Ctrl แล้วก็ตามด้วย B นะคะ ชื่อตรงนี้ก็จะเปลี่ยนเป็นเห็นไหมคะ Tigger Game เอ้ย Tiggy Game เหมือนกันแล้ว เห็นหรือเปล่า เห็นหรือเปล่า ไอ้ตัวรูปตรงนี้ก็เปลี่ยนได้นะเด็ก ๆ icon นี่เปลี่ยนได้ มีรูปหรือเปล่า ใครมีรูปไว้แล้ว หารูป icon มาใส่ได้นะครับ ใครยังไม่เปลี่ยน ชื่อยังไม่เปลี่ยน ดู ๆ ดูตรงนี้ ชื่อตรงกับในวงเล็บที่เราเขียนไว้ไหม เห็นหรือเปล่า เห็นหรือเปล่า เปลี่ยนหรือยังครับ เห็นหรือเปล่าครับ เห็นหรือเปล่าครับ เห็นหรือเปล่าครับ นี่เป็นอย่างนี้ จะเปลี่ยน icon หรือเปล่า ถ้าเปลี่ยน เด็ก ๆ ต้องไปหารูป icon ก่อน เปิด... เปิด Google แล้วก็พิมพ์คำว่า “icon" นะคะ เวลาจะเอาของเขามาใช้ เราจะต้องยึดหลักว่า ต้องเป็นของที่เขาให้ใช้ฟรี ต้องเป็น free download เท่านั้น d-o-w-n-l-o-a-d ให้ใช้คำว่า "free download" แล้วก็ตามด้วย icon i-c-o-n ใส่เครื่องหมายบวก เพื่อจะระบุภาพ icon ที่เราต้องการ เช่นภาพ Tiger Tiggy หรือ Tiggy อะไรก็แล้วแต่ มันก็จะแสดงโลโก้พวกนี้ขึ้นมานะเด็ก ๆ icon ขึ้นมา อยากได้เสือน่ะ ของเราเป็น... เราจะทำเกมเสือ เราก็เลยใช้คำว่า "Tiger" นี่เห็นไหม เราได้แล้วน่ารักมุ้งมิ้ง เอาแค่หน้าน้องก็พอ หรือจะเอาทั้งตัวก็ได้นะครับ อย่าลืมว่ามันต้องดาวน์โหลดได้ฟรีนะเด็ก ๆ ไม่ฟรีไม่เอานะ เอาไอ้หน้ามีกากบาทนี้เหรอ เห็นไหม นี่ไง ๆ มันก็จะขึ้น Free animal icon เข้าชมเลยครับ อย่างนี้ให้ฟรีแล้ว เห็นไหม Free Pic ใช่แล้ว เลือก Free Download ได้แล้วนะครับ ไฟล์ไอคอนที่เราดาวน์โหลดมาได้ ให้เอาไปเก็บไว้ในโฟลเดอร์ที่เราสร้างไว้น่ะลูก จำได้ไหม นี่นะ Test โปรแกรมเราอยู่ที่ Drive C: นะ จำไว้นะ เพราะฉะนั้น ตัวดาวน์โหลดอยู่ไหนล่ะ อยู่ไหน Download ต่อไป เอาไว้ที่ C: เกมเขาอยู่ไหนน่ะ Game Image น่ะค่ะ จะเอาไปใส่ในนี้ โอเค ตอนนี้เราจะ เปลี่ยน icon ให้มันนะครับ คำสั่งที่จะใช้นะคะ ก็คือคำสั่ง... ก่อนอื่นเราจะต้องประกาศตัวแปร icon ก่อนนะคะ แล้วก็ตามด้วยคำสั่ง pygame.image.load เพื่อจะไปโหลดไฟล์นั้นมา นะคะ แล้วก็ตามด้วยชื่อไฟล์ แล้วก็นามสกุลมัน ทีนี้เด็ก ๆ จะรู้ได้อย่างไร ว่าไฟล์ตัวเองนามสกุลอะไร วิธีการ คลิกไปที่ไฟล์ที่เราไปโหลดมาอยู่ไหนเอ่ย เก็บไว้ไหน ไว้ในโฟลเดอร์ตัวเองใช่ไหมคะ ที่สอนไว้ คลิกขวาแล้วเลือก Properties เห็นไหมคะ นามสกุลอยู่ตรงนี้ Type of file เช่น png เพราะฉะนั้น นามสกุล แต่ละคนที่โหลดมา บางคนอาจจะเป็น jpg นึกออกนะ เพราะฉะนั้น เช็กนามสกุลโดยการคลิกที่ ไฟล์ Icon ที่เราไปโหลดมา คลิกขวาแล้วเลือกคำว่า "Poperties" นะลูก แล้วให้ดูที่ Type of file นะคะ มันจะมีชื่อ... เอ้ย ไม่ใช่ชื่อ มันจะมีนามสกุลของไฟล์ขึ้นมานะคะ png file jpeg 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.load ชื่อไฟล์ใช่ไหม tiger ชื่อไฟล์ไอคอนที่เราไปโหลดมานะคะ ตามด้วยนามสกุล ก็คือ .png โหลดแล้ว โหลดแล้วก็เรียก ตามด้วยคำสั่ง pygame อีก .display display นะคะ .set แต่ไม่ใช่ set_caption แล้วก็ไม่ใช่ set_mode แต่จะเป็น set_icon ค่ะ แล้วก็ตามด้วยวงเล็บ ในวงเล็บก็คือชื่อของ icon ที่เรา... ชื่อตัวแปร icon นั่นเองนะคะ Enter กด Ctrl + B ให้เครื่องมันตรวจผิด เดี๋ยวมัน Error มันจะขึ้นเอง นั่นไง C: บรรทัดที่ 8 in <module> บอกว่าตัวนี้ มันบอกว่าหาไฟล์ไม่เจอ เดี๋ยวตัวเองตั้งชื่อผิดหรือ ย้อนกลับไปดู เอ้ย ถูกแล้ว tiger Ctrl + B ใหม่ name ‘tiger’ is not defined. Did you โอ๊ะโอ รู้แล้วผิดอะไร ใส่เครื่องหมายคำพูด backslash อยู่ไหนนี่ โอเค icon icon เด็ก ๆ เอาไว้ไหนครับ โฟลเดอร์ตัวเองอยู่ไหน เห็นไหม เอาไว้ด้านนอกก่อนนะ ตัวนี้คือไฟล์โปรแกรมที่เราเขียนใช่ไหม test นี่ แล้วส่วน tiger นี่คือชื่อไฟล์ icon เห็นหรือเปล่าครับ ใครยังไม่ได้ชื่อกับรูปโลโก้ ยกมือ ของใครไม่ขึ้น ยกมือ บางคนนะคะ ถ้ามันขึ้นว่า file location อะไรน่ะ หาไม่เจอน่ะ 1. รูปอยู่ตำแหน่งไหน นึกออกนะ ให้เรายึดที่ไฟล์โปรแกรมที่เราเก็บ เพราะอะไร โปรแกรมเราอยู่ตรงไหนนี่ เวลามันหาน่ะ มันจะไปตามที่โปรแกรมเราอยู่ นึกออกไหม เพราะฉะนั้น รูปมันจะต้องไปอยู่ ในโฟลเดอร์กับโปรแกรมเราอยู่นะคะ หลักการง่าย ๆ ไม่มีอะไรพิสดาร ตำแหน่งรูปภาพ ไฟล์รูปภาพ ก็ต้องไปอยู่กับที่ไฟล์โปรแกรมเราอยู่นะลูก ทีนี้บางคนนะคะ ชื่อไฟล์ภาพตัวเองน่ะ ตรงนี้ ตรง image.load แล้วก็ไอ้ tiger.png ไอ้ tiger.png มันคือชื่อไฟล์รูปแม่นะคะ ชื่อไฟล์รูปของเด็ก ๆ ชื่ออะไร ต้องเปลี่ยนชื่อเป็นชื่อไฟล์รูปตัวเองนะลูก ไปเรียก tiger.png มันก็ไม่เจออยู่แล้ว มันก็ไปหา tiger.png อยู่ไหนล่ะ ให้เด็ก ๆ ดูว่าไฟล์ชื่อรูปตัวเองชื่ออะไร ขนาดมีเลขบรรทัดยังโค้ดผิดนะคะ ดูเช็กเลข แม่ก็อุตส่าห์บอกนะ ให้ไล่ไปตามเลขบรรทัด พยายาม จะได้ดูง่าย ๆ ดูเลขบรรทัดใช่ไหม แล้วก็มาดูข้อความ ดูคำสั่งที่อยู่ในบรรทัดนั้นด้วย พยายามบอกว่าตอนนี้เด็ก ๆ จะอยู่บรรทัดไหน เพื่อเวลาถ้าผิดมาเห็นไหมจะได้เช็กได้ว่า ตรงกับโค้ดที่เราเขียนไหมนะคะ เมื่อกี้เลขบรรทัดนี้อยู่ แต่ตัวคำสั่งตรงท่อนนี้ผิดหมดเลยนะคะ ดันไปเอาคำสั่งจากท่อนนี้มาใส่บรรทัดนี้ มันก็เลยผิด ๆ ๆ เดี๋ยวสัปดาห์หน้า Part ที่ 2 อย่างนั้นสัปดาห์นี้เราจะพอแค่นี้นะคะ แม่มีธุระไปทำต่อ เราได้หน้าจอแล้วนะ สัปดาห์หน้า เราจะ... คือ หน้าจอดำ ๆ นี่ มันก็เปลี่ยนสีได้ แต่เรา... เราไม่ใช้สีนะ เราจะไปหารูปใช่ไหมคะ เด็ก ๆ หารูปไว้แล้วหรือยัง รูป Background จอที่จะใช้มาลงนะคะ เอาไว้ต่อสัปดาห์หน้า คือ จอดำ ๆ นี่มันเปลี่ยนสีได้นะ แต่วันนี้ยังไม่พาทำ เดี๋ยวสัปดาห์หน้าค่อยมาทำต่อ เดี๋ยวเราจะพาลองเปลี่ยนสีก่อน แล้วค่อยเปลี่ยนเป็นรูปใส่นะ เอาไว้สัปดาห์หน้านะคะ ใครที่ยังไม่ได้หารูป ท้ายชั่วโมงว่างหารูปไว้นะคะ แล้วเอาไฟล์รูปไปไว้ที่ไหนจำได้ไหม ต้องเอามาไว้ที่โฟลเดอร์ ที่เราเขียนโปรแกรมนะเด็ก ๆ ไม่อย่างนั้นเดี๋ยวสัปดาห์หน้า ไฟล์รูปอยู่อีกโฟลเดอร์หนึ่ง พอเขียนโปรแกรม สั่งให้ไปเอารูปมาใช้ ก็จะหาไม่เจอ เพราะฉะนั้น โยกรูปมาใส่ไว้ในโฟลเดอร์ตัวเองด้วยนะคะ โฟลเดอร์ที่เราเขียนโปรแกรมอยู่ที่ไหน จำได้หรือเปล่าคะ Drive อะไร Drive C: นะคะเด็ก ๆ นี่ แล้วก็ชื่อโฟลเดอร์ของเราใช่ไหม เพราะฉะนั้น รูปภาพที่เราหาไว้นะคะ ต้องเอามาใส่ในโฟลเดอร์ที่อยู่ โฟลเดอร์ที่เราเขียนโปรแกรม ที่เราสร้างไว้ที่ Drive C: นะเด็ก ๆ นะ เอามาไว้ที่ Drive C: นะลูกนะ ให้ดูง่าย ๆ ไฟล์ Test เรา ชื่อไฟล์โปรแกรมเราอยู่ที่ไหนน่ะ รูปภาพอยู่ด้วยกันน่ะแหละ เอามาอยู่ด้วยกันโอเคนะ มันจะได้หากันเจอนะคะ โอเคค่ะ อย่างนั้นสัปดาห์นี้จะพอแค่นี้ค่ะ สวัสดีค่ะ ขอบคุณพี่ล่ามนะคะ เจอกันสัปดาห์หน้าค่ะ ขอบคุณค่ะ [สิ้นสุดการถอดความ]