(อาจารย์สุธิรา) ต่อจากสัปดาห์ที่แล้วนะคะ เดี๋ยว อันเดิมอยู่ไหน เผื่อในกรณีที่บางคนยังไม่ได้โหลด Background มานะ เปิด...ในกรณีที่... ในสัปดาห์ที่แล้วเราสร้าง fill หรือฉากของเกมเราแล้วนะ ทีนี้ Background มันก็จะเป็นสีดำอยู่ใช่ไหมคะ ก่อนอื่นเด็ก ๆ  อย่าลืมเปิดอะไรคะ โปรแกรม Sublime ถ้าของใคร คลิ๊กเขามาตรงหน้าต่าง Windows  แล้วมันไม่เห็นนะ คนมาใช้เยอะแล้วมันเลื่อนนะคะ เอ๊ะ เราก็ว่าเราพิมพ์ไว้แล้วนี่ะ ใช้คำค้นหานะคะ Sub... พอเจอ Sublime Text เราก็คลิก Open เพื่อเปิดโปรแกรมของเรานะ เด็ก ๆ ต้องเปิดโปรแกรมรอเลยนะคะ ถ้าขึ้นอัปเดตมาให้กด Cancle ไปเลยนะคะ เพราะมันเป็นเวอร์ชันล่าสุด เรายังอยู่ที่ส่วนการกำหนดหน้าจออยู่หน้าจออยู่นะคะ เรายังไม่ได้ไปตรงอื่นเลย เราได้ไอคอน ได้ส่วนของ Scene ต่อไปก็คือ Scene ต่อไปก็คือ ตัวเดิมเราแล้วลองกด Ctrl + B 1 ครั้ง กดปุ่ม Ctrl กับปุ่ม B นะคะ 1 ครั้ง ค่ะ สังเกต เด็ก ๆ จะสังเกตเห็นว่าหน้าจอเกม หรือ Scene ของเรา พื้นหลังมันจะเป็นสีดำ ก็คือถ้าเราไม่ต้องการให้... เราสามารถเปลี่ยนสีของพื้นหลังฉากเราได้นะคะ เพราะฉะนั้น คำสั่งที่ใช้ ก็คือคำสั่งนี้นะคะ ทีนี้ แต่ทีนี้ ก่อนที่จะใส่สี หรือจะรู้ว่าสีไหนเป็นสีอะไร สิ่งที่เราจะต้องทำก็คือเด็ก ๆ ให้เปิด Google Chrome ให้เด็ก ๆ เปิด Google นะ อยู่หน้า Google นะคะ ให้เปิด แล้วให้พิมพ์คำค้นว่า คำค้นว่าอะไร ลืม... โอเค เห็นไหมคะ Color to RGB เห็นไหม พิมพ์คำค้นตามตัวนี้นะคะ C-o-l-o-r-s colors แล้วก็ T-o r-g-b ก็คือให้พิมพ์คำนี้นะคะ เด็ก ๆ c-o-l-o เติม s ด้วย colors s colors To t-o to แล้วก็ตัว r ตัว g ตัว b ตัวเล็กตัวใหญ่ได้เหมือนกันหมดนะคะ แล้วกดค้นหาได้เลย Enter เพื่อค้นหาได้เลยค่ะ แล้วให้เรา... ใครขึ้นหรือยัง ใครยังไม่ขึ้นหน้านี้ ให้เลือกตัวแรกนะคะ สไลด์มันไม่เปลี่ยนเหรอ โอเคไหม นี่นะคะ ในช่องค้นหา ให้นักเรียนพิพม์ Color to rgb ขอโทษทีลืมดู จากนั้นกด Enter เมื่อพิมพ์เสร็จแล้วกด Enter นะคะ มันจะขึ้น เห็นไหมคะ ให้เลือกอันแรกเลยลิงก์แรก RGB Color Codes Chart เราจะต้องการชาร์ตสี เพื่อที่เราจะได้พิมพ์ค่าสีถูก เพระาฉะนั้น เราต้องเลือกตัวนี้นะลูก สมมติเราอยากได้สีนี้ ค่ามัน... ค่าสีมันคืออะไรนะคะ คลิ๊กเข้าไป 1 ครั้ง นี่ค่ะ จะดูอย่างไร ว่า Chart  สีคืออะไร เด็ก ๆ คลิกที่ช่องสีปุ๊บ นี่นะคะ เห็นไหมมันจะมีค่าสีนี่ขึ้นมา ก็คือตัวนี้นี่ ค่าสีของเขานะคะ หรือดูจากตรงนี้ก็ได้ เหมือนกัน เห็นไหมนะคะ  ให้... ถ้าเราจะใช้ก็คือวิธีการนะคะ สมมติเอาชมพูนี้อย่างนี้ กด... ตัวนี้ไม่ขึ้นเหรอ ก็คือเราจะ Copy ค่าสีตัวนี้ไปใส่ นึกออกนะ มันมี 2 Code นะคะ ดูในตารางมันจะมี Decimal Code Code และ Hex Code มี 2 ตัวนะคะ เดี๋ยวมาดู ตัวที่เราใช้ตัวไหน เปิดหน้านี้ทิ้งไว้เลยนะ เปิดหน้านี้ทิ้งไว้เลย ใครยังไม่ขึ้นหน้ามี Chart  สีนียกมือ ขึ้นหรือยัง ใครยังไม่ขึ้น ยกมือนะเด็ก ๆ เดี๋ยวกรอกค่าสีไม่ถูกลูก มันจะไม่ได้ ใส่ไม่ครบ มันไม่ได้นะ ไม่ต้องไปนั่งจำนะคะ เราต้อง... สีมันเยอะ อยากได้สีอ่อน สีแก่ อย่างนี้เปิดหน้านี้ทิ้งไว้ด้วยเลยนะคะ แล้วเรามาดูคำสั่งเราต่อ สิ่งที่จะทำ ก็คือตัวคำสั่งนะคะ ก็คือเราจะต้องกำหนดตัวแปรสีเสียก่อน แล้วก็ตามด้วยค่าสีที่เราจะใช้นะคะ พอ... พอได้ค่าสีเสร็จเราค่อยมา Fill ใช้คำวสั่ง Fill เพื่อสีสีลงในฉากเราเห็นไหมคะ และสิ่งที่เราจะต้องมีเพิ่มขึ้นมาก็คือส่วนของการ Update นะคะ อ้าว อันดับแรก อันดับแรก ไปที่บรรทัดที่... ดูนะคะ เด็ก ๆ เด็ก ๆ จะต้องเปิด Sublime ขึ้นมา โอเคไหม บรรทัดที่เราจะยังอยู่ก็คือต่อจาก pygame.display.set เห็นไหมคะ สิ่งที่เราจะทำ ก็คือสร้างตัวแปลชื่อว่า bg bg มาจากคำเต็มว่า Background นั่นเองนะคะ BG แล้วก็ตามด้วย Color แล้วกัน bgcolors นะคะ ตามด้วยเครื่องหมายเท่ากับ แล้วก็ใส่ไม่ใช่ใส่วงเล็บ ตามด้วยเครื่องหมายเท่ากับ แล้วก็ค่าสีที่เราจะใช้ อยู่ตรงไหน เรามาดู ไปเปิดผิดอันใช่ไหมนี่ ทำไมหน้าต่างมันขึ้นเยอะ เดี๋ยวนะ ตรงนี้ ตัวไหนนี่ ตัวนี้ล่ะ... แล้วก็ใส่ค่าสีนะคะ ดูนะคะ ก็คือตัวเลขในชุดมัน เอาจากตรงนี้เด็ก ๆ นี่ เอาค่าตรง 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 1 ครั้ง เราจะอยู่ที่ตำแหน่งบรรทัดที่ 18 นะคะ ทีนี้เด็ก ๆ ต้องมาดูอะไร ดูตัวแปรฉากที่เราตั้งไว้ชื่อว่าอะไรคะ เราตั้งชื่อตัวแปลฉากเราคือตัวแรกนี่ ถ้าใครตั้ง Screen ดูนะคะ ดูชื่อตัวนี้ ดูตัวแปรของฉากเรานี่ เห็นไหมคะ เพราะตอนเรียกใช้ ดูรูปแบบคำสั่งดี ๆ นะคะ ชื่อตัวแปรฉาก แล้วตามด้วยเครื่องหมาย . แล้วตามด้วยคำสั่ง fill แล้วตามด้วยในวงเล็บ ชื่อตัวแปลสี แล้วก็ค่าสีนั้นนะคะ โอเคหรือยังนะคะ เพราะฉะนั้น ตัวแปรฉากเราชื่อนี้นะ เราจะอยู่ที่ตำแหน่งบรรทัดที่ 18 นะ ดูดี ๆ นะคะ อย่าใส่ผิดที่นะ 18 แล้ว คือ ต้องตรงกับคำว่า "RUN" เรียกใช้ Screen เห็นไหมคะ กด S ปุ๊บ Screen ขึ้น ตัวแปรที่เราต้องการ Click 1 ครั้ง ตามด้วย . แล้วก็พิมพ์ f-i-ll fill นะคะ แล้วก็ตามด้วยวงเล็บ วงเล็บอะไร วงเล็บตัวแปรสีนี่ Background Colors นี่ เห็นไหมคะ พิมพ์ b เดี๋ยว BG มันจะไม่ผิดเลยนะคะ แล้วตัวแปลสี แล้วก็ตามด้วยค่าสีนะคะ / ใส่เครื่องหมาย / นะคะ ใส่เครื่องหมาย / ก่อนอื่นเด็ก ๆ copy ค่าสีมาเสียก่อนนะ คัดลอก  Copy bgcolors ใส่... / แล้วก็วาง โอเคนะคะ ทีนี้เมื่อเกิดการเปลี่ยนแปลงนี่ เราจะต้องมีคำสั่งสำหรับอัปเดต ก่อนบรรทัดสุดท้าย เด็ก ๆ ดู บรรทัดที่ 20 ซึ่งเป็นบรรทัดที่เราให้จบเกมนะคะ เพื่อเพิ่มบรรทัดนะคะ ในบรรทัดที่ 21 ใส่ # เข้าไป เราบอกแล้วว่าตรงนี้คืออัปเดต เป็นตำแหน่งที่ สำหรับคำสั่ง Update จะได้รู้นะคะ อยู่ตรงนี้ อัปเดตคำสั่งที่ใช้นะคะ ก็คือ pygame.display.update หน้าไหนน่ะ นี่แหละหน้า Code ไหน... colors จะอยู่ที่กำหนดหน้าจอ ต่อจากบรรทัดที่ Display.game ตั้งชื่อตัวแปร background colors รูปแบบก็คือชื่อตัวแปรนะคะ แล้วก็ตามด้วยค่าที่เราจะหัก และเราก็ไป Copy ค่าสีจากตารางมาวาง รหัสสีที่บอกว่าจากเว็บนี่ไง ที่ให้เปิดนี่ นี่ ๆ จากตารางนี้ เอาไว้ไหนหน้านี้ ให้ Sreach แล้วน่ะ ไปต่อนะคะ ของคนอื่นพิมพ์ pygame.display.upload ตรงตำแหน่งก่อนจะ... อันนี้ก่อนจะ... ไหนล่ะ Sublime Sublime ไม่ขึ้น ต่อไปบรรทัด Update เรานะ มันจะตรงกับตำแหน่งตรงนี้... เข้าไป 1 ที display.update เห็นไหมคะ ฟังก์ชันมันจะโดนเรียกขึ้นมา เดี๋ยวนะคะ ตำแหน่ง Update มันจะอยู่ก่อนจะจบ มันจะ Update การทำงานก่อนทุกครั้ง ให้มันอัปเดตก่อนเสมอ ก่อนจะออกจากโปรแกรมว่าอย่างนั้นเถอะ โอเค รู้แล้ว ๆ ๆ ผิด ๆ นะคะ เดี๋ยวนะ ตอนเรียกใช้นะคะ เราใส่แต่ชื่อมันก็ได้ เพราะตัวแปรเรากำหนดแล้วนะ ว่าสีอะไร เราเรียกแต่ background colors พอนะคะ ค่าสีไม่ต้องใส่ ในทีนี้ / หมายถึง ก็คือให้เลือกว่าจะใส่ตัวแปร หรือจะใส่ค่าสี ซึ่งใส่ชื่อตัวแปรมันจะขึ้น ถ้าเรามีแล้วนี่มันจะขึ้นมาเลย เพราะฉะนั้น มันจะง่ายกว่า ใครพิมพ์ Update เสร็จแล้ว Build ได้เลย Ctrl + B ได้เลยนะคะเด็ก ๆ เพื่อดู สีไม่เปลี่ยนเหรอ Error ไม่ขึ้นด้วย ทำไมไม่ update ให้ ตำแหน่งไหนผิด bgcolors  screen.fill background colors Update Run ทำเป็น...ฟอนต์ ไม่ให้เติมสีแล้วเหรอเวอร์ชันนี้ ไม่แน่ใจแฮะ ไม่ Update มันไม่ยอม Update โอเค รู้แล้ว ใส่ตำแหน่งผิดนะคะเด็ก ๆ ขอโทษที ตำแหน่ง Screen fill เลื่อนบรรทัดที่ run False ปึ๊บ กด Enter แล้วทีนี้เมื่อ Enter ลงมา แล้วมันลงมาปุ่มนี้ ให้เด็ก ๆ กด Backspace ย้อนหลัง ย้อนไป 2 ตำแหน่ง False เห็นไหมคะ แล้วค่อยเอา screen False  แล้วพอ updateเ ห็นไหม เด็ก ๆ  จะได้ ผิดตัวใช่ไหม มีหลายตัวงง เห็นไหมคะ เปลี่ยนสีแล้ว ใครยังสีไม่เปลี่ยนยกมือ ใครไม่เปลี่ยน ให้ดูตำแหน่งแรก ไล่ไปทีละตำแหน่งนะคะ กำหนดตัวแปรนี้หรือยัง กำหนดหรือยัง อันนี้เสร็จหรือยัง บรรทัดที่ 10 มีตัวแปรสี มีค่าสีแล้ว โอเคนะคะ ไปดูบรรทัดต่อมา ก็คือสีที่เราจะใส่ มันจะอยู่ในตำแหน่ง Loop เห็นไหมคะ ตำแหน่ง Loop ที่ต่อจากบรรทัดที่... หาปุ่ม delete ไม่เจอ ต่อจาก Run = False  19 ให้ดู บรรทัดที่มีคำว่า run = False มิ่งออกยังลูก สีออกหรือยัง กด Enter 1 ครั้งนี้ ปุ๊บนี่ สังเกตตำแหน่ง cursor อยู่ตรงกับ Runให้เรากดปุ่ม Backspace ต้องกดปุ่ม Backspace 2 ทีนะคะ เพื่อให้ตำแหน่ง Cursor มันอยู่ตรงกับคำว่า Flale สีแดง ๆ ในบรทัดที่ 16 เห็นไหม แล้วก็พิมพ์คำสั่ง Screen Sceen ก็คือตัวแปรฉากเราที่ตั้งเอาไว้ กด s ปุ๊บ เจอ Screen Enter แล้วก็ .fill แล้วก็ตามด้วยในวงเล็บชื่อตัวแปรสีนะคะ โอเคไหม เสร็จแล้วอย่าลืม พอเสร็จบรรทัดนี้นะคะ ในบรรทัดที่ 21 นี่ ให้ใส่ # แล้วเราจะต้องสั่ง มีคำสั่ง Update ด้วยนี่ เห็นไหมคะ อยู่ตรงกับ screen field pygame.display.update นะคะ สำหรับเด็ก ๆ บางคนนะคะ พอพิมพ์ไปแล้ว มันขึ้น Error นี่ สาเหตุหนึ่งให้ดู ให้ดูที่ตำแหน่งที่พิมพ์ แล้วลองทำอย่างนี้ครอบ ถ้าเด็ก ๆ ใช้ Tab มันจะไม่ขึ้น Error แต่ถ้าเมื่อไหร่ขึ้นตำแหน่งนี้ มันเป็นจุด จุดสีเทา ๆ สีขาว นั่นแสดงว่าเด็ก ๆ ไปกดด้วยแป้น Space Bar เพื่อสลับตำแหน่งใช่ไหม ซึ่งใน Sublime บอกแล้วว่าแล้วว่า ไอ้โปรแกรมนี้ มันโดนบล็อก บล็อกโครงสร้างมานะ เพราะฉะนั้น ห้ามใช้ Space Bar ในการ Tab คือ เลื่อนของคำสั่งเข้าไปตามโครงสร้างตามแนวนี้ Space Bar จะใช้เฉพาะเมื่อมีการเว้นวรรคแค่ 1 จุดเท่านั้น เห็นไหม สังเกตความแตกต่างนะคะ ถ้าเด็ก ๆ ใช้ Space Bar เหมือนตรง Y. Y run เห็นไหม แต่ถ้าเด็ก ๆ  ถ้ามันเป็น tab น่ะ เพราะโครงสร้างของมันโดนกำหนด เห็นไหมคะ อย่างนี้ คือ เป็น ทีนี้คือสิ่งที่ต้องจำนะคะ คำสั่งใหม่ แล้วให้กด ไม่ให้กด Space Bar เด็ก ๆ จะต้องกด Tab นะ มันจะไปตาม ที่มันตั้งไว้ เพราะฉะนั้นต้องกดให้ถูกนะคะ ใครยังไม่ออกอีก ใคร ออกยัง เห็นไหม บาสเห็นหรือเปล่า บรรทัดที่ 2 ทีนี้ จำไว้นะคะ เรียนวิชาเขียนโปรแกรมนี่ ถ้าใครไม่มา ตัวเองจะไม่ทันเพื่อน ถูกไหม เพราะแม่จะเขียนต่อจากสัปดาห์ที่แล้ว จะไม่รู้ตำแหน่งใช่ไหมคะ แล้วก็จะผิด พิมพ์ผิดพิมพ์ถูก เพราะฉะนั้นอย่าขาดนะคะ เรียนวิชาเขียนโปรแกรม ไม่อย่างนั้นจะพิมพ์ต่อไม่ได้นะคะ บาสดูนะคะ ตรงนี้ที่มีชื่อไฟล์ นี่... เครื่องตัวเองน่ะ เครื่องบาสน่ะ ไม่ใช่ เดี๋ยว ใจเย็น ๆ ฟังให้จบแล้วค่อยพิมพ์ จะอธิบายก่อน ตรงรูป ตรงที่บอกว่า image load นี่ เห็นไหมคะ สิ่งที่มันจะไปโหลดก็คือชื่อไฟล์ ไฟล์ของบาสจะต้องอยู่ที่ C: แล้วก็ในโฟลเดอร์ที่โปรแกรม Save ไว้ ชื่อโปรแกรมเราอยู่ตรงไหน ไฟล์นั้น ก็คือนี่ จะอยู่ตรงนั้นด้วย เข้าใจหรือเปล่า ดูนะบาส ทีนี้ฟังไว้นะ ถ้าใครเข้าเรียนไม่ทันนี่ รอบหน้าต้องรอ จนกว่าแม่จะสอนเพื่อนเสร็จนะ ไม่อย่างนั้นเสียเวลา ได้ทำตามเพื่อนทีหลัง เพราะฉะนั้นถ้าครั้งหน้า บาสไม่มาเข้า แล้วครั้งต่อไปบาสเข้าอย่างนี้ บาสจะต้องรอให้แม่สอนเพื่อนทำจนเสร็จ แล้วบาสถึงจะมาทำตามเพื่อนได้ โอเคไหมนะคะ ทีนี้เราใส่สีพื้นได้แล้วเห็นไหมนะคะ แล้วในกรณีที่... อันนี้คือในกรณีที่มีสี แล้วอีกกรณีหนึ่ง ที่บอกว่าใส่ภาพพื้นหลังเข้าไปแทนใช่ไหมเด็ก ๆ Background อยู่ไหน Background ไหนล่ะ ต่อไปนะคะ สิ่งที่จะทำ ตั้งแต่สัปดาห์แรกเลยนะ บอกว่าให้หาภาพ Background  ที่เราจะเอามาเป็นฉากใช่ไหมคะ สิ่งต่อมาที่เราจะทำคือคำสั่งนี้นะลูก เมาส์หาย เดี๋ยวนะ คำสั่งต่อไปนะคะ ไหนล่ะ เมื่อกี้เราไปไหนแล้ว เมื่อกี้ถึง... ทีนี้การใส่ภาพ background แทนสีพื้นหลัง ในกรณีที่เรามีมีฉากที่เป็นภาพนะคะ รูปแบบ ก็คือ เหมือนเดิมทุกครั้งเราจะต้องสร้างตัวแปร เพื่อให้โปรแกรมมันรู้จักก่อน ว่าเป็นตัวแปรที่ไว้สำหรับเก็บภาพ ใครที่มีรูปมาแล้ว เหมือนเดิมนะคะ เด็ก ๆ อย่าลืมนะคะ เช็กนามสกุลภาพตัวเอง โหลดมาอยู่ไหน เดี๋ยวนะ ของแม่โหลดมาแล้ว จะเอารูปนี้นะคะ เดี๋ยวขอ Move ไปก่อน Move รูปนี้นะคะ ไปที่ Drive C ขอเปิด C: นึกออกนะ Folder ที่เราเขียนโปรแกรมอยู่ตรงไหน เราเปิด 2 อันเลยนะ เดี๋ยวเราจะเอารูปนี้มาใส่ เหมือนเดิมนะคะ Click ภาพที่เราจะใช้งาน แล้วคลิก... ถ้าใครขึ้นตำแหน่ง Type อย่างนี้ นี่คือนามสกุลไฟล์ที่เราจะพิมพ์ลงไป นึกออกนะ เด็ก ๆ ดูตำแหน่งตรงนี้ให้ดี ๆ นะคะ ชื่อไฟล์แต่ละคนไม่เหมือนกัน นึกออกนะ รูป... หน้าไม่ออก เดี๋ยวนะ กดสิ้นสุด... เดี๋ยวนะคะ สไลด์อาจารย์มันไม่ขึ้น จอมันมืดไปเลย คืออะไรนี่ ทำไมเป็นจอดำ อยู่ ๆ จอเราก็ดำมิดหมีไปเลย ได้แล้วนะคะ โอเค เด็ก ๆ ดูตรงชื่อนะ ชื่อกับนามสกุล จะต้องเป็นชื่อ แล้วก็นามสกุลของไฟล์ตัวเองเข้าใจไหม เข้าใจไหมคะ เพราะฉะนั้น เราต้องดูใน Folder เรานะ ไม่ใช่แม่พิมพ์ชื่อ colorcandy_bg ก็พิมพ์ชื่อนี้ตามแม่ ไม่ใช่นะคะ ชื่อไฟล์ภาพของใครของมัน เข้าใจนะ มันจะเป็นชื่อของตัวใครตัวมันนะ ตัวใครตัวมัน ไม่ใช่ดูแต่ชื่อนะ ดูนามสกุลมันด้วย นึกออกนะ 2 อย่างนี้จะเป็นชื่อของเรา ของเรา ของเรา ของเรานะ แม่พิมพ์ชื่อของแม่ ตัวเองก็มาพิมพ์ชื่อของแม่ตาม ไม่ใช่ ให้นึกถึงนะ โอเค ก่อนอื่น ก็คือต้องเช็กก่อนว่านามสกุลไฟล์เรามันเป็นนาสกุลอะไรด้วย ทีนี้บาส บาสยังไม่โหลดไหม โหลดหรือยัง ถามเพื่อนสิโหลดรูป Background มาหรือยัง โอเค อย่างนั้นเริ่มได้ ตัวแปรแรกนะคะ เปิด Sublime เราก็จะมาที่ตำแหน่ง ยังอยู่ในการกำหนดหน้าจอเกมอยู่ เห็นไหมคะ เราจะไปต่อจากบรรทัดที่ 10 Background Color เลย ทีนี้เมื่อกี้มี background colors แล้ว ทีนี้ BG เหมือนเดิม ตัวแปรตั้งเหมือนกันได้ ทำไมเป็นตัวใหญ่ bg แต่จะเป็น pic แทน เอ้ย ใช้ Pic สั้นหน่อย Image จะยาวไป แต่ทีนี้ เพื่อไม่ให้สับสนนะ ใช้ Pic นี่ล่ะ สั้น ๆ หน่อย เดี๋ยวจะมาสับสนกับ Image อีก bgpic picture  นั่นเองนะคะ การตั้งชื่อตัวแปรนี่ ถ้ายาวมาก ๆ นี่ จะจำไม่ได้นะคะ เพราะฉะนั้น อย่าพยายามตั้งยาวมาก เหมือนเดิมนะคะ พอประกาศตัวแปรต้องกำหนด ค่าให้มันก็คือ =  = แล้วตามด้วยอะไรคำสั่ง pygame image.lode นะคะ เพราะเราจะต้องเรียกภาพนั้นมาใช้ ใช้แบบ icon เลย แต่ตัวแปรเป็นคนละตัว ต้องจำไว้ว่ามันต้องสร้างตัวแปรคนละตัว  เพราะว่า icon ก็เป็นของ icon นะ เห็นไหมคะ นะคะ พิมพ์ pygame ค่ะ พิมพ์ p พอขึ้น pygame กด pygame. i  เลือก image เห็นไหมคะ ให้เลื่อนมาที่ image กด Enter เด็ก ๆ ยังไม่ต้องพิมพ์นะคะ เพราะถ้าพิมพ์จะผิด สอนแล้วนะ เหมือนเดิมโหลด เห็นไหมคะ เลื่อนลงมาเลือก load ใส่วงเล็บ ในวงเล็บ อย่าลืมใส่เครื่องหมายคำพูดนะคะ เพราะมันเป็นชื่อนะคะ ชื่อตัวนี้มาจากไหน ให้ไปดูที่ Folder ที่เราเก็บไฟล์ Background  เราไว้ใช่ไหมเด็ก ๆ 16552 เดี๋ยวขอเปลี่ยนชื่อก่อนนะ บอกแล้วบางทีเด็ก ๆ ไป Save มาแล้วชื่อมันยาวนะ แล้วพอเวลาเราจะมาเรียกใช้น่ะ ถ้าชื่อมันยาว ของใครที่ไป save มาแล้วมันยาว ชื่อมันยาว วิธีแก้ เรา Rename นะคะ นี่ windowe 11 งง ๆ มึน ๆ  อึน ๆ จะ Rename ไม่เปิดสิ เราจะ Rename น่ะ เราจะเปลี่ยนชื่อเธอ อยู่ไหนนะ คำสั่ง Rename เธอนี่ คือบ่ให้ Rename ถ้าใครไม่รู้ ไม่รู้เหมือนกันแฮะ Windows 11 ทำไม Rename ไม่ได้ Properties Open in Terminal Show more options ไม่เห็นขึ้นเลย ถ้า Rename ไม่ได้ เปิดด้วยโปรแกรม Paint Open with paint ปุ๊บ ทำไมรูป รูปเรามันเป็นอย่างนี้ล่ะ ก็อบไฟล์ Save As นะคะ Save as นะคะ Save as แล้วก็เปลี่ยนชื่อเขาจะได้เต็มหน้าจอไหมนี่ เอาไปก่อนแล้วกัน เพื่อไม่ให้เป็นการเสียเวลานะคะ 16552 นะคะ ชื่อใครเป็นชื่อใคร 116552.JPG G นะคะ G อันนี้คือชื่อภาพ Background ในเครื่องของแม่นะคะ ภาพ Background  ของแม่ ของเด็ก ๆ ชื่อตัวนี้ก็เปลี่ยนไปตามของตัวเองนะคะ นามสกุลก็เหมือนกัน อย่าลืมดูว่านามสกุลของตัวเองเป็นอะไร บางคนอาจจะเป็น .png ก็ได้ บางคนอาจจะเป็น .JPG ก็แล้วแต่นะคะ โอเคไหม นี่ก็คือ เราสั่งให้สร้างตัวแปร Background pic แปร Background pic เรา ภาพ Background ของเราขึ้นมานะคะ มาใช้งาน จากนั้นเราจะต้องทำอย่างไร เราจะต้องเรียกตัวแปรนั้นน่ะ มานะคะ แล้ว... แล้วก็วาง จะวางมันไว้ตำแหน่งไหน ไม่ยากเลย ตำแหน่งของรูปนะคะ ก็คือตำแหน่งที่ 00 ก็คือเริ่มจากมุม x0, y0 ก็คือให้มันวางให้เต็มฉาเรานั่นเองนะคะ คำสั่งที่จะใช้อยู่ที่ ตัวนี้พิมพ์เสร็จหรือยัง Code บรรทัดที่ 11 ถ้าพิมพ์เสร็จแล้ว เราจะต้องมาที่ บรรทัดที่ 21 เห็นไหม ต่อจาก Screen.Fill นะคะ เด็ก ๆ จะต้องมีอยู่บรรทัดใน Loop นี่ เพราะเราจะไปเรียกใช้ Background  เหมือนเรียกใช้ Background Color เลย Background Pictures เหมือน Background Color เรียกเหมือนกัน ตำแหน่งก็อยู่ถัดจากบรรทัดนั้นมาคำสั่งของตัวนี้คือ Bliตัวนี้ คือ blit ัวนี้ คือ bluid นะคะ เราเรียกตัวแปรฉากก่อนเราเรียกตัวแปรฉากก่อน คือพิมพ์ S SSB-l-i-e แล้วก็วงเล็บนะคะ Build อะนะคะ  Build  Build  แะไร bg ตัวนี้นะคะ แต่ให้เลือกเป็นอะไรคะ BG pic เพราะ BG Color ก็คือสีพื้น ก็คือ Background  ที่เป็นรูป กด... เอ๊ย ยังไม่กด ใส่อะไรเข้าไปด้วย ระบุ ระบุตำแหน่งเห็นไหมคะ ใส่เครื่องหมาย , ลูกน้ำนี่ แล้วก็วงเล็บดปเอีกหนึ่งครั้งนะคะ ดูวิธีพิมพ์นะคะ ใส่ , 1 ครั้ง แล้วก็ใส่วงเล็บ ตำแหน่ง ก็คือ 0 ,0) แบบนี้นะคะ ใครพิมพ์บรบรรทัดนี้เสร็จกด Ctrl + B ดูได้เลย โอ้โห ทีนี้นี่ เด็ก ๆ จะเห็นว่า สัดส่วนรูปกับฉากเรามันไม่ Balance เห็นไหม มันมีวิธีทำอยู่ 2 แบบ ก็คือเรามาแก้ที่ตำแหน่งฉากเรา 800 x 600 นี่ เพิ่มไป 1,800 แล้ว Ctrl + B ดู ใหญ่เกิน 1,800 เห็นไหม ให้นึกถึงนะ จะใหญ่บึ้ม 800 ใหญ่ไป 1,000 ได้ไหม 1,600 ก็ใหญ่ไป 1,200 ใส่ความกว้างผิดชีวิตเปลี่ยน กว้าง x ยาว y Height กว้างคูณสูง 1,000 อันนี้ 600 นะ โอเคแล้วนะ อันนี้ 800 ไหม เอาใหม่นะ แก้ไปเรื่อย ๆ 1,200 บางทีเหมือน Background เรามันใหญ่นะคะ ด้วยในกรณีนี้ แล้วนี้ เดี๋ยว ขอไปเปลี่ยนรูป Background  ตัวเองก่อนนะ มัน มันบิกบึ้มไปหน่อย แป๊บหนึ่งนะคะ เด็ก ๆ ขอเปลี่ยนรูปก่อน Picture ขอลอง ขอลอง ขอลอง โอเค เราจะเปลี่ยนชื่อตัวนี้เป็น BG1 เป็นรูป ดูท่าภาพจะใหญ่ โอเค จะเอาพื้นที่ Size ขนาดนี้นะคะ แต่ปัญหาคือภาพ บางทีไฟล์ Background  เรามันใหญ่เกิน สมมตินะคะ จะเอาประมาณนี้ล่ะ ทีนี้ถ้าเปิดขึ้นมาแล้วไฟล์ต้นฉบับมันใหญ่มันมากนี่ เรามีตัวแปรที่ชื่อ... มีอีกคำสั่งหนึ่งนะคะ ไหนใครยังโหลดภาพตัวเองไม่ได้ ยกมือ 2-3 คำ คำสั่งต่อไป ทุกคนโหลดมาแล้วนะคะ แต่ปรากฎว่ารูปบางคนเล็กกว่าฉาก ไอ้รูปเล็กกว่าฉากนี่ ไปปรับขนาดฉากได้ นึกออกนะ ถ้าของใครรูปมันเล็กกว่าฉาก เรามาปรับตรงนี้ แต่ถ้าของใครเป็นเหมือตัวอย่างของอาจารย์แม่ ก็คือเห็นไหม ตัวรูปข้างหลังน่ะ มันใหญ่กว่าฉากอีก เพิ่มขนาดฉากยังไม่เห็นรูป นึกออกนะ เราจะมีคำสั่งสำหรับแปลงรูปที่เราโหลดมา แล้วมันเล็ก หรือมันใหญ่เกินไปนะคะ นั่นก็คือคำสั่งนี้เลย เปลี่ยนขนาดเห็นไหมคะ การเปลี่ยนขนาดภาพ คำสั่งนี้ ชื่อว่า transform.scale เห็นไหม แต่เราจะต้องกำหนดชื่อตัวแปรให้มันเป็นอีกตัวหนึ่งก่อนนะคะ แล้วก็กำหนดความสูง ความกว้างให้ดูจากอันไหน เราทำให้มันเท่าตัวนี้ เราก็มาดู ดูจากตำแหน่งของ ของตัวนี้เราเห็นไหมคะ มันก็จะพอดีกับฉากเรา ก่อนอื่นนะคะ ก่อนที่เราจะใช้ Transfrom ก็คือเราใช้คำสั่งเพื่อสร้างเด็ก ๆ ขยันใช้ตัวย่ออยู่แล้วนะ bg tranform แล้ว กัน BG Trans BG Trans นี่ก็คือ Background  ที่เราจะทำการเปลี่ยนขนาด ตามด้วย เหมือนเดิม = ประกาศตัวแปรเสร็จแล้ว ตั้งกำหนดค่าให้ตัวแปรนะคะ คำสั่งแรก ก็คือ pygame บอกแล้วว่า เราใช้ Sublime เราจะไม่พิมพ์ p-y-g-a-m-e แล้วถ้าเห็นคำว่า Pygame กด Enter เพราะอย่างนี้มันจะทำให้เด็ก ๆ พิมพ์คำสั่งไม่ผิดนะคะ ตามด้วย . เอ๊ย เครื่องหมาย . เห็นไหมน่ะ เดี๋ยวนะ อายุเยอะแล้ว Memory ไม่ดี ไม่จำ Code ใด ๆ ทั้งสิ้นนะคะ เด็ก ๆ transform.scale ขอทวนอีกครั้งหนึ่ง Trans T-r-a t-r-a-n-s-f-o-r-m Transform Scale s-c-a-l-e แล้วก็ใส่วงเล็บ โอเคไหมคะ ในวงเล็บใส่อะไรมาดูกัน ในวงเล็บสิ่งที่เราจะต้องใส่ ก็คือชื่อตัวแปรรูปของเรา ก็คือไอ้ชื่อข้างบนนะ แล้วก็ความกว้างความสูงนี่  ความกว้างความสูง ก็คือเท่ากับ เท่ากับตำแหน่ง screen bilit นะครับ ความกว้าง ความสูง Scale ก็คือ bgpic ครับ แปรภาพนี้ scale เราจะแปลงตัวแปรนี้ ชื่อนี้นะคะ เพราะฉะนั้น ตำแหน่งของเด็ก ๆ ก็คือ bg เลือก pic เสร็จแล้วตามด้วยอะไรเครื่องหมาย , แล้วก็เหมือนเดมนะคะ นี่เลย ก๊อบมาอย่าได้ช้า มันจะได้ไซซ์นี้เลยครับ มันจะได้ Size เท่ากันเด๊ะ กด Ctrl + B Scale แล้วน้องยังไม่หดให้อีกนะ แหม ๆ ๆ ใหญ่จริง ไม่เป็นไร ปล่อยไปก่อนนะครับ เดี๋ยวค่อยไปหารูปที่มันเหมาะสมนะ ไม่ เราลดลงครึ่งหนึ่งลองดูนะคะ ถ้ามันเต็มพอดีแล้วมันยังใหญ่เกิน เราก็แก้ตัวเลขสิครับ รออะไร หาร 2 เข้าไปเด็ก ๆ ให้นึกถึงหลักการ เวลาจะลดขนาด 1,500 หาร 2 เหลือเท่าไร ลดลงครึ่งหนึ่งดูก่อนนะ เพราะอะไร เพราะจากตัวนี้ เรา... ขนาดมัน 1,500 กับ 800 ใช่ไหม ตัว... ตัวฉากเต็ม คือ 1,500 เราจะลดขนาดภาพให้เล็กกว่าฉาก เพราะฉะนั้น จาก 1,500 ลดลงครึ่งหนึ่ง ใครหัวไวคิดหน่อยสิ 1,500 หาร 2 เหลือ 750  ก็จะเหลือ 400 ลดครึ่งหนึ่งเลย Scale ลงไป ยังใหญ่อยู่เลยน่ะ ลดอีก 1 2 3 4 5 ลดอีกครึ่งหนึ่ง 200 750 325 อ้าว ครึ่ง 2 รอบแล้วนะ Ctrl + B แหม แสดงว่ารูปนี้ใหญ่จริง ก็จะไปปล่อยไปก่อนนะคะ ถ้าอย่างนี้แก้เป็น 3 ครั้งแล้ว ไซซ์ยังไม่ได้นะคะ แสดภาพ background เรา นั่นแปลว่า Ctrl + B นั่นแสดงว่าภาพ Background เรามีขนาดใหญ่มาก ดูนะ เพื่อตรวจสอบว่ามันใหญ่ขนาดไหน ดูนะคะ เราก็ค่อยไปหาภาพอื่นมาแทนนะ ใช้ไปก่อน เราก็ใช้ภาพไปก่อน ถ้าของใครยังแก้ไม่ได้ เราต้องไปเลือกรูปแล้วดูขนาดด้วยนะลูกนะ นั่นคือหลักการนะคะ เพราะฉะนั้น คำสั่งนี้ อย่างน้อยเราได้รูปมาแล้วแน่นอนแล้วนะคะ ต่อมา ต่อมา ที่เราจะทำต่อมา ไปไหนแล้ว บรรทัดสุดท้ายแล้ว โอเค ของสไลด์นีเ อันดับสุดท้ายแล้ว โอเค ของสไลด์นี้สไลด์ใหม่อยู่ไหนครับ ไหนล่ะ เดี๋ยวนะ อันนี้โหลดไปแล้ว เรียกใช้ Background เรียกแล้ว ตัวนี้มันจะยากขึ้นมาอีก เดี๋ยว... เราจะพอแค่นี้ก่อนนะคะ เพราะคำสั่งนี้ มันจะเป็นการที่ทำให้ตัวฉาก คือให้นึกถึงตัว... ถ้าตัว... ถ้าตัวเกมเรามันวิ่งไปน่ะ ฉากมันอยู่กับที่แต่ความจริงแล้วมันไม่ใช่ นึกออกนะ มันจะต้องทำให้เหมือนฉากมันเคลื่อนน่ะค่ะ มันจะเป็นคำสั่งพวกนี้นะคะ เดี๋ยวเรามาเรียนต่อในสัปดาห์หน้า ทีนี้เมื่อกี้ใครไม่ทัน ใครยังเอารูปใส่ไม่ได้ ทีนี้เมื่อรูปมันใหญ่บอกแล้วนะ เมื่อกี้ลอง transform แล้วก็ ง่ายสุดเราไป หา Search รูปใหม่ลูก หา Search ภาพใหม่ เหมือนเดิม Free นะคะ ต้องเลือกที่มันเป็น Free นะคะ เด็ก ๆ มันจะได้ไม่มีปัญหาติด นั่นนี่นู่น ยังหา jungle ไม่ได้เลย ไม่อย่างนั้นต้องไปลดขนาดไซซ์รูปภาพเรา ความจริงอยากได้รูปนี้นะ คือตัวเดียวกันหรือเปล่า เข้าชม ไปไหนแล้ว โอโห้ เมื่อกี้สังเกตง่าย ๆ มันเป็นไฟล์ zip เห็นไหม ถ้าเราโหลดมา ไฟล์มันใหญ่มากเลย อย่างนี้แสดงว่า ภาพออกมา Background ใหญ่ ใหญ่เบิ้มเลยนะคะ เราต้องเปลี่ยนมา ไปหาไซซ์เล็ก ๆ ไม่อย่างนั้นก็หานะคะ ใช้โปรแกรมแล้วช่วยในการ เขาเรียกว่าอะไรนะ... ลดขนาดภาพ เวอร์ชันนี้ Windows นี้พอใช้ Paint แล้ว มันไม่ใช่น่ะ มันไม่ใช่ มันไม่ใช่อย่างที่เราต้องการ ดูนะ เดี๋ยวแม่จะลองทำให้ดูนะ Open นี่ ๆ ดูรูปนี้นะคะ ต้นฉบับ อย่างบึ้มเลยนี่ ดูนะ เลือก Select All แล้วก็เลือก image Resize ดูนะครับ เลือก Resize จะลด จะลดเปอร์เซ็นต์มันครึ่งหนึ่ง เหลือสัก 50 ยังใหญ่อยู่เลยเห็นไหม ลดอีก Image Resize อีก เอ๊ย Select All ก่อน ก็คือใช้ตัวโปรแกรมนั่นล่ะนะครับ ช่วยในการลดขนาด คลิกโอเค ได้หรือยัง เห็นไหม ยัง ลดอีก 3 อะไรนะ 50 เห็นไหม แต่ทีนี้เวลา Save นะลูก ให้ File Save As เป็น PNG นะครับ Save เป็นอีกชื่อหนึ่ง ขอใหม่ BG To เดี๋ยวลองให้ดูกันเห็น ๆ เดี๋ยวเราจะแก้ เอาเมื่อกี้ไป tranform ข้างนอก เดี๋ยวขอลบก่อน คำสั่งนี้ก็ไม่จำเป็น วิธีการก็คือ ใส่ # เข้าไปลูก bg to นะคะ ที่เรียก นามสกุลก็ png ด้วย เมื่อกี้เปลี่ยนทั้งชื่อ นามสกุลให้มันเลย ขอลองใหม่ Ctrl + B เห็นยัง เห็นยัง เห็นยัง เห็นไหม นี่คือ 1. ถ้าปรับในตัวของโค้ดของโปรแกรมเราไม่ได้ เราไปใช้โปรแกรม ลดสะ ติ๋วหลิว ลงไปหน่อย เดี๋ยวไปเพิ่มอีกนิดไม่เป็นไรครับ ก็อย่างนี้แหละ ไปเอาของเขามา ไม่สร้างเอง มันก็จะได้ขนาดที่เราไม่รู้ขนาดที่แท้จริงเท่าไรนะ วิธีการ... ถ้าอย่างนั้น ให้มันเท่าไซซ์เรา เท่าไรนะ 1,500 800 ดูสิ จะเท่ากันพอดีไหม 1,500 กับ 800 ปรับให้เท่าไซซ์หน้าจอ ว่าอย่างนั้นเถอะ รออะไร 1,500 อย่าลืมนะ โอเคนะครับมีวิธีแก้ 2 วิธีนี้แหละ แล้วแต่จะเลือก pixel วิธีการก็คือไหนล่ะ Paint เรา ไฟล์ Select All Resize เดี๋ยวเปลี่ยนเป็น Pixel นะ 1500 800 โอเค เล็กไปนะ ย้อนคืนมาหน่อย ขอลองไซซ์นี้แล้วกัน Save ก่อน Ctrl + B ใหม่นะคะ นะ นี่ เห็นไหม ได้เต็ม ๆ แล้วนะ อาจจะใหญ่ไปนิด ค่อยปรับเอานะคะ ค่อยไปปรับขนาดเอา ก็ลอง ลองปรับ แล้วถ้ามันยังไม่สมดุลก็ปรับใหม่ว่าอยา่งนั้นเถอะนะคะ จากต้นฉบับ ไฟล์ใหญ่มาก โอเคนะ แล้วเดี๋ยวสัปดาห์หน้า ใครที่ให้ดูตัวนี้นะคะ เช็กที่ตัวไฟล์ที่ชื่อว่า ที่บอกว่าเราจะต้องไปหาไฟล์ภาพที่มันมีตัวการ์ตูนเราใช่ไหม ที่มันจะต้อง เดี๋ยวนะ สีไม่ใช้ล่ะ ที่มันมีลักษณะ เหมือนเคลื่อนไหวที่เราต้องการ นึกออกนะคะ ก็คือให้มันมีภาพ ของตัวละครเรามันเคลื่อนไหวได้ อย่าลืมเลือก Free นะคะ ถ้าได้มาแล้วไฟล์มันจะต้องเป็น เดี๋ยวนะเหมือนที่เคย... เลือกคำว่า "Free" พิมพ์ไหม ไม่ใช่เลือก Free downdload พิมพ์ D-o-w-n-l-o-a-d- Sheet เช่น ๆ ๆ สมมติตัวอย่าง ตัวอย่างก่อน เราอยากได้แบบเจาะจงตัวละครเลย เราก็ใส่ชื่อตามหลัง บวก แล้วก็ชื่อเกมเหล่านั้น เช่น ใครอยากได้กระต่ายก็ Rabbit ใครอยากได้เสือก็ Tiger อย่างนี้นะคะ ขอเป็น free Pic Free Pic จะให้อย่างไรไม่รู้ เดี๋ยวเข้าไปดูก่อน คือ Resize บ่นี้ เปิดด้วย เปิดด้วย แหม ๆ ๆ  ไม่ให้เปิดอีกแล้ว Downl Open with ขอเปิดด้วย paint แล้วกัน นี่ บางทีมันได้เป็นภาพใหญ่ ๆ คือบางอันนะ sprite sheet บางตัวมันจะแยก แยกไฟล์มาให้ อันนี้ไม่แยก เดี๋ยวหาให้ดูตัวอย่างอีกอันหนึ่งนะ ที่มันจะแยกเป็นไฟล์มาให้ เช่น ๆ ๆ อยู่ไหนน้อ สูงสุด เขาบอกว่าฟรีนะ เดี๋ยวจะลองดูนะ อ้าว ไม่ให้น่ะ ไหนบอกว่าฟรีล่ะ หาไม่เจอ นี่ดูเหมือน Cat กับ Dog อันนี้นะคะ เดี๋ยวมันให้เป็นไฟล์ Zip มาจะเปิดให้ให้ดู คือ... ถ้า ๆ ๆ เอาไปไว้ที่ Picture ก่อน นี่ อย่างของอันนี้ นี่มันจะมีภาพแยกมาให้อย่างนี้นี่ค่ะ เราจะต้องได้ลักษณะของตัวเกมแบบนี้นะเด็ก ๆ  เหมือนจะเอา Walk นี่ ตั้งแต่ Walk ที่ 1 แบบนี้ แบบนี้ ถ้าใครที่ได้มาแล้วเป็นแผงเหมือนตอนแรก เมื่อกี้เอาไปไว้ไหนแล้ว Download ใช่ไหม นี่ มันอย่างนี้ ดูนะครับ Open with Paint ถ้าใครที่ได้มาแล้วเป็น 1 แผ่น แล้วมีหลายตัว เด็ก ๆ จะต้อง นึกออกนะ ตัดทีละตัวค่ะ ให้ได้รูป เข้าใจไหม ให้ได้รูปที่มันมีการเคลื่อนไหวเหมือน นี่ มันควร... มันควรที่จะได้ภาพลักษณะนี้ที่แยกออกมาแล้ว นึกออกหรือเปล่า แต่ตอนนี้ภาพมันรวม ถ้าใครไปโหลดแล้วมันได้ภาพที่เป็นทั้งหมดอย่างนี้มาน่ะ เราจะต้องมาใช้ Paint ของเราอย่างนี้นะ Select ปุ๊บ แล้วก็ Resize ให้มันเท่ากันนะ นี่ ให้เราดูตำแหน่งที่เราจะทำนี่ ให้ Fix เป็น Pixel คลิก OK ปุ๊บ กด Crop นี่ ดูนะคะ แล้วให้จำค่านี้ไว้ ว่านี่ Size ที่มันเท่ากันคือ Size นี้ ก็คือเราจะต้องตัดให้ได้ขนาดนี้ ให้เท่า ๆ กันทุกภาพน่ะลูก เข้าใจไหม ให้นึกถึงว่า เหมือนเราทำตัวการ์ตูนเคลื่อนไหว ปรากฎเดี๋ยวทำไม เอ๊ะภาพมันเล็ก นึกออกไหม ตัวมันเล็กมันใหญ่ เพราะฉะนั้น เวลาตัดน่ะลูก ขนาดภาพมันจะต้องเท่ากันไง นึกออกนะคะ นี่ เพราะฉะนั้น 118 ก็ต้อง 118 เท่ากัน 118 82 ก็ต้อง 118 82 เท่ากันทุกตัว นึกออกนะ กำหนดขนาดให้มันเท่ากันทุกตัวน่ะ อยากได้เสือวิ่ง เช่น ๆ ๆ ตัวนี้ กำหนดไซซ์Size แรก กำหนดที่... 102.82  Horizontal Vertical 102.82 โอเค Crop นะคะ แล้วก็ Save เป็น T1 vpjk'ouhนะคะ แล้วย้อนกลับคืนมา ตัวที่ 2 ก็ทำเหมือนกัน อันนี้หาหางมันติดกัน มันก็จะบาส 102 กับ 82 นะคะ นี่นะ โอเค ถ้าไม่อย่างนั้นก็คือนี่แหละ ใช้ ให้เด็ก ๆ ไปที่เกม GameArt2D นี้ได้ มันให้โหลด แต่ก็ไม่เยอะ มันมีนี่ มันมีรูปตัวนี้ ๆ ๆ ตัวนี้ ๆ ๆ นะคะ หาดูอย่างนี้นะคะ FreeAsset หาคำว่า Free Free Sprite อย่างนี้เพราะไม่อย่างนั้น มันจะไม่ได้ มันจะไม่ได้ ไม่ได้ ต้องหาคำว่า Free Sprite อย่างเดียว เหมือนไม่รู้น้องเพนกวินนี่ จะให้เยอะเท่าไหน ตะมุตะมิ นี่ถ้ามันติดดาวนี่ คือ เสียเงิน เราต้องดูที่เขาต้องไม่ติดดาวใช่ไหม ไอ้ตัวนี้ได้ หมดแล้ว 3 of 3 3 หน้าแล้วเหรอ ไม่นะ เราก็ Save ว่า Free แล้วนะ แต่ไมให้ฟรีเรานะ ใน Free หา Free Sprite หา Free มันจะขึ้น Free ให้เราไหม เอ๊ะ หรือว่าวันนี้เราโหลดไปจนหมดโควต้าแล้ว ขึ้นแบบเสียสตางค์ทั้งนั้นเลยนะคะ หาเพิ่มนะเด็ก ๆ นะ หาไว้ก่อนนะ เพราะคราวหหน้ามันจะต่อด้วย เอาตัวนี้มาลง เช่น ๆ ๆ ๆ เจอรูป นะคะ หาไว้ บอกแล้วถ้าหาไม่ได้แล้ว ใช้วิธีที่บอกน่ะ ตัดไปทีละรูปนะคะ โอเคนะคะ เดี๋ยวสัปดาห์นี้ เราจะพอแค่นี้ก่อน ต่อกันในสัปดาห์หน้านะคะ มีใครยังทำไม่ได้อีก รูปยังไม่พอดีกับกรอบนี่ เปลี่ยนขนาด 1500 1000 สิ 1800 แป๊บหนึ่ง ๆ 1800 800 นะ ประมาณนี้นะคะ 1800 กับ 1600 เสร็จแล้วก็ Save ไว้ โอเคค่ะ สัปดาห์นี้พอแค่นี้ [สิ้นสุดการถอดความ]