คู่มือประกอบการอบรมการพัฒนาเกมอย่างง่าย CodeMonkey รุ่นที่ 3 วันที่ 20-21 สิงหาคม 2565

Thank you Faculty of Science & Technology, Suan Dusit University

GameBuilder CodeMonkey การอบรมเชงิ ปฏบิ ตั กิ าร การออกแบบและพฒั นาเกม อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

Agenda 1 แนะนาฟังกช์ นั และองคป์ ระกอบของ Game Builder 2 การวางแผนและกระบวนการสรา้ งเกม 3 Workshop สรา้ งเกมลงิ จา่ ฝูงออกผจญภยั 4 Workshop สรา้ งเกมดว้ ยตนเอง Faculty of Science by Suan Dusit University © 2019 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th

ฟงั ก์ชนั และองค์ประกอบของ Game Builder 1. คลกิ ปุ่ม Create Games อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

ฟงั กช์ นั และองคป์ ระกอบของ Game Builder 2. คลกิ เลือก Game Template อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

ฟงั ก์ชนั และองคป์ ระกอบของ Game Builder 3. องค์ประกอบของ Game Builder จากภาพท่ี 3 เปน็ องค์ประกอบและลาดับการทางาน หลักตามหมายเลข คอื เลือกตัวละคร > คลิกเขยี น โปรแกรมใหก้ ับตวั ละคร > เมื่อคลกิ ในขั้นท่ี 2 แลว้ ชดุ คาสงั่ จะจะปรากฎในองคป์ ระกอบที่ 3 คอื Game Editor เม่ือกดปมุ่ RUN > แสดงผลในองคป์ ระกอบท่ี 4 (Display) อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องค์ประกอบที่ 1 คือ วตั ถุ (Objects) แบ่งเปน็ 4 สว่ น สว่ นที่ 1 SPRITES สามารถเลือก Sprite โดยคลิกปมุ่ บวก + อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องค์ประกอบท่ี 1 คอื วตั ถุ (Objects) แบง่ เป็น 4 ส่วน ส่วนท่ี 1 SPRITES สามารถเลอื ก Sprite โดยคลกิ ปมุ่ บวก + จากนนั้ เลอื ก Sprite และคลิกปมุ่ ADD อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบที่ 1 คือ วตั ถุ (Objects) แบ่งเปน็ 4 สว่ น สว่ นที่ 1 SPRITES (ตอ่ ) จากภาพดา้ นลา่ งเปน็ สว่ นของการตัง้ คา่ ให้กบั ตัวละครหรอื วตั ถุ โดยคลิกที่ปมุ่ รูปฟนั เฟอื งจะปรากฎหนา้ ตา่ ง การตั้งค่า ไดแ้ ก่ ช่อื ของวัตถซุ ง่ึ ใชใ้ นการสั่งให้วัตถุนั้นทาอะไรได้ X Y (จดุ แสดงวัตถุ) หมุน ลบ คดั ลอก และ ในชอ่ ง (Checkbox) - Allow Gravity แรงโนม้ ถว่ ง - Collide world bounds ลงิ สามารถหล่นไปข้างลา่ ง - Show แสดงผล อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบที่ 1 คอื วัตถุ (Objects) แบง่ เป็น 4 สว่ น สว่ นท่ี 2 WIDGETS คือส่วนเสรมิ เชน่ Counter ใช้แสดงผลคะแนนในการเก็บไอเทมเกม หรอื Text ข้อความแสดงคาอธิบาย ต่างๆ อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องค์ประกอบที่ 1 คอื วัตถุ (Objects) แบ่งเปน็ 4 ส่วน สว่ นที่ 3 SOUNDS คือการเพม่ิ เสียงประกอบให้เกม หรือเหตุการณ์ในเกม เช่นการชนกนั ของตัวละคร อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบท่ี 1 คอื วตั ถุ (Objects) แบ่งเป็น 4 ส่วน สว่ นท่ี 4 GAME - ในส่วนของ GAME น้ันเป็นการตั้งค่าให้เกม ได้แก่ ความกว้าง ความสูงของหน้าต่างเกม และ Gravity คือแรงโน้มถ่วงในเกม ถ้าต้ังเป็น 0 วัตถุจะลอยไม่ตกลงมา ถ้าใส่ค่าแรงโน้มถ่วง เยอะจะทาให้ตัวละครกระโดดได้น้อยและ เพราะวา่ แรงโน้มถ่วงเยอะ - การเปลย่ี นพ้ืนหลงั Upload อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบท่ี 2 คือ คำสง่ั ต่ำงๆ 5 กลุม่ กล่มุ ที่ 1 MOVEMENT - คอื กลุ่มคาสงั่ ทใ่ี ช้สาหรับการเคล่ือนไหว หรือระบุตาแหน่งในการแสดงผล เช่น step คือการเดิน jump คอื กระโดด setX setY คือ การกาหนดตาแหนง่ ตามแกน X , Y อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบท่ี 2 คอื คำสง่ั ตำ่ งๆ 5 กลุ่ม กลมุ่ ที่ 2 EVENT - คือกลมุ่ คาสั่งการกาหนดเหตกุ ารณใ์ หก้ ับวตั ถุ เช่น onKey คือเม่ือกดป่มุ คียบ์ อรด์ ซ่งึ ใช้รว่ มกบั keyboard.lef keyboard.right keyboard.up keyboard.down คือปุ่มลูกศรบนคียบอร์ด onCollide คือเมื่อวตั ถุช้ินนั้นชนกบั วัตถชุ ้นิ อืน่ onSwipe คือการแทป็ บนหน้าจอของ Smartphone หรือ Tablet อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบที่ 2 คือ คำสั่งตำ่ งๆ 5 กลมุ่ กลุ่มที่ 3 DISPLAY - คือกลุ่มคาสั่งการแสดงผลบนหนา้ จอใชร้ ว่ มกับเหตุการณจ์ าก EVENT เช่น เม่อื ลงิ ชนกบั กลว้ ย สั่งให้กล้วยหายไปคอื destroy อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบท่ี 2 คอื คำส่งั ตำ่ งๆ 5 กลมุ่ กลุ่มที่ 4 CONTROL - กลมุ่ คาส่ังในการควบคุมและเง่ือนไข เชน่ loop คอื การทาซ้ามักใช้กบั อุปสรรคของเกม เชน่ ให้ ฮปิ โปเปน็ อปุ สรรคท่ตี ้องเดินไปเดนิ มา จะกาหนด loop ใหก้ ับ ฮิปโปเดินซา้ ยขวาสลบั กันไปมา อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องค์ประกอบที่ 2 คอื คำสัง่ ต่ำงๆ 5 กลุ่ม กลมุ่ ที่ 5 OPERATORS -กลุ่มคาสั่ง Operators ซงึ่ เป็นเงอ่ื นไขโดยใชร้ ว่ มกับกล่มุ คาสง่ั Control หรอื ให้ค่าในส่วนของ Widgets ตา่ งๆ อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบที่ 3 Editor สำหรับเขียนโปรแกรมเกม คาส่งั ควบคมุ ตัวละครหลกั เม่ือกดปมุ่ ลกู ศรที่ Keyboard ให้ลงิ เดินหน้า ถอยหลัง และกระโดด ตัวอย่างเป็นการเขียนโค้ดให้กับ monkey ซึ่งกาหนดเหตุการณ์ (Event) กดปุ่มลูกศรจากคีย์บอร์ดเดิน ขวา ซ้าย และปุ่มบนจะกระโดด เปน็ การควบคมุ ตวั ละครหลัก วิธีการเขยี นโปรแกรมนีใ้ หค้ ลิกส่วนของคาส่งั ในองค์ประกอบที่ 2 เลือกแท็ป E VENTS คลิก onKey จะปรากฎชุดคาสั่งท่ี Editor ซึ่งมีคาส่ัง keyboard.right มาด้วยให้คัดลอกเพื่อนามาใช้ในคาส่ังเดินไป ทางซ้าย แตก่ าหนดให้ @step -1 คือการเดินถอยหลงั และในสว่ นของ keyboard.up ใหเ้ ปลี่ยนคาส่ังเป็น @jump (keyboard.le ft keyboard.up อยู่ในแทป็ เมนู EVENTS และ @jump อยู่ในแท็ปเมนู MOVEMENT) อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องค์ประกอบที่ 3 Editor สำหรับเขียนโปรแกรมเกม การแชรเ์ กมโดยการรับลงิ ค์ URL ในส่วนของ Editor น้นั นอกจากส่วนของการเขียนโปรแกรมแล้ว จะมีปุ่ม Save บันทึกเกม ปุ่ม Run เพ่ือทดลองเล่น เกมท่ีสร้าง และปุ่ม Share สาหรับแชร์เกมให้ผู้อ่ืนเล่นโดย เม่ือคลิกปุ่ม Share แล้วคลิก Link Settings (เลือกต๊ิกถูกท่ี Private) และคลิกปุ่มทางซ้ายเพ่ือรับ Link URL สาหรับเล่นเกมสามารถนาไปแชร์บนโซเชียลเน็ตเวิร์ค หรือให้คนอ่ืนเล่นเกมของเราได้ จากนัน้ คลกิ ปมุ่ Copy Link เพ่อื คดั ลอก URL และคลกิ ปมุ่ Done 2 3 1 4 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

องคป์ ระกอบท่ี 4 หนำ้ จอ Display ในส่วนน้เี ปน็ หน้าจอสาหรับ Display เพ่ือแสดงการวางตวั ละคร วัตถุ และทดลองเล่นเกม (Run) ซงึ่ ดา้ นบน ประกอบด้วย 4 เครอ่ื งมอื 1234 1. เครื่องมือ Edit ลูกศรสีดาใช้เลือกตัว 3. เครอื่ งมือ Eraser หรือยางลบ ใช้ในการลบ ละคร หรือวัตถุท่ีจะเขียนโปรแกรมใส่เข้า วัตถทุ เ่ี ปน็ ฉากของเครอ่ื งมอื Paintbrush ไป และใช้เคล่ือนย้ายตัวละคร หรือวัตถุใน เกม 4. เครื่องมือ Paintbrush หรือพู่กันสาหรับ สร้างฉากซ่ึงมีรูปแบบ (Patturns) มีหน้าท่ี 2. เคร่ืองมือ Move ใช้ในการเล่ือนฉาก สาคัญในการกาหนดฉากเป็นบันได กาแพง เพื่อไป Edit ตัวละครหรือวัตถุที่ซ่อนอยู่ อปุ สรรค ทางขวาในกรณีที่มีความยาวของฉาก มากกว่า 600 px Faculty of Science by Suan Dusit University © 2019 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th

Section Break Insert the title of your subtitle Here อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

ลงิ จา่ ฝงู ออกผจญภยั VS อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

กำหนดเรอื่ งรำวของเกม (Story) ตวั อยา่ ง เรื่อง ลิงจา่ ฝงู ออกผจญภัย ณ ป่าใหญ่แห่งหน่ึง มีลิงกอริล่าได้ขโมยกล้วยในป่าแถบนั้นไปหมดทาให้บรรดาลิง น้อยท้ังหลายขาดแคลนอาหาร จึงเป็นหน้าที่ของลิงจ่าฝูงรูปหล่อจะออกหากล้วยเพื่อมาเป็น อาหารให้แก่ลิงในฝูง และตามพญาลิงในตานานมาปราบกอริล่า ซ่ึงต้องออกเดินทางไปหา กล้วยในป่าที่ซึ่งไกลออกไป ซึ่งมีเรื่องเล่าว่า ณ ป่าแห่งน้ันมี ฝูงช้างท่ีโหดเห้ียม และมีเสือท่ี ดุร้าย จ่าฝูงลิงจะรอดชีวิต นากล้วยกลับมาให้ฝูง และตามพญาลิงกลับมาช่วยปราบกอริล่าได้ หรือไมโ่ ปรดตดิ ตาม อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

กำหนดตัวละคร ไอเทม และฉำกหลงั อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

กำหนดตวั ละคร ไอเทม และฉำกหลัง (ตอ่ ) อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

กำหนดเหตกุ ำรณใ์ นเกม (Events) อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

กำหนดเหตุกำรณใ์ นเกม (Events) (ต่อ) อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลงิ จ่ำฝงู ออกผจญภัย คลิกขวา >> Extract Here อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลงิ จำ่ ฝงู ออกผจญภยั 3 1 2 4 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th 5 Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภัย 1 3 2 Faculty of Science by Suan Dusit University © 2019 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th

สรำ้ งเกมลงิ จำ่ ฝงู ออกผจญภัย หน้ำจอท่ี 1 เพ่มิ bananastart และจดั หนำ้ จอ อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั เพ่ิมเสียงช่ือ comedy_bite_creature_eating ต้งั ช่ือวา่ eatsound อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สรำ้ งเกมลงิ จำ่ ฝูงออกผจญภัย 1 2 3 Faculty of Science by Suan Dusit University © 2019 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th

สร้ำงเกมลงิ จำ่ ฝูงออกผจญภัย หน้ำจอที่ 2 เพิม่ banana ดว้ ย duplicate อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

หน้ำจอท่ี 2 สรำ้ งเกมลงิ จ่ำฝูงออกผจญภยั 3 เพมิ่ ชำ้ ง 2 1 4

สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั หนำ้ จอท่ี 2 เพม่ิ เสือ อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

หนำ้ จอที่ 2 สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั เพ่มิ เสอื อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

หน้ำจอที่ 2 สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั เพมิ่ กล้วยกระโดด อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

หน้ำจอท่ี 3 สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั เพิ่ม พญำลิง และกล้วยกระโดด อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

หน้ำจอที่ 3 สรำ้ งเกมลงิ จำ่ ฝูงออกผจญภยั 2 เพิ่ม พญำลิง 1 4 3 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

หน้ำจอที่ 4 สรำ้ งเกมลงิ จ่ำฝงู ออกผจญภัย เพม่ิ กอรลิ ่ำ soundgorilladead อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th gorilladeadtext Faculty of Science by Suan Dusit University © 2019

หนำ้ จอที่ 4 สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั เพิ่ม กอรลิ ่ำ อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

หนำ้ จอที่ 4 สรำ้ งเกมลิงจำ่ ฝูงออกผจญภยั เพิ่ม กอรลิ ่ำ อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019

สร้ำงเกมลิงจ่ำฝงู ออกผจญภัย กว้าง 600 X 4 = 2400 px 12 34 อาจารยท์ นิ กร ชณุ หภทั รกลุ : http://thinnagorn.sci.dusit.ac.th Faculty of Science by Suan Dusit University © 2019