(อาจารย์สุธิรา) เราจะมาทำต่อจากสัปดาห์ที่แล้วนะคะ เดี๋ยว อันเดิมอยู่ไหน เผื่อในกรณีที่บางคนยังไม่ได้โหลด Background มานะ เปิด… ในกรณีที่ ในสัปดาห์ที่แล้วเราสร้างตัว Scene หรือฉากของเกมเราแล้วนะ ทีนี้ Background มัน ก็จะเป็นสีดำอยู่ใช่ไหมคะ ก่อนอื่น เด็ก ๆ อย่าลืมเปิดอะไรคะ โปรแกรม Sublime ถ้าของใครคลิกเข้ามาตรงหน้าต่าง Windows แล้วมันไม่เห็นนะ คนมาใช้เยอะแล้วมันเลื่อนนะคะ เอ๊ะเราก็ว่าเราพิมพ์ไปแล้วนี่นะ ใช้คำค้นหานะคะ Sub... พอเจอ Sublime Text เราก็คลิก Open เพื่อเปิดโปรแกรมของเรานะ เด็ก ๆ ต้องเปิดโปรแกรมรอเลยนะคะ ถ้าขึ้นอัปเดตมา บอกแล้วว่ากด Cancel ไปเลยนะคะ เพราะมันเป็นเวอร์ชันล่าสุด เรายังอยู่ที่ส่วนของการกำหนดหน้าจออยู่นะคะ เรายังไม่ไปตรงอื่นเลย เราได้ icon ได้ส่วนของ Scene ต่อไป ก็คือ... ตัวเดิมเรา แล้วลองกด Ctrl + B 1 ครั้ง กดปุ่ม Ctrl กับปุ่ม B นะคะ สังเกต เด็ก ๆ จะสังเกตเห็นว่าหน้าจอเกม หรือ Scene ของเรามันจะเป็น พื้นหลังมันจะเป็นสีดำ ก็คือถ้าเราไม่ต้องการให้… เราสามารถเปลี่ยนสีของพื้นหลังฉากเราได้นะคะ เพราะฉะนั้น คำสั่งที่ใช้ก็คือคำสั่งนี้ นะคะ ทีนี้ แต่ทีนี้ ก่อนที่จะใส่สี หรือจะรู้ว่าสีไหนเป็นสีอะไร สิ่งที่เราจะต้องทำก็คือเด็ก ๆ ให้เปิด Google Chrome ให้เด็ก ๆ เปิด Google ขึ้นมานะ อยู่หน้า Google นะคะ นี่ ให้เปิด Google ขึ้นมาอย่างนี้ แล้วให้พิมพ์คำค้นว่า คำค้นว่าอะไร ลืม โอเค เห็นไหมคะ เห็นไหมคะ พิมพ์ตามอันนี้ Color to RGB เห็นไหม พิมพ์คำค้นตามตัวนี้นะคะ c-o-l-o-r-s colors แล้วก็ t-o to r-g-b ก็คือให้พิมพ์คำนี้นะคะ เด็ก ๆ c-o-l-o-r เติม s ด้วย colors colors to t-o to แล้วก็ตัว r ตัว g ตัว b ตัวเล็ก ตัวใหญ่ได้เหมือนกันหมดนะคะ แล้วกดค้นหาได้เลย Enter เพื่อค้นหาได้เลย แล้วให้เรา ใครขึ้นหรือยัง ใครยังไม่ขึ้นหน้านี้ ให้เลือกตัวแรกนะคะ เอ้า สไลด์มันไม่เปลี่ยนหรือ เดี๋ยวนะ โอเคไหม นี่นะคะในช่องค้นหา ให้เด็ก ๆ พิมพ์ colors to rgb ขอโทษทีลืมดู จากนั้นกด Enter เมื่อพิมพ์เสร็จแล้วกด Enter นะคะ มันจะขึ้น โอเคไหมคะ ให้เลือกอันแรกเลย RGB ลิงก์แรก RGB Color Codes Chart เราจะต้องการ Chart สี เพื่อจะได้พิมพ์ค่าสีถูก เพราะฉะนั้น เราต้องเลือกตัวนี้นะลูก เราจะดูว่าสมมติเราอยากได้สีนี้ ค่ามัน... ค่าสีมันคืออะไรนะคะ คลิกเข้าไป 1 ครั้ง นี่ค่ะ จะดูอย่างไรว่า Chart สีคืออะไร เด็ก ๆ คลิกที่ช่องสีปุ๊บ นี่นะคะ เห็นไหมมันจะมีค่าสีนี่ขึ้นมา ก็คือตัวนี้ นี่ ค่าสีของเขานะคะ หรือดูจากตรงนี้ก็ได้ เหมือนกัน เห็นไหมคะ ให้... ถ้าเราจะใช้ก็คือวิธีการนะคะ สมมติเอาชมพูนี้ อย่างนี้ กด... ตัวนี้ไม่ขึ้นหรือ ก็คือเราจะก๊อบปี้ค่าสีตัวนี้ไปใส่ นึกออกนะ มันมี 2 Code นะคะ ดูในตารางนี่ มันจะมี H กับ Decimal Code Hex Code กับ Decimal Code นะ มี 2 ตัวนะคะ เดี๋ยวมาดูว่าตัวที่เราใช้คือตัวไหน เปิดหน้านี้ทิ้งไว้เลยนะ นะคะ เปิดหน้านี้ทิ้งไว้เลย ใครยังไม่ขึ้นหน้าที่มีชาร์ตสีนี้ ยกมือ ขึ้นหรือยัง ใครยังไม่ขึ้นยกมือนะเด็ก ๆ ขึ้นไหมคะ เดี๋ยวกรอกค่าสีไม่ถูกลูก มันจะไม่ได้ ใส่ไม่ครบ มันไม่ได้เด๊ ไม่ต้องไปนั่งจำนะคะ เรามา Search แล้วก็เปิดเอานี่ มันเยอะ สีมันเยอะ อยากได้สีอ่อน สีแก่อะไรอย่างนี้ เปิดหน้านี้ทิ้งไว้ด้วยเลยนะคะ แล้วเรามาดูคำสั่งเราต่อ สิ่งที่จะทำ ก็คือตัวคำสั่งนะคะ ก็คือเราจะต้องกำหนดตัวแปรสีเสียก่อน แล้วก็ตามด้วย ค่าสีที่เราจะใช้นะคะ พอใส่ พอได้ค่าสีเสร็จ เราค่อยมา Field ใช้คำสั่ง Field เพื่อใส่สีลงไปในฉากเราเห็นไหมคะ นะคะ และสิ่งที่เราจะต้องมีเพิ่มขึ้นมา ก็คือส่วนของการอัปเดตนะคะ อันดับแรก อันดับแรก ไปที่บรรทัดที่... ดูนะคะ เด็ก ๆ เด็ก ๆ จะต้องไป เปิด Sublime ขึ้นมา โอเคไหม บรรทัดที่เราจะยังอยู่ ก็คือต่อจาก pygame.display.set เห็นไหมคะ สิ่งที่เราจะทำก็คือสร้างตัวแปรชื่อว่า bg bg มาจากคำเต็มว่า Background นั่นเองนะคะ ฺbg แล้วก็ตาม colors แล้วกัน bgcolor นะคะ ตามด้วยเครื่องหมายเท่ากับ แล้วก็ใส่วงเล็บ เอ้ย ไม่ใช่ใส่วงเล็บ ตามด้วยเครื่องหมายเท่ากับ แล้วก็ค่าสีที่เราจะใช้อยู่ตรงไหน เรามาดู ไปเปิดผิดอันใช่ไหมนี่ ทำไมหน้าต่างขึ้นเยอะ เดี๋ยวนะ ตัวนี้ไหม ตัวไหนนี่ ตัวนี้แหละ แล้วก็ใส่ค่าสีนะคะ ดูนะคะ ก็คือตัวเลขในชุดมัน เอาจากตรงนี้เด็ก ๆ นี่ เอาค่าตรง Decimal Code เช่น อยากได้สีอะไรลูก สมมติ สมมติเราจะเอาสีนี้ ให้เห็นว่าจากสีดำน่ะค่ะ ให้เห็นชัด ๆ ว่าเปลี่ยนสีแล้วนะ สีฟ้าอยู่ไหนนี่ ขอฟ้านี้แล้วกัน aqua deep sky blue อันนี้แล้วกัน ให้เราก๊อบตัวเลขชุดนี้นะคะ ตัวเลขที่อยู่ในตารางสุดท้าย นึกออกนะ ช่องสุดท้ายนี่ Decimal Code เอา Decimal Code เพราะอะไร Decimal Code เป็นค่าสี RGB เหมือนในวงเล็บเลยเห็นไหมคะ ก๊อบเลยนะคะเด็ก ๆ ไม่ต้องจำ กด ทำ Highlight ครอบ แล้วก็เลือก แล้วก็กด Copy เอาแค่ 3 อันในชุด ในวงเล็บนี่นะลูก ห้ามเอาเกินกว่านั้น คัดลอกแล้วก็เอามาวางใน Code เรานะคะ เท่ากับ แล้วก็กด Ctrl + B วาง อย่างนี้ โอเคไหม กำหนดค่าให้ Background Color เสร็จแล้ว สิ่งที่เราจะต้องทำต่อมา ก็คือเราจะมาเรียกใช้ค่าสีนั้นนะคะ เอามาไว้ที่ไหน ดูตำแหน่งนะคะ เห็นไหม อยู่ระหว่างคำสั่ง if event.type == pygame.QUIT เห็นไหมคะ ก็คือบรรทัดที่เท่าไรนะ บรรทัดที่ 18 กด Enter หนึ่งครั้ง เราจะอยู่ที่ตำแหน่งที่บรรทัด 18 นะคะ ทีนี้เด็ก ๆ ต้องมาดูอะไร ดูตัวแปรฉากที่เราตั้งไว้ ชื่อว่าอะไรคะ เราตั้งชื่อตัวแปรฉากเรา คือ ตัวแรกนี่ ถ้าใครตั้ง screen ดูนะคะ ดูชื่อตัวนี้ตัวแปรของฉากเรานี่เห็นไหมคะ เพราะตอนเรียกใช้ ดูรูปแบบคำสั่งดี ๆ นะคะ ชื่อตัวแปรฉาก แล้วตามด้วยเครื่องหมาย . แล้วตามด้วยคำสั่ง fill แล้วตามด้วยในวงเล็บ ชื่อตัวแปรสี แล้วก็ค่าสีนั้นนะคะ โอเคหรือยัง นะคะ เพราะฉะนั้น ตัวแปรฉากเรา ชื่อนี้นะ เราจะอยู่ที่ตำแหน่งบรรทัดที่ 18 นะ ดูดี ๆ นะคะ อย่าใส่ผิดที่นะ 18 แล้วตำแหน่ง ก็คือต้องตรงกับคำว่า "Run" เรียกใช้ Screen นะคะ กด s ปุ๊บ screen ขึ้น นั่นคือตัวแปรที่เราต้องการ Click 1 ครั้ง ตามด้วยเครื่องหมาย เอ้ย ตามด้วย . แล้วก็พิมพ์ f-i-ll fill นะคะ แล้วก็ตามด้วยวงเล็บ วงเล็บอะไร วงเล็บตัวแปรสีนี่ Background Color นี่ เห็นไหมคะ พิมพ์ b เดี๋ยว bgcolors มันจะขึ้นมา แล้วกดคลิก มันจะไม่ผิดเลยนะคะ แล้ว ตัวแปรสีแล้วก็ตามด้วยค่าสีนะคะ / ใส่เครื่องหมาย / ก่อนอื่นเด็ก ๆ Copy ค่าสีมาเสียก่อนนะ คัดลอก Copy bgcolors ใส่ / แล้วก็วาง โอเคนะคะ ทีนี้เมื่อเกิดการเปลี่ยนแปลงนี่ เราจะต้องมีคำสั่งสำหรับอัปเดต ก่อนบรรทัดสุดท้าย เด็ก ๆ ดู บรรทัดที่ 20 ซึ่งเป็นบรรทัดที่เราให้จบเกมนะคะ เรากด Enter เพื่อเพิ่มบรรทัด นะคะ ในบรรทัดที่ 21 ใส่ # เข้าไป เราจะบอกแล้วว่าตรงนี้คืออัปเดตนะคะ เป็นตำแหน่งที่สำหรับคำสั่งอัปเดต จะได้รู้นะคะ อยู่ตรงนี้ อัปเดตคำสั่งที่ใช้นะคะ ก็คือ pygame.display.update( ) หน้าไหนนะ นี่ล่ะหน้าโค้ด ไหน color จะอยู่ที่กำหนดหน้าจอ ต่อจากบรรทัดที่ display game ตั้งชื่อตัวแปร bgcolors รูปแบบ ก็คือชื่อตัวแปรนะคะ แล้วก็ตามด้วยค่าที่เราจะหา แล้วเราก็ไป Copy ค่าสีในตารางมาวาง รหัสสีที่บอกว่าจากเว็บนี่ไงที่ให้เปิดนี่ นี่ ๆ ๆ จากตารางนี้ เอาไว้ไหนหน้านี้ ให้ Search แล้วน่ะ ไปต่อนะคะ ของคนอื่นพิมพ์ pygame.display.update นะคะ แล้วก็วงเล็บปิด ตรงตำแหน่งก่อนจะอันนี้ ก่อนจะ… ไหนล่ะ Sublime Sublime ไม่ขึ้น ต่อไปบรรทัด Update เรานะ มันจะตรงกับตำแหน่ง Run นะลูก มันจะ Tab เข้าไป 1 Tab เห็นไหมคะ ฟังก์ชันมันจะโดนเรียกขึ้นมา นี่นะครับ 1 อัน เห็นไหม ตำแหน่ง Update จะอยู่ก่อนเราจะจบ มันจะอัปเดตการทำงานก่อนทุกครั้ง ให้มันอัปเดตก่อนเสมอนะคะ ก่อนจะออกจากโปรแกรม ว่าอย่างนั้นเถอะ โอเค รู้แล้ว ๆ ๆ ผิดแน่ เดี๋ยวนะ ตอนเรียกใช้นะคะ เราใส่แต่ชื่อมันก็ได้ เพราะตัวแปรเรากำหนดแล้วนะว่าสีอะไร เราเรียกแต่ background colors พอนะคะ ค่าสีไม่ต้องใส่ ในที่นี้ / หมายถึง ก็คือให้เลือกว่าจะใส่ตัวแปร หรือจะใส่ค่าสี ซึ่งใส่ชื่อตัวแปรมันจะขึ้น ถ้าเรามีแล้วมันจะขึ้นมาเลย เพราะฉะนั้นจะง่ายกว่า ใครพิมพ์ อัปเดตเสร็จแล้วกด Build ได้เลย Ctrl + B ได้เลยนะคะเด็ก ๆ เพื่อดู สีไม่เปลี่ยนหรือ Error ไม่ขึ้นด้วย ไหนแม่อัปเดตให้ ตำแหน่งไหนผิด bgcolors screen.fill background colors update run ถ้าเป็นฟอนต์ ไม่ให้เติมสีแล้วหรือเวอร์ชันนี้ ไม่แน่ใจแฮะ ไม่ให้อัปเดต มันไม่ยอมอัปเดต โอเค รู้แล้ว ใส่ตำแหน่งผิดนะคะเด็ก ๆ ขอโทษที ตำแหน่ง screen. fill เลื่อน บรรทัดที่ run = False ใช่ไหม ปึ๊บ กด Enter แล้ว ทีนี้ ถ้าเมื่อ Enter ลงมา แล้วมันลงมาตำแหน่งนี้ให้เด็ก ๆ กดปุ่ม Backspace ย้อนหลังไป 2 ตำแหน่ง ให้มันอยู่ตรงกับคำว่า for เห็นไหมคะ แล้วค่อยเอา screen.fill มาใส่ แล้วพออัปเดตเห็นไหม เด็ก ๆ จะได้... เอ้ย ผิดตัวใช่ไหม มีหลายตัว งง เห็นไหมคะ เปลี่ยนสีแล้ว ใครยังสีไม่เปลี่ยน ยกมือ ใครไม่เปลี่ยน ให้ดูตำแหน่งแรก ไล่ไปทีละตำแหน่งนะคะ กำหนดตัวแปรนี้หรือยัง กำหนดหรือยัง อันนี้เสร็จหรือยัง บรรทัดที่ 10 มีตัวแปรสี มีค่าแล้ว โอเคนะคะ ไปดูบรรทัดต่อมา ก็คือสีที่เราจะใส่ มันจะอยู่ใน... เห็นไหมคะ ตำแหน่ง loop ตำแหน่ง loop ที่ต่อจากบรรทัดที่ หาปุ่ม delete ไม่เจอ ต่อจาก run = False ก็คือบรรทัดที่ 19 ให้ดูบรรทัดที่มีคำว่า "run = False" มิ่งออกหรือยังลูก สีออกหรือยัง กด Enter 1 ครั้งปึ๊บนี่ สังเกตตำแหน่งเคอร์เซอร์มันจะอยู่ตรงกับ Run ใช่ไหม ให้เรากดปุ่ม Backspace ต้องกดปุ่ม Backspace 2 ทีนะคะ เพื่อให้ตำแหน่งเคอร์เซอร์มันอยู่ตรงกับคำว่า "for" เห็นไหม for สีแดง ๆ ในบรรทัดที่ 16 เห็นไหมคะ เห็นไหม แล้วก็พิมพ์คำสั่ง screen screen ก็คือตัวแปรฉากที่เราตั้งไว้ กด s ปุ๊บ เจอ screen Enter แล้วก็ .fill แล้วก็ตามด้วยในวงเล็บชื่อตัวแปรสีนะคะ โอเคไหม เสร็จแล้วอย่าลืม พอเสร็จบรรทัดนี้นะคะ ในบรรทัดที่ 21 นี่ ให้ใส่ # เราจะต้องสั่ง มีคำสั่งอัปเดตด้วย นี่ เห็นไหมคะ อยู่ตรงกับ screen.fill นั่นแหละ pygame.display.update สำหรับเด็ก ๆ บางคนนะคะ พอพิมพ์ไปแล้วมันขึ้น Error นี่ สาเหตุหนึ่งให้ดูที่ตำแหน่งที่พิมพ์ แล้วลองทำอย่างนี้ครอบ ถ้าเด็ก ๆ ใช้ Tab มันจะไม่ขึ้น Error แต่ถ้าเมื่อไรตรงตำแหน่งนี้มันเป็น ... สีเทา ๆ ขาว ๆ นั่นแสดงว่า เด็ก ๆ ไปกดด้วยแป้น Space Bar เพื่อขยับตำแหน่งใช่ไหม ซึ่งใน Sublime บอกแล้วว่าไอ้โปรแกรมนี้มันโดนบล็อก โครงสร้างมานะ เพราะฉะนั้นห้ามใช้ Space Bar ในการ Tab คือ เลื่อนตำแหน่งของคำสั่งเข้าไปตามโครงสร้างตามแนวนี้ Space Bar จะใช้เฉพาะเมื่อมีการเว้นวรรคอย่างนี้เท่านั้น แค่ 1 จุดอย่างนี้เท่านั้น เห็นไหม สังเกตความแตกต่าง นี่ ถ้าเด็ก ๆ ใช้ Spacebar มันจะเป็นจุด ๆ เหมือนตรง while run เห็นไหมคะ แต่ถ้าเด็ก ๆ ถ้ามันเป็น Tab น่ะ เพราะโครงสร้างของมันโดนกำหนด เห็นไหมมันจะเป็นขีดยาว ๆ อย่างนี้ คือ เป็น Tab เห็นไหมคะ ทีนี้ คือสิ่งที่ต้องจำนะคะ เมื่อให้ขึ้นคำสั่งใหม่แล้วให้กดนี่ ไม่ให้กด Space Bar เด็ก ๆ จะต้องกด Tab นะ มันจะไปตามบล็อก บล็อกที่มันตั้งไว้นึกออกไหมลูก เพราะฉะนั้น ต้องกดให้ถูกนะคะ ใครยังไม่ออกอีก ออกหรือยัง โอเค เห็นไหม บาสเห็นหรือเปล่า บรรทัดที่ 2 ทีนี้จำไว้นะคะ เรียนวิชาเขียนโปรแกรมนี่ ถ้าใครไม่มา ตัวเองจะไม่ทันเพื่อนถูกไหม เพราะแม่จะเขียนต่อจากสัปดาห์ที่แล้ว จะไม่รู้ตำแหน่งใช่ไหมคะ แล้วก็จะผิด พิมพ์ผิดพิมพ์ถูก เพราะฉะนั้น อย่าขาดนะคะ เรียนวิชาเขียนโปรแกรมน่ะ ไม่อย่างนั้นจะไปต่อไม่ได้นะ บาสดูนะคะ ตรงนี้ที่มีชื่อไฟล์นี่ เครื่องตัวเองน่ะ เครื่องบาสน่ะ ไม่ใช่ เดี๋ยวใจเย็น ๆ ฟังให้จบแล้วค่อยพิมพ์ จะอธิบายก่อน ตรงที่บอกว่า image load นี่ เห็นไหมคะ สิ่งที่มันจะไปโหลด ก็คือชื่อไฟล์ ไฟล์ของบาสจะต้องอยู่ที่ C: แล้วก็ในโฟลเดอร์ที่ โปรแกรม Save ไว้ ชื่อโปรแกรมเราอยู่ตรงไหน ไฟล์นั้นก็คือนี่จะอยู่ตรงนั้นด้วย เข้าใจหรือเปล่า ดูนะ บาส ทีนี้ฟังไว้นะ ถ้าใครเข้าเรียนไม่ทันนี่ รอบหน้าต้องรอจนกว่าแม่จะสอนเพื่อนเสร็จนะ ไม่อย่างนั้นจะเสียเวลา แล้วตัวเองถึงจะได้ทำตามเพื่อนทีหลัง เพราะฉะนั้น ถ้าครั้งหน้าบาสไม่มาเข้า แล้วครั้งต่อไปบาสเข้าอย่างนี้ บาสจะต้องรอจนกว่าแม่สอนให้เพื่อนทำจนเสร็จ แล้วบาสถึงจะมาทำตามเพื่อนได้ โอเคไหมนะคะ ทีนี้เราใส่สีพื้นได้แล้วเห็นไหมนะคะ แล้วในกรณีที่... อันนี้คือในกรณีที่มีสี และอีกกรณีหนึ่งที่บอกว่าใส่ภาพพื้นหลังเข้าไปแทนใช่ไหมเด็ก ๆ Background อยู่ไหน Background ไหนล่ะ หา Background เจ้าของไม่เห็น ต่อไปนะคะสิ่งที่จะทำ ตั้งแต่สัปดาห์แรกเลยนะ บอกว่าให้หาภาพ Background ที่เราจะเอามาเป็นฉาก ใช่ไหมคะ สิ่งที่เราจะทำต่อมาก็คือคำสั่งนี้นะลูก เมาส์หาย เดี๋ยวนะ คำสั่งต่อไปนะคะ อยู่ไหนล่ะ เมื่อกี้เราไปไหนแล้ว เมื่อกี้อ่านถึง ทีนี้การใส่ภาพ Background แทนสีพื้นหลัง ในกรณีที่เรามีฉากที่เป็นภาพนะคะ รูปแบบ ก็คือเหมือนเดิมทุกครั้ง เราจะต้องสร้างตัวแปร เพื่อให้โปรแกรมมันรู้จักก่อนว่าไอ้ตัวนี้เป็นตัวแปรที่ไว้สำหรับเก็บภาพ ใครที่มีรูปมาแล้ว เหมือนเดิมนะคะ เด็ก ๆ อย่าลืมเช็กอะไรคะ เช็กนามสกุลภาพตัวเองใช่ไหมคะ โหลดมาอยู่ไหน เดี๋ยวนะ ของแม่โหลดมาแล้ว จะเอารูปนี้นะคะ เดี๋ยวขอ Move ไปก่อน Move ไปที่ Drive C: ขอเปิด C: นึกออกนะ โฟลเดอร์ที่เราเขียนโปรแกรมอยู่ตรงไหน เห็นไหม เราเปิด 2 อันเลยนะ เดี๋ยวเราจะเอารูปนี่มาใส่ เหมือนเดิมนะคะ คลิกภาพที่เราจะใช้งานแล้ว แล้วคลิก ถ้าใครขึ้น ตำแหน่ง Type อย่างนี้ นี่คือนามสกุลไฟล์ที่เราจะพิมพ์ลงไป นึกออกนะ เด็ก ๆ ดูตำแหน่งตรงนี้ให้ดี ๆ นะคะ ชื่อไฟล์แต่ละคนไม่เหมือนกัน นึกออกนะ รูป เอ้า หน้าไม่ออก เดี๋ยวนะ กดสิ้นสุดก่อน เดี๋ยวนะคะสไลด์อาจารย์มันไม่ขึ้น จอมันมืดเลย คืออะไรนี่ ทำไมเป็นจอดำ [เสียงหัวเราะ] อยู่ ๆ จอเราก็ดำมิดหมีเลย ได้แล้วนะคะ นี่ ๆ ๆ ๆ โอเค เด็ก ๆ ดูตรงชื่อนะ ชื่อกับนามสกุล จะต้องเป็นชื่อ แล้วก็นามสกุลของไฟล์ตัวเองเข้าใจไหม เข้าใจไหมคะ เพราะฉะนั้นเราต้องดูในโฟลเดอร์เรานะ ไม่ใช่แม่พิมพ์ชื่อ colorcandy_bg ก็พิมพ์ชื่อนั้นตามแม่ ไม่ใช่ นึกออกนะคะ ชื่อไฟล์ ภาพของใครของมัน เข้าใจนะ มันจะเป็นชื่อของตัวใครตัวมันนะคะ ตัวใครตัว… ไม่ใช่ดูแต่ชื่อนะ ดูนามสกุลมันด้วย นึกออกนะ 2 อย่างนี้จะเป็นชื่อ ของเรา ของเรา ของเรา ของเรา ของเรานะ ไม่ใช่แม่พิมพ์ชื่อของแม่ ตัวเองก็มาพิมพ์ชื่อแม่ตามไม่ใช่ ให้นึกถึงนะ โอเค ก่อนอื่นก็คือต้องเช็กก่อนว่านามสกุลไฟล์เรามันเป็นไฟล์อะไรด้วย ทีนี้บาส บาสยังไม่ได้โหลดไหม โหลดหรือยังถามเธอสิ โหลดรูป background มาหรือยัง โอเค อย่างนั้นเริ่มได้ ตัวแปรแรกนะคะ เปิด Sublime เรา เราก็จะมาที่ตำแหน่ง... ยังอยู่ในการกำหนดหน้าจอเกมอยู่ เห็นไหมคะ เราจะไปต่อจากบรรทัดที่ 10 Background Color เลยนะคะ เมื่อกี้มี background color แล้ว ทีนี้ก็เป็น bg เหมือนเดิม ตัวแปรตั้งเหมือนกันได้ ไหงเป็นตัวใหญ่ bg แต่จะเป็น pic แทน เอ้ย ใช้ pic สั้นหน่อย image จะยาวไป แต่ทีนี้ เพื่อไม่ให้สับสนนะ ใช้ pic นี่ล่ะสั้น ๆ หน่อย เดี๋ยวจะเรามาสับสนกับ image อีก bgpic picture นั่นเองนะคะ คือ การตั้งชื่อตัวแปรนี่ ถ้ายาวมาก ๆ ตัวเองนี่จะจำไม่ได้ เพราะฉะนั้น อย่าพยายามตั้งยาวมาก เหมือนเดิมนะคะ พอประกาศตัวแปรต้องตามด้วยการกำหนดค่าให้มันก็คือเท่ากับ เท่ากับแล้วตามด้วยอะไร คำสั่ง pygame.image.load เหมือนเดิมนะคะ เพราะเราจะต้องเรียกภาพนั้นมาใช้ ใช้เหมือน icon เลย แต่ตัวแปรเป็นคนละตัว ต้องจำไว้ว่ามันต้องสร้างตัวแปรคนละตัวเพราะว่า icon ก็เป็นของ icon นะ อันนี้เป็น background ก็คนละตัวเห็นไหมคะ นะคะ pygame ค่ะ พิมพ์ p พอขึ้น pygame กด pygame.i เลือก image เห็นไหมคะ ให้เลื่อนลงมาที่ image กด Enter เด็ก ๆ ยังไม่ต้องพิมพ์นะคะ เพราะถ้าพิมพ์แล้วจะผิดใช่ไหม สอนแล้วนะ เหมือนเดิม load เห็นไหมคะ เลื่อนลงมาเลือก load ใส่วงเล็บ ในวงเล็บอย่าลืมใส่เครื่องหมายคำพูดเพราะมันเป็นชื่อนะคะ ชื่อตัวนี้มาจากไหน ให้ไปดูที่โฟลเดอร์ที่เราเก็บไฟล์ Background เราไว้ใช่ไหมเด็ก ๆ 16552 เดี๋ยวขอเปลี่ยนชื่อก่อนนะ บอกแล้วบางทีเด็ก ๆ ไป Save มาแล้วชื่อมันยาวนะ แล้วพอเวลาเราจะมาเรียกใช้น่ะ ถ้าชื่อมันยาว ของใครที่ไป Save มาแล้วชื่อมันยาว วิธีแก้เรา Rename นะลูกนะ Windows 11 นี่มีความงง ๆ มึน ๆ อึน ๆ จะ Rename ไม่เปิดสิ เราจะ Rename น่ะ เราจะเปลี่ยนชื่อเธอ อยู่ไหนนะ คำสั่ง Rename เธอนี่ คือบ่ให้ Rename ถ้าใครไม่รู้ ไม่รู้เหมือนกันแฮะ Windows 11 ทำไม Rename ไม่ได้ Properties Open in Terminal Show more options ไม่เห็นขึ้นเลย ถ้า Rename ไม่ได้นะคะ ดูนะคะ เปิดตัวโปรแกรม Paint Open with Paint ปุ๊บ เอ๊ะ ทำไมรูป... รูปเรามันเป็นอย่างนี้ล่ะ ก็ File Save as... นะคะ Save as... แล้วก็เปลี่ยนชื่อให้เขาแค่นั้นแหละค่ะ จะได้เต็มหน้าจอไหมนี่ เอาไปก่อนแล้วกัน เพื่อมันให้เป็นการเสียเวลานะคะ 16552 น่าจะได้นะ จำเอาเองแล้วกัน ชื่อใครเป็นชื่อใคร 16552.jpg g นะคะ g อันนี้คือชื่อภาพ Background ในเครื่องของแม่นะคะ ภาพ Background ของแม่ ของเด็ก ๆ ชื่อตัวนี้ก็เปลี่ยนไปตามของตัวเองนะคะ นามสกุลก็เหมือนกัน อย่าลืมดูกว่านามสกุลตัวเองเป็นอะไร บางคนอาจจะเป็น png ก็ได้ บางคนอาจจะเป็น jpg ก็ได้ ก็แล้วแต่นะคะ โอเคไหม นี่ก็คือเราสั่งให้สร้างตัวแปร background pic เพื่อไปดาวน์โหลดภาพ Background ของเราขึ้นมานะคะ มาใช้งาน จากนั้นเราจะต้องทำอะไร เราจะต้องเรียกตัวแปรนั้นน่ะ มานะคะ แล้ว แล้วก็วาง จะวางมันไว้ตำแหน่งไหน ไม่ยากเลย ตำแหน่งของรูปนะคะ ก็คือตำแหน่งที่ 0,0 ก็คือเริ่มจากมุม x0 y0 ก็คือให้มันวางให้เต็มฉากเรานั่นเองนะคะ คำสั่งที่จะใช้อยู่ที่... ตัวนี้พิมพ์เสร็จหรือยัง Code บรรทัดที่ 11 ถ้าพิมพ์เสร็จแล้วนะคะ เราจะต้องมาที่ บรรทัดที่ 21 เห็นไหม ต่อจาก screen.fill นะคะ เด็ก ๆ จะต้องมาอยู่ตำแหน่งบรรทัดใน loop นี่ เพราะเราจะไปเลือกใช้ Background เหมือนเรียกใช้ Background Colors เลย Background Pictures เหมือน Background เลยนะคะ เรียกเหมือนกัน ตำแหน่งก็อยู่ถัดจากบรรทัดนั้นมา คำสั่งของตัวนี้คือ blit b-l-i-t นี่นะคะ เราเรียกตัวแปรฉากก่อน ก็คือ screen พิมพ์ s แล้วเลือก screen ตามด้วยเครื่องหมาย . b-l-i-t แล้วก็วงเล็บนะคะ blit blit อะไร ชื่อตัวนี้นะคะ bg bg แต่ให้เลือกเป็นอะไรคะ bgpic เพราะ bgcolors ก็คือ สีพื้นใช่ไหมคะ bgpic ก็คือ Background ที่เป็นรูป กด เอ้ย ยังไม่กด ใส่อะไรเข้าได้วย ระบุ ระบุตำแหน่งเห็นไหมคะ ใส่เครื่องหมาย , ลูกน้ำนี่นะคะ แล้วก็วงเล็บเปิดวงเล็บปิดอีก 1 ครั้งนะคะ ดูวิธีพิมพ์นะคะ ใส่ , 1 ครั้ง แล้วก็ใส่วงเล็บ ตำแหน่งก็คือ (0,0) แบบนี้นะคะ ใครพิมพ์บรรทัดนี้เสร็จ กด Ctrl + B ดูได้เลย โอ้โห นี่นะ ทีนี้เด็ก ๆ จะเห็นว่า สัดส่วนรูปกับ กับฉากเรามันไม่ Balance กันเห็นไหม มันมีวิธีทำอยู่ 2 แบบ ก็คือเรามาแก้ที่ตำแหน่งฉากเรา 800 x 600 นี่ เพิ่มไป 1800 แล้ว Ctrl + B ดู ใหญ่เกิน 1800 เห็นไหม ให้นึกถึงนะ เหมือนจะใหญ่บึ้ม 800 ใหญ่ไป 1000 ได้ไหม 1600 ก็ใหญ่ไป 1200 กว้าง ใส่ความกว้างผิด ชีวิตเปลี่ยน กว้าง x ยาว Width Height กว้าง x สูง 1000 อันนี้ 600 นะ โอเคแล้วมั้ง 800 นะ เอาใหม่นะ แก้ไปเรื่อย ๆ 1000 x 1200 บางทีเหมือน Background เรามันใหญ่ด้วย ในกรณีนี้ เดี๋ยว ขอไปเปลี่ยนรูป Background ตัวเองก่อนนะ มันบิ๊กบึ้มเกินไป แป๊บหนึ่งนะคะเด็ก ๆ ขอเปลี่ยนรูปก่อน Pictures Pictures ขอลอง ๆ ๆ โอเค เราจะเปลี่ยนชื่อตัวนี้เป็น bg1 นะ เปลี่ยนรูป ดูท่าภาพจะใหญ่ โอเค จะเอาพื้นที่ไซซ์ขนาดนี้นะคะ แต่ปัญหา คือ ภาพ บางทีไฟล์ Background เรามันใหญ่เกิน สมมตินะคะ จะเอาประมาณนี้แหละ ทีนี้ ถ้าเปิดขึ้นมาแล้วไฟล์ต้นฉบับมันใหญ่มากนี่ เรามีตัวแปรที่ชื่อ เอ้ย มีอีกคำสั่งหนึ่งนะคะ ไหนใครยังโหลดภาพตัวเองไม่ได้ ยกมือ ทุกคนโหลดมาแล้วนะคะ แต่ปรากฏว่าบางคนรูปตัวเองเล็กกว่าฉาก ไอ้รูปเล็กกว่าฉากนี่ ไปปรับขนาดฉากได้ นึกออกนะ ถ้าของใครรูปมันเล็กกว่าฉาก เรามาปรับตรงนี้ แต่ถ้าของใครเป็นเหมือนตัวอย่างของอาจารย์แม่ ก็คือ เห็นไหม ตัวรูปข้างหลังน่ะ มันใหญ่กว่าฉากอีก เพิ่มขนาดฉากแล้วยังไม่เห็นรูป นึกออกนะ เราจะมีคำสั่งสำหรับแปลงรูป ที่เราโหลดมาแล้วมันเล็กหรือมันใหญ่เกินไปนะคะ นั่นก็คือคำสั่งนี้เลย เปลี่ยนขนาดเห็นไหมคะ การเปลี่ยนขนาดภาพ คำสั่งนี้ชื่อว่า transform.scale เห็นไหม แต่เราจะต้องกำหนดชื่อตัวแปร ให้มันเป็นอีกตัวหนึ่งก่อนนะคะ แล้วก็กำหนดความสูง ความกว้างด้วยตัวเราเอง ดูจากอันไหน เราทำให้มันเท่าตัวนี้ ก็คือเราก็มาดู ดูจากตำแหน่งของ… ของตัวนี้เรา เห็นไหมคะ มันก็จะพอดีกับขนาดของฉากเรานะคะ ก่อนอื่นนะคะ ก่อนที่เราจะใช้ transform นะคะ ก็คือเราใช้คำสั่งเพื่อสร้าง เด็ก ๆ ขยันใช้ตัวย่ออยู่แล้วนะ bgtransform แล้วกัน bgtrans นะคะ bgtrans นี่ก็คือ Background ที่เราจะทำการเปลี่ยนขนาด ตามด้วยเหมือนเดิม = นะคะ ประกาศตัวแปรเสร็จแล้ว ตั้งกำหนดค่าให้ตัวแปรนะคะ คำสั่งแรกก็คือ pygame บอกแล้วว่าเราใช้ Sublime เราจะไม่พิมพ์ p-y-g-a-m-e เราพิมพ์แค่ p แล้ว ถ้าเห็นคำว่า pygame กด Enter ได้เลย เพราะอย่างนี้มันจะทำให้เด็ก ๆ พิมพ์คำสั่งไม่ผิดนะคะ ตามด้วย . เอ้ย เครื่องหมาย . เห็นไหมน่ะ เห็นไหม เดี๋ยวนะ อายุเยอะแล้ว Memory ไม่ดีนะคะ ไม่จำโค้ดทำอะไรใด ๆ ทั้งสิ้นนะคะเด็ก ๆ transform.scale โอเค ขอทวนอีกรอบหนึ่งนะ transform t-r-a-n… t-r-a-n-s s s s f-o-r-m transform.scale s-c-a-l-e แล้วก็ใส่วงเล็บ โอเคไหมคะ ในวงเล็บใส่อะไร มาดูกัน ในวงเล็บสิ่งที่เราจะต้องใส่ก็คือ ชื่อตัวแปรรูปของเรา ก็คือไอ้ชื่อข้างบนนะ แล้วก็ความกว้างความสูงนี่ความกว้างความสูงก็คือเท่ากับ เท่ากับตำแหน่ง screen.blit นี่ ที่เราสร้างก็คือตัวนี้เท่ากับอันนี้นะครับ ความกว้างความสูงนี่ scale ก็คือ bgpic ครับ ก็คือต้องเอาตัวนี้ เพราะเราจะไปแปลงภาพนี้นะคะ scale เราจะแปลงตัวแปรนี้นะ ชื่อนี้นะคะ เพราะฉะนั้นตำแหน่งของเด็ก ๆ ก็คือดูของตัวเองนะ ใช้ชื่อเดียวกัน ก็ bg เลือก pic เสร็จแล้วตามด้วยอะไร เครื่องหมาย , แล้วก็วงเล็บเหมือนเดิมนะคะ ในวงเล็บ นี่เลย ไซซ์นี้เลยครับ ก๊อบมาเลย อย่าได้ช้า มันจะได้ไซซ์เท่ากันเด๊ะ กด Ctrl + B Scale แล้วน้องยังไม่หดให้อีกน่ะ แหม ๆ ๆ ใหญ่จริง ไม่เป็นอะไร ปล่อยไปก่อนนะครับ เดี๋ยวค่อยไปหารูปที่มันเหมาะสมนะ ไม่ เราลดลงครึ่งหนึ่ง ลองดูนะคะ ถ้ามันเต็มพอดีแล้วมันยังใหญ่เกิน เราก็ แก้ตัวเลขสิครับรออะไร หาร 2 เข้าไปเด็ก ๆ ให้นึกถึงหลักการเวลาจะลดขนาด 1500 หาร 2 เหลือเท่าไร ลดลงครึ่งหนึ่งดูก่อน เพราะอะไร เพราะจากตัวนี้เรา ขนาดมัน 1500 กับ 800 ใช่ไหม ตัว... ตัวฉากเต็มเรามันคือ 1500 เราจะลดขนาดภาพให้เล็กกว่าฉาก เพราะฉะนั้นจาก 1500 ลดลงครึ่งหนึ่ง ใครหัวไวคิดหน่อยสิ 1500 หาร 2 เหลือ 750 800 ก็จะเหลือ 400 ลดครึ่งหนึ่งเลย Scale ลงไป ลดครึ่ง Ctrl + B ใหม่ ยังใหญ่อยู่เลยนะ ลดอีก 1 2 3 4 5 ลดอีกครึ่งหนึ่ง 200 750 325 อ้าว ครึ่ง 2 รอบแล้วนะ Ctrl + B แหม แสดงว่ารูปนี้ใหญ่จริง ก็จะปล่อยไปก่อนนะคะ ถ้าอย่างนี้แก้ไป 3 ครั้งแล้ว ไซซ์ยังไม่ได้แล้วก็นั่นหมายความว่า ภาพ Background เรานะลูก เดี๋ยวนะ นั่นแปลว่า Ctrl + B นั่นแสดงว่าภาพ Background เรามีขนาดใหญ่มาก ดูนะ เพื่อตรวจสอบว่ามันใหญ่ขนาดไหน ดู เห็นหรือเปล่า นะคะ เราก็ค่อยไปหาภาพอื่นมาแทนนะ ตอนนี้ใช้ไปก่อน ถ้าของใครยังแก้ไม่ได้ ก็คือเราต้องไปเลือกรูปแล้วดูขนาดด้วยนะลูกนะ นั่นคือหลักการนะคะ เพราะฉะนั้น คำสั่งนี้อย่างน้อยเราได้รูปมาแล้ว แน่นอนแล้วนะคะ ต่อมา ๆ ที่เราจะทำต่อมา ไปไหนแล้ว บรรทัดสุดท้ายแล้ว โอเค ของสไลด์นี้ สไลด์ใหม่อยู่ไหนครับ ไหนล่ะ ปึ๊บ ๆ ๆ ๆ ๆ อันนี้โหลดไปแล้ว เรียกใช้ Background เรียกแล้ว ตัวนี้มันจะยากขึ้นมาอีก เดี๋ยวเราจะพอแค่นี้ก่อนนะครับ เพราะคำสั่งนี้ มันจะเป็นการที่จะทำให้ตัวฉาก คือให้นึกถึงตัว... ถ้าตัวเกมเรามันวิ่งไปน่ะ ฉากมันอยู่กับที่ แต่ความจริงแล้วมันไม่ใช่ นึกออกนะ เราต้องทำให้ฉากมันเหมือนฉากมันเคลื่อนน่ะค่ะ มันจะเป็นคำสั่งพวกนี้นะคะ เดี๋ยวเรามาเรียนต่อในสัปดาห์หน้า ทีนี้เมื้อกี้ใครไม่ทัน ใครยังเอารูปใส่ไม่ได้ ทีนี้เมื่อรูปมันใหญ่ บอกแล้วนะ เมื่อกี้ลอง Transform แล้วก็ยังใหญ่อยู่แล้วก็ ง่ายสุดเราไปหา Search รูปใหม่นะลูก หา Search ภาพใหม่ เหมือนเดิม free นะคะ อย่าลืมต้องเลือกที่มันเป็น free download เสมอนะครับ เด็ก ๆ มันจะได้ไม่มีปัญหาติดนั่นนี่โน่น ยังหา jungle ไม่ได้เลย ไม่อย่างนั้นต้องไปลดขนาดไซซ์รูปภาพเรา ความจริงอยากได้รูปนี้นะ คือตัวเดียวกันหรือเปล่า เข้าชม ไปไหนแล้ว โอ้โห เมื่อกี้ สังเกตง่าย ๆ ไฟล์มันใหญ่นี่ ดู มันเป็นไฟล์ Zip เลย เห็นไหม ถ้าเวลาโหลดมาแล้วไฟล์มันใหญ่มากน่ะ อย่างนี้แสดงว่าภาพออกมา Background ใหญ่ ใหญ่บึ้มเลยนะครับ เราก็ต้องเปลี่ยนนะครับ เราต้องไปหาไซซ์เล็ก ๆ ไม่อย่างนั้นก็คือ ใช้โปรแกรมแล้วช่วยในการเขาเรียกว่าอะไรล่ะ ลดขนาด เวอร์ชันนี้ Windows นี้พอใช้ Paint แล้วมันไม่ใช่น่ะ มันไม่ใช่ มันไม่ได้อย่างที่เราต้องการ ดูนะ เดี๋ยวแม่จะลองทำให้ดูนะ Open นี่ ๆ ดูรูปนี้นะคะ ต้นฉบับ อย่างบึ้มเลยนี่ เลือก Select All แล้วนะ แล้วก็เลือก Image Resize ดูนะครับ เลือก Resize จะลด จะลดเปอร์เซ็นต์มันเหลือครึ่งหนึ่ง 50 ยังใหญ่อยู่เลยเห็นไหม ลดอีก Image Resize อีก เอ้ย Select All ก่อน ก็คือใช้ตัวโปรแกรมนั่นล่ะนะครับ ช่วยในการลดขนาด คลิก OK ได้หรือยัง ยัง เห็นไหม ยังล้นไอ้นี่อยู่เลย ลดอีก 3 3 แล้วนะ 50 เห็นไหม แต่ทีนี้เวลา save นะลูก ให้ไฟล์ save as.. เป็น png นะครับ save เป็นอีกชื่อหนึ่ง ขอใหม่ Bg2 เดี๋ยวลองให้ดูกันเห็น ๆ เดี๋ยวเราจะแก้เอาเมื่อกี้ไป Transform ข้างนอก เพราะฉะนั้นคำสั่งนี้เมื่อกี้ไม่ใช้แล้วนะครับ ลบออก คำสั่งนี้ก็ไม่มีความจำเป็น ถ้าไม่ลบออก วิธีการก็คือใส่ # เข้าไปลูก bg2 นะคะที่เรียก นามสกุลก็ png ด้วย เมื่อกี้เปลี่ยนทั้งชื่อทั้งนามสกุลให้มันเลย ขอลองใหม่ Ctrl + B เห็นหรือยัง เห็นหรือยัง เห็นหรือยัง เห็นไหม นี่คือ 1. ถ้าปรับในตัว Code ของโปรแกรมเราไม่ได้ เราไปใช้โปรแกรม paint ช่วยนะ ลดเสีย จิ๋วหลิวลงไปเลย เดี๋ยวไปเพิ่มอีกนิดหนึ่งไม่เป็นไรนะครับ ก็อย่างนี้ล่ะ เพราะไปเอาของเขามาไม่ได้สร้างเอง มันก็จะได้ขนาดที่เราไม่รู้ขนาดที่แท้จริงเท่าไรนะครับ เราก็ต้องมาปรับเอาอย่างนี้นะเด็ก ๆ นะ วิธีการ ถ้าอย่างนั้นให้มันเท่าไซซ์เรา เท่าไรนะ 1500,800 ดูสิจะเท่าพอดีไหม 1500 กับ 800 ปรับให้เท่าไซซ์หน้าจอว่าอย่างนั้นเถอะ Ctrl + B สิครับ รออะไร 1500 อย่างเดิมนะ โอเคนะครับ มีวิธีแก้อยู่ 2 วิธีอย่างนี้ล่ะ แล้วแต่จะเลือก pixel วิธีการก็คือ ไหนล่ะ paint เรา File Select All Resize เดี๋ยวเปลี่ยนเป็น pixel นะ 1500 800 โอเค เลข 8 ย้อนคืนก่อนนะ ขอลองไซซ์นี้ละกัน Save ก่อน Ctrl + B ใหม่นะคะ นะนี่ เห็นไหม ได้เต็ม ๆ แล้วนะ นี่ อาจจะใหญ่ไปนิด ค่อยไปปรับนะคะเด็ก ๆ ใช้โปรแกรม Paint ปรับเอานะคะ ค่อยไปปรับขนาดเอา ก็ลองปรับ แล้วถ้ามันยังไม่สมดุลก็ปรับใหม่ว่าอย่างนั้นเถอะนะคะนี่ จากต้นฉบับไฟล์ใหญ่มาก โอเคนะ แล้วเดี๋ยวสัปดาห์หน้า ใครที่... ให้ดูตัวนี้นะคะ เช็กที่ตัวไฟล์ที่ชื่อว่า ที่บอกว่าเราจะต้องไปหาไฟล์ภาพที่มันมีตัวการ์ตูนเราใช่ไหม ที่มันจะต้อง... เดี๋ยวนะ สีไม่ใช้แล้ว ที่มันมีลักษณะเหมือนเคลื่อนไหวน่ะ ที่เราต้องการน่ะนึกออกนะ อย่างนี้นะคะ ก็คือให้มันมีภาพการ… ของตัวละครเรามันเคลื่อนไหวได้ อย่าลืมเลือก free นะคะ ถ้าได้มาแล้ว ไฟล์มันจะต้องเป็น... เดี๋ยวนะเหมือนที่เคย... เลือกคำว่า "free" พิมพ์ไหม ไม่ใช่เลือก free download d-o-w-n-l-o-a-d sprite sheet เช่น ๆ ๆ สมมติตัวอย่าง ตัวอย่าง หาตัวอย่างก่อน เราอยากได้แบบเจาะจงตัวละครเลย เราก็ใส่ชื่อมันตามหลังด้วยเครื่องหมายบวก แล้วก็ชื่อตัวเกมเรานั้นนะคะ เช่น ใครอยากได้กระต่ายก็ Rabbit ใครอยากได้เสือก็ Tiger อย่างนี้นะคะ ขอเป็น Free Pic Free Pic จะให้อย่างไรยังไม่รู้ ขอเข้าไปดูก่อน คือ Outsite แล้วหรือเปล่านี่ นะครับ เปิดด้วย ๆ แหม ๆ ๆ ไม่ให้เปิดอีกแล้ว Download Open with ขอเปิดด้วย Paint แล้วกัน นี่บางทีมันได้เป็นภาพใหญ่ ๆ คือบางอันนะคะ sprite sheet บางตัวมันจะแยก แยกไฟล์มาให้ อันนี้ไม่แยก เดี๋ยวหาให้ดูตัวอย่างอีกอันหนึ่งนะ ที่มันจะแยกไฟล์มาให้ เช่น ๆ ๆ อยู่ไหนนะ สูงสุด เขาบอกว่าฟรีนะ เดี๋ยวจะลองดูนะ อ้าว ไม่ให้น่ะ... ไหนบอกว่าฟรีล่ะ หาไม่เจอ นี่ดูเหมือน Cat กับ Dog อันนี้นะคะ เดี๋ยวมันให้เป็นไฟล์ Zip มา เดี๋ยวจะลองเปิดให้ดู คือ... ถ้า ๆ ๆ ๆ เอาไปไว้ที่ Pictures ก่อน นี่ อย่างของอันนี้ นี่มันจะมีภาพแยกมาให้อย่างนี้นี่ค่ะ เราจะต้องได้ลักษณะของตัวเกมแบบนี้นะเด็ก ๆ เหมือนจะเอา Walk นี่ ก็จะเอา Walk ที่ 1 แบบนี้ ถ้าใครที่ได้มาแล้วเป็นแผงเหมือนตอนแรก เมื่อกี้เอาไปไว้ไหนแล้ว ดาวน์โหลดใช่ไหม นี่เหมือนอย่างนี้ ดูนะครับ Open with Paint ถ้าใครที่ได้มาแล้วเป็น 1 แผ่น แล้วมีหลายตัว เด็ก ๆ จะต้อง.. นึกออกนะ ตัดทีละตัวน่ะค่ะ ให้ได้รูป เข้าใจไหม ให้ได้รูปที่มันมีครบการเคลื่อนไหวเหมือน... เหมือนโฟลเดอร์นี้เลย นี่มันควร... มันควรจะได้ภาพที่เป็นลักษณะนี้ที่มันแยกออกมาแล้วน่ะ นึกออกหรือเปล่า แต่ตอนนี้ภาพมันรวมอย่างนี้ ถ้าใครไปโหลดแล้วมันได้ภาพที่มันเป็นทั้งหมดอย่างนี้มาน่ะ เราก็ต้องมาใช้ Paint ของเราอย่างนี้นะ Select ปึ๊บนี่ แล้วก็ Resize ให้มันเท่ากันนะ นี่ให้เราดูตำแหน่งที่เราจะทำนี่ ให้ Fix เป็น Pixel แล้วให้มันไซซ์เท่ากันน่ะ คลิก OK ปุ๊บ กด Crop นี่ ดูนะคะ แล้วให้จำค่านี้ไว้ ว่านี่ ไซซ์ที่มันเท่ากันคือไซซ์นี้ ก็คือเราจะต้องตัดให้ได้ขนาดนี้เท่า ๆ กันทุกภาพน่ะลูก เข้าใจไหม ไม่อยากนั้นให้นึกถึงว่า เหมือนเราทำตัวการ์ตูนเคลื่อนไหวปรากฏ เดี๋ยวทำไมเอ๊ะภาพมันเล็ก นึกออกไหม ตัวมันเล็กมันใหญ่ เพราะฉะนั้นเวลาตัดน่ะลูก ขนาดภาพมันจะต้องเท่ากันไง นึกออกนะคะ นี่ เพราะฉะนั้น 118 ก็ต้อง 118 เท่ากัน 118 82 ก็ต้อง 118 82 เท่ากันทุกตัว นึกออกนะ กำหนดขนาดเท่ากันทุกตัวน่ะ อยากได้เสือวิ่ง เช่น ๆ ๆ ตัวนี้ size แรก กำหนดที่ 102.82 Horizontal Vertical 102.82 โอเค Crop นะคะ แล้วก็ Save เป็น T1 อย่างนี้นะคะ แล้วก็ย้อนกลับคืนมา ตัวที่ 2 ก็ทำเหมือนกัน โอ๊ยอันนี้หางมันติดกันก็จะยากหน่อย 102 กับ 82 นะคะ นี่นะ โอเค ถ้าไม่อย่างนั้นก็คือนี่ล่ะ ใช้ให้เด็ก ๆ ไปที่ GameArt2D นี่ก็ได้ มันให้โหลด แต่ก็ไม่เยอะมันมี นี่ มันมีรูปตัวนี้ ๆ ๆ ๆ ตัวนี้ ๆ ๆ นะคะ หาดูอย่างนี้ Free Assets Free Sprite หาคำว่า Free Sprite อย่างนี้นะคะ เพราะไม่อย่างนั้น มันจะไม่ได้เดะ [เสียงหัวเราะ] มันจะไม่ได้ มันจะไม่ได้ ต้องหาคำว่า Free Sprite อย่างนี้ เหมือนไม่รู้น้องเพนกวินนี่ จะให้เยอะเท่าไหน ตะมุตะมิ นี่ ถ้ามันติดดาวนี่คือเสียเงิน เราต้องดูที่เขาไม่ติดดาวใช่หรือเปล่า ไอ้ตัวนี้ได้ หมดแล้ว 3 of 3 3 หน้าแล้วหรือ ไม่นะ เราก็ Search ว่า Free แล้วนะ แต่ไม่ให้ฟรีเรานะ ใน Freepik หา หา Free Sprite เลย หาที่มันจะขึ้น Free ให้เราไหม เอ๊ะหรือว่านี่เราโหลดไปจนหมดโควต้าแล้ว ขึ้นแบบเสียสตางค์ทั้งนั้นเลยนะคะ หาเพิ่มนะเด็ก ๆ นะ หาไว้ก่อนนะ เพราะคราวหน้ามันจะต่อด้วยเอาตัวนี้มาลง เช่น ๆ ๆ เจอรูป นะคะ หาไว้ บอกแล้วถ้าหาไม่ได้แล้ว ใช้วิธีที่ที่บอกน่ะ ตัดไปทีละรูปนะคะ โอเคนะคะ เดี๋ยวสัปดาห์นี้เราจะพอแค่นี้ก่อน ต่อกันในสัปดาห์หน้านะคะ มีใครยังทำไม่ได้อีก รูปยังไม่พอดีกับกรอบนี่ เปลี่ยนขนาดก่อน 1500 1000 สิ 1800 แป๊บหนึ่ง ๆ 1800 800 นะ ประมาณนี้นะคะ 1800 กับ 1600 เสร็จแล้วก็ Save ไว้ โอเคค่ะ สัปดาห์นี้พอแค่นี้ [สิ้นสุดการถอดความ]