--- title: การเขียนโปรแกรมคอมพิวเตอร์ ปี 1 subtitle: date: วันอังคารที่ 14 ธันวาคม 2564 เวลา 13.00 น. --- (ข้อความสดจากระบบถอดความเสียงพูดทางไกล) (พี่การ์ตูน) สวัสดีค่ะ สวัสดีค่ะ อ. แม่ ค่ะ ได้ยินค่ะ (อาจารย์สุธิรา) ... เรียบร้อยSublime อยู่ไหนเอ่ย เราเอาไว้ที่ Drive C : แล้วหา Sublime เปิดไว้ เปิดอันเก่าหรืออันใหม่ เปิดไว้ก่อนยังไม่บอกนะคะ อันดับแรก ก็คือเปิดโอเค ไม่เป็นอะไร เดี๋ยวสร้างใหม่ Google นะคะ 1 อัน แล้วอีกอันหนึ่งก็คือ Sublime เวลาเราจะหาโปรแกรมที่เราจะใช้นี่ ถ้าจำไม่ได้ ตัวช่วยก็คือแว่นขยายนะ ไปที่แว่นขยายเลยแล้วก็พิมพ์ชื่อโปรแกรมที่เราจะหานะคะ เป็นตัวอะไรล่ะนี่ S-u-b-แม่ไม่ได้ติดตั้งหรือ ติดตั้งแล้วไม่ใช่หรือ ไม่อย่างนั้นจะ Run โค้ดได้อย่างไรล่ะ เราว่าเราติดตั้งแล้วนะ นี่ไง Sublime Text ตัวสีส้ม ๆ นี่นะคะ โอเคนะคะ ตอนนี้เด็ก ๆ ต้องเปิด Google เปิด Google เพื่ออะไร ก่อนที่เราจะเข้าไปเรียนนะคะ เราต้องการภาพที่จะใช้มีอยู่ 2 อัน 1. คือ หา Icon นะคะ เป็น Icon กับอีกอันหนึ่ง ภาพที่ 2 ก็คือ Backgraภาพที่จะเอาใช้เป็นพื้นหลัง เพราะฉะนั้น เข้ามาใน Google ก็คือให้ค้นหาภาพ เวลาเราจะนำภาพมาใช้นี่ ถ้าไม่อยากมีปัญหาเราต้องพิมพ์คำว่าอะไรเข้าไปด้วย "ฟรี" นะคะ Free Download พิมพ์คำว่า "ฟรี" แล้วตามด้วยดาวน์โหลดนะคะ ตัวแรกเราจะหาไอคอนก่อนนะ เพราะฉะนั้น Icon นะคะ F-r-e-e แล้วก็ d-o-w ดาวน์โหลดขึ้นมาแล้วนะคะ แก้จาก Manager เป็น Icon Icon ก็คือ I-c-o-n ไอคอนมันก็จะเป็นรูปเล็ก ๆ น่ะค่ะ เอาไว้ ตัวนี้จะเอาไว้ทำ คือ ถ้าพูดถึงเหมือนจะเป็นลักษณะโลโก้ของเกมเราน่ะ มันเลยจะใช้ไอคอนถ้าใครพิมพ์เสร็จแล้วกดอะไร กด Enter นะคะ ตัวเล็กไปหรือเปล่านี่ เดี๋ยวขยายให้ พิมพ์ Free นะคะ F-r-e-e เห็นไหมเห็นหรือยัง แต่จะไม่เห็นพี่ล่าม เอาใหม่ ๆ ๆ พี่ล่ามหายไปเลย ตกจอ เดี๋ยว ๆ ขยายหน้าต่างเราก็ได้ โอเคไหม เห็นแล้วนะ จะได้เห็นชัด ๆ นะคะ พิมพ์ให้ถูกนะคะ f-r-e-e-d-o-w-l-o-a-dเลือก เลือกรูปไอคอนที่จะเอามาใช้ 1 อัน ให้เลือกภาพรูปที่จะใช้ ดูนามสกุลด้วยนะลูก นามสกุลควรจะเป็น .png นะคะ นามสกุล ก็คือรู้จักไหม รู้จักนามสกุลไหมนะคะ ไฟล์ภาพนั้นจะต้องมีนามสกุลเป็น .png นะคะ เพราะฉะนั้น ถ้าให้หา Background ก็เหมือนกันนะลูก หาไฟล์ที่เป็นนามสกุล .png ใครหาไอคอนเสร็จแล้วเอาไปไว้ไหน เก็บไว้ที่โฟลเดอร์ที่สร้างไว้ในสัปดาห์ที่แล้ว จำได้นะคะ โฟลเดอร์ที่เราสร้างไว้น่ะ ที่บอกว่าให้ตั้งชื่อโฟลเดอร์เป็นชื่อของเด็ก ๆ ใช่ไหมคะ นั่นล่ะ ต้องเอาไปเก็บไว้ที่นั่นนะ เพราะอะไร เพราะเราเขียนโปรแกรม เวลาโปรแกรมมันจะหารูปมันก็จะไปตามโฟลเดอร์ที่เราระบุไว้แล้วนะคะ หายใจไม่ออก เมื่อพิมพ์เสร็จแล้วกด Enter พิมพ์เสร็จหมดทุกคนหรือยังคะ พิมพ์เสร็จแล้วนะคะ จะกด Enter แล้วนะ เราไปโดนอะไรนี่ เวลาจะดู ถ้าขึ้นอย่างนี้มันเป็น List ใช่ไหมคะ เด็ก ๆ คลิกที่คำว่า "ค้นรูป" เห็นไหม มันจะได้เห็นเลยว่าเราจะเอารูปไหน นี่รูปเล็ก ๆ นี่ ที่เป็นไอคอนนี่ ถ้าอยากได้สี เด็ก ๆ ก็เลื่อนไปนะคะ หาที่เป็นรูปสีก็ได้ แต่อย่าลืมว่าให้มีนามสกุลเป็น .png เยอะแยะเลยนะคะ เลือกเอา 1 รูปนะ เด็ก ๆ อยากได้รูปไหน ยังนึกไม่ออกก็เอามาเสียก่อน 1 รูป สมมติ ๆ สมมติเหมือนตอนนี้อยากได้รูปเราจะเอารูปใบไม้นี่นะ อยากได้รู้ใบไม้แล้ว freepick เลือกให้ได้ 1 รูปนะคะ ตามใจเลยนะ เลือกตามใจชอบตัวเองเลยนะคะ ใช่ ๆ นามสกุลควรจะเป็น .png ช้าจัง ก็ถ้าไม่ใช่ png ก็จะเป็น jpg อีกอย่างหนึ่ง ตัวไหนดีนะ ไม่เอา ยังไม่เจอรูปที่ถูกใจอย่าลืมนะคะ ว่าเอาไปเก็บไว้ที่โฟลเดอร์ที่เราสร้างไว้ด้วย เอาไอคอนอะไรดี เอาไอคอนอะไรดี ไอคอนนึกไม่ออกมันเยอะก็บวกไป สมมติ บวกอะไร สมมติอยากได้ใบไม้ก็เป็น L-e-a... อยากได้ไอคอนเป็นูปใบไม้ว่าอย่างนั้นเถอะนะคะ ก็เลยหาคำว่า "Leaf" ก็คือใส่ชื่อเข้าไปมันก็เจาะจงไงว่าเป็นไอคอนอะไรอย่างนี้ สมมติอยากได้ยูนิคอร์นก็เลยหาคำว่า "ยูนิคอร์น" นะ ตอนนี้อยากได้ยูนิคอร์น เอาตัวนี้ดีกว่า เราก็เอารูปเล็ก ๆ หน่อยนะคะ แล้วก็คลิกดาวน์โหลด ไม่เอา ติดน่ะ ไม่ยอมให้โหลด ไปเอาอันนี้ก็ได้ ใช่ ดูด้วยนะคะ ดูชื่อไฟล์ด้วยนะ โหลดไฟล์อะไรมา ไม่เอา อันนี้มันไม่ให้น่ะ มันต้องให้ใส่... ไม่อยากใส่ up นี่นะ ได้รูปแล้วอย่าลืมเอา Background ด้วยนะคะ Icon แล้วก็ BackgroกBackground ด้วยนะ ตอนนี้เราได้ยูนิคอร์นแล้ว ไอคอนแล้วนะคะ ต่อไปเราจะหา Background Background เป็นอะไรดี เราก็ลบตรง Free icon ออก แล้วก็พิมพ์คำว่า "Background" ไปแทน ฺB-a-c-k-g-r-o-u-n-d ยูนิคอร์นมันต้องจะพิมพ์ Rainbows นะคะ สมมติเป็นรูปท้องฟ้า ก็พิมพ์ Sky Rainbows สมมติเราจะเอานี่ ก็คืออยากได้ Backreound เป็นรูปอะไร เราก็พิมพ์ของรูปที่เราต้องการน่ะ เอารูปไหนดี สวย ๆ ๆ ใช่ ๆ ๆ ๆ เอารูปไหนก็ได้แล้วแต่จะเลือก อย่างเยอะ เอาอันไหนดี ๆ เอาอันนี้แล้วกัน ให้ Buy หรือ ไม่ Buy ถ้าบอกซื้อ เราก็ไม่เอานะ ไปหาของฟรีต่อ ฟรีนะ ๆโอเคหรือยังคะ นี่ เห็นไหม เหมือน I Stock นี่ฟรีแน่นอน คลิกเลยนะคะ อย่ารอช้า Free ครับ Free เรียบร้อย ดาวน์โหลดเสร็จแล้ว ของเด็ก ๆ เสร็จหรือยังคะ ไม่ได้ เอาเสียก่อน เลือกมาสัก 1 รูป อย่าคิดเยอะ ๆ อย่าลืมนะคะ ต้องเอาไปไว้ที่โฟลเดอร์ที่เราสร้างไว้สัปดาห์ที่แล้ว โอเคหรือยัง พร้อม ไหนใครเสร็จแล้วบ้าง ยกมือ 1, 2 ยังไม่เสร็จ ทำไมคิดเยอะ เลือกเอา 1 รูป พิมพ์ว่า... ให้ค้น นี่เด็ก ๆ ต้องพิมพ์ Google เพื่อ Seach 2 ตัว Background กับอะไรนะ Icon อันแรกเสร็จหรือยัง อันที่ 1 ทำไมมันไม่ขึ้น ใน Google นะคะ ว่า ... เราต้องหาภาพ Icon ใช่ไหม ได้หรือยัง เสร็จหรือยัง Background นี่ อันที่ 2 นี่เอาไว้ทำภาพพื้นหลังน่ะ เลือกรูปอะไรก็ได้ที่เป็น Background ที่เด็ก ๆ จะเอามาเป็น Background ไม่ต้องคิดเยอะ เลือกอันไหนอันหนึ่งมาก่อนก็ได้ ถ้านึกไม่ออก เห็นรูปไหนเอามาก่อนเลยนะคะ คือ ตอนนี้จะให้ลองไงว่าถ้ามีรูปแล้วจะให้วางแล้วทีนี้หลังจากนั้นเด็ก ๆ ค่อยเปลี่ยน ใส่ลงไปแล้วไม่พอใจค่อยเปลี่ยนนะคะ เพราะฉะนั้น พอเปิดเจอปุ๊บโหลดมาเลย 1 ภาพ เลือก 1 ภาพทั้ง Background และไอคอน เพราะมัวแต่มานั่งเลือก เดี๋ยวจะไม่ได้เขียนโปรแกรมต่อนะคะ ตอนนี้คืออยากให้เลือกภาพใดมาเลยก็ได้ไม่ต้องเลือกมากเอามาเลยเห็นรูปไหนก็หยิบมาเลย เซฟมาเลย เอาเลยนะคะ จะได้ไปต่อได้ แล้วทีนี้ค่อยไปเปลี่ยนเองทีหลังโอเคไหม พอใส่เข้าไปแล้ว พอเห็นแล้ว มันมาอยู่ในหน้าจอที่เราสร้างแล้วมันไม่สวย รู้วิธีแล้วว่าจะหาภาพมาแทนกันอย่างไรนะคะ ให้เวลาอีก 5 นาที ทุกคนจะต้องได้ทั้ง Icon แล้วก็ Background เพื่อไม่ให้เป็นการเสียเวลาเราจะ Fix เวลา เดี๋ยวเราจะถามไปทีละคนนะคะ ไไม่ได้เปิดระบบหรือระบบเลยนี่ เขียดเสร็จหรือยัง เสร็จหรือยัง โอเค เสร็จแล้วนะ เขียดเสร็จแล้ว 2 คนนี้เสร็จแล้ว พายุ... เสร็จแล้ว บิว พอดีอบเปิดเครื่องอบ อบเสร็จหรือยัง ไม่ดูเลย เห็นไหมนี่ ตัวเองโดนเรียกนี่ เสร็จหรือยัง ยังทำหน้างงว่าทำไมมีรูปตัวเองขึ้น ดูพี่ล่าม อบมองพี่ล่าม ตกใจหน้าตัวเองหรือ อบมองพี่ล่าม พี่ล่ามถาม งงเลย ตอนนี้ ๆ แม่ถามอบดูในจอตัวเองก็ได้ ดูในจอที่เครื่องก็ได้เหมือนกันได้ทั้ง 2 เลือก ๆ งง ๆ งงเลย ทำไมเห็นมีอยู่ 2 นี่ เปิดนะคะ ทุกคน ทุกคนจะต้องเปิดเพราะเวลาแม่จะถามนี่ แม่ก็จะจิ้มไป ใครที่ถูกถาม ใครที่โดนถาม แม่ถามคนไหนแม่ก็จะสวิตซ์ไปหาคนนั้น หน้าคนนั้นก็จะอยู่บนหน้าจอ เข้าใจไหม จะได้รู้ไงว่าถามใครใช่ไหม เพราะฉะนั้น ถ้าใครโดนถามนะคะ ตัวเอง็ก็จะมาอยู่ตรงนี้ จะมาโชว์ให้แม่เห็นว่าตอนนี้แม่กำลังถามอบอยู่ อบโหลดเสร็จหรือยัง อบเสร็จหรือยัง ไม่ดูเลยเสร็จหรือยังเสร็จหรือยัง โหลดเสร็จหรือยัง ตอบเลยค่ะ ตอบได้เลย ตอบในกล้องได้เลย ตอบพี่เขาได้เลย (พี่อี๊ด) เสร็จแล้วค่ะ (อาจารย์สุธิรา) เสร็จแล้ว โอเค ตอนที่เราจิ้คนต่อไปใครจะเป็นผู้โชคดี เมื่อกี้เราจิ้ม ไม่มีใครเปิดเครื่องสักคน เขียดเราถามไปแล้ว เมื่อถึงเจ้าอบแล้ว เจ้าเชอรี่สิ เจ้าเชอรี่ฃจะเป็นรายต่อไป เชอร์รี่ เชอรี่มองกล้อง หัวเราะ เชอรี่ เชอรี่เสร็จหรือยัง เสร็จหรือยัง ยังไม่เสร็จหรือ (พี่อี๊ด) ดาวน์โหลดแล้วค่ะ (อาจารย์สุธิรา) เสร็จแล้วใช่ไหม โอเค ต่อไปคนต่อไป เราจะกระโดดไปหา เดี๋ยวนะ พายุไม่เปิดเครื่องหรือ เครื่องพายุเปิดไม่ได้ เครื่องบิวล่ะ บิวก็ไม่เปิดหรือ 7 18 นี่เครื่องใคร 18 เครื่องใคร พายุ โอเคมองไม่เห็นหน้า ใส่หน้ากากนี่ดูยากอยู่ (พี่การ์ตูน) ครับ (อาจารย์สุธิรา) พายุเสร็จแล้วนะ บิวเหลือบิว (พี่อี๊ด) เสร็จแล้วครับ พายุเสร็จแล้วครับ ได้ 2 ภาพแล้วครับ (อาจารย์สุธิรา) บิว บิวเสร็จหรือยัง บิวไม่มองกล้อง ยังไม่เสร็จหรือ ได้กี่รูปแล้ว รูปที่ 1 เสร็จหรือยัง (พี่อี๊ด) เสร็จแล้วครับ (อาจารย์สุธิรา) โอเค (พี่อี๊ด) ใช่ครับ (อาจารย์สุธิรา) อย่างนั้นเหลือพี่แฝด พี่แฝดหมายเลข 17 พี่แฝด แฝดไม่ได้เปิดโปรแกรมหรือ แฝดเห็นไหม แสดงว่าแฝดไม่ได้เปิดโปรแกรม แฝดเสร็จหรือยัง ยังไม่เสร็จ โอเค แฝดยังไม่เสร็จเพราะว่าเปลี่ยนเครื่อง รอแฝดแป๊บหนึ่ง คนอื่นน่าจะ... เหลือนิว ยังไม่ได้ถามนิว นิวกับโยโกะ โยโกะเสร็จหรือยังคะ โยโกะเสร็จแล้ว อย่างนั้นเราจะถามนิว เปิดเครื่องหรือเปล่า โอเค เห็นตัวเองหรือเปล่า ตัวเองกำลังโดนถาม นิวกำลังโดนถามแล้ว เสร็จหรือยัง เสร็จหรือยังลูก ตัวที่ 1 เสร็จหรือยัง ไอคอนได้หรือยัง เสร็จแล้ว Icon เสร็จแล้ว แต่อันที่ 2 ยังไม่เสร็จ (พี่อี๊ด) เหลืออันหนึ่ง (อาจารย์สุธิรา) อย่างนั้นตอนนี้ก็คือเสร็จไปแล้ว ยังไม่เสร็จอยู่ 2 นะคะ 2 คน ก็คือ... 3 สิ แฝด นิว แล้วก็บิว มิ้นใช่ไหม ไอ้มิ้นเสร็จหรือยัง มิ้นนั่งเบอร์อะไรนี่ ไม่เห็นเลข ทำไมเครื่องไอ้มิ้นไม่มีเบอร์ล่ะ แล้วจะกดเบอร์อะไรนะนี่ 11 หรือ 11 ดูสิ ไม่ไป เครื่องมิ้นเปิดอะไรนะ วันนี้เหลือ 3 คนนะคะ เราต้องรอเพื่อนไม่อย่างนั้นมันจะต้องย้อนกลับมา แฝด แฝดสร้างโฟลเดอร์ สร้างโฟลเดอร์ชื่อตัวเองน่ะค่ะ ที่ Disk:C ไป Dick:C แล้วคลิคำว่า "New Folder" พอแฝดเปลี่ยนเครื่อง ลงใหม่ เพราะฉะนั้น แฝดต้องไปที่ Disk: C ก่อน ตรงนี้นะ คลิกขวา 1 ครั้งแล้วก็สร้างหรือ New Folder น่ะนะคะ สร้างโฟลเดอร์นะคะ ชื่อโฟลเดอร์ก็คือชื่อเล่นของแฝดกับรหัสท้าย 3 ตัวของแฝดน่ะค่ะ เลขรหัส โอเคไหม ของแฝดตัวเองจะไปทำทำไมทำแล้ว แฝดมันไม่ได้ทำ ไอ้มุกมันทำตาม ตอนนี้แม่ให้แฝดทำ พอดีแฝดเขาเปลี่ยนเครื่อง ไม่ต้อง ไม่ต้อง แม่บอกว่าแฝดทำ แล้วให้แฝดไปเอา... ถ้าแฝดสร้างโฟลเดอร์เสร็จแล้วนะคะ ไฟล์ที่ดาวน์โหลดมาน่ะ ให้เอาใส่ลงในโฟลเดอร์นี้ ตอนนี้ทุกคนจะต้องจำ Folder ที่ตัวเองสร้าง ที่ให้สร้างไว้น่ะ ที่เป็นชื่อตัวเองน่ะ ให้ได้นะคะ ว่ามันอยู่ไน หาให้เจอนะ แล้วก็เอารูปที่เราโหลดเอาไปเก็บใส่ไว้ในนั้นนะคะ เหมือนตัวอย่าง อันนี้โฟลเดอร์ที่แม่สร้างไว้นะ พอเปิดเข้าไป ตอนนี้ให้ทุกคนเปิด Folder ตัวเองเพื่อโชว์ว่ามีรูป Background กับไอคอนแล้วนะคะ จะได้เช็กด้วยว่ามันอยู่ในโฟลเดอร์ไหม ไม่อย่างนั้นเดี๋ยวพอตอนเขียนโค้ดแล้วบางคนไม่เอาไปใส่ Folder ตัวเองไว้ก็ทำไมมันหาไม่เจอก็จะถาม พอเปิดมาแล้ว ทำไมมันไม่เป็นรูปเหมือนของแม่ใช่หรือเปล่าคะ ให้เด็ก ๆ คลิกขวา คลิกขวาที่ Folder เรา แล้วเลือกคำว่า "มุมมอง" หรือว่า View น่ะค่ะ เห็นไหม มุมมองหรือว่า View ให้เด็ก ๆ เลือกอันที่ 2 น่ะ ไอคอนอะไรนะ แปลเป็นภาษาไทย ไอคอนขนาดใหญ่ แล้วจะได้เห็นว่าเรามีรูป Icon แล้ว เรามีรูป Background แล้ว จะได้เห็นว่ามีรูปจริงนะคะ ไปโหลดรูปมาจริง ให้เห็นเป็นชื่อไฟล์มันจะดูไม่ออกใช่หรือเปล่าว่าเป็นรูปภาพอย่างนี้นะคะ เห็นไหมคะ เมนูนี้ที่คลิกขวานี่ เห็นไหมมันจะมีบอกว่าเป็นมุมมอง มุมมองก็คือให้แสดงน่ะค่ะ ให้หน้าต่างนี้มันแสดงอะไรบ้าง ตอนนี้ก็คือให้มันแสดงไอคอนขนาดใหญ่ สั่งให้มันแสดงเป็นไอคอนขนาดใหญ่นะคะ มันมีหลายแบบนะ แสดงเป็น Icon ขนาดกลาง ขนาดเล็ก เป็นรายการน่ะค่ะ ลองกดเปลี่ยนดูก็ได้นะคะแต่ละแบบ พอเปลี่ยนแล้วมันเป็นอย่างไร นะคะ สามารถใช้คอมพิวเตอร์นี่ลองเล่นได้ แค่อย่าไปกด Delete เมนงเมนูนี่สลับได้แต่อย่าไปกด Delete แค่นั้นเอง นี่ เจ้าเขียด สลับมาเฉย ๆ นะ โอเคหรือยัง ตอนนี้เหลือบิวคนเดียวแล้วนะ กดดัน ๆ ทำไมเป็นเบอร์โยโกะ โยโกะก็เสร็จแล้วนี่ ทำไมมันไม่ไปเครื่องนิวน่ะ เมื่อกี้เครื่องนิวยังขึ้นอยู่เลย ทำไมตอนนี้ไม่ขึ้นล่ะ สับสวิตช์ไปแล้วแต่มันไม่ไป ไม่เป็นไร เขาเสร็จหรือยัง เขาเสร็จหรือยัง โอเคนะคะ เรา... เด็ก ๆ พร้อมจะไปต่อไหมคะ พร้อมหรือยังคะ พร้อมแล้วทำมือ พร้อมนะคะ ๆ ยกมือขึ้นมาด้วย เราจะได้รู้ สิ่งแรกที่จะต้องทำ เปิด Sublime Text ขึ้นมาลูก เมื่อกีSublime Text ให้เปิดทิ้งไว้น่ะ ให้คลิกอีก 1 ครั้งนะคะ นิ้วได้ยินอยู่ใช่ไหม ได้ยินน่ะ เพราะเจ้านิวมันได้ยินน่ะ โอเคนะคะ เปิด Sublime หรือยัง ใครยังไม่เปิด ต้องขึ้นหน้านี้ หน้าต่างสีดำ ๆ แบบนี้ขึ้นมาสังเกตที่ไหน ตัวโลโกโปรแกรมเรา ตัว S สีส้ม ๆ นี่ เปิดหรือยัง ถ้าเปิดนะ ถ้าเมื่อไหร่ที่เปิดมันจะขึ้นหน้าต่าง Sublime ขึ้นมาใช่ไหมคะ ขึ้นมา อันดับแรก ให้เด็ก ๆ ลบงานเดิมออกให้หมดเลย ลบออกเลยนะคะ ลบเลยเราจะเริ่มใหม่ทั้งหมด เพราะฉะนั้น ใช้เมาส์ใช่ไหม ใช้เมาส์ลากแล้วก็ Delete ใช้เมาส์ลากทำเป็นแถบครอบหมดทุกตัวอักษรแล้วก็กด Delete ออก ตอนนี้เด็ก ๆ จะต้องมีเฉพาะบรรทัดที่ 1 เท่านั้น แสดง 1 เท่านั้น เราจะได้ไม่ต้อง Save ใหม่ เอาตัวเดิมนี่ล่ะนะคะ ตอนนี้ทุกคนจะเหลือแค่ 1 ลำดับเลขบรรทัด ก็คืออยู่ลำดับที่ 1 เท่านั้นนะคะ 1 เท่านั้น โอเคไหม พร้อมจะไปต่อหรือยังคะ โอเคนะคะ พร้อมนะคะ มีใครยังไม่ได้ 1 บรรทัด ก่อนอื่นต้องดูสไลด์ก่อนต้องทำความเข้าใจก่อน เมื่อกี้โหลดแล้วนะ ไหนลองกดอันนี้ ก่อนที่เราจะเขียนนี่ เราจะต้องรู้ก่อน ว่าโครงสร้างของเกมที่เราจะเขียนนี่นะคะ มันจะต้องมีองค์ประกอบอยู่ทั้งหมด 7 ส่วนนะคะ 7 ส่วน ให้ดูบรรทัดที่ 1 เห็นไม่ชัดไม่เป็นไรเดี๋ยวเราจะเริ่มทำ สิ่งที่จะต้องมีส่วนที่ 1 ก็คือ Import จำได้ไหม สัปดาห์ที่แล้วให้พิมพ์ Import pygame ต้องมีคำสั่ง Import pygame โปรแกรมนะคะ ถ้าครั้งหน้าเขียนโปรแกรมใหม่ คำสั่งนี้จะต้องมีเสมอ ก็คือ import นะคะ import อะไร ความหมายของ import ก็คือนำเข้าโมดูล ก็คือ Pygame เพราะฉะนั้น เราก็จะพิมพ์ Import แล้วก็ตามด้วยชื่อก็คือ Pygame บรรทัดที่ 1 เลยนะคะ ที่เมื่อกี้ให้เปิดไว้ใช่ไหม เด็ก ๆ ไป Sublime ตัวเอง ไปเปิด Sublime Sublime หาย Sublime อยู่ไหน Sublime อยู่ Drive C : 8เปิด C: เดี๋ยวต้องสิ้นสุดการเสนอ ใครหา Sublime ไม่เจอยกมือ เจออยู่นะ บรรทัดที่ 1 นะคะ ให้ทำการนำเข้า Module ที่ชื่อ Pygame ก็คือ Import i-m-p-o-r-t เห็นไหมคะ เมื่อเราพิมพ์... ขอโทษทำมันไม่ขึ้น แป๊บหนึ่ง ๆ สลับหน้าก่อน เอาใหม่ ๆ นะคะ ในบรรทัดที่ 1 สิ่งที่เด็ก ๆ จะต้องพิมพ์ ก็คือคำว่า "Import" นะคะ จะบอกให้โปรแกรมมันไปนำเข้าโมดูลที่ชื่อว่า pygame เพราะฉะนั้น คำสั่ง ก็คือคำว่า "import" พิมพ์ i-m-p-o-r-t เห็นตัวอักษรชัดไหม หรือว่าเล็กไป ข้างหลังว่าอย่างไรคะ พายุ พายุเห็นชัดไหมลูก เห็นชัดหรือเปล่า พายุเลขอะไรนะ 19 หาหมายเลขเครื่องก่อน เดี๋ยวเราถามคนอยู่หลัง ๆ เจ้าบิวน่ะไม่น่าจะมีปัญหา เพราะมันสูง พายุเห็นในหน้าจออยู่ใช่ไหมครับ เห็นข้อความที่พิมพ์ในหน้าจออยู่นะ เห็นหรือเปล่าครับ เห็นไหมครับ เห็นชัดไหม เห็นชัดไหม (พี่การ์ตูน) เห็นอยู่ครับ ตัวใหญ่อยู่ครับ (อาจารย์สุธิรา) ตัวใหญ่อยู่นะ โอเค import เมื่อกี้แม่บอกให้ import อะไรนะ โมดูลชื่อว่าอะไร โมดูลชื่อ Pygame import ปุ๊บ เคาะเพื่อเว้นวรรค 1 ครั้ง แล้วก็ตามด้วยชื่อโมดูลที่บอกไปเมื่อกี้ ก็คือ pygame นะคะ คำสั่งนี้จำให้ขึ้นใจเลยนะคะ เพราะว่าเมื่อเราสร้างโปรแกรมใหม่ เราจะต้องบอก import ทุกครั้งนะคะ ก็คือเพื่อแจ้งให้โปรแกรมมันไปเปิดโมดูลมาใช้งานนะ เราได้ส่วนที่ 1 แล้วนะในโครงสร้าง มาดูส่วนที่ 2 ต่อค่ะ ให้ดูที่ส่วนที่ 2 ต่อนะคะ ส่วนที่ 2 init () ส่วนของ init () นี่ ถ้า... ถ้าเป็นเกม ให้นึกถึงเหมือนเป็นการบอกน่ะ บอกเครื่องว่าจะเริ่มทำงานแล้วนะอะไรอย่างนี้ เพราะฉะนั้น ในส่วนที่ 2 หรือบรรทัดที่ 2 นะคะ จะเป็นคำสั่งเพื่อบอกให้โปรแกรมนี่มันทำงานนั่นเองนะคะ คำสั่งนี้ ก็คือ เนื่องจากเมื่อกี้เราไปเรียกโมดูล Pygame มาแล้วใช่ไหม เพราะฉะนั้น ในบรรทัดที่ 2 เราก็ต้องบอกว่า pygame นี่ เห็นไหมคะ ถ้าเราใช้ Sublime พอพิมพ์แค่ Py น่ะ มันจะขึ้นมาอย่างนี้ เด็ก ๆ กด Enter เลยไม่ต้องพิมพ์ต่อ สังเกตว่าพอพิมพ์ p-y มันจะขึ้น pygame ให้กด Enter Sublime ดีอย่างไร เพราะอะไร เพราะถ้าเกิดเด็ก ๆ จำคำว่า "pygame" ได้ไม่ถูกทุกตัวนึกออกนะ มันจะผิด แต่เมื่อกี้เราพิมพ์แค่ Py Pygame มันขึ้นมา ก็คือมันไปเรียนใช้โมดูลนั้นน่ะลูกนะคะ มันก็จะไม่เกิดปัญหาว่าพิมพ์ผิด เข้าใจหรือเปล่า ก็คือพอเห็นตัวที่เราจะใช้ให้เรากด Enter ตัวต่อไปมันจะพิมพ์มาอัตโนมัติ นึกออกไหม เราจะพิมพ์ แค่ py เห็นไหม ไม่ต้องพิมพ์ยาว เพราะบางทีพอพิมพ์ยาวบางคนสลับคำว่า "game" สลับหน้าสลับหลังน่ะ นึกออกนะ พิมพ์ผิดมันก็จะเกิดปัญหา Code Error ได้นะคะ ก็กด Enter แล้วตามด้วยอะไร เครื่องหมาย . เห็นไหม . แล้วก็ init แล้วก็ใส่วงเล็บเปิดนะคะ แล้ววงเล็บปิดมันจะมาเองเห็นไหม ถ้าใครพิมพ์ไม่ถูกสังเกตสีก็จะไม่ขึ้นเหมือนของแม่นะ (พี่อี๊ด) อาจารย์ค่ะ ได้ยินเสียงล่ามไหมคะ ทางล่ามไม่ได้ยินเสียงทางสกลเลยค่ะ (พี่อี๊ด) ล่ามไม่ได้ยินเสียงอาจารย์ค่ะ เปิดไมค์แล้วแต่ว่า Captions ไม่ขึ้น (อาจารย์สุธิรา) ฮัลโหลได้ยินไหมคะ (พี่อี๊ด) สวัสดีค่ะ (อาจารย์สุธิรา) ไม่ได้ยิน (พี่อี๊ด) ล่ามไม่ได้ยินเสียงอาจารย์ค่ะ (อาจารย์สุธิรา) เป็นอะไร แปลกเพราะตอนเข้ามาใหม่ ก็โอเคอยู่ พอใช้ไปสักพักมันไม่ได้ยิน เป็นกับเน็ตหรือ ไม่น่าจะใช่ สถานะเน็ตเรา... ถอดความเขาได้ยินไง แต่ล่ามไม่ได้ยินไง แล้วมันจะคุยไม่รู้เรื่อง พี่แฝดจะเอาอะไร โทร. ใหม่ โทร. ใหม่ เลยลูก while run ไป พิมพ์รอแม่เลย (พี่อี๊ด) สวัสดีค่ะ อาจารย์ได้ยินไหมคะ ค่ะ ได้ยินฝั่งนู้นอยู่ อาจารย์ได้ยินเสียงล่ามไหมคะ (อาจารย์สุธิรา) ได้ยินค่ะ พี่อี๊ดไม่ได้ยินเสียงอาจารย์ใช่ไหม ฝั่งนู้นเขาไม่ได้ยินเรา เด็ก ๆ บรรทัดต่อไปของเราพิมพ์ (พี่อี๊ด) ล่ามไม่ได้ยินเสียงอาจารย์ค่ะ โอเคค่ะ ต่อไป เราจะไปบรรทัดที่ 6 นะคะ เราจะพิมพ์คำสั่ง while while ก็คือ สำหรับการทำงานแบบวนรูปหรือ Loop นั่นเองนะคะ w-h-i-l-e พิพม์คำว่า while ก็คือตัวแปรที่ขึ้นก็คือ Run ใส่ : พิมพ์ เห็นไหมคะ มันมีคำว่า While loop ขึ้นมา กด Enter เลยเด็ก ๆ พอพิมพ์ w ปุ๊บมันก็ขึ้นเลย การ์ตูนได้ยินไหมคะ แสดงว่าไม่ได้ยินอีกแล้ว เป็นอะไรล่ะ คือ ถ้าไม่ยินอันนี้สอนเลยกันไป 1 ชั่วโมง (พี่อี๊ด) ได้ยินเสียงอาจารย์ค่ะ (อาจารย์สุธิรา) พอเราพิมพ์ w ปุ๊บนะคะ มันจะมีตัวคำสั่งขึ้นมาเลยนะคะ ไม่ต้องไปพิมพ์ เห็นไหมคะ เขาก็จะแบ่งอะไรมาให้บ้าง มันจะมีตัวโครงสร้างเลยเห็นไหม while แล้วก็ตามด้วย : ไม่ได้ยินค่ะ โอเค เดี๋ยวไปต่อ บอกว่าแม่บอกว่าให้เอาอะไรคะ เอาคำว่า... ก็คือให้ while มันไปเรียกตัวแปรที่เราตั้งไว้ในบรรทัดที่ 5 ตรงคำว่า run r-u-n เพราะฉะนั้น หลัง while เด็ก ๆ ต้องพิมพrun r-u-n ลงเห็นไหมคะ มันจะขึ้นมาเลย มันจะไปเรียกใช้ตัวแปรนั้นมาเลย กด Enter ได้เลยถ้าเห็นอย่างนี้ คือ ตัวที่เราต้องการเราจะได้พิมพ์ไม่ผิด โค้ดก็จะไม่ผิด ตรงส่วนของ part นะคะ เด็ก ๆ ดูตรงส่วนของ ดูในสไลด์เรา เริ่มตั้งแต่ for นี่ เห็นไหม ลงมาเลยนะคะ 3 บรรทัดนี้ จะเป็นส่วนของ event นั่นเอง event ก็คือเหตุการณ์ เราจะใช้คำสั่ง for นะคะ แล้วตามด้วย event นะคะ ก็คือดูตัวคำสั่งก่อน for event in pygame.event.get ตัวนี้มันจะเป็นคำสั่งให้รับค่า นับค่าอะไร นับค่าเห็นไหม ค่าว่างเปล่า ตรง Sublime นะคะ ตรง pass ให้เด็ก ๆ ลบคำว่า "pasนะ แต่ตำแหน่ง ให้สังเกตตำแหน่งอยู่ตรงที่ Part แล้วพิพม์ for เห็นไหมคะ for loop พอกด F ปุ๊บ for loop จะขึ้น กได้เลย เห็นไหม ตัวนี้มันจะขึ้นมาอัตโนมัติเลย เด็ก ๆ เห็นไหม แต่ตรง X เราจะเปลี่ยนเป็น for อะไรคะ for event แทนนะคะ for event loop นี้สำหรับเหตุการณ์ที่ pygame event get นี่ get นี่คือคำสั่งให้รับค่าจากคีย์บอร์ดน่ะ นะคะ ตรง x นะคะ เราลบ x ออกแล้วพิมพ์คำว่า event แทน e-v-e-n-t ด้วยนะคะ มี t ด้วย event ตรงส่วนที่เป็นสีฟ้า ๆ นะคะ คือ ที่มันขึ้นอัตโนมัติ เพราะมันเป็นเหมือน Template นึกออกนะ แต่ส่วนที่เราจะใส่เข้าไปแทน ตรง x rage ก็คือคำว่า "pygame.event.get นะคะ เห็นไหม เห็น pygame แล้วกด Enter .event เห็นไหม เห็น event แล้วกด Enter .get g-e-t แล้วก็ตามด้วยเครื่องหมาย_ นะคะ ตรงในวงเล็บเห็นไหมคะ มันเป็นค่าว่างเปล่า เพราะฉะนั้น เด็ก ๆ ต้องไปลบอะไร ไปลบในวงเล็บออก เพราะเราไม่ได้รับค่าอะไร แต่ Loop มันจะทำงานไง มันจะทำงานไง บอกให้ loop ทำงาน เมื่อมีการรับค่านะคะ ตรง pass นี่ เราจะมาเขียนคำสั่งต่อไป ก็คือ if event.type เห็นไหมคะ คำสั่งนี้เป็นเงื่อนไขที่บอกว่าถ้าเหตุการณ์นี้ type ก็คือพิมพ์ มีการพิมพ์ พิมพ์อะไร ก็คือพิมพ์ค่าอะไรลงไปก็ได้ พิมพ์อะไรลงก็ได้นี่ ปุ๊บ มันจะต้องทำอะไรคะ มันจะเท่ากับ pygame.QUIT ก็เท่ากับออกจากโปรแกรม พอเช็กแล้วก็คือมันจะทำงานไปเรื่อย ๆ จนกว่าเราจะไปรับค่าที่เราป้อนเข้าไป ค่าในวงเล็บนี่ที่ไม่มีอะไรนี่ หมายถึงค่าอะไรก็ได้นะคะ เพราะฉะนั้น มันจะมาที่เงื่อนไขที่บอกว่า if ก็คือถ้า event event ก็คือเหตุการณ์ที่ type type ก็คือการพิมพ์นะคะ ถ้ามีการพิมพ์เกิดขึ้น มันจะ Pygame.quit โปรแกรมสิ้นสุดการทำงานนะคะ แต่ทีนี้บรรทัดที่ต่อมาจาก if นี่ เพราะอะไร เพราะเรามี while ใช่ไหมคะ เปิด loop while ก็คือ ปิด loop ของ while ตัวที่จะปิด ก็คือค่าในการวนลูปมันจะมี True กับ false เมื่อเปิดด้วย True ตอนปิดจะต้องปิดด้วย False นะคะ ก็คือมันจะเช็กว่าทำงาน จนกว่าจะสิ้นสุดการทำงานเมื่อมันไม่เป็นจริง นึกออกไหมนะคะ เพราะฉะนั้น ในบรรทัดที่ 2 ที่เป็น Past ให้เราลบ Past ออกใช่ไหมคะ แล้วพิมพ์คำสั่ง if เข้าไปแทน if เข้าไปแทน เห็นไหม if อะไร ให้เด็ก ๆ เลือก if condition ก็คือเป็นเงื่อนไขหรือการตัดสินใจนั่นเองนะคะ กด Enter ค่ะ if event เห็นไหมคะ พอพิมพ์ E event ขึ้นมา กด Enter ได้เลย event. เหตุการณ์ที่เกิดก็คือเมื่อมีการพิมพ์ ก็คือ t-y--p-e .type ใช่ไหมคะ = ในเงื่อนไขจะตรงที่อยู่นอกเงื่อนไข ถ้าเท่ากับในเงื่อนไข เด็ก ๆ ต้องพิมพ์ = 2 ครั้งค่ะ แล้วก็กดเครื่องหมายเท่ากับ (=) 2 ครั้ง เครื่องหมายเท่ากับใน if condition นี่ มันต้องพิมพ์ 2 ครั้งนะคะ มันจะต่างกับเครื่องหมายเท่ากับที่อยู่นอก loop นี่ จะพิมพ์แค่ครั้งเดียว ถ้าอยู่ในเงื่อนไขจะพิมพ์ 2 ครั้ง ถ้า event ถ้าเหตุการณ์มีการพิมพ์เกิดขึ้นให้ทำอะไร ให้ pygame พิมพ์ p-y py มีคำว่า "game" ได้เลย . . อะไร .Quit สั่งให้มันออก ใช้ Q ตัวใหญ่นะคะ ให้ดูก่อน ๆ นี่ q-u-i-t-e จะต้องเป็นตัวใหญ่ทั้งหมด เด็ก ๆ เห็นนะ ดูดี ๆ นะคะ คำสั่ง QUIT จะเป็นตัวใหญ่ทั้งหมด บอกแล้วว่าเรามี loop อยู่ข้างบน จะต้องมาปิด loop ด้วย ตัวแปรที่เราเปิด ก็คือ run นะคะ เรียกใช้ตัวแปร run เท่ากับ... = ตรงกันข้ามกับ True ก็คือ False F ตัวใหญ่นะคะ F อะไร f-a-l-s-e f-a-l-s-e เห็นไหมคะ นี่ ตัวนี้คือ loop ของตัวนี้ สังเกตตำแหน่ง loop ตัวที่ 1 ปิดนะคะ เปิดแล้วก็ปิดนะคะ อันนี้ loop ของตัวนี้ แล้วให้พอพิมพ์ Run = False เสร็จ เด็ก ๆ กด Enter ลงไป 2 ครั้ง แล้วกด Backspace เพื่อให้เคอร์เซอร์ไปชิดที่ตำแหน่งเท่านั้นนะคะ ชิดที่ตำแหน่งที่ตรงกับตัว r ในบรรทัดที้่ แล้วพิมพ์อะไร พิมพ์ pygame ค่ะ pygame. แต่ QUIT ที่เป็นคำสั่งที่เป็นคำสั่ง ตัวนี้นะคะ ที่อยู่นอก loop เด็ก ๆ ดูนะมันจะต่างกันนะ ต้องเป็นตัวเล็ก เห็นไหมใช่ไม่เหมือนกันนะ เพราะอันนี้ มันเป็นฟังก์ชันเพราะมันจะมีวงเล็บตามหลัง เห็นไหม นะคะ โดยการใส่วงเล็บนี่ จะเป็นอย่างนี้นะคะ คนละตัวกันนะ ใช้คนละตัวกัน ตอนนี้ บรรทัดสุดท้ายที่เราพิมพ์ คือ บรรทัดที่ 11 นะคะ แสดงว่าล่ามไม่ได้เลยใช่ไหม ใช้เสียงไม่ได้ อยากรู้ว่ามันทำงานได้หรือไม่ กดอะไรคะ ก่อนอื่นอย่าลืมเมื่อเขียนโค้ดเสร็จเราควรกดอะไร ก็คือเซฟใช่ไหมคะ คีย์ลัดคืออะไร Ctrl อะไร Ctrl+S ใช่ไหม ถ้าเราไม่กด File แล้วกด Save ให้เด็ก ๆ กดคีย์ลัดเลยก็คือกดแป้น Ctrl นะคะ แล้วตามด้วยตัว S ตอนที่ Run จำได้ไหม Build น่ะ คำสั่งคีย์ลัดก็คือ Ctrl + B นะคะ ลองกด Ctrl + B ดู นั่นไง ถ้าขึ้น Error สังเกตนะคะ ยังไม่เสร็จ ความจริงโค้ดเรายังไม่เสร็จ มันต้องมีต่ออยู่ การ Run นี้ได้ผลนะคะ เพราะแจ้ง Error เราด้วย ตรง while ให้เด็ก ๆ กด Enter ลง ให้ for มันลงไป 1 บรรทัดนะ ตอนนี้มันถาม Did you mean get ของคุณคืออะไร มันมาถามหาตัวแปรนี้นะคะ คำสั่ง get เดี๋ยว เนื่องจาก Underscore เรามันไม่เป็นสีขาว Crtl+B นะคะ Run น่ะ เขาโทร. เข้าอีกแล้ว โอเคนะคะ Error ตัวนั้น เราจะปล่อยมันไปก่อนนะเด็ก ๆ รู้แล้ว เอา Underscore ออก เป็นกับเวอร์ชันแน่ แล้วกด Ctrl + B รันผ่านแล้วนะคะ จะไม่ขึ้นอะไรนะ เพราะเรายังไม่ทำหน้าต่างมัน เดี๋ยวเราจะทำหน้าต่างถ้า run ผ่าน Error มันจะไม่ขึ้นนะ นี่พอตอนใส่ Underscore มี Error ขึ้นใช่หรือเปล่า พอแม่ลบ Underscore ออก Run ใหม่ หายแล้วนะคะ ผ่านแล้ว สิ่งที่เราจะทำต่อมา ดูนะคะ สิ่งที่เราจะทำ ทำไมมันไม่ขึ้น ทำไมมันซูมล่ะ โอเค ใหญ่เกิน เราจะสร้างหน้าต่างเกมนะคะ ก็คือเราจะต้องทำพื้นที่ที่เกมที่เราจะเล่นน่ะนึกออกไหม เพราะฉะนั้น ขั้นตอนต่อมาหลังจากที่เรากำหนด loop อะไรต่อมาแล้ว ในส่วนที่ 4 ที่ 5 แล้วก็ที่ 7 ใช่ไหมคะ ในโครงสร้างนะคะ สิ่งที่เราจะทำต่อเห็นไหม ก็คือส่วนที่ 3 การกำหนดค่าหน้าจอ รูปภาพ ฉาก เสียง ตัวละคร ในส่วนที่ 3 นี่มันจะเป็นส่วนที่ใช้สำหรับสร้างไอตัวหน้าต่างหรือในภาษาโปรแกรม เขาเรียก Serface พื้นที่การทำงานของเกมนั่นเองนะคะ ใส่อะไรได้ ใส่รูปภาพได้ใช่ไหม ใส่เสียง ใส่ตัวละครได้ ใส่ตัวละครก็คือตัวเกมที่เราจะใส่ลงไปนะคะ ก็เลยตั้งชื่อว่าตัวละครหรือตัวเกมนั่นเองนะคะ มันจะอยู่ที่ส่วนที่ 3 นี่ นึกออกนะคะ แต่ตรงส่วนที่ 4 ที่เป็น loop กับ event ก็คือต้องให้เครื่องมันส่งเริ่มทำงานใช่ไหม เครื่องมันจะต้องบอกแล้วว่าเครื่องคอมพิวเตอร์ก็ต้องบอกมันหยุดเข้าใจหรือเปล่า ไม่ใช่เริ่มแล้วปล่อยไปเลย อย่างนั้น... เราจะมีการโทร. เข้าทุก ๆ นาทีนะคะ ก็เลยจะต้องมีโครงสร้างที่จะมีนี่ มีอยู่แค่ 7 อันนี้ ที่ขาดไม่ได้นะคะ แต่ตรงส่วนที่ 3 นี่ มันจะเปลี่ยนไปตามที่เราจะกำหนดนึกออกไหม แต่ส่วนที่ 2, 4, 5, 6 เอ้ย 4, 5, 7 นี่ มีอยู่ตายตัวอยู่แล้วทุกครั้ง เพราะฉะนั้น เวลาครั้งหน้าที่บอกว่าถ้าไม่อยากเขียนโค้ดใหม่เราก็มาก็อปใส่ตัวนี้ได้ เฉพาะส่วนที่เท่าไร 1, 2, 4, 5 แล้วก็ 7 ใช่ไหมคะ นะคะ ส่วนของ QUIT นี่ QUIT ออกจากคำสั่ง ที่ให้ออกจากโปรแกรมนะคะ ทีนี้มาดูในส่วนที่ 3 ที่เราจะทำที่บอกว่าสร้างหน้าต่างเกม สร้างอย่างไร ก่อนอื่นเด็ก ๆ จะต้องรู้ก่อนว่าหน้าต่างที่เราสร้างลักษณะเป็นอย่างไร เราจะกำหนดให้มันมีลักษณะเท่าไร คือ โดยปกตินี่ ให้นึกถึงจอคอมพิวเตอร์เรา ตัวนี้นะคะ ที่อยู่ข้างหน้านี่ตั้งแต่มุมบนสุด ก็คือตัวนี้ของเครื่องนี้ นี่คือพื้นที่จริง ๆ ใช่ไหม แต่พอเวลาทำเกม เพราะอะไร เพราะเห็นไหม ถ้าในจอ บางจอจอใหญ่ใช่ไหมคะ แต่เหมือนเครื่องพี่ตี๋จอเล็กใช่ไหมคะ หรือถ้าเราใช้โน้ตบุ๊กเหมือนของดอมนี่ เห็นไหม ขนาดจอมันไม่เท่ากันนะ ตามกำหนดค่านึกออกนะ เริ่มต้นของเขาเรียกว่าคอมพิวเตอร์นี่เวลามันอ่านค่านี่ มันอ่านค่าน่ะ หน้าจอนี่ ความละเอียดเขาจะเรียกเป็น "พิกเซล" กับแกน y แกน x คืออะไร แกน y คืออะไรนะคะ คือ ในพื้นที่สี่เหลี่ยมในหน้าจอนี่ สิ่งที่เราจะทำก็คือคือเราต้องหา ไม่ใช่หา เราจะต้องกำหนดขนาดว่าไอ้หน้าต่างหรือจอที่เราจะให้ทำเกมนี่ เราจะให้มันสูงเท่าไร จะให้มันกว้างเท่าไร วิธีการให้เห็นภาพชัดเจนก็คือในหน้านี้ เห็นไหม ถ้าสมมติแกน y แกน y นี่คือแนวนี้นะคะ แนวตั้ง แกน X ก็คือถ้าสมมติพื้นที่จากนี่สูงถึง 400 แล้วก็ 0 - 700 แกน x อย่างนี้ใช่ไหมคะ เราไม่จำเป็นต้องใช้ตั้งแต่สูงสุดนึกออกไหม ไม่จำเป็นต้องใช้ถึง 400 แล้วไม่จำเป็นต้องใช้ถึง 700 เอาแค่ไซซ์เล็ก ๆ เราก็ลดขนาดลงมา แต่ให้ลองดีไปว่าถ้าสมมติถ้าตอนนี้หน้าจอเราน่ะกว้างก็คือเท่าไรนะ 700 ใช่ไหมคะ สูงสุดเท่าไรคะ 400 เราจะไปสั่งให้โปรแกรมน่ะมันสร้างไอ้กรอบตัวนี้ขึ้นมานี่เราจะสั่งเท่าไร มาดูรูปแบบนะคะ รูปแบบคำสั่ง ก็คือเปลี่ยนเครื่องแล้วฟอนต์แตก... เดี๋ยว ๆ ๆ มันเกินทะลุ ยังทะลุอยู่นะคะ นี่คือคำสั่งที่เราจะใช้สร้างนะคะ ก็คือเด็ก ๆ จะต้องกำหนดตัวแปร ให้หน้าต่างที่เราจะสร้างนี่ พื้นที่ที่เราจะสร้างนี่ สร้างหน้าต่างขึ้นมา 1 ตัว แล้วตามด้วย = คำสั่งที่อยู่ในโมดูลก็คือคำสั่งในการ... เห็นไหมคะ display.setMode นี่ คือ คำสั่งการกำหนดการแสดงผลหน้าจอนั่นเอง เห็นไหมคะ pygame.display.set_mode นี่คือส่วนที่เราจะกำหนดคขนาดความกว้างแล้วก็ความสูงของหน้าต่างที่เราจะใช้ จะอยู่ในวงเล็บนะคะ ส่วน flags นี่โดยปกติถ้าอยากกำหนดมันจะมีเพราะในคำอธิบายคำอธิบายคำว่า "w" w หมายถึง ความกว้างของหน้าต่าง h หมายถึงความสูง แล้วก็ flags คือการตั้งค่าให้หน้าต่างเราตามตาราง มาดูค่าในตาราง ก็คือถ้าเรากำหนด flags flags=pygame.ตาราง หน้าต่างที่เราสร้างนี่ เปิดแบบเต็ม นึกออกนะ เพราะฉะนั้น ค่าพวกนี้ถ้ากำหนดนี่ก็จะตามความหมายนี้เลยนะคะ ตามในตารางนี้ แต่เราจะทำแบบง่าย ๆ เด็ก ๆ ไม่ต้องไปกำหนดค่ามันในค่า flags นะคะ เราจะกำหนดแต่ว่า ให้พื้นที่เรามันกว้างเท่าไร สูงเท่าไร แค่นั้นพอ เพราะฉะนั้น สิ่งที่ต้องทำต่อ ก็คือนะคะ คำสั่งก็คือให้เราสร้างหน้าต่าง โดยกำหนดตัวแปร ชื่อ screen กำหนดขนาดกว้าง 800 สูง 600 อันนี้คือเอาค่าของหน้าจอคอมพิวเตอร์มาตรฐานนี่ ที่ 1024 x เท่าไรนะ ให้นึกถึงนะ เวลาหน้าจอคอมฯ นะคะ นี่ ตรงขนาด เห็นไหมคะ เห็นไหม 1280 x 1020 นี่ คือขนาดจอมาตรฐานทั่ว ๆ ไปนึกออกนะ ที่จะใช้ แต่เราไม่เอาเต็ม เหมือนที่บอก แม่ก็เลยกำหนดเสียเลยว่าเอาแค่เท่าไรนะ 800 นะคะ กว้าง 800 สูง 600 เพราะฉะนั้น เราจะเริ่มโดยการพิมพ์คำสั่ง ตัวแปรที่กำหนดชื่อ Screen ก็เลยพิมพ์คำว่า "screen" ก่อน แล้วก็ตามด้วย function pygameplpygame.display.set_mode แล้วก็เครื่องหมายวงเล็บเปิด 2 อันนะคะ แล้วก็ปิด 2 อัน ในวงเล็บใส่เลข 800 ขั้นด้วยอะไร ขั้นด้วยเครื่องหมายลูกน้ำ คอมมาร์ไหม สับสนตัวไอ้นี้ภาษาอังกฤษ ภาษาไทย ลูกน้ำนะคะ เพราะฉะนั้น ใน Sublime ให้เด็ก ๆ ไปยังตำแหน่งที่อยู่เหนือ loop นะคะ บรรทัดที่ 3 กด Enter ลงไป 2 บรรทัดเหมือนเดิม แล้วใส่ Comment ว่า สร้างหน้าจอเกม จะได้รู้ว่าตรงส่วนนี้เราจะสร้างหน้าจอของเกมนะคะ เพราะฉะนั้น ใส่ Comment เตือนตัวเองไว้นะคะ การใส่ Comment จะทำให้เรารู้ว่าตรงส่วนนี้ทำอะไร ใช่ ๆ ภาษาอังกฤษต้องมาแปลให้อีก เพราะฉะนั้น ตรง Comment จะพิมพ์เป็นภาษาไทยได้เลยไง ก็จะเข้าใจได้ง่ายขึ้น ใช่ไหมคะ เพราะฉะนั้น ตรง Comment น่ะ พอเราจะตรงส่วนนี้เราจะให้ทำอะไรก็พิมพ์บอกไปได้เลย เหมือนตรงนี้เราจะสร้างหน้าจอเกมแล้วนะคะ รูปแบบก็คือพิมพ์ชื่อตัวแปร เมื่อกี้ตั้งชื่อตัวแปรไว้ว่า Screen s-c ขอโทษลืมเปลี่ยนภาษา มือไวไปหน่อย เปลี่ยนภาษาก่อนนะคะ ชื่อตัวแปรที่จะสร้างก็คือ Screen S-c-r-e-e-n วรรคแล้วตามด้วยเครื่องหมายเท่ากับ (=) บอกว่าตัวแปรนี้เท่ากับอะไร เท่ากับค่าของโมดูล pygame หรือ ฟังก์ชัน pygame นะคะ pygame.display display d-i-s-p-l-a-y display นะคะ display คือ แสดงผลใช่ไหม ส่วนของการแสดงผล pygame . อีกครั้งหนึ่งนะคะ .set แล้วก็ตามด้วยเครื่องหมาย _ แล้วก็ตามด้วยคำว่า mode md-e แล้วก็ตามด้วยวงเล็บอะไรคะ วงเล็บเปิดวงเล็บปิด 2 ครั้ง กดวงเล็บเปิดจะเป็นอย่างนี้ แล้วก็ตามด้วยเลขความกว้างก็คือ 800 แล้วก็ใส่ ,600 ถูกต้องไหม ไปดูต้นแบบเรา เกินน่ะ เกิน 1 บรรทัด ตัวแปรจริง ๆ จะเป็นแบบนี้นะคะ รูปแบบมัน นี่ก็ล้นเชียว เปลี่ยนฟอนต์จะเลยทีเดียวเชียว เราใส่เฉพาะค่าในส่วนนี้ใช่ไหม ตรง flags เราไม่ใส่นะคะ อยากรู้ได้หน้าต่างนี้หรือยัง ให้กดอะไร กด Ctrl + B ทุกครั้ง เมื่อเราต้องการให้มัน Run ผลนะคะ ใส่บรรทัดนี้เสร็จแล้วลองกด Ctrl+B ดู เสนอบรรทัดก่อน เด็ก ๆ จะได้หน้าขึ้นมาแบบนี้ 1 อัน ถ้าเด็ก ๆ คิดว่ามันเล็กไปเด็ก ๆ ก็เพิ่มขนาดได้ นึกออกไหมลูก ตัวเลขน่ะค่ะ กด Ctrl+B จะต้องได้ไอ้ตัวนี้ขึ้นมาหน้าต่างขึ้นมา 1 อันเห็นไหม ใครไม่ได้ ใครไม่ได้ขึ้น Error อะไร ไหนเอ็มไม่ขึ้น ชื่อว่าอะไร เมื่อกี้มัน Underscore ทีนี้ ก่อนอื่นนะคะ จะสอนวิธีเช็ก ก่อนอื่นที่เด็ก ๆ จะเรียกแม่ เด็ก ๆ จะต้องเช็กโค้ดตัวเองให้เป็นก่อน ดูอย่างไร สมมติมันขึ้น Error เดี๋ยวแม่ต้องทำให้มัน Error ก่อน แป๊บหนึ่งนะคะ เช่น เหมือนใส่ _ หล่นไปไหนแล้ว เอาใหม่ ๆ Ctrl + B ปุ๊บ สังเกตที่ไหน เห็นไหม มันจะมีไอ้ตัวสีแดง ๆ ขึ้นมาใช่ไหมลูก แล้วมันจะบอกว่าอยู่ในบรรทัดที่เท่าไรที่ผิด เด็ก ๆ จะต้องไปดูที่บรรทัดนั้น แล้วเช็กอะไร แล้วเด็ก ๆ ก็ค่อยเช็กโค้ดที่ตัวเองพิมพ์ผิดน่ะ พิมพ์ผิดหรือเปล่า นึกออกหรือเปล่า มีอะไรเกิดมาไหมเข้าใจนะคะ นะคะ สมมติเหมือนตรงนี้ ไอ้ตรง get นี่ มันไม่มี _ แต่เราดันไปใส่ _ มันเลย Error เห็นไหมคะ ในโมดูลมันก็จะเตือนอย่างนี้ เราก็จะไล่มาตั้งแต่ for inpygame.event คือ ค่อย ๆ ไล่ไปก่อน ยกเว้นแล้วดู ไม่เห็นผิดเลยค่อยเรียกเข้าใจไหม ใช่ไหม เห็นไหมคะ คือ บางทีที่มันผิดน่ะเหมือนที่บอก มันนิดเดียว แต่เราลืมดูไปเพราะฉะนั้น ก่อนจะเรียกนะคะ ต้องเช็กด้วยตัวเองก่อน ถ้าเกิด Errpขึ้นมามันจะไปแก้ตรงไหน อะไร อย่างไรนะคะ ตอนนี้เราได้ขนาดหน้าต่างแม่บอกแล้วนะ ถ้าคิดว่าหน้าต่างที่เราทำมันเล็กไป อยากให้มันมีขนาดใหญ่กว่านี้ก็ไปเปลี่ยนตัวเลขค่าตัวเลขที่อยู่ในวงเล็บ จำให้ได้นะคะ รูปแบบค่าความกว้างมาก่อนความสูง ถ้าอยากให้หน้าต่างกว้าง ก็ไปเพิ่มค่าตัวแรก ถ้าอยากให้สูงเพิ่มค่าตัวที่ 2 โอเคนะคะ สิ่งที่เราจะทำมัน เดี๋ยวนะมี Error เครื่องใคร เครื่องโยโกะ (อาจารย์สุธิรา) ถ้า Error ที่ขึ้นว่า Tab error นี่หมายถึงอะไร หมายความว่าการเว่นพวกนี้ ตำแหน่งของ tab นี่ มันไม่ได้ระดับของตัวโครงสร้างของคำสั่ง วิธีแก้ก็คือให้เด็ก ๆ กด Space bar ให้มันกลับไปที่ต้นทางนึกออกไหม เช่น อย่างนี้นะคะ วิธีแก้นี่ สมมติบรรทัดสุดท้ายมัน Error นี่ เด็ก ๆ จะต้องลบไปอย่างนี้จนไปมันต่อบรรทัดก่อนหน้าแล้วกด Enter ลงมามันจะตั้ง Tap อัตโนมัติทุกอันนะคะ ถ้าขึ้นบรรทัดไหน Tab Error นะคะ ไหนเครื่องไหนยังแก้ไม่ได้ ติด Error อีกยกมือ บรรทัดไหนนะ ไม่เลื่อน ทีนี้สิ่งที่เราจะทำต่อมา เมื่อกี้เห็นหน้าจอแล้วใช่ไหมคะ หน้าจอที่เราสร้างนี่ Run ไปหลายรอบ เด็ก ๆ จะเห็นตรงส่วนหัวเห็นไหม มันจะมีไอคอนเป็นรูป รูป python หรือรูปงูใช่ไหมคะ แล้วก็มีชื่อ Pygame ตัวนี้เราจะไปเปลี่ยน Icon กับเปลี่ยนชื่อนะคะ ขั้นตอนต่อไปจะไปทำการเปลี่ยน จะเปลี่ยนชื่อก่อน แล้วค่อยเปลี่ยน Icon นะคะ จะเปลี่ยนชื่อเสียก่อนนะคะ เดี๋ยวตอนนี้คือขอรอเพื่อนแป๊บ มันพิมพ์ pygame ผิด เห็นไหม บอกแล้วว่าถ้าผิดให้ไล่ดูโค้ดที่ตัวเองพิมพ์ไป เจ้าบิวน่ะ คำว่า pygame น่ะ p-y-g-m-e-a พิมพ์ pygame ผิด ก็คือพอ Run แม่แก้อันแรกบรรทัดต่อไปก็ขึ้น เพราะ pygame ผิดทุกตัวเลย แม่ถึงบอกว่ามันขึ้นบรรทัดบอกใช่ไหม เด็ก ๆ จะต้องทำอะไรคะ ไล่ดูโค้ดตัวเอกก่อนนะคะ ใช่ไหม แต่ถ้าไล่แล้วไม่เห็นค่อยเรียกแม่ไปดูใช่ไหม คือ ตัวเองจะต้องฝึกดูโค้ดตัวเอง ว่าตัวเองเขียนถูกหรือเปล่า ไม่ใช่ให้แม่ไปดูอย่างเดียว เพราะว่าความผิดมันอยู่ที่ใคร ตัวเจ้าของใช่ไหม แม่ไม่ได้เป็นคนผิด ใช่ไหม เพราะของแม่ run ออกมา ออกทุกรอบ แต่ตัวเองผิด เพราะฉะนั้น ตัวเองต้องไปเช็กว่าตัวเองไปทำผิดตรงบรรทัดไหนนะ ถึงให้บอกว่าให้ค่อย ๆ ไล่ ไล่ตั้งแต่ตัวอักษรถูกไหม เพราะมันผิด โค้ดมันผิด คือ ชื่อผิดอะไรผิดนั่นก็ผิดแล้ว เพราะคอมพิวเตอร์มันเช็กตามตัวที่เราโค้ดลงไปนะคะ เพราะฉะนั้น เด็ก ๆ จะต้องหัดดูเวลา Error มันจะขึ้นบอกอยู่แล้วว่ามันขึ้นในบรรทัดไหน เด็ก ๆ ต้องย้อนดูก่อน ถ้าไม่ได้จริง ๆ ค่อยเรียก โอเคนะ สิ่งที่เราจะทำต่อมา เปลี่ยนชื่อกับใส่ไอคอนเปลี่ยนรูปนะคะ กี่โมงแล้วนี่ สงสัยวันนี้จะได้แค่หน้าต่างนะคะ อันนี้ทำหน้าต่างเสร็จแล้ว ต่อไปเราจะกำหนดชื่อให้หน้าต่างตรง titled ที่บอกนะคะ รูปแบบคำสั่ง ก็คือเราจะพิมพ์คำว่า... ก็คือเรียกใช้โมดูล pygame นะคะ ตามด้วย . display.set แต่เปลี่ยนจาก set Mode เป็น set caption แล้วทีนี้ข้อความเห็นไหมคะ ก็คือในวงเล็บแล้วต้องมีเครื่องหมายอะไร ' หรือ " เครื่องหมายคำพูดนะคะ ในภาษาคอมพิวเตอร์ ไอ้เครื่องหมายคำพูดเขาเรียก "Single Quote" ที่มีตัวเดียวฟันหนูอันเดียวหรือ ฟันหนู 2 อันนะคะ เด็ก ๆ จะพิมพ์ชื่อ นึกออกไหม ชื่อ title ของเราน่ะไว้ในตรงช่องที่มีข้อความนี้ เพราะฉะนั้น เราอยากให้หน้าต่างเกมเราชื่อว่าอะไรเราก็เอาชื่อใส่ลงไปตรงส่วนนี้ โอเคนะคะ ไม่ต้องตั้งตามแม่ก็ได้เข้าใจไหม สามารถเปลี่ยนชื่อเองได้นะ ตอนแม่เขียนตัวอย่างน่ะ แม่ตั้งชื่อนี้ ตัวเองไม่ต้องตั้งตามชื่อที่แม่เขียนก็ได้ เข้าใจนะ เราก็มาเปลี่ยนในช่องข้อความนี้ มาดูกันนะคะ ทำอย่างไร เปลี่ยนเครื่อง Caption กระจายกันเลยทีเดียวเชียว ต้องให้เห็นเป็นบรรทัดเดียวจะได้รู้ว่าที่มันสั่งนี้มันจะเป็นตัวนี้ เนื่องจากใช้สไลด์เป็นชื่อปลา ก็เลยเอา Fish Game เด็ก ๆ ไม่เอาว่า fish game ก็ได้นะคะ เพราะในเครื่องหมายคำพูดสามารถตั้งชื่อเป็นได้ทั้งภาษาไทยนะคะ ใช้ภาษาไทยก็ได้ หรือภาษาอังกฤษ แล้วแต่จะตั้งนะคะ ถ้าไม่ถนัดภาษาอังกฤษก็พิมพ์ษชื่อภาษาไทยลงไปเลย ได้ แต่ต้องเข้าใจว่าต้องอยู่ในไหน อยู่ในเครื่องหมายคำพูดนะ ที่อยู่ในวงเล็บนะคะ อยู่ในส่วนนี้ บรรทัดที่เราสั่ง Screen เมื่อกี้ พิมพ์ได้เลยนะคะ ใน Sublime ให้ดูนะคะ ในตอนแรกในหน้าต่างที่เราสร้าง Captions มันจะเป็น pygame windows ถ้าเราเปลี่ยน มันจะต้องไม่ขึ้น pygame ถูกต้องไหม มันจะเป็นชื่อที่เราสร้างให้ใหม่นึกออกนะ ที่เราป้อนลงไปในข้อความ เดี๋ยวขอปิด ในบรรทัดนี้นะคะ ให้พิมพ์คำสั่ง pygame.display ทีนี้ ในกรณีที่พอพิมพ์ดีแล้ว ให้เด็ก ๆ ใช้ลูกศรเลื่อนลงมาเลือกเป็น display จะได้ไม่พิมพ์ผิด แล้วกด Enter เห็นไหมคะ จะได้พิมพ์ตัวโค้ดไม่ผิดนะคะ . อะไร .set แต่เปลี่ยนจาก set_mode เป็นset_caption นะคะ เห็นไหม อย่านะ ต้องพิมพ์นะคะ set แล้วก็ _caption c-ap-i-o-n set_caption แล้วตามด้วยวงเล็บค่ะ ใส่ single quote หรือ กำลังคิด ว่าจะพาทำเกมอะไรดี เมื่อกี้บอกเกมปลา รุ่นพี่ตอนรุ่นพี่พาทำเกมไดโนเสาร์วิ่ง จำได้ไหม Google ที่มันมีตอนหนึ่งที่ให้ไดโนเสาร์วิ่งน่ะ พาทำไดโนเสาร์วิ่งแบบนั้นล่ะ เอาชื่ออะไรดีนะ ้เมื่อกี้ ให้ดูไอคอนตัวเอง นึกออกไหม Icon เราเป็นรูปอะไร เราตั้งชื่อให้สอดคล้องกับ Icon ก็ได้ ของแม่ไอคอนแม่เป็นยูนิคอร์น ถ้านึกชื่อ Caption ไม่ออก ให้เด็ก ๆ ดูรูป Icon ที่ตัวเองเปิดขึ้นมานึกออกไหม นี่ ให้ดูที่ไอคอนที่เราเลือกมาใช้ นึกออกนะ เราก็เอาชื่อเกมตามนั้นก็ได้ เราจะเปลี่ยนจากไดโนเสาร์วิ่งเป็นยูนิคอร์นวิ่ง เกมยูนิคอร์นนะคะ สิ่งที่จะทำต่อมา ก็คือเปลี่ยนอะไรคะ เปลี่ยน Icon ใช่ไหมคะ เพราะรูป Icon เก่ามันเป็นรูปงูหรือ Python เราจะเปลี่ยนไอคอนนะคะ เพราะฉะนั้น มาดูคำสั่งเปลี่ยน Icon ก่อน คำสั่งทะลุเดือดไปเลย กำหนดไอคอนนะคะ ใส่ Icon เข้าไป เราไปโหลดมาแล้ว เราก็จะข้ามขั้นตอนนี้ไป เราดาวน์โหลดภาพ เราโหลดมาแล้วใช่ไหม สิ่งที่เราจะทำต่อมา ก็คือคำสั่งในการใส่ Icon นะคะ มี 2 ตัวนะคะ ตัวแรกนี่เป็นคำสั่งที่ต้องไปเรียกเอาไฟล์ภาพไอคอนที่เราจะใช้มานะคะ และ... ฟอนต์กรระแป๊บหนึ่ง กองกันเป็นสละนะเลย มี 2 คำสั่ง คำสั่งแรกนะคะ ก็คือเราจะต้องกำหนดชื่อตัวแปรเห็นไหมคะ รูปแบบของคำสั่งก็คือจะต้องมีตัวแปรชื่อของภาพที่เราจะใช้ แล้วก็ตามด้วย pygame.image.load เป็นฟังก์ชันที่เราจะให้ไปเปิดไฟล์ภาพที่เราจะใช้เห็นไหมคะ ตรงในวงเล็บ ให้เราระบุ ทีนี้บางคนก๊อปปี้ไฟล์ภาพมาแล้วชื่อมันยาวทำอย่างไร เด็ก ๆ Rename ค่ะ คลิกขวาแล้วเลือกเปลี่ยนชื่อ ใช่ไหม ชื่อมันยาวเดี๋ยวจะพิมพ์ผิดใช่ไหมลูก ก็เปลี่ยนเป็น Backgrond ตัวย่อเป็น bg ใส่หมายเลขเข้าไป Background อันที่ 1 bg1 ใช้คำว่า "bg" ภาษาไทยขอโทษ BG แล้วก็เลข 1 นะคะ อันนี้ Background ตรงไอคอนก็เหมือนกัน Icon ก็ทำวิธีเดียวกัน Rename แล้วก็เปลี่ยนเป็นไอคอน 1 ก็ได้ แล้วก็ตามด้วยเลข 1 โอเคหรือยัง ทีนี้ แล้วเด็ก ๆ มั่นใจหรือเปล่าว่านามสกุลตัวเองอะไร มันจะไม่เห็นนามสกุลใช่ไหม วิธีที่จะให้เห็นนามสกุลเราต้องคลิกว่ามุมมองเป็น... รายการจะไม่เห็น ต้องเป็นรายละเอียดนะคะ นี่เห็นไหมจะเห็นนามสกุลไฟล์ก็คือ jpg อย่างนี้อยู่ด้านหลังเห็นไหมคะ ตรงนี้คือนามสกุล เปลี่ยนมุมมองเป็นรายละเอียดนะลูก เพราะอะไร เพราะตอนเรียกภาพ เห็นไหมคะ ต้องใส่ชื่อไฟล์ แล้วก็ตามด้วย . แล้วก็ตามด้วยนามสกุลของไฟล์นั้น มันต้องใส่ด้วยเข้าใจนะ ลองมาดูกันนะคะ ไปที่ Sublime ค่ะ บรรทัดที่ 8 นะคะ ไปที่บรรทัดที่ 8 เราจะใช้คำสั่ง เราจะใช้คำสั่ง กดผิด ขอโทษ มือไวไปไหนนี่ ที่บอกว่าชื่อตัวแปรเราจะใช้คำว่า "Icon" นะคะ เข้าไป เพราะฉะนั้น เราจะพิมพ์คำสั่งนี้นะคะ Icon = pygame.imในวงเล็บแล้วก็ตามด้วยชื่อไฟล์ภาพของเรานะคะ เพราะฉะนั้น ประกาศตัวแปรชื่อว่า icon ลืมแก้ภาษาไทยอีกแล้ว i-c-o-n ใช้ตัวเล็กนะคะ icon เวลาตั้งชื่อตัวแปร วรรค =pygame.image ค่ะ i-m-a-g-e แล้วก็ตามด้วย .load l-o-a-d นะคะ แล้วตามด้วยเครื่องหมาย () ค่ะ ในวงเล็บใส่เครื่องหมายคำพูดค่ะ จะเป็นสเต็ปอย่างนี้นะคะ จะต้องได้แบบนี้ ในเครื่องหมายคำพูดเพื่อไม่ให้ผิดพลาดเด็ก ๆ เปิดดูชื่อไฟล์ตัวเองด้วย ดูชื่อไฟล์ตัวเองด้วยชื่ออะไร icon ชื่อนะคะ ชื่อไฟล์ชื่อว่า "icon" icon 1 แล้วตามด้วยนามสกุลต้องใส่ . นะคะ นามสกุลของเรา ก็คือตรงนี้ที่บอก ด้านหลังนี่เห็นไหมคะ jpg ก็ใส่ jpg ลงไป ตัวเล็กนะ ๆ เมื่อไปเรียกภาพมา ต้องสั่งให้มันแสดง คำสั่งนี้จะไปอยู่ยังตำแหน่ง... เด็ก ๆ จะต้องมาในเงื่อนไขนะคะ เข้ามาใต้ run กด Enter ลงไป 2 บรรทัด ดูตำแหน่งนะคะ มาที่หลัง run นะ เราจะอยู่ที่บรรทัดที่ 19 เราจะใช้คำสั่ง pygamedisplay.แสดงไอคอนแล้วก็ตามด้วยชื่อตัวแปรที่เราตั้ง ก็คือตัวแปร icon นั่นเองนะคะ ให้อยู่ที่บรรทัดที่ 19 นะคะ พิมพ์ pygame.setset_icon นะคะ มี Underscore ไหมจำไม่ได้ _ ด้วยนะ แล้วก็ตามด้วย icon ในวงเล็บใส่ชื่อตัวแปรนี้เห็นไหม ดูนะคะ สังเกตชื่อ icon ตอนนี้ 1, 2 มี 2 อัน แต่ icon ที่เป็นตัวแปร ก็คือ icon ตัว i-c-o-n เราต้องเลือกให้ถูกนะคะ เพราะฉะนั้น คลิก icon ตัวเล็กนะคะ กด Enter ขาดอะไร ขาด Display ขอโทษ pygame.display ก่อน ใส่ display ก่อน . ลืม pygame display แปลว่า แสดงผลไง ให้แสดงผลไอคอนนี้นะคะ ถ้าใครพิมพ์บรรทัดนี้เสร็จนะคะ เนื่องจากใน loop เรานี่มีการเปลี่ยนแปลง เพราะฉะนั้น เราจะต้องพิมพ์ Updatrก็คือพิมพ์ pygame.display.update Update ตรง pygame.display Tab เข้าไป ๅ นะคะ เพราะอะไรถึงเอามาใน loop เพราะการแสดงผล caption นี้ มันจะต้องทำอยู่เสมอน่ะ ก็คือมันมีการเปลี่ยนแปลงอยู่ใน loop นี้นะคะ เราก็เลยมาใส่ไว้ในนี้ ต้องใช้คำสั่ง pygame.display.แค่ครั้งที่มีการเปลี่ยนแปลงข้างในน่ะ พอมีเปลี่ยนมันมีแล้วก็ไม่ต้องพิมพ์เพิ่ม ลองกด Ctrl + B ค่ะ เมื่อเสร็จแล้ว เห็นไหมคะ โลโก้ แล้วก็ชื่อเกมขึ้นเลย เห็นไหมเปลี่ยนนะคะ เปลี่ยนจากตัวเดิมนี่ ตัวเดิมเห็นไหมไอคอนเปลี่ยนไหน เห็นไหมคะ เปิดให้ดู 2 หน้าต่าง อันเก่าแม่ยังไม่ได้ปิดก็เลยให้ดูได้ อันนี้คือตัวที่เรากำหนดชื่อชื่อแล้วก็กำหนดไอคอนให้ใหม่เห็นเปล่า สังเกต โลโก้ก็เป็นยูนิคอร์น ก็เปลี่ยนเป็น... ชื่อ Caption ก็เปลี่ยนเป็น Unicron Game นะคะ มีใคร Error อีกไหม จะ Error กรณีที่ 1. ไปดูชื่อไฟล์ตรงไหม ไฟล์ในเครื่องตัวเองต้องเช็กชื่อไฟล์ Caption ก็คือ icon ใช่ไหมคะ บรรทัดที่ 8 ให้ดูที่บรรทัดที่ 8 เป็นคำสั่งให้ไปโหลดภาพใช่ไหม ภาพ icon มาใช่งานนั่นเองนะคะ ตรงคำว่า icon ก็คือชื่อตัวแปรของภาพที่เราจะเอามาใช้ต้องบอกชื่อตัวแปร คือ ต้องตั้งชื่อให้มัน เพื่อเวลาจะมาเรียกเห็นไมคะ ตรง pygame.display.set_icon นี่ ตรงเวลาจะเรียกใช้ icon มันจะเรียกใช้ถูกนะคะ เพราะฉะนั้น ในบรรทัดที่ 8 คำสั่ง pygame.image.load ดูมุมมองคลิกขวาในโฟลเดอร์ตัวเอง คลิกขวามุมมอง แล้วก็เลือกเป็นรายละเอียด นี่ไง แล้วมันก็จะมี... จะเอาภาพไหน จำชื่อภาพได้หรือเปล่า เพราะฉะนั้น จำชื่อแล้วก็นามสกุล ในช่องที่วงเล็บน่ะค่ะ ที่แม่ใส่ชื่อ icon ชื่อในวงเล็บน่ะคือชื่อในวงเล็บน่ะ คือ ชื่อไฟล์ภาพของเครื่องของเด็ก ๆ นะคะ อย่ามาพิมพ์ตามนะ ไม่อย่างนั้นมันหาไม่เจอนะ เข้าใจนะ ในบรรทัดที่ 8 ตรงชื่อไฟล์ที่อยู่ในเครื่องหมายคำพูดน่ะลูก ไฟล์นั้นคือไฟล์ที่เครื่องของเด็ก ๆ นะ เปิดดูไฟล์ตัวเองนะ ไม่ได้ให้มาพิมพ์ตามนะคะ บิว ๆ บิวดูนะคะ ตรงบรรทัดที่นี้ นี่ ชื่อ ชื่อนี่ตรงบรรทัดที่ 8 ตรงในวงเล็บตรงเครื่องหมายคำพูด ชื่อบิวจะต้องดูชื่อโฟลเดอร์ที่ตัวเองเอารูปไอคอนไปเก็บไว้น่ะลูก เสร็จแล้วเปิดโฟลเดอร์นี้มา คลิกขวาว่ามุมมองแล้วเลือกเป็นรายละเอียด นามสกุล จะดูนามสกุลจะดูนามสกุลของไฟล์ นามสกุลจะอยู่ตรงนี้ จะอยู่ตรงช่องกลางน่ะ jpg นั่นคือนามสกุล เพราะฉะนั้น ไฟล์ของนิวนามสกุลอะไร ของบิวนามสกุลอะไรไม่อย่างนั้นผิด บิว รูปที่เลือกมาใช้น่ะ ถ้า bg bg คือ Background เอา icon เอาตัวอื่นเข้าใจหรือเปล่า เปลี่ยนรูป เพราะรูปนั้นน่ะมันเป็นรูป Background ไอ้รูปที่นิวโหลดมาน่ะ ตัวไหน พอพิมพ์คำสั่งในบรรทัดที่ 8 เสร็จนะคะ เด็ก ๆ จะต้องเข้ามาใน loop ให้มายังตำแหน่งที่อยู่ต่อจาก Run 2 บรรทัด Enter ลงมา 2 บรรทัด แล้วกด Tab 2 ครั้ง ให้มันอยู่ตรงกับคำว่า "if" ให้มันอยู่ตรงกับคำว่า "if" แล้วก็พิมพ์คำสั่ง pygame.display.set_icon ตรงนี้ก็คือชื่อที่อยู่ตรงบรรทัดที่ 8 ข้างบนนะคะ ชื่อที่อยู่ในวงเล็บนี้ คือ ชื่อที่อยู่ตรงนี้ พอคลิกแล้วมันจะหากันเจอ มันจะจับคู่ให้กันเลยเห็นไหมคะ มีกรอบให้กันมันต้องเป็นชื่อตัวนี้ ตัวแปรพอพิมพ์บรรทัดนี้เสร็จ ให้พิมพ์บรรทัดที่ 19 ต่อ Tab แค่ 1 ครั้งนะคะ ให้ตรงกับ for แล้วก็พิมพ์ pygame.display แล้วก็วงเล็บปิด มีแล้วครับผมหาไม่เจอ เดี๋ยวมัน m เฉย ๆ เมื่อกี้นี้ pygame อยู่ไหนต้องดันให้เขามาให้หมดเลยไม่ใช่แกว่าจะหาเจอเรียบร้อย (อาจารย์สุธิรา) แป๊บหนึ่งนะคะ กำลังแก้โค้ด บรรทัดที่ 6 ใช่ไหม แฝดบรรทัดที่ 6 ไล่คำสั่ง ค่อย ๆ ไล่ไปค่อย ๆ ไล่ลูกค่อย ๆ ไล่ (อาจารย์สุธิรา) จุดที่จะผิดนะคะ 1. ชื่อ ใช่ไหม ชื่อรูป icon ตัวเองน่ะ เด็ก ๆ บอกแล้วตรงชื่อน่ะ จะต้องเปลี่ยนเป็นชื่อที่อยู่ในเครื่องตัวเอง ไม่ใช่ชื่อจากเครื่องแม่ เข้าใจไหม เพราะพอมันหาไม่เจอ มันหาไม่เจอมันก็จะขึ้น Error เพราะมันไม่รู้จักไฟล์นี้ มันหาไม่เจอนะคะ เพราะฉะนั้น ต้องเช็กด้วยว่าไฟล์รูปของตัวเองน่ะชื่ออะไร อย่ามาพิมพ์ตามบอกแล้ว ชื่อไอคอนของใครของมันนะคะ กับจุดที่ผิดบ่อย ก็คือตำแหน่งการ Tabนี่ โดยปกติ ถ้าเป็นโค้ดนะคะ มันจะไม่ใช้วิธีการกด Space bar เพื่อเลื่อนไปยังตำแหน่งนั้น แต่กด Tab เพื่อเข้าไปยังตำแหน่งที่เหมือนตัว pygame.display.set นี่ มันจะต้องอยู่ตรงเงื่อนไข ก็คือ if นะ แม่ก็จะใช้วิธีกด Tab เข้าไป 2 ที แต่เด็ก ๆ ใช้วิธีกด Spacebar ไปจนถึงตำแหน่งนั้น ซึ่งมันผิด นึกออกนะ เพราะอะไร เพราะตัวโปรแกรมนี้มันสร้างเหมือนมันทำ Tempate ไว้แล้ว พอตำแหน่งนี้ปุ๊บนี่ if นี่ คำสั่งมันคือคำสั่งที่อยู่ในเงื่อนไขของตัวนี้ นึกออกไหม และส่วนตัวนี้ pygame.display.update นี้มันเป็นตัว loop ของ for เห็นไหมคะ เพราะฉะนั้น เราจะวิธีการกด Tab เราจะไม่ใช้วิธีกดแป้น Backspace Space bar จะใช้กดตอนเว้นวรรคเท่านั้น ถ้าบอกว่าไปบรรทัดใหม่ ให้กด Tab ฃนะคะ ใช้วิธีการกด Tab แทนนะ จะไม่ใช้วิธีการกด Spacebar นะคะ Error จะขึ้นตามบรรทัดบอกแล้วเด็ก ๆ ต้องย้อนไปดูตรงบรรทัดไหนผิดอย่างไรนะคะ เป็นครั้งแรกเพราะยังไม่ชิน เดี๋ยวพอทำไปเรื่อย ๆ เดี๋ยวจะรู้ Error ก็จะไม่เกิดขึ้นอีกแล้วนะคะ เพราะเหมือนรอบหน้าถ้าเขียนเกมตัวใหม่ แม่บอกแล้วก๊อป (ปี้)ถูกไหม ก๊อปฯ มาแล้วนี่ไปวางเลยแล้วไปแก้แค่บางโค้ดนะคะ ยังเหลือเปลี่ยน Background กับใส่สี แต่น่าจะเมื่อยแล้ว เอาไว้ต่อสัปดาห์แล้วกันนะคะ แล้วจะมาพาทำให้การบ้าน ให้ไปโหลดภาพที่จะเอามาใช้เป็นตัวที่เราจะทำเกมน่ะ นึกออกไหม โหลดตัวการ์ตูนน่ะ ที่เราจะเอามาใช้ วาดเองก็ได้ จะวาดเองก็ได้นะคะถ้าไม่โหลด วาดแล้วก็... นะคะ หรือใครจะวาดรูปเองก็ได้ จะใช้ตัวนี้ทำนะคะ โอเคนะ ใครยัง Run ไม่ผ่านอีก ก็จะเป็นอย่างนี้ล่ะ มันขึ้น Error อะไรเดี๋ยว ๆ กลับมาตำแหน่งเดิม (อาจารย์สุธิรา) ต้องลบออกมันมี 2 คำสั่ง ต้องลบออกอันหนึ่งนะ แล้วรอก่อน คำสั่งทีต้องลบตัวนี้ออก ลบอีกตัวหนึ่ง ๆ ไม่ได้ (อาจารย์สุธิรา) นี่มันขึ้น Error ที่บรรทัดนี้ เหมือนมีอะไรค้างเลย บรรทัดที่ 10 นั่นไง (อาจารย์สุธิรา) ก็เพราะตัวนี้เอาขึ้นไปแล้ว เหมือนเปิดแล้วก็ปิดน่ะอย่างที่บอก มันจะมีเปิดแล้วก็ปิดนะ โอเคนะคะ ตำแหน่งการ Tab แต่ละส่วนก็จะมีส่วนนะคะ สำหรับวันนี้รู้วิธีการทำหน้าจอแล้วนะคะ ถ้าใครอยากเปลี่ยน icon หรือชื่อรู้วิธีเปลี่ยนตำแหน่งเปลี่ยนแล้วนะ เพราะครั้งมาถ้าเกิดเกมเราไอคอนไม่ตรงกับตัวเกมมันก็ไม่ใช่ใช่ไหมเราก็ค่อยมาเปลี่ยน โอเคนะคะ มีอะไรสงสัยอีกไหม การบ้านที่สั่งไปก็คือไปโหลดรูปใช่ไหม รูปตัวการ์ตูน ตัวละคร แล้วก็องค์ประกอบอื่น ๆ ที่เราคาดว่าจะได้ใช้นึกออกนะ เช่น สมมติ สมมติว่าถ้าทำเกมอะไรนะ ไดโนเสาร์วิ่งน่ะมันต้องมีตัวไดโนเสาร์ แล้วทำอย่างไรมันจะวิ่ง ต้องมาดูกันนะคะ ไปโหลดไฟล์ที่โหลดมา หรือจะวาดมาก็ได้ เพื่อนบอก อยากวาด ถ้าอยากให้มันเคลื่อนไหวเราก็ต้องทำให้ภาพมันมีภาพเดียวไม่ได้นึกออกไหมมันต้องมีภาพที่มีการเปลี่ยนท่าทาง นึกออกนะ จะโหลดตัวอื่นมาหลาย ๆ ตัวก็ได้อย่างนี้นะคะ โอเคนะคะ Save อย่าลืม Save file เสร็จแล้วก็ปิดโปรแกรมได้ค่ะ ปิดโปรแกรม ปิดเครื่องนะคะ เดี๋ยวใส่สีพื้นเราจะใช้ Background เป็นภาพไปเลยก็ได้ แต่ถ้าอยากลองใส่ดู เดี๋ยวใส่ต่อสัปดาห์หน้านะคะ โอเคนะ สำหรับสัปดาห์นี้พอแค่นี้ล่ะค่ะ พอแค่นี้ล่ะคะ 16.33 น. แล้ว (อาจารย์สุธิรา) ขอบคุณพี่ล่ามด้วยนะคะ ยังไม่หิวเลยจะกินอะไร ยังไม่หิวนะ แต่ถามว่าจะกินอะไรดี [สิ้นสุดการถอดความ]