WEBVTT

00:00:00.000 --> 00:00:05.248
(อาจารย์สุธิรา) เด็ก ๆ อย่าลืมเปิดอะไรคะ โปรแกรม Sublime

00:00:08.639 --> 00:00:15.944
ถ้าของใครคลิกเข้ามาตรงหน้าต่าง Windows แล้วมันไม่เห็นนะ

00:00:17.694 --> 00:00:22.086
คนมาใช้เยอะแล้วมันเลื่อนนะคะ

00:00:23.563 --> 00:00:26.042
เอ๊ะเราก็ว่าเราพิมพ์ไปแล้วนี่นะ

00:00:39.549 --> 00:00:42.386
ใช้คำค้นหานะคะ Sub...

00:00:45.000 --> 00:00:49.906
พอเจอ Sublime Text เราก็คลิก Open เพื่อเปิดโปรแกรมของเรานะ

00:00:50.453 --> 00:00:52.900
เด็ก ๆ ต้องเปิดโปรแกรมรอเลยนะคะ

00:00:54.158 --> 00:01:00.520
ถ้าขึ้นอัปเดตมา บอกแล้วว่ากด Cancel ไปเลยนะคะ เพราะมันเป็นเวอร์ชันล่าสุด

00:01:02.529 --> 00:01:08.654
เรายังอยู่ที่ส่วนของการกำหนดหน้าจออยู่นะคะ เรายังไม่ไปตรงอื่นเลย

00:01:08.873 --> 00:01:15.453
เราได้ icon ได้ส่วนของ Scene ต่อไป ก็คือ...

00:01:17.367 --> 00:01:23.923
ตัวเดิมเรา แล้วลองกด Ctrl + B 1 ครั้ง กดปุ่ม Ctrl กับปุ่ม B นะคะ

00:01:29.118 --> 00:01:37.591
สังเกต เด็ก ๆ จะสังเกตเห็นว่าหน้าจอเกม หรือ Scene ของเรามันจะเป็น พื้นหลังมันจะเป็นสีดำ

00:01:37.591 --> 00:01:47.242
ก็คือถ้าเราไม่ต้องการให้… เราสามารถเปลี่ยนสีของพื้นหลังฉากเราได้นะคะ

00:01:47.242 --> 00:01:51.377
เพราะฉะนั้น คำสั่งที่ใช้ก็คือคำสั่งนี้

00:01:52.580 --> 00:01:53.823
นะคะ

00:01:55.573 --> 00:01:56.977
ทีนี้

00:01:57.579 --> 00:02:03.775
แต่ทีนี้ ก่อนที่จะใส่สี หรือจะรู้ว่าสีไหนเป็นสีอะไร

00:02:04.267 --> 00:02:09.357
สิ่งที่เราจะต้องทำก็คือเด็ก ๆ ให้เปิด Google Chrome

00:02:11.380 --> 00:02:14.297
ให้เด็ก ๆ เปิด Google ขึ้นมานะ

00:02:16.156 --> 00:02:20.073
อยู่หน้า Google นะคะ นี่ ให้เปิด Google ขึ้นมาอย่างนี้

00:02:20.675 --> 00:02:25.287
แล้วให้พิมพ์คำค้นว่า คำค้นว่าอะไร

00:02:34.474 --> 00:02:35.792
ลืม

00:02:43.831 --> 00:02:49.999
โอเค เห็นไหมคะ เห็นไหมคะ พิมพ์ตามอันนี้ Color to RGB

00:02:50.601 --> 00:02:53.073
เห็นไหม พิมพ์คำค้นตามตัวนี้นะคะ

00:02:53.510 --> 00:03:02.598
c-o-l-o-r-s

00:03:04.621 --> 00:03:09.248
colors แล้วก็ t-o to

00:03:11.162 --> 00:03:19.192
r-g-b ก็คือให้พิมพ์คำนี้นะคะ เด็ก ๆ

00:03:24.989 --> 00:03:32.866
c-o-l-o-r เติม s ด้วย colors

00:03:33.522 --> 00:03:38.662
colors to t-o to

00:03:39.318 --> 00:03:45.196
แล้วก็ตัว r ตัว g ตัว b ตัวเล็ก ตัวใหญ่ได้เหมือนกันหมดนะคะ

00:03:46.618 --> 00:03:51.062
แล้วกดค้นหาได้เลย Enter เพื่อค้นหาได้เลย

00:04:17.934 --> 00:04:25.464
แล้วให้เรา ใครขึ้นหรือยัง ใครยังไม่ขึ้นหน้านี้ ให้เลือกตัวแรกนะคะ

00:04:25.464 --> 00:04:29.493
เอ้า สไลด์มันไม่เปลี่ยนหรือ เดี๋ยวนะ

00:04:36.766 --> 00:04:47.591
โอเคไหม นี่นะคะในช่องค้นหา ให้เด็ก ๆ พิมพ์ colors to rgb ขอโทษทีลืมดู

00:04:52.349 --> 00:04:54.679
จากนั้นกด Enter

00:04:57.468 --> 00:05:02.037
เมื่อพิมพ์เสร็จแล้วกด Enter นะคะ มันจะขึ้น โอเคไหมคะ

00:05:04.056 --> 00:05:10.740
ให้เลือกอันแรกเลย RGB ลิงก์แรก RGB Color Codes Chart

00:05:10.740 --> 00:05:17.711
เราจะต้องการ Chart สี เพื่อจะได้พิมพ์ค่าสีถูก เพราะฉะนั้น เราต้องเลือกตัวนี้นะลูก

00:05:17.711 --> 00:05:24.014
เราจะดูว่าสมมติเราอยากได้สีนี้ ค่ามัน... ค่าสีมันคืออะไรนะคะ

00:05:26.147 --> 00:05:28.286
คลิกเข้าไป 1 ครั้ง

00:05:29.434 --> 00:05:30.786
นี่ค่ะ

00:05:32.153 --> 00:05:38.636
จะดูอย่างไรว่า Chart สีคืออะไร เด็ก ๆ คลิกที่ช่องสีปุ๊บ

00:05:39.566 --> 00:05:48.816
นี่นะคะ เห็นไหมมันจะมีค่าสีนี่ขึ้นมา ก็คือตัวนี้ นี่ ค่าสีของเขานะคะ

00:05:55.980 --> 00:06:01.023
หรือดูจากตรงนี้ก็ได้ เหมือนกัน เห็นไหมคะ

00:06:01.406 --> 00:06:10.104
ให้... ถ้าเราจะใช้ก็คือวิธีการนะคะ สมมติเอาชมพูนี้ อย่างนี้ กด...

00:06:20.440 --> 00:06:21.936
ตัวนี้ไม่ขึ้นหรือ

00:06:23.522 --> 00:06:27.135
ก็คือเราจะก๊อบปี้ค่าสีตัวนี้ไปใส่

00:06:28.776 --> 00:06:30.105
นึกออกนะ

00:06:33.988 --> 00:06:40.206
มันมี 2 Code นะคะ ดูในตารางนี่ มันจะมี H กับ Decimal Code

00:06:40.206 --> 00:06:47.383
Hex Code กับ Decimal Code นะ มี 2 ตัวนะคะ เดี๋ยวมาดูว่าตัวที่เราใช้คือตัวไหน

00:06:47.383 --> 00:06:56.337
เปิดหน้านี้ทิ้งไว้เลยนะ นะคะ เปิดหน้านี้ทิ้งไว้เลย ใครยังไม่ขึ้นหน้าที่มีชาร์ตสีนี้ ยกมือ

00:06:59.509 --> 00:07:03.852
ขึ้นหรือยัง ใครยังไม่ขึ้นยกมือนะเด็ก ๆ ขึ้นไหมคะ

00:07:04.618 --> 00:07:10.426
เดี๋ยวกรอกค่าสีไม่ถูกลูก มันจะไม่ได้ ใส่ไม่ครบ มันไม่ได้เด๊

00:07:11.082 --> 00:07:16.110
ไม่ต้องไปนั่งจำนะคะ เรามา Search แล้วก็เปิดเอานี่ มันเยอะ สีมันเยอะ

00:07:16.110 --> 00:07:18.533
อยากได้สีอ่อน สีแก่อะไรอย่างนี้

00:07:19.189 --> 00:07:26.097
เปิดหน้านี้ทิ้งไว้ด้วยเลยนะคะ แล้วเรามาดูคำสั่งเราต่อ

00:07:28.940 --> 00:07:36.649
สิ่งที่จะทำ ก็คือตัวคำสั่งนะคะ

00:07:36.649 --> 00:07:42.516
ก็คือเราจะต้องกำหนดตัวแปรสีเสียก่อน แล้วก็ตามด้วย

00:07:44.758 --> 00:07:47.699
ค่าสีที่เราจะใช้นะคะ

00:07:48.793 --> 00:08:00.865
พอใส่ พอได้ค่าสีเสร็จ เราค่อยมา Field ใช้คำสั่ง Field เพื่อใส่สีลงไปในฉากเราเห็นไหมคะ

00:08:00.865 --> 00:08:02.141
นะคะ

00:08:07.391 --> 00:08:14.699
และสิ่งที่เราจะต้องมีเพิ่มขึ้นมา ก็คือส่วนของการอัปเดตนะคะ

00:08:21.535 --> 00:08:25.241
อันดับแรก อันดับแรก ไปที่บรรทัดที่...

00:08:47.135 --> 00:08:54.253
ดูนะคะ เด็ก ๆ เด็ก ๆ จะต้องไป เปิด Sublime ขึ้นมา โอเคไหม

00:08:54.581 --> 00:09:00.487
บรรทัดที่เราจะยังอยู่ ก็คือต่อจาก pygame.display.set เห็นไหมคะ

00:09:09.346 --> 00:09:13.844
สิ่งที่เราจะทำก็คือสร้างตัวแปรชื่อว่า

00:09:18.055 --> 00:09:26.946
bg bg มาจากคำเต็มว่า Background นั่นเองนะคะ ฺbg แล้วก็ตาม colors แล้วกัน

00:09:32.688 --> 00:09:35.818
bgcolor นะคะ

00:09:37.349 --> 00:09:39.020
ตามด้วยเครื่องหมายเท่ากับ

00:09:42.520 --> 00:09:45.493
แล้วก็ใส่วงเล็บ

00:09:47.298 --> 00:09:56.335
เอ้ย ไม่ใช่ใส่วงเล็บ ตามด้วยเครื่องหมายเท่ากับ แล้วก็ค่าสีที่เราจะใช้อยู่ตรงไหน เรามาดู

00:10:17.997 --> 00:10:24.459
ไปเปิดผิดอันใช่ไหมนี่ ทำไมหน้าต่างขึ้นเยอะ เดี๋ยวนะ

00:10:27.193 --> 00:10:34.628
ตัวนี้ไหม ตัวไหนนี่ ตัวนี้แหละ

00:10:51.034 --> 00:10:54.430
แล้วก็ใส่ค่าสีนะคะ ดูนะคะ

00:10:59.680 --> 00:11:02.519
ก็คือตัวเลขในชุดมัน

00:11:04.980 --> 00:11:12.367
เอาจากตรงนี้เด็ก ๆ นี่ เอาค่าตรง Decimal Code เช่น อยากได้สีอะไรลูก

00:11:13.242 --> 00:11:17.497
สมมติ สมมติเราจะเอาสีนี้

00:11:19.958 --> 00:11:25.175
ให้เห็นว่าจากสีดำน่ะค่ะ ให้เห็นชัด ๆ ว่าเปลี่ยนสีแล้วนะ

00:11:28.566 --> 00:11:30.146
สีฟ้าอยู่ไหนนี่

00:11:32.169 --> 00:11:35.451
ขอฟ้านี้แล้วกัน aqua

00:11:39.060 --> 00:11:49.288
deep sky blue อันนี้แล้วกัน ให้เราก๊อบตัวเลขชุดนี้นะคะ ตัวเลขที่อยู่ในตารางสุดท้าย

00:11:49.288 --> 00:11:54.138
นึกออกนะ ช่องสุดท้ายนี่ Decimal Code เอา Decimal Code เพราะอะไร

00:11:54.138 --> 00:11:59.540
Decimal Code เป็นค่าสี RGB เหมือนในวงเล็บเลยเห็นไหมคะ

00:12:00.524 --> 00:12:07.793
ก๊อบเลยนะคะเด็ก ๆ ไม่ต้องจำ กด ทำ Highlight ครอบ แล้วก็เลือก

00:12:09.270 --> 00:12:18.664
แล้วก็กด Copy เอาแค่ 3 อันในชุด ในวงเล็บนี่นะลูก ห้ามเอาเกินกว่านั้น

00:12:19.703 --> 00:12:31.080
คัดลอกแล้วก็เอามาวางใน Code เรานะคะ เท่ากับ แล้วก็กด Ctrl + B วาง อย่างนี้ โอเคไหม

00:12:33.705 --> 00:12:36.984
กำหนดค่าให้ Background Color เสร็จแล้ว

00:12:36.984 --> 00:12:44.753
สิ่งที่เราจะต้องทำต่อมา ก็คือเราจะมาเรียกใช้ค่าสีนั้นนะคะ เอามาไว้ที่ไหน

00:12:46.120 --> 00:12:48.656
ดูตำแหน่งนะคะ

00:12:53.140 --> 00:13:05.062
เห็นไหม อยู่ระหว่างคำสั่ง if event.type == pygame.QUIT เห็นไหมคะ

00:13:05.281 --> 00:13:15.233
ก็คือบรรทัดที่เท่าไรนะ บรรทัดที่ 18 กด Enter หนึ่งครั้ง เราจะอยู่ที่ตำแหน่งที่บรรทัด 18 นะคะ

00:13:19.006 --> 00:13:25.601
ทีนี้เด็ก ๆ ต้องมาดูอะไร ดูตัวแปรฉากที่เราตั้งไว้ ชื่อว่าอะไรคะ

00:13:28.007 --> 00:13:34.030
เราตั้งชื่อตัวแปรฉากเรา คือ ตัวแรกนี่ ถ้าใครตั้ง screen

00:13:35.124 --> 00:13:44.362
ดูนะคะ ดูชื่อตัวนี้ตัวแปรของฉากเรานี่เห็นไหมคะ เพราะตอนเรียกใช้ ดูรูปแบบคำสั่งดี ๆ นะคะ

00:13:45.565 --> 00:13:53.432
ชื่อตัวแปรฉาก แล้วตามด้วยเครื่องหมาย . แล้วตามด้วยคำสั่ง fill

00:13:56.112 --> 00:13:58.725
แล้วตามด้วยในวงเล็บ

00:14:00.803 --> 00:14:05.677
ชื่อตัวแปรสี แล้วก็ค่าสีนั้นนะคะ

00:14:15.541 --> 00:14:18.203
โอเคหรือยัง นะคะ

00:14:19.734 --> 00:14:23.795
เพราะฉะนั้น ตัวแปรฉากเรา ชื่อนี้นะ

00:14:23.795 --> 00:14:29.517
เราจะอยู่ที่ตำแหน่งบรรทัดที่ 18 นะ ดูดี ๆ นะคะ อย่าใส่ผิดที่นะ

00:14:30.000 --> 00:14:33.962
18 แล้วตำแหน่ง ก็คือต้องตรงกับคำว่า "Run"

00:14:38.665 --> 00:14:45.695
เรียกใช้ Screen นะคะ กด s ปุ๊บ screen ขึ้น นั่นคือตัวแปรที่เราต้องการ Click 1 ครั้ง

00:14:45.695 --> 00:14:56.363
ตามด้วยเครื่องหมาย เอ้ย ตามด้วย . แล้วก็พิมพ์ f-i-ll fill นะคะ

00:14:56.800 --> 00:15:07.769
แล้วก็ตามด้วยวงเล็บ วงเล็บอะไร วงเล็บตัวแปรสีนี่ Background Color นี่ เห็นไหมคะ

00:15:09.027 --> 00:15:14.325
พิมพ์ b เดี๋ยว bgcolors มันจะขึ้นมา แล้วกดคลิก

00:15:16.567 --> 00:15:20.475
มันจะไม่ผิดเลยนะคะ แล้ว

00:15:22.170 --> 00:15:28.446
ตัวแปรสีแล้วก็ตามด้วยค่าสีนะคะ / ใส่เครื่องหมาย /

00:15:33.586 --> 00:15:40.765
ก่อนอื่นเด็ก ๆ Copy ค่าสีมาเสียก่อนนะ

00:15:41.968 --> 00:15:52.373
คัดลอก Copy bgcolors ใส่ /

00:15:54.287 --> 00:15:56.074
แล้วก็วาง

00:15:59.465 --> 00:16:00.996
โอเคนะคะ

00:16:01.379 --> 00:16:10.005
ทีนี้เมื่อเกิดการเปลี่ยนแปลงนี่ เราจะต้องมีคำสั่งสำหรับอัปเดต

00:16:12.083 --> 00:16:14.669
ก่อนบรรทัดสุดท้าย เด็ก ๆ ดู

00:16:18.169 --> 00:16:25.527
บรรทัดที่ 20 ซึ่งเป็นบรรทัดที่เราให้จบเกมนะคะ เรากด Enter เพื่อเพิ่มบรรทัด

00:16:29.191 --> 00:16:34.662
นะคะ ในบรรทัดที่ 21 ใส่ # เข้าไป

00:16:34.990 --> 00:16:42.721
เราจะบอกแล้วว่าตรงนี้คืออัปเดตนะคะ เป็นตำแหน่งที่สำหรับคำสั่งอัปเดต

00:16:44.416 --> 00:16:47.213
จะได้รู้นะคะ อยู่ตรงนี้

00:16:48.908 --> 00:17:01.509
อัปเดตคำสั่งที่ใช้นะคะ ก็คือ pygame.display.update( )

00:17:20.471 --> 00:17:24.147
หน้าไหนนะ นี่ล่ะหน้าโค้ด

00:17:28.248 --> 00:17:30.000
ไหน

00:17:32.844 --> 00:17:39.850
color จะอยู่ที่กำหนดหน้าจอ ต่อจากบรรทัดที่ display game

00:17:40.506 --> 00:17:43.673
ตั้งชื่อตัวแปร bgcolors

00:17:45.423 --> 00:17:56.382
รูปแบบ ก็คือชื่อตัวแปรนะคะ แล้วก็ตามด้วยค่าที่เราจะหา แล้วเราก็ไป Copy ค่าสีในตารางมาวาง

00:18:06.444 --> 00:18:12.627
รหัสสีที่บอกว่าจากเว็บนี่ไงที่ให้เปิดนี่ นี่ ๆ ๆ

00:18:13.611 --> 00:18:15.275
จากตารางนี้

00:18:19.048 --> 00:18:23.473
เอาไว้ไหนหน้านี้ ให้ Search แล้วน่ะ

00:18:32.606 --> 00:18:42.721
ไปต่อนะคะ ของคนอื่นพิมพ์ pygame.display.update นะคะ แล้วก็วงเล็บปิด

00:18:43.596 --> 00:18:48.758
ตรงตำแหน่งก่อนจะอันนี้

00:18:52.203 --> 00:18:54.997
ก่อนจะ… ไหนล่ะ

00:18:55.763 --> 00:19:00.521
Sublime Sublime ไม่ขึ้น ต่อไปบรรทัด Update เรานะ

00:19:02.326 --> 00:19:05.022
มันจะตรงกับตำแหน่ง Run นะลูก

00:19:07.975 --> 00:19:09.542
มันจะ Tab เข้าไป 1 Tab

00:19:28.136 --> 00:19:31.113
เห็นไหมคะ ฟังก์ชันมันจะโดนเรียกขึ้นมา

00:19:33.957 --> 00:19:40.241
นี่นะครับ 1 อัน เห็นไหม ตำแหน่ง Update จะอยู่ก่อนเราจะจบ

00:19:41.882 --> 00:19:45.554
มันจะอัปเดตการทำงานก่อนทุกครั้ง

00:19:45.554 --> 00:19:50.253
ให้มันอัปเดตก่อนเสมอนะคะ ก่อนจะออกจากโปรแกรม ว่าอย่างนั้นเถอะ

00:20:01.518 --> 00:20:06.147
โอเค รู้แล้ว ๆ ๆ ผิดแน่ เดี๋ยวนะ

00:20:07.732 --> 00:20:15.856
ตอนเรียกใช้นะคะ เราใส่แต่ชื่อมันก็ได้ เพราะตัวแปรเรากำหนดแล้วนะว่าสีอะไร

00:20:15.856 --> 00:20:21.153
เราเรียกแต่ background colors พอนะคะ ค่าสีไม่ต้องใส่

00:20:22.192 --> 00:20:33.140
ในที่นี้ / หมายถึง ก็คือให้เลือกว่าจะใส่ตัวแปร หรือจะใส่ค่าสี ซึ่งใส่ชื่อตัวแปรมันจะขึ้น

00:20:33.960 --> 00:20:40.002
ถ้าเรามีแล้วมันจะขึ้นมาเลย เพราะฉะนั้นจะง่ายกว่า ใครพิมพ์ อัปเดตเสร็จแล้วกด

00:20:40.822 --> 00:20:45.911
Build ได้เลย Ctrl + B ได้เลยนะคะเด็ก ๆ เพื่อดู

00:20:48.700 --> 00:20:53.011
สีไม่เปลี่ยนหรือ Error ไม่ขึ้นด้วย

00:20:56.511 --> 00:20:59.186
ไหนแม่อัปเดตให้ ตำแหน่งไหนผิด

00:21:02.412 --> 00:21:04.071
bgcolors

00:21:05.492 --> 00:21:07.406
screen.fill

00:21:08.500 --> 00:21:10.374
background colors

00:21:11.796 --> 00:21:15.174
update run ถ้าเป็นฟอนต์

00:21:18.947 --> 00:21:23.289
ไม่ให้เติมสีแล้วหรือเวอร์ชันนี้ ไม่แน่ใจแฮะ

00:21:42.648 --> 00:21:46.185
ไม่ให้อัปเดต มันไม่ยอมอัปเดต

00:23:20.060 --> 00:23:25.826
โอเค รู้แล้ว ใส่ตำแหน่งผิดนะคะเด็ก ๆ ขอโทษที

00:23:26.934 --> 00:23:30.681
ตำแหน่ง screen. fill เลื่อน

00:23:32.267 --> 00:23:35.773
บรรทัดที่ run = False ใช่ไหม

00:23:36.484 --> 00:23:44.365
ปึ๊บ กด Enter แล้ว ทีนี้ ถ้าเมื่อ Enter ลงมา แล้วมันลงมาตำแหน่งนี้ให้เด็ก ๆ กดปุ่ม

00:23:44.365 --> 00:23:49.776
Back Space ย้อนหลังไป 2 ตำแหน่ง ให้มันอยู่ตรงกับคำว่า for

00:23:50.049 --> 00:23:56.956
เห็นไหมคะ แล้วค่อยเอา screen.fill มาใส่ แล้วพออัปเดตเห็นไหม

00:23:56.956 --> 00:24:02.858
เด็ก ๆ จะได้... เอ้ย ผิดตัวใช่ไหม มีหลายตัว งง

00:24:03.733 --> 00:24:09.299
เห็นไหมคะ เปลี่ยนสีแล้ว ใครยังสีไม่เปลี่ยน ยกมือ

00:24:10.283 --> 00:24:17.245
ใครไม่เปลี่ยน ให้ดูตำแหน่งแรก ไล่ไปทีละตำแหน่งนะคะ

00:24:21.456 --> 00:24:23.850
กำหนดตัวแปรนี้หรือยัง

00:24:24.998 --> 00:24:36.273
กำหนดหรือยัง อันนี้เสร็จหรือยัง บรรทัดที่ 10 มีตัวแปรสี มีค่าแล้ว โอเคนะคะ ไปดูบรรทัดต่อมา

00:24:37.312 --> 00:24:43.054
ก็คือสีที่เราจะใส่ มันจะอยู่ใน... เห็นไหมคะ ตำแหน่ง loop

00:24:45.351 --> 00:24:48.525
ตำแหน่ง loop ที่ต่อจากบรรทัดที่

00:24:49.947 --> 00:24:57.659
หาปุ่ม delete ไม่เจอ ต่อจาก run = False ก็คือบรรทัดที่ 19

00:24:57.659 --> 00:25:05.655
ให้ดูบรรทัดที่มีคำว่า "run = False" มิ่งออกหรือยังลูก สีออกหรือยัง

00:25:08.717 --> 00:25:11.654
กด Enter 1 ครั้งปึ๊บนี่

00:25:12.256 --> 00:25:20.001
สังเกตตำแหน่งเคอร์เซอร์มันจะอยู่ตรงกับ Run ใช่ไหม ให้เรากดปุ่ม Back Space

00:25:21.149 --> 00:25:26.766
ต้องกดปุ่ม Back Space 2 ทีนะคะ

00:25:27.203 --> 00:25:31.746
เพื่อให้ตำแหน่งเคอร์เซอร์มันอยู่ตรงกับคำว่า "for" เห็นไหม

00:25:32.676 --> 00:25:35.915
for สีแดง ๆ ในบรรทัดที่ 16 เห็นไหมคะ

00:25:37.884 --> 00:25:43.978
เห็นไหม แล้วก็พิมพ์คำสั่ง screen

00:25:45.000 --> 00:25:52.206
screen ก็คือตัวแปรฉากที่เราตั้งไว้ กด s ปุ๊บ เจอ screen Enter

00:25:52.589 --> 00:25:59.173
แล้วก็ .fill แล้วก็ตามด้วยในวงเล็บชื่อตัวแปรสีนะคะ

00:26:00.000 --> 00:26:07.458
โอเคไหม เสร็จแล้วอย่าลืม พอเสร็จบรรทัดนี้นะคะ

00:26:08.114 --> 00:26:16.184
ในบรรทัดที่ 21 นี่ ให้ใส่ # เราจะต้องสั่ง มีคำสั่งอัปเดตด้วย นี่

00:26:17.332 --> 00:26:24.851
เห็นไหมคะ อยู่ตรงกับ screen.fill นั่นแหละ pygame.display.update

00:27:53.873 --> 00:28:02.272
สำหรับเด็ก ๆ บางคนนะคะ พอพิมพ์ไปแล้วมันขึ้น Error นี่

00:28:02.928 --> 00:28:09.437
สาเหตุหนึ่งให้ดูที่ตำแหน่งที่พิมพ์ แล้วลองทำอย่างนี้ครอบ

00:28:10.312 --> 00:28:12.871
ถ้าเด็ก ๆ ใช้ Tab

00:28:13.473 --> 00:28:20.593
มันจะไม่ขึ้น Error แต่ถ้าเมื่อไรตรงตำแหน่งนี้มันเป็น ... สีเทา ๆ ขาว ๆ

00:28:20.593 --> 00:28:28.365
นั่นแสดงว่า เด็ก ๆ ไปกดด้วยแป้น Space Bar เพื่อขยับตำแหน่งใช่ไหม ซึ่งใน Sublime

00:28:29.131 --> 00:28:32.332
บอกแล้วว่าไอ้โปรแกรมนี้มันโดนบล็อก

00:28:33.480 --> 00:28:40.497
โครงสร้างมานะ เพราะฉะนั้นห้ามใช้ Space Bar ในการ Tab

00:28:40.880 --> 00:28:45.700
คือ เลื่อนตำแหน่งของคำสั่งเข้าไปตามโครงสร้างตามแนวนี้

00:28:45.700 --> 00:28:49.891
Space Bar จะใช้เฉพาะเมื่อมีการเว้นวรรคอย่างนี้เท่านั้น

00:28:50.328 --> 00:28:55.011
แค่ 1 จุดอย่างนี้เท่านั้น เห็นไหม สังเกตความแตกต่าง นี่

00:28:55.011 --> 00:29:01.676
ถ้าเด็ก ๆ ใช้ Space Bar มันจะเป็นจุด ๆ เหมือนตรง while run เห็นไหมคะ

00:29:01.676 --> 00:29:07.724
แต่ถ้าเด็ก ๆ ถ้ามันเป็น Tab น่ะ เพราะโครงสร้างของมันโดนกำหนด

00:29:07.724 --> 00:29:13.074
เห็นไหมมันจะเป็นขีดยาว ๆ อย่างนี้ คือ เป็น Tab เห็นไหมคะ

00:29:13.730 --> 00:29:22.008
ทีนี้ คือสิ่งที่ต้องจำนะคะ เมื่อให้ขึ้นคำสั่งใหม่แล้วให้กดนี่

00:29:22.008 --> 00:29:28.670
ไม่ให้กด Space Bar เด็ก ๆ จะต้องกด Tab นะ มันจะไปตามบล็อก

00:29:28.670 --> 00:29:33.734
บล็อกที่มันตั้งไว้นึกออกไหมลูก เพราะฉะนั้น ต้องกดให้ถูกนะคะ

00:29:35.539 --> 00:29:39.833
ใครยังไม่ออกอีก ออกหรือยัง

00:29:42.130 --> 00:29:43.116
โอเค

00:31:26.805 --> 00:31:31.143
เห็นไหม บาสเห็นหรือเปล่า บรรทัดที่ 2

00:31:33.276 --> 00:31:41.205
ทีนี้จำไว้นะคะ เรียนวิชาเขียนโปรแกรมนี่ ถ้าใครไม่มา ตัวเองจะไม่ทันเพื่อนถูกไหม

00:31:41.205 --> 00:31:46.637
เพราะแม่จะเขียนต่อจากสัปดาห์ที่แล้ว จะไม่รู้ตำแหน่งใช่ไหมคะ

00:31:46.637 --> 00:31:49.725
แล้วก็จะผิด พิมพ์ผิดพิมพ์ถูก

00:31:51.530 --> 00:31:57.997
เพราะฉะนั้น อย่าขาดนะคะ เรียนวิชาเขียนโปรแกรมน่ะ ไม่อย่างนั้นจะไปต่อไม่ได้นะ

00:33:44.213 --> 00:33:49.450
บาสดูนะคะ ตรงนี้ที่มีชื่อไฟล์นี่

00:33:57.434 --> 00:34:03.337
เครื่องตัวเองน่ะ เครื่องบาสน่ะ ไม่ใช่

00:34:03.610 --> 00:34:08.402
เดี๋ยวใจเย็น ๆ ฟังให้จบแล้วค่อยพิมพ์

00:34:08.402 --> 00:34:15.753
จะอธิบายก่อน ตรงที่บอกว่า image load นี่

00:34:16.245 --> 00:34:17.363
เห็นไหมคะ

00:34:18.238 --> 00:34:22.420
สิ่งที่มันจะไปโหลด ก็คือชื่อไฟล์

00:34:23.404 --> 00:34:31.577
ไฟล์ของบาสจะต้องอยู่ที่ C: แล้วก็ในโฟลเดอร์ที่

00:34:33.764 --> 00:34:35.742
โปรแกรม Save ไว้

00:34:38.148 --> 00:34:45.141
ชื่อโปรแกรมเราอยู่ตรงไหน ไฟล์นั้นก็คือนี่จะอยู่ตรงนั้นด้วย เข้าใจหรือเปล่า

00:39:42.081 --> 00:39:45.397
ดูนะ บาส

00:39:45.397 --> 00:39:49.836
ทีนี้ฟังไว้นะ ถ้าใครเข้าเรียนไม่ทันนี่

00:39:50.383 --> 00:39:55.704
รอบหน้าต้องรอจนกว่าแม่จะสอนเพื่อนเสร็จนะ ไม่อย่างนั้นจะเสียเวลา

00:39:55.704 --> 00:40:03.160
แล้วตัวเองถึงจะได้ทำตามเพื่อนทีหลัง เพราะฉะนั้น ถ้าครั้งหน้าบาสไม่มาเข้า

00:40:04.035 --> 00:40:09.918
แล้วครั้งต่อไปบาสเข้าอย่างนี้ บาสจะต้องรอจนกว่าแม่สอนให้เพื่อนทำจนเสร็จ

00:40:09.918 --> 00:40:21.828
แล้วบาสถึงจะมาทำตามเพื่อนได้ โอเคไหมนะคะ ทีนี้เราใส่สีพื้นได้แล้วเห็นไหมนะคะ

00:40:21.828 --> 00:40:23.697
แล้วในกรณีที่...

00:40:25.666 --> 00:40:36.855
อันนี้คือในกรณีที่มีสี และอีกกรณีหนึ่งที่บอกว่าใส่ภาพพื้นหลังเข้าไปแทนใช่ไหมเด็ก ๆ

00:40:36.855 --> 00:40:38.497
Background อยู่ไหน Background

00:40:39.536 --> 00:40:43.163
ไหนล่ะ หา Background เจ้าของไม่เห็น

00:40:43.710 --> 00:40:46.970
ต่อไปนะคะสิ่งที่จะทำ

00:40:47.736 --> 00:40:55.175
ตั้งแต่สัปดาห์แรกเลยนะ บอกว่าให้หาภาพ Background ที่เราจะเอามาเป็นฉาก ใช่ไหมคะ

00:40:55.175 --> 00:41:02.090
สิ่งที่เราจะทำต่อมาก็คือคำสั่งนี้นะลูก เมาส์หาย

00:41:03.512 --> 00:41:04.881
เดี๋ยวนะ

00:41:06.084 --> 00:41:08.305
คำสั่งต่อไปนะคะ

00:41:12.188 --> 00:41:13.830
อยู่ไหนล่ะ

00:41:20.501 --> 00:41:34.384
เมื่อกี้เราไปไหนแล้ว เมื่อกี้อ่านถึง ทีนี้การใส่ภาพ Background แทนสีพื้นหลัง

00:41:34.384 --> 00:41:45.803
ในกรณีที่เรามีฉากที่เป็นภาพนะคะ รูปแบบ ก็คือเหมือนเดิมทุกครั้ง เราจะต้องสร้างตัวแปร

00:41:45.803 --> 00:41:53.477
เพื่อให้โปรแกรมมันรู้จักก่อนว่าไอ้ตัวนี้เป็นตัวแปรที่ไว้สำหรับเก็บภาพ

00:41:53.860 --> 00:41:56.288
ใครที่มีรูปมาแล้ว

00:41:58.147 --> 00:42:04.209
เหมือนเดิมนะคะ เด็ก ๆ อย่าลืมเช็กอะไรคะ เช็กนามสกุลภาพตัวเองใช่ไหมคะ

00:42:04.209 --> 00:42:10.250
โหลดมาอยู่ไหน เดี๋ยวนะ ของแม่โหลดมาแล้ว

00:42:12.656 --> 00:42:16.150
จะเอารูปนี้นะคะ เดี๋ยวขอ Move ไปก่อน

00:42:17.189 --> 00:42:20.406
Move ไปที่ Drive C:

00:42:21.828 --> 00:42:24.352
ขอเปิด C:

00:42:24.844 --> 00:42:31.345
นึกออกนะ โฟลเดอร์ที่เราเขียนโปรแกรมอยู่ตรงไหน เห็นไหม เราเปิด 2 อันเลยนะ

00:42:31.947 --> 00:42:34.955
เดี๋ยวเราจะเอารูปนี่มาใส่

00:42:38.947 --> 00:42:46.934
เหมือนเดิมนะคะ คลิกภาพที่เราจะใช้งานแล้ว แล้วคลิก ถ้าใครขึ้น

00:42:47.317 --> 00:42:54.521
ตำแหน่ง Type อย่างนี้ นี่คือนามสกุลไฟล์ที่เราจะพิมพ์ลงไป นึกออกนะ

00:42:56.872 --> 00:42:59.986
เด็ก ๆ  ดูตำแหน่งตรงนี้ให้ดี ๆ นะคะ

00:43:00.916 --> 00:43:05.825
ชื่อไฟล์แต่ละคนไม่เหมือนกัน นึกออกนะ รูป

00:43:07.356 --> 00:43:12.638
เอ้า หน้าไม่ออก เดี๋ยวนะ กดสิ้นสุดก่อน

00:43:16.739 --> 00:43:22.823
เดี๋ยวนะคะสไลด์อาจารย์มันไม่ขึ้น จอมันมืดเลย คืออะไรนี่

00:43:36.495 --> 00:43:43.632
ทำไมเป็นจอดำ [เสียงหัวเราะ] อยู่ ๆ จอเราก็ดำมิดหมีเลย

00:43:44.671 --> 00:43:46.230
ได้แล้วนะคะ

00:43:48.581 --> 00:43:58.958
นี่ ๆ ๆ ๆ โอเค เด็ก ๆ ดูตรงชื่อนะ ชื่อกับนามสกุล จะต้องเป็นชื่อ

00:43:58.958 --> 00:44:10.121
แล้วก็นามสกุลของไฟล์ตัวเองเข้าใจไหม เข้าใจไหมคะ เพราะฉะนั้นเราต้องดูในโฟลเดอร์เรานะ

00:44:11.130 --> 00:44:19.651
ไม่ใช่แม่พิมพ์ชื่อ colorcandy_bg ก็พิมพ์ชื่อนั้นตามแม่ ไม่ใช่ นึกออกนะคะ

00:44:19.651 --> 00:44:29.533
ชื่อไฟล์ ภาพของใครของมัน เข้าใจนะ มันจะเป็นชื่อของตัวใครตัวมันนะคะ ตัวใครตัว…

00:44:30.000 --> 00:44:36.458
ไม่ใช่ดูแต่ชื่อนะ ดูนามสกุลมันด้วย นึกออกนะ 2 อย่างนี้จะเป็นชื่อ

00:44:36.895 --> 00:44:43.285
ของเรา ของเรา ของเรา ของเรา ของเรานะ ไม่ใช่แม่พิมพ์ชื่อของแม่

00:44:43.285 --> 00:44:48.011
ตัวเองก็มาพิมพ์ชื่อแม่ตามไม่ใช่ ให้นึกถึงนะ โอเค

00:44:50.363 --> 00:44:56.943
ก่อนอื่นก็คือต้องเช็กก่อนว่านามสกุลไฟล์เรามันเป็นไฟล์อะไรด้วย ทีนี้บาส

00:44:57.818 --> 00:45:03.934
บาสยังไม่ได้โหลดไหม โหลดหรือยังถามเธอสิ โหลดรูป background มาหรือยัง

00:45:04.426 --> 00:45:09.619
โอเค อย่างนั้นเริ่มได้ ตัวแปรแรกนะคะ

00:45:15.306 --> 00:45:23.486
เปิด Sublime เรา เราก็จะมาที่ตำแหน่ง... ยังอยู่ในการกำหนดหน้าจอเกมอยู่ เห็นไหมคะ

00:45:23.869 --> 00:45:28.980
เราจะไปต่อจากบรรทัดที่ 10 Background Color เลยนะคะ

00:45:29.253 --> 00:45:37.733
เมื่อกี้มี background color แล้ว ทีนี้ก็เป็น bg เหมือนเดิม ตัวแปรตั้งเหมือนกันได้

00:45:39.702 --> 00:45:46.728
ไหงเป็นตัวใหญ่ bg แต่จะเป็น pic แทน เอ้ย

00:45:49.025 --> 00:45:52.599
ใช้ pic สั้นหน่อย image จะยาวไป

00:45:54.731 --> 00:45:57.893
แต่ทีนี้ เพื่อไม่ให้สับสนนะ

00:46:04.236 --> 00:46:13.039
ใช้ pic นี่ล่ะสั้น ๆ หน่อย เดี๋ยวจะเรามาสับสนกับ image อีก bgpic picture นั่นเองนะคะ คือ

00:46:13.476 --> 00:46:20.742
การตั้งชื่อตัวแปรนี่ ถ้ายาวมาก ๆ ตัวเองนี่จะจำไม่ได้ เพราะฉะนั้น อย่าพยายามตั้งยาวมาก

00:46:21.125 --> 00:46:28.020
เหมือนเดิมนะคะ พอประกาศตัวแปรต้องตามด้วยการกำหนดค่าให้มันก็คือเท่ากับ

00:46:34.637 --> 00:46:41.454
เท่ากับแล้วตามด้วยอะไร คำสั่ง pygame.image.load เหมือนเดิมนะคะ

00:46:41.454 --> 00:46:46.424
เพราะเราจะต้องเรียกภาพนั้นมาใช้ ใช้เหมือน icon เลย

00:46:46.424 --> 00:46:53.161
แต่ตัวแปรเป็นคนละตัว ต้องจำไว้ว่ามันต้องสร้างตัวแปรคนละตัวเพราะว่า

00:46:53.161 --> 00:46:58.237
icon ก็เป็นของ icon นะ อันนี้เป็น background ก็คนละตัวเห็นไหมคะ

00:46:59.112 --> 00:47:00.470
นะคะ

00:47:01.509 --> 00:47:12.297
pygame ค่ะ พิมพ์ p พอขึ้น pygame กด pygame.i

00:47:13.391 --> 00:47:19.846
เลือก image เห็นไหมคะ ให้เลื่อนลงมาที่ image กด Enter

00:47:19.846 --> 00:47:26.841
เด็ก ๆ ยังไม่ต้องพิมพ์นะคะ เพราะถ้าพิมพ์แล้วจะผิดใช่ไหม สอนแล้วนะ เหมือนเดิม load

00:47:26.841 --> 00:47:31.684
เห็นไหมคะ เลื่อนลงมาเลือก load ใส่วงเล็บ

00:47:32.887 --> 00:47:38.227
ในวงเล็บอย่าลืมใส่เครื่องหมายคำพูดเพราะมันเป็นชื่อนะคะ

00:47:39.758 --> 00:47:48.892
ชื่อตัวนี้มาจากไหน ให้ไปดูที่โฟลเดอร์ที่เราเก็บไฟล์ Background เราไว้ใช่ไหมเด็ก ๆ

00:47:50.533 --> 00:47:59.611
16552 เดี๋ยวขอเปลี่ยนชื่อก่อนนะ บอกแล้วบางทีเด็ก ๆ ไป Save มาแล้วชื่อมันยาวนะ

00:48:00.000 --> 00:48:03.038
แล้วพอเวลาเราจะมาเรียกใช้น่ะ

00:48:03.038 --> 00:48:08.312
ถ้าชื่อมันยาว ของใครที่ไป Save มาแล้วชื่อมันยาว วิธีแก้เรา Rename นะลูกนะ

00:48:10.718 --> 00:48:17.766
Windows 11 นี่มีความงง ๆ มึน ๆ อึน ๆ จะ Rename

00:48:19.844 --> 00:48:25.477
ไม่เปิดสิ เราจะ Rename น่ะ เราจะเปลี่ยนชื่อเธอ

00:48:27.938 --> 00:48:30.734
อยู่ไหนนะ คำสั่ง Rename เธอนี่

00:48:34.398 --> 00:48:36.779
คือบ่ให้ Rename

00:48:54.825 --> 00:49:02.687
ถ้าใครไม่รู้ ไม่รู้เหมือนกันแฮะ Windows 11 ทำไม Rename ไม่ได้

00:49:08.046 --> 00:49:13.881
Properties Open in Terminal Show more options

00:49:30.000 --> 00:49:31.611
ไม่เห็นขึ้นเลย

00:49:33.182 --> 00:49:37.695
ถ้า Rename ไม่ได้นะคะ ดูนะคะ เปิดตัวโปรแกรม Paint

00:49:38.570 --> 00:49:40.642
Open with Paint ปุ๊บ

00:49:46.986 --> 00:49:50.280
เอ๊ะ ทำไมรูป... รูปเรามันเป็นอย่างนี้ล่ะ

00:49:55.038 --> 00:50:00.954
ก็ File Save as... นะคะ Save as... แล้วก็เปลี่ยนชื่อให้เขาแค่นั้นแหละค่ะ

00:50:03.360 --> 00:50:09.161
จะได้เต็มหน้าจอไหมนี่ เอาไปก่อนแล้วกัน เพื่อมันให้เป็นการเสียเวลานะคะ

00:50:11.786 --> 00:50:18.111
16552 น่าจะได้นะ

00:50:20.408 --> 00:50:23.390
จำเอาเองแล้วกัน ชื่อใครเป็นชื่อใคร

00:50:29.077 --> 00:50:42.907
16552.jpg g นะคะ g อันนี้คือชื่อภาพ Background ในเครื่องของแม่นะคะ

00:50:42.907 --> 00:50:48.364
ภาพ Background ของแม่ ของเด็ก ๆ ชื่อตัวนี้ก็เปลี่ยนไปตามของตัวเองนะคะ

00:50:48.364 --> 00:50:52.460
นามสกุลก็เหมือนกัน อย่าลืมดูกว่านามสกุลตัวเองเป็นอะไร

00:50:52.460 --> 00:50:58.849
บางคนอาจจะเป็น png ก็ได้ บางคนอาจจะเป็น jpg ก็ได้ ก็แล้วแต่นะคะ

00:51:00.326 --> 00:51:01.462
โอเคไหม

00:51:02.447 --> 00:51:10.446
นี่ก็คือเราสั่งให้สร้างตัวแปร background pic เพื่อไปดาวน์โหลดภาพ

00:51:11.376 --> 00:51:15.538
Background ของเราขึ้นมานะคะ มาใช้งาน

00:51:23.194 --> 00:51:34.401
จากนั้นเราจะต้องทำอะไร เราจะต้องเรียกตัวแปรนั้นน่ะ มานะคะ แล้ว

00:51:37.901 --> 00:51:42.836
แล้วก็วาง จะวางมันไว้ตำแหน่งไหน ไม่ยากเลย

00:51:42.836 --> 00:51:50.608
ตำแหน่งของรูปนะคะ ก็คือตำแหน่งที่ 0,0 ก็คือเริ่มจากมุม x0 y0

00:51:50.608 --> 00:51:54.753
ก็คือให้มันวางให้เต็มฉากเรานั่นเองนะคะ

00:51:57.815 --> 00:52:01.008
คำสั่งที่จะใช้อยู่ที่...

00:52:02.102 --> 00:52:07.282
ตัวนี้พิมพ์เสร็จหรือยัง Code บรรทัดที่ 11

00:52:09.579 --> 00:52:13.367
ถ้าพิมพ์เสร็จแล้วนะคะ เราจะต้องมาที่

00:52:15.390 --> 00:52:20.676
บรรทัดที่ 21 เห็นไหม ต่อจาก screen.fill

00:52:27.184 --> 00:52:36.002
นะคะ เด็ก ๆ จะต้องมาอยู่ตำแหน่งบรรทัดใน loop นี่ เพราะเราจะไปเลือกใช้ Background เหมือนเรียกใช้

00:52:36.549 --> 00:52:41.346
Background Colors เลย Background Pictures เหมือน Background เลยนะคะ

00:52:41.620 --> 00:52:48.219
เรียกเหมือนกัน ตำแหน่งก็อยู่ถัดจากบรรทัดนั้นมา

00:52:51.227 --> 00:52:58.595
คำสั่งของตัวนี้คือ blit b-l-i-t นี่นะคะ

00:53:04.939 --> 00:53:12.840
เราเรียกตัวแปรฉากก่อน ก็คือ screen พิมพ์ s แล้วเลือก screen ตามด้วยเครื่องหมาย .

00:53:12.840 --> 00:53:17.448
b-l-i-t

00:53:20.018 --> 00:53:26.664
แล้วก็วงเล็บนะคะ blit blit อะไร ชื่อตัวนี้นะคะ bg

00:53:28.359 --> 00:53:36.718
bg แต่ให้เลือกเป็นอะไรคะ bgpic เพราะ bgcolors ก็คือ สีพื้นใช่ไหมคะ

00:53:36.718 --> 00:53:40.224
bgpic ก็คือ Background ที่เป็นรูป

00:53:41.318 --> 00:53:52.190
กด เอ้ย ยังไม่กด ใส่อะไรเข้าได้วย ระบุ ระบุตำแหน่งเห็นไหมคะ ใส่เครื่องหมาย

00:53:58.698 --> 00:54:08.866
, ลูกน้ำนี่นะคะ แล้วก็วงเล็บเปิดวงเล็บปิดอีก 1 ครั้งนะคะ ดูวิธีพิมพ์นะคะ

00:54:08.866 --> 00:54:12.588
ใส่ , 1 ครั้ง แล้วก็ใส่วงเล็บ

00:54:13.627 --> 00:54:26.047
ตำแหน่งก็คือ (0,0) แบบนี้นะคะ ใครพิมพ์บรรทัดนี้เสร็จ กด Ctrl + B ดูได้เลย

00:54:28.945 --> 00:54:35.596
โอ้โห นี่นะ ทีนี้เด็ก ๆ จะเห็นว่า สัดส่วนรูปกับ

00:54:37.073 --> 00:54:41.267
กับฉากเรามันไม่ Balance กันเห็นไหม

00:54:41.814 --> 00:54:53.048
มันมีวิธีทำอยู่ 2 แบบ ก็คือเรามาแก้ที่ตำแหน่งฉากเรา 800 x 600 นี่ เพิ่มไป

00:54:53.048 --> 00:54:55.920
1800

00:54:59.146 --> 00:55:01.726
แล้ว Ctrl + B ดู

00:55:03.312 --> 00:55:07.454
ใหญ่เกิน 1800 เห็นไหม ให้นึกถึงนะ

00:55:10.571 --> 00:55:12.443
เหมือนจะใหญ่บึ้ม

00:55:15.000 --> 00:55:26.701
800 ใหญ่ไป 1000 ได้ไหม 1600 ก็ใหญ่ไป 1200

00:55:33.208 --> 00:55:40.943
กว้าง ใส่ความกว้างผิด ชีวิตเปลี่ยน กว้าง x ยาว

00:55:41.763 --> 00:55:45.291
Width Height กว้าง x สูง

00:55:46.603 --> 00:55:48.365
1000

00:55:50.115 --> 00:55:57.598
อันนี้ 600 นะ โอเคแล้วมั้ง 800 นะ เอาใหม่นะ แก้ไปเรื่อย ๆ

00:56:03.996 --> 00:56:09.743
1000 x 1200

00:56:17.508 --> 00:56:22.744
บางทีเหมือน Background เรามันใหญ่ด้วย ในกรณีนี้ เดี๋ยว

00:56:23.400 --> 00:56:30.348
ขอไปเปลี่ยนรูป Background ตัวเองก่อนนะ มันบิ๊กบึ้มเกินไป

00:56:52.953 --> 00:57:02.436
แป๊บหนึ่งนะคะเด็ก ๆ ขอเปลี่ยนรูปก่อน Pictures Pictures ขอลอง ๆ ๆ

00:58:51.070 --> 00:58:59.091
โอเค เราจะเปลี่ยนชื่อตัวนี้เป็น bg1 นะ เปลี่ยนรูป

00:59:08.716 --> 00:59:16.941
ดูท่าภาพจะใหญ่ โอเค จะเอาพื้นที่ไซซ์ขนาดนี้นะคะ

00:59:17.761 --> 00:59:24.835
แต่ปัญหา คือ ภาพ บางทีไฟล์ Background เรามันใหญ่เกิน สมมตินะคะ

00:59:32.381 --> 00:59:38.721
จะเอาประมาณนี้แหละ ทีนี้ ถ้าเปิดขึ้นมาแล้วไฟล์ต้นฉบับมันใหญ่มากนี่

00:59:38.721 --> 00:59:48.196
เรามีตัวแปรที่ชื่อ เอ้ย มีอีกคำสั่งหนึ่งนะคะ ไหนใครยังโหลดภาพตัวเองไม่ได้

00:59:49.399 --> 00:59:50.457
ยกมือ

01:06:51.566 --> 01:07:00.879
ทุกคนโหลดมาแล้วนะคะ แต่ปรากฏว่าบางคนรูปตัวเองเล็กกว่าฉาก ไอ้รูปเล็กกว่าฉากนี่

01:07:00.879 --> 01:07:08.561
ไปปรับขนาดฉากได้ นึกออกนะ ถ้าของใครรูปมันเล็กกว่าฉาก เรามาปรับตรงนี้

01:07:08.834 --> 01:07:14.519
แต่ถ้าของใครเป็นเหมือนตัวอย่างของอาจารย์แม่ ก็คือ เห็นไหม

01:07:15.000 --> 01:07:21.868
ตัวรูปข้างหลังน่ะ มันใหญ่กว่าฉากอีก เพิ่มขนาดฉากแล้วยังไม่เห็นรูป นึกออกนะ

01:07:22.251 --> 01:07:26.156
เราจะมีคำสั่งสำหรับแปลงรูป

01:07:26.867 --> 01:07:35.107
ที่เราโหลดมาแล้วมันเล็กหรือมันใหญ่เกินไปนะคะ นั่นก็คือคำสั่งนี้เลย

01:07:38.333 --> 01:07:47.387
เปลี่ยนขนาดเห็นไหมคะ การเปลี่ยนขนาดภาพ คำสั่งนี้ชื่อว่า transform.scale เห็นไหม

01:07:52.732 --> 01:07:58.457
แต่เราจะต้องกำหนดชื่อตัวแปร ให้มันเป็นอีกตัวหนึ่งก่อนนะคะ

01:07:59.551 --> 01:08:03.950
แล้วก็กำหนดความสูง ความกว้างด้วยตัวเราเอง ดูจากอันไหน

01:08:04.278 --> 01:08:09.929
เราทำให้มันเท่าตัวนี้ ก็คือเราก็มาดู ดูจากตำแหน่งของ…

01:08:10.695 --> 01:08:20.463
ของตัวนี้เรา เห็นไหมคะ มันก็จะพอดีกับขนาดของฉากเรานะคะ ก่อนอื่นนะคะ

01:08:21.830 --> 01:08:28.473
ก่อนที่เราจะใช้ transform นะคะ ก็คือเราใช้คำสั่งเพื่อสร้าง

01:08:43.676 --> 01:08:51.214
เด็ก ๆ ขยันใช้ตัวย่ออยู่แล้วนะ bgtransform แล้วกัน bgtrans นะคะ

01:08:57.944 --> 01:09:06.398
bgtrans นี่ก็คือ Background ที่เราจะทำการเปลี่ยนขนาด ตามด้วยเหมือนเดิม = นะคะ

01:09:06.398 --> 01:09:14.641
ประกาศตัวแปรเสร็จแล้ว ตั้งกำหนดค่าให้ตัวแปรนะคะ คำสั่งแรกก็คือ pygame

01:09:16.336 --> 01:09:23.749
บอกแล้วว่าเราใช้ Sublime เราจะไม่พิมพ์ p-y-g-a-m-e เราพิมพ์แค่ p แล้ว

01:09:23.749 --> 01:09:27.292
ถ้าเห็นคำว่า pygame กด Enter ได้เลย

01:09:28.167 --> 01:09:35.071
เพราะอย่างนี้มันจะทำให้เด็ก ๆ พิมพ์คำสั่งไม่ผิดนะคะ ตามด้วย .

01:09:35.618 --> 01:09:37.245
เอ้ย เครื่องหมาย .

01:09:39.651 --> 01:09:41.656
เห็นไหมน่ะ เห็นไหม

01:09:43.297 --> 01:09:44.699
เดี๋ยวนะ

01:09:46.558 --> 01:09:52.111
อายุเยอะแล้ว Memory ไม่ดีนะคะ ไม่จำโค้ดทำอะไรใด ๆ ทั้งสิ้นนะคะเด็ก ๆ

01:09:52.439 --> 01:09:56.502
transform.scale โอเค ขอทวนอีกรอบหนึ่งนะ

01:09:59.291 --> 01:10:11.018
transform t-r-a-n… t-r-a-n-s s s s

01:10:12.330 --> 01:10:23.745
f-o-r-m transform.scale s-c-a-l-e แล้วก็ใส่วงเล็บ

01:10:39.605 --> 01:10:46.179
โอเคไหมคะ ในวงเล็บใส่อะไร มาดูกัน ในวงเล็บสิ่งที่เราจะต้องใส่ก็คือ

01:10:47.218 --> 01:10:50.586
ชื่อตัวแปรรูปของเรา

01:10:50.586 --> 01:10:56.454
ก็คือไอ้ชื่อข้างบนนะ แล้วก็ความกว้างความสูงนี่ความกว้างความสูงก็คือเท่ากับ

01:10:57.821 --> 01:11:05.722
เท่ากับตำแหน่ง screen.blit นี่ ที่เราสร้างก็คือตัวนี้เท่ากับอันนี้นะครับ ความกว้างความสูงนี่

01:11:07.800 --> 01:11:18.548
scale ก็คือ bgpic ครับ ก็คือต้องเอาตัวนี้ เพราะเราจะไปแปลงภาพนี้นะคะ scale

01:11:19.368 --> 01:11:23.494
เราจะแปลงตัวแปรนี้นะ ชื่อนี้นะคะ

01:11:23.494 --> 01:11:30.883
เพราะฉะนั้นตำแหน่งของเด็ก ๆ ก็คือดูของตัวเองนะ ใช้ชื่อเดียวกัน ก็ bg เลือก

01:11:31.594 --> 01:11:33.293
pic

01:11:35.426 --> 01:11:45.448
เสร็จแล้วตามด้วยอะไร เครื่องหมาย , แล้วก็วงเล็บเหมือนเดิมนะคะ ในวงเล็บ

01:11:46.378 --> 01:11:54.726
นี่เลย ไซซ์นี้เลยครับ ก๊อบมาเลย อย่าได้ช้า มันจะได้ไซซ์เท่ากันเด๊ะ

01:12:00.577 --> 01:12:02.558
กด Ctrl + B

01:12:12.457 --> 01:12:15.000
Scale แล้วน้องยังไม่หดให้อีกน่ะ

01:12:15.875 --> 01:12:17.349
แหม ๆ ๆ

01:12:19.700 --> 01:12:24.740
ใหญ่จริง ไม่เป็นอะไร ปล่อยไปก่อนนะครับ เดี๋ยวค่อยไปหารูปที่มันเหมาะสมนะ

01:12:37.983 --> 01:12:44.946
ไม่ เราลดลงครึ่งหนึ่ง ลองดูนะคะ ถ้ามันเต็มพอดีแล้วมันยังใหญ่เกิน เราก็

01:12:46.477 --> 01:12:52.876
แก้ตัวเลขสิครับรออะไร หาร 2 เข้าไปเด็ก ๆ ให้นึกถึงหลักการเวลาจะลดขนาด

01:12:54.298 --> 01:12:57.101
1500 หาร 2 เหลือเท่าไร

01:12:59.070 --> 01:13:08.944
ลดลงครึ่งหนึ่งดูก่อน เพราะอะไร เพราะจากตัวนี้เรา ขนาดมัน 1500 กับ 800 ใช่ไหม ตัว...

01:13:09.764 --> 01:13:15.544
ตัวฉากเต็มเรามันคือ 1500 เราจะลดขนาดภาพให้เล็กกว่าฉาก

01:13:15.544 --> 01:13:18.971
เพราะฉะนั้นจาก 1500 ลดลงครึ่งหนึ่ง

01:13:20.119 --> 01:13:26.960
ใครหัวไวคิดหน่อยสิ 1500 หาร 2 เหลือ 750

01:13:28.655 --> 01:13:35.276
800 ก็จะเหลือ 400 ลดครึ่งหนึ่งเลย Scale ลงไป ลดครึ่ง Ctrl + B ใหม่

01:13:37.026 --> 01:13:40.269
ยังใหญ่อยู่เลยนะ ลดอีก

01:13:45.000 --> 01:13:47.117
1 2 3 4 5

01:13:55.225 --> 01:13:58.761
ลดอีกครึ่งหนึ่ง 200

01:14:02.042 --> 01:14:03.628
750

01:14:05.323 --> 01:14:15.046
325 อ้าว ครึ่ง 2 รอบแล้วนะ Ctrl + B

01:14:16.851 --> 01:14:24.701
แหม แสดงว่ารูปนี้ใหญ่จริง ก็จะปล่อยไปก่อนนะคะ ถ้าอย่างนี้แก้ไป 3 ครั้งแล้ว

01:14:24.701 --> 01:14:31.011
ไซซ์ยังไม่ได้แล้วก็นั่นหมายความว่า ภาพ Background เรานะลูก เดี๋ยวนะ

01:14:36.288 --> 01:14:40.318
นั่นแปลว่า Ctrl + B

01:14:41.302 --> 01:14:50.094
นั่นแสดงว่าภาพ Background เรามีขนาดใหญ่มาก ดูนะ เพื่อตรวจสอบว่ามันใหญ่ขนาดไหน ดู

01:14:50.805 --> 01:14:58.848
เห็นหรือเปล่า นะคะ เราก็ค่อยไปหาภาพอื่นมาแทนนะ ตอนนี้ใช้ไปก่อน

01:14:58.848 --> 01:15:10.516
ถ้าของใครยังแก้ไม่ได้ ก็คือเราต้องไปเลือกรูปแล้วดูขนาดด้วยนะลูกนะ นั่นคือหลักการนะคะ

01:15:10.789 --> 01:15:20.282
เพราะฉะนั้น คำสั่งนี้อย่างน้อยเราได้รูปมาแล้ว แน่นอนแล้วนะคะ ต่อมา ๆ ที่เราจะทำต่อมา

01:15:21.759 --> 01:15:27.280
ไปไหนแล้ว บรรทัดสุดท้ายแล้ว โอเค ของสไลด์นี้

01:15:28.155 --> 01:15:29.944
สไลด์ใหม่อยู่ไหนครับ

01:15:31.475 --> 01:15:32.710
ไหนล่ะ

01:15:37.522 --> 01:15:44.493
ปึ๊บ ๆ ๆ ๆ ๆ อันนี้โหลดไปแล้ว เรียกใช้ Background เรียกแล้ว

01:15:50.783 --> 01:15:57.358
ตัวนี้มันจะยากขึ้นมาอีก เดี๋ยวเราจะพอแค่นี้ก่อนนะครับ เพราะคำสั่งนี้

01:15:57.358 --> 01:16:01.269
มันจะเป็นการที่จะทำให้ตัวฉาก

01:16:02.363 --> 01:16:10.382
คือให้นึกถึงตัว... ถ้าตัวเกมเรามันวิ่งไปน่ะ ฉากมันอยู่กับที่

01:16:10.382 --> 01:16:16.960
แต่ความจริงแล้วมันไม่ใช่ นึกออกนะ เราต้องทำให้ฉากมันเหมือนฉากมันเคลื่อนน่ะค่ะ

01:16:17.288 --> 01:16:20.246
มันจะเป็นคำสั่งพวกนี้นะคะ

01:16:23.800 --> 01:16:30.493
เดี๋ยวเรามาเรียนต่อในสัปดาห์หน้า ทีนี้เมื้อกี้ใครไม่ทัน

01:16:31.204 --> 01:16:36.716
ใครยังเอารูปใส่ไม่ได้ ทีนี้เมื่อรูปมันใหญ่ บอกแล้วนะ

01:16:36.716 --> 01:16:45.000
เมื่อกี้ลอง Transform แล้วก็ยังใหญ่อยู่แล้วก็ ง่ายสุดเราไปหา Search รูปใหม่นะลูก

01:16:45.930 --> 01:16:47.702
หา Search ภาพใหม่

01:16:51.749 --> 01:17:00.001
เหมือนเดิม free นะคะ อย่าลืมต้องเลือกที่มันเป็น free download เสมอนะครับ เด็ก ๆ

01:17:01.040 --> 01:17:04.638
มันจะได้ไม่มีปัญหาติดนั่นนี่โน่น

01:17:07.372 --> 01:17:10.506
ยังหา jungle ไม่ได้เลย

01:17:13.076 --> 01:17:19.313
ไม่อย่างนั้นต้องไปลดขนาดไซซ์รูปภาพเรา ความจริงอยากได้รูปนี้นะ

01:17:21.282 --> 01:17:25.006
คือตัวเดียวกันหรือเปล่า เข้าชม

01:17:31.951 --> 01:17:33.211
ไปไหนแล้ว

01:17:47.038 --> 01:17:52.968
โอ้โห เมื่อกี้ สังเกตง่าย ๆ ไฟล์มันใหญ่นี่ ดู

01:17:53.405 --> 01:17:58.041
มันเป็นไฟล์ Zip เลย เห็นไหม ถ้าเวลาโหลดมาแล้วไฟล์มันใหญ่มากน่ะ

01:17:59.682 --> 01:18:05.685
อย่างนี้แสดงว่าภาพออกมา Background ใหญ่ ใหญ่บึ้มเลยนะครับ

01:18:05.685 --> 01:18:09.990
เราก็ต้องเปลี่ยนนะครับ เราต้องไปหาไซซ์เล็ก ๆ ไม่อย่างนั้นก็คือ

01:18:10.646 --> 01:18:17.310
ใช้โปรแกรมแล้วช่วยในการเขาเรียกว่าอะไรล่ะ ลดขนาด

01:18:19.060 --> 01:18:27.737
เวอร์ชันนี้ Windows นี้พอใช้ Paint แล้วมันไม่ใช่น่ะ มันไม่ใช่ มันไม่ได้อย่างที่เราต้องการ

01:18:27.737 --> 01:18:31.442
ดูนะ เดี๋ยวแม่จะลองทำให้ดูนะ

01:18:32.426 --> 01:18:33.690
Open

01:18:35.057 --> 01:18:44.321
นี่ ๆ ดูรูปนี้นะคะ ต้นฉบับ อย่างบึ้มเลยนี่ เลือก Select All แล้วนะ

01:18:45.578 --> 01:18:47.280
แล้วก็เลือก

01:18:53.186 --> 01:18:54.783
Image

01:18:55.166 --> 01:19:02.504
Resize ดูนะครับ เลือก Resize จะลด จะลดเปอร์เซ็นต์มันเหลือครึ่งหนึ่ง 50

01:19:07.207 --> 01:19:10.017
ยังใหญ่อยู่เลยเห็นไหม ลดอีก

01:19:11.384 --> 01:19:13.340
Image Resize อีก

01:19:13.613 --> 01:19:15.785
เอ้ย Select All ก่อน

01:19:18.683 --> 01:19:23.676
ก็คือใช้ตัวโปรแกรมนั่นล่ะนะครับ ช่วยในการลดขนาด

01:19:26.738 --> 01:19:30.483
คลิก OK ได้หรือยัง

01:19:32.069 --> 01:19:35.582
ยัง เห็นไหม ยังล้นไอ้นี่อยู่เลย ลดอีก

01:19:39.246 --> 01:19:43.052
3 3 แล้วนะ 50

01:19:48.740 --> 01:19:54.580
เห็นไหม แต่ทีนี้เวลา save นะลูก ให้ไฟล์ save as..

01:19:55.564 --> 01:19:58.017
เป็น png นะครับ

01:19:58.673 --> 01:20:00.367
save เป็นอีกชื่อหนึ่ง

01:20:02.172 --> 01:20:10.031
ขอใหม่ Bg2 เดี๋ยวลองให้ดูกันเห็น ๆ

01:20:11.890 --> 01:20:18.852
เดี๋ยวเราจะแก้เอาเมื่อกี้ไป Transform ข้างนอก เพราะฉะนั้นคำสั่งนี้เมื่อกี้ไม่ใช้แล้วนะครับ

01:20:19.234 --> 01:20:27.031
ลบออก คำสั่งนี้ก็ไม่มีความจำเป็น ถ้าไม่ลบออก วิธีการก็คือใส่ # เข้าไปลูก

01:20:29.328 --> 01:20:31.814
bg2 นะคะที่เรียก

01:20:32.908 --> 01:20:41.724
นามสกุลก็ png ด้วย เมื่อกี้เปลี่ยนทั้งชื่อทั้งนามสกุลให้มันเลย ขอลองใหม่ Ctrl + B

01:20:44.075 --> 01:20:49.134
เห็นหรือยัง เห็นหรือยัง เห็นหรือยัง เห็นไหม นี่คือ 1. ถ้าปรับในตัว

01:20:49.735 --> 01:20:55.346
Code ของโปรแกรมเราไม่ได้ เราไปใช้โปรแกรม paint ช่วยนะ

01:20:55.948 --> 01:21:01.693
ลดเสีย จิ๋วหลิวลงไปเลย เดี๋ยวไปเพิ่มอีกนิดหนึ่งไม่เป็นไรนะครับ

01:21:01.693 --> 01:21:05.343
ก็อย่างนี้ล่ะ เพราะไปเอาของเขามาไม่ได้สร้างเอง

01:21:05.343 --> 01:21:11.750
มันก็จะได้ขนาดที่เราไม่รู้ขนาดที่แท้จริงเท่าไรนะครับ เราก็ต้องมาปรับเอาอย่างนี้นะเด็ก ๆ นะ

01:21:12.461 --> 01:21:13.485
วิธีการ

01:21:19.610 --> 01:21:22.058
ถ้าอย่างนั้นให้มันเท่าไซซ์เรา

01:21:22.605 --> 01:21:28.359
เท่าไรนะ 1500,800 ดูสิจะเท่าพอดีไหม 1500

01:21:30.984 --> 01:21:40.764
กับ 800 ปรับให้เท่าไซซ์หน้าจอว่าอย่างนั้นเถอะ Ctrl + B สิครับ รออะไร

01:21:54.217 --> 01:21:56.650
1500 อย่างเดิมนะ

01:22:01.791 --> 01:22:09.066
โอเคนะครับ มีวิธีแก้อยู่ 2 วิธีอย่างนี้ล่ะ แล้วแต่จะเลือก

01:22:15.246 --> 01:22:20.863
pixel วิธีการก็คือ ไหนล่ะ paint เรา

01:22:21.847 --> 01:22:23.489
File

01:22:28.481 --> 01:22:29.957
Select All

01:22:31.269 --> 01:22:35.304
Resize เดี๋ยวเปลี่ยนเป็น pixel นะ

01:22:35.304 --> 01:22:36.958
1500

01:22:39.036 --> 01:22:40.102
800

01:22:42.508 --> 01:22:43.769
โอเค

01:22:45.792 --> 01:22:47.357
เลข 8

01:22:49.763 --> 01:22:53.768
ย้อนคืนก่อนนะ ขอลองไซซ์นี้ละกัน

01:22:54.971 --> 01:22:56.415
Save ก่อน

01:23:01.282 --> 01:23:03.206
Ctrl + B ใหม่นะคะ

01:23:06.323 --> 01:23:10.317
นะนี่ เห็นไหม ได้เต็ม ๆ แล้วนะ

01:23:10.317 --> 01:23:13.532
นี่ อาจจะใหญ่ไปนิด ค่อยไปปรับนะคะเด็ก ๆ

01:23:13.532 --> 01:23:18.407
ใช้โปรแกรม Paint ปรับเอานะคะ ค่อยไปปรับขนาดเอา

01:23:19.446 --> 01:23:26.482
ก็ลองปรับ แล้วถ้ามันยังไม่สมดุลก็ปรับใหม่ว่าอย่างนั้นเถอะนะคะนี่

01:23:26.810 --> 01:23:35.317
จากต้นฉบับไฟล์ใหญ่มาก โอเคนะ แล้วเดี๋ยวสัปดาห์หน้า ใครที่...

01:23:35.754 --> 01:23:39.570
ให้ดูตัวนี้นะคะ เช็กที่ตัวไฟล์ที่ชื่อว่า

01:23:42.086 --> 01:23:51.635
ที่บอกว่าเราจะต้องไปหาไฟล์ภาพที่มันมีตัวการ์ตูนเราใช่ไหม ที่มันจะต้อง... เดี๋ยวนะ

01:23:51.908 --> 01:23:59.890
สีไม่ใช้แล้ว ที่มันมีลักษณะเหมือนเคลื่อนไหวน่ะ ที่เราต้องการน่ะนึกออกนะ อย่างนี้นะคะ

01:24:00.382 --> 01:24:08.356
ก็คือให้มันมีภาพการ… ของตัวละครเรามันเคลื่อนไหวได้ อย่าลืมเลือก free นะคะ

01:24:08.793 --> 01:24:14.387
ถ้าได้มาแล้ว ไฟล์มันจะต้องเป็น... เดี๋ยวนะเหมือนที่เคย...

01:24:20.184 --> 01:24:22.158
เลือกคำว่า "free"

01:24:23.853 --> 01:24:34.955
พิมพ์ไหม ไม่ใช่เลือก free download d-o-w-n-l-o-a-d sprite

01:24:38.892 --> 01:24:40.547
sheet

01:24:47.930 --> 01:24:50.069
เช่น ๆ ๆ

01:24:54.055 --> 01:24:56.929
สมมติตัวอย่าง ตัวอย่าง หาตัวอย่างก่อน

01:24:58.187 --> 01:25:03.988
เราอยากได้แบบเจาะจงตัวละครเลย เราก็ใส่ชื่อมันตามหลังด้วยเครื่องหมายบวก

01:25:03.988 --> 01:25:07.598
แล้วก็ชื่อตัวเกมเรานั้นนะคะ

01:25:07.598 --> 01:25:12.451
เช่น ใครอยากได้กระต่ายก็ Rabbit ใครอยากได้เสือก็ Tiger อย่างนี้นะคะ

01:25:17.318 --> 01:25:22.845
ขอเป็น Free Pic Free Pic จะให้อย่างไรยังไม่รู้ ขอเข้าไปดูก่อน

01:25:26.400 --> 01:25:28.708
คือ Outsite แล้วหรือเปล่านี่

01:25:44.348 --> 01:25:52.445
นะครับ เปิดด้วย ๆ แหม ๆ ๆ ไม่ให้เปิดอีกแล้ว

01:25:59.171 --> 01:26:00.810
Download

01:26:03.708 --> 01:26:07.992
Open with ขอเปิดด้วย Paint แล้วกัน

01:26:08.375 --> 01:26:15.707
นี่บางทีมันได้เป็นภาพใหญ่ ๆ คือบางอันนะคะ sprite sheet บางตัวมันจะแยก

01:26:15.707 --> 01:26:18.925
แยกไฟล์มาให้ อันนี้ไม่แยก

01:26:19.417 --> 01:26:27.591
เดี๋ยวหาให้ดูตัวอย่างอีกอันหนึ่งนะ ที่มันจะแยกไฟล์มาให้ เช่น ๆ ๆ

01:26:28.575 --> 01:26:30.058
อยู่ไหนนะ

01:27:00.442 --> 01:27:01.991
สูงสุด

01:27:08.390 --> 01:27:11.556
เขาบอกว่าฟรีนะ เดี๋ยวจะลองดูนะ

01:27:30.969 --> 01:27:34.002
อ้าว ไม่ให้น่ะ...

01:27:36.080 --> 01:27:37.884
ไหนบอกว่าฟรีล่ะ

01:27:59.114 --> 01:28:01.318
หาไม่เจอ

01:28:42.055 --> 01:28:48.587
นี่ดูเหมือน Cat กับ Dog อันนี้นะคะ เดี๋ยวมันให้เป็นไฟล์ Zip มา เดี๋ยวจะลองเปิดให้ดู

01:28:49.024 --> 01:28:52.932
คือ... ถ้า ๆ ๆ ๆ

01:29:02.010 --> 01:29:05.427
เอาไปไว้ที่ Pictures ก่อน

01:29:28.853 --> 01:29:35.804
นี่ อย่างของอันนี้ นี่มันจะมีภาพแยกมาให้อย่างนี้นี่ค่ะ

01:29:36.241 --> 01:29:40.212
เราจะต้องได้ลักษณะของตัวเกมแบบนี้นะเด็ก ๆ

01:29:44.095 --> 01:29:46.973
เหมือนจะเอา Walk นี่ ก็จะเอา Walk ที่ 1

01:29:53.809 --> 01:30:01.919
แบบนี้ ถ้าใครที่ได้มาแล้วเป็นแผงเหมือนตอนแรก เมื่อกี้เอาไปไว้ไหนแล้ว

01:30:03.669 --> 01:30:07.357
ดาวน์โหลดใช่ไหม นี่เหมือนอย่างนี้

01:30:09.216 --> 01:30:19.427
ดูนะครับ Open with Paint ถ้าใครที่ได้มาแล้วเป็น 1 แผ่น แล้วมีหลายตัว

01:30:19.427 --> 01:30:26.514
เด็ก ๆ จะต้อง.. นึกออกนะ ตัดทีละตัวน่ะค่ะ ให้ได้รูป เข้าใจไหม

01:30:26.514 --> 01:30:32.478
ให้ได้รูปที่มันมีครบการเคลื่อนไหวเหมือน... เหมือนโฟลเดอร์นี้เลย

01:30:40.299 --> 01:30:47.175
นี่มันควร... มันควรจะได้ภาพที่เป็นลักษณะนี้ที่มันแยกออกมาแล้วน่ะ นึกออกหรือเปล่า

01:30:47.175 --> 01:30:54.815
แต่ตอนนี้ภาพมันรวมอย่างนี้ ถ้าใครไปโหลดแล้วมันได้ภาพที่มันเป็นทั้งหมดอย่างนี้มาน่ะ

01:30:55.471 --> 01:31:00.897
เราก็ต้องมาใช้ Paint ของเราอย่างนี้นะ Select ปึ๊บนี่

01:31:06.584 --> 01:31:10.149
แล้วก็ Resize ให้มันเท่ากันนะ

01:31:18.188 --> 01:31:26.007
นี่ให้เราดูตำแหน่งที่เราจะทำนี่ ให้ Fix เป็น Pixel แล้วให้มันไซซ์เท่ากันน่ะ

01:31:26.554 --> 01:31:28.197
คลิก OK ปุ๊บ

01:31:29.289 --> 01:31:31.755
กด Crop นี่

01:31:36.294 --> 01:31:42.481
ดูนะคะ แล้วให้จำค่านี้ไว้ ว่านี่ ไซซ์ที่มันเท่ากันคือไซซ์นี้

01:31:44.614 --> 01:31:49.340
ก็คือเราจะต้องตัดให้ได้ขนาดนี้เท่า ๆ กันทุกภาพน่ะลูก เข้าใจไหม

01:31:49.340 --> 01:31:57.460
ไม่อยากนั้นให้นึกถึงว่า เหมือนเราทำตัวการ์ตูนเคลื่อนไหวปรากฏ เดี๋ยวทำไมเอ๊ะภาพมันเล็ก

01:31:57.897 --> 01:32:04.431
นึกออกไหม ตัวมันเล็กมันใหญ่ เพราะฉะนั้นเวลาตัดน่ะลูก ขนาดภาพมันจะต้องเท่ากันไง

01:32:04.431 --> 01:32:06.119
นึกออกนะคะ

01:32:19.652 --> 01:32:25.100
นี่ เพราะฉะนั้น 118 ก็ต้อง 118 เท่ากัน

01:32:28.491 --> 01:32:35.966
118 82 ก็ต้อง 118 82 เท่ากันทุกตัว นึกออกนะ กำหนดขนาดเท่ากันทุกตัวน่ะ

01:32:49.856 --> 01:32:55.824
อยากได้เสือวิ่ง เช่น ๆ ๆ ตัวนี้ size แรก กำหนดที่

01:33:16.887 --> 01:33:23.375
102.82 Horizontal Vertical

01:33:26.492 --> 01:33:29.974
102.82 โอเค

01:33:30.903 --> 01:33:41.866
Crop นะคะ แล้วก็ Save เป็น T1 อย่างนี้นะคะ แล้วก็ย้อนกลับคืนมา ตัวที่ 2 ก็ทำเหมือนกัน

01:33:43.124 --> 01:33:46.844
โอ๊ยอันนี้หางมันติดกันก็จะยากหน่อย

01:33:54.117 --> 01:33:58.939
102 กับ 82

01:34:02.985 --> 01:34:03.851
นะคะ

01:34:06.531 --> 01:34:10.890
นี่นะ โอเค

01:34:11.218 --> 01:34:20.782
ถ้าไม่อย่างนั้นก็คือนี่ล่ะ ใช้ให้เด็ก ๆ ไปที่ GameArt2D นี่ก็ได้ มันให้โหลด

01:34:20.782 --> 01:34:27.428
แต่ก็ไม่เยอะมันมี นี่ มันมีรูปตัวนี้ ๆ ๆ ๆ ตัวนี้ ๆ ๆ

01:34:29.451 --> 01:34:30.791
นะคะ

01:34:32.541 --> 01:34:39.862
หาดูอย่างนี้ Free Assets Free Sprite หาคำว่า Free Sprite อย่างนี้นะคะ

01:34:42.104 --> 01:34:46.773
เพราะไม่อย่างนั้น มันจะไม่ได้เดะ [เสียงหัวเราะ]

01:34:46.773 --> 01:34:50.786
มันจะไม่ได้ มันจะไม่ได้ ต้องหาคำว่า Free Sprite อย่างนี้

01:34:55.926 --> 01:35:01.580
เหมือนไม่รู้น้องเพนกวินนี่ จะให้เยอะเท่าไหน

01:35:03.385 --> 01:35:05.102
ตะมุตะมิ

01:35:08.602 --> 01:35:11.521
นี่ ถ้ามันติดดาวนี่คือเสียเงิน

01:35:12.451 --> 01:35:16.906
เราต้องดูที่เขาไม่ติดดาวใช่หรือเปล่า

01:35:22.375 --> 01:35:24.176
ไอ้ตัวนี้ได้

01:35:28.168 --> 01:35:32.190
หมดแล้ว 3 of 3 3 หน้าแล้วหรือ

01:35:36.346 --> 01:35:37.775
ไม่นะ

01:35:46.306 --> 01:35:50.225
เราก็ Search ว่า Free แล้วนะ แต่ไม่ให้ฟรีเรานะ

01:35:51.100 --> 01:35:53.383
ใน Freepik หา

01:35:55.843 --> 01:36:01.269
หา Free Sprite เลย หาที่มันจะขึ้น Free ให้เราไหม

01:36:03.401 --> 01:36:13.199
เอ๊ะหรือว่านี่เราโหลดไปจนหมดโควต้าแล้ว ขึ้นแบบเสียสตางค์ทั้งนั้นเลยนะคะ

01:36:13.199 --> 01:36:20.256
หาเพิ่มนะเด็ก ๆ นะ หาไว้ก่อนนะ เพราะคราวหน้ามันจะต่อด้วยเอาตัวนี้มาลง

01:36:23.100 --> 01:36:27.283
เช่น ๆ ๆ เจอรูป

01:37:08.933 --> 01:37:19.971
นะคะ หาไว้ บอกแล้วถ้าหาไม่ได้แล้ว ใช้วิธีที่ที่บอกน่ะ ตัดไปทีละรูปนะคะ โอเคนะคะ

01:37:21.338 --> 01:37:30.000
เดี๋ยวสัปดาห์นี้เราจะพอแค่นี้ก่อน ต่อกันในสัปดาห์หน้านะคะ

01:37:34.211 --> 01:37:37.443
มีใครยังทำไม่ได้อีก

01:37:40.232 --> 01:37:42.944
รูปยังไม่พอดีกับกรอบนี่

01:37:47.757 --> 01:37:50.844
เปลี่ยนขนาดก่อน 1500

01:37:51.664 --> 01:37:53.134
1000 สิ

01:37:55.321 --> 01:37:56.851
1800

01:38:03.413 --> 01:38:05.090
แป๊บหนึ่ง ๆ

01:38:05.418 --> 01:38:06.856
1800

01:38:20.069 --> 01:38:21.959
800 นะ

01:38:25.240 --> 01:38:31.032
ประมาณนี้นะคะ 1800 กับ 1600

01:38:32.235 --> 01:38:38.943
เสร็จแล้วก็ Save ไว้ โอเคค่ะ สัปดาห์นี้พอแค่นี้