3.คู่มือฝึกทำกิจกรรมการสร้างเกมด้วยโปรแกรม-Construct-2

สารบัญ หน้า 2กจิ กรรมที่ 1 การปรับขนาด Layout และ Windows Size 3 6 2 การสร้าง Object หรือนาํ เขา้ Object แบบ Sprite 6 3 การทดสอบรันงาน 8 4 สร้าง Object ใหเ้ ป็นแบบ Animation 11 5 สร้างภาพแบบ Tile Background 12 6 ทดสอบสร้างเกมแนว Platform 17 7 การใชป้ ่ ุมลิงคไ์ ปหนา้ Layout อื่นๆ 22 8 การทาํ ให้ Sprite หนั หนา้ ตามทิศทางลกู ศรซา้ ย ขวา 27 9 การใส่เสียง 3010 ผลไมห้ ล่นอยา่ งง่าย 3211 การทาํ ตะกร้ารับผลไม้ 3412 การทาํ เมฆลอยอยา่ งง่าย 3713 การชนกนั (Collision)ของ Object 4214 เม่ือชนกนั แลว้ ใหเ้ พิ่ม Score และโชว์ Score 4415 การทาํ ใหผ้ ลไมห้ ลน่ ลงมาแบบสุ่ม 5116 การจบั เวลาเล่นเกม 5517 การใหเ้ มฆลอยแบบสุ่ม 6518 การทาํ รูปลาํ โพงเพื่อปิ ด-เปิ ดเสียง 6919 การส่งออกไฟลแ์ บบ HTML5 7420 การอพั ไฟลข์ ้ึนโฮสตเ์ พื่อเผยแพร่ผลงาน 7721 เกมผ้ึงนอ้ ยโบยบิน 8622 การ Export งานและใช้ Phone Gap ทาํ เป็นไฟล์ apk 8923 การกาํ หนดเงื่อนไขใหท้ าํ งานเพียงคร้ังเดียว 9124 การออกแบบงานในรูปแบบสไลดน์ าํ เสนองาน(แบบท่ี 1) 9325 การออกแบบงานในรูปแบบสไลดน์ าํ เสนองาน(แบบที่ 2) 9426 การทาํ นบั เวลาถอยหลงั แบบแถบเวลา 10127 เกมจบั คู่(ง่ายๆ โคด๊ แค่ 3 บรรทดั ) 10428 การทาํ ภาพแบบการ์ตนู Animation 10629 การทาํ แถบพลงั ชีวิต30 การ Build App เป็นไฟล์ apk โดยใชโ้ ปรแกรม XDK 1

กจิ กรรมท่ี 1 การปรับขนาด Layout และ Windows Size โดยทาํ การปรับใหเ้ ป็นขนาด Tablet 7 นิ้ว แนวนอน และทดลองซูมเขา้ ออกหนจ้ อโดยใหก้ ดป่ ุม Ctrl คา้ งไวแ้ ลว้ หมุนป่ ุมตรงกลางเมาส์ 2

กจิ กรรมที่ 2 การสร้าง Object หรือนาเข้า Object แบบ Sprite(นอกจากวธิ ีตามข้นั ตอนน้ีแลว้ ยงั มีอีกวธิ ีท่ีง่ายในการนาํ ภาพเขา้ มาคือ ลากภาพในคอมพิวเตอร์ เขา้ มาวางใน Layout เลยกไ็ ด)้ 3

4

5

กจิ กรรมท่ี 3 การทดสอบรันงานเมื่อเราลองสร้าง Object แลว้ อยากดูหนา้ ตาผลงาน อยา่ ลืมก่อนจะทดสอบ ใหไ้ ปกาํ หนด Browserของ Chrome ส่วนวธิ ีลดั ในการทดสอบรันงาน คือกดแป้ นพิมพป์ ่ ุม F5 นน่ั เองกจิ กรรมท่ี 4 สร้าง Object ให้เป็ นแบบ AnimationObject ท่ีเราสร้างข้ึนคร้ังแรก จะมีแค่เฟรมเดียวคือเฟรม 0 ซ่ึงจะแสดงเป็นภาพนิ่ง แต่ถา้ เราตอ้ งการทาํใหเ้ คล่ือนไหวได้ ตอ้ งทาํ ใหเ้ ป็นแบบ Animation เรามาทดลองสร้างง่ายๆ กนั ดูครับ1. Double Click ที่ Layout เพอ่ื สร้าง Sprite2. ใช้ เคร่ืองมือ Brush ปรับหวั แปรง 2003. เลือกสีและคลิกวาดลงดา้ นบนเฟรมรูปสี่เหล่ียม4. คลิกเมาส์ขวาท่ี Animation frame เลือก Add frame5. คลิกวาดลงดา้ นล่างเฟรมรูปสี่เหลี่ยม เพ่ือใหอ้ ยคู่ นละตาํ แน่ง6. ปรับค่า Speed ลดลงเหลือ 2 และเลือก Loop ใหเ้ ป็น Yes7. กดป่ ุม F5 ทดสอบการทาํ งาน(หมายเหตุ การแกไ้ ข Object ใดๆ ให้ Double Click ท่ี Object น้นั ๆ) 6

7

กจิ กรรมที่ 5 สร้างภาพแบบ Tile BackgroundTile กค็ ือแผน่ กระเบ้่ือง ดงั น้นั การสร้างภาพแบบ Tile Background ก็เป็นเหมือนการสร้างกระเบ้ือง 1 แผน่ แลว้ กป็ กู ระเบ้ืองน้นั ให้เตม็ พ้ืนท่ีท่ีเราตอ้ งการ1. Double Click ท่ี Layout เพ่อื สร้างObject แบบ Tile Background2. คลิกเครื่องมือ ยอ ขยายภาพ3. กาํ หนดขนาดภาพใหเ้ หลือแค่ 100 x 100 pixel4. ใชเ้ ครื่องมือวาดรูปลงในพ้นื ท่ีส่ีเหลี่ยม5. ปิ ดหนา้ ตา่ งการวาดรูป6. ใชเ้ มาส์ยอ่ ขยายภาพใหเ้ ตม็ พ้นื ที่ที่ตอ้ งการ7. กดป่ ุม F5 ทดสอบการทาํ งาน 8

9

Layout ในโปรแกรม Construct2 เปรียบเทียบกบั โปรแกรม Flash ก็คือ Scence หรือฉาก หรือจะมองเทียบกบั Powerpoint ก็เหมือน สไลด์ 1 แผน่ เราสามารถที่จะเปลี่ยนช่ือหรือเพ่ิมLayout ได้ และในแตล่ ะ Layout จะมี Layer ใหเ้ ราเพมิ่ ลบ ซ่อน เลเยอร์ได้ ทาํ ใหง้ ่ายในการออกแบบงาน 10

ในเลเยอร์ เรายงั สามารถลงสีใหก้ บั เลเยอร์ไดด้ ว้ ย เลเยอร์ก็เหมือนแผน่ ใสมาซอ้ นทบั กนั เลเยอร์ล่างสุดจะอยู่ตาํ แหน่ง 0 เรานิยมใชท้ าํ เป็ นฉาก Backgroundกจิ กรรมท่ี 6 ทดสอบสร้างเกมแนว Platformเกมแนว Platform หรือในมุมมอง Side Scroll ตวั อยา่ งเช่น เกมมาริโอ้ ท่ีเดินๆ กระโดด เป็นตน้มีวธิ ีทาํ ง่ายๆ ดงั น้ี1.สร้าง Object ตวั ละคร และพ้นื สาํ หรับเดิน และพ้ืนท่ีกระโดดไปยนื2.ทาํ การกาํ หนดพฤติกรรมหรือ Behavior ใหก้ บั Object ที่เราสร้าง - กาํ หนด Behavior ตวั ละคร ใหเ้ ป็ นแบบ Platform - กาํ หนด Behavior ตวั พ้ืน ใหเ้ ป็ นแบบ Solid3. กดป่ ุม F5 เพ่อื รันทดสอบงาน4. ใชป้ ่ ุมลูกศรกดเดินหนา้ ถอยหลงั ลูกศรช้ีข้ึนสาํ หรับกระโดด 11

กจิ กรรมท่ี 7 การใช้ป่ มุ ลงิ ค์ไปหน้า Layout อนื่ ๆในกิจกรรมน้ี จะเร่ิมมีการเรียนรู้การทาํ งานใน Event Sheet คร้ังแรกนะครับ โดยเป็นการสั่งให้Object ทาํ งานโดยมี Event หรือเหตุการณ์มากาํ หนดปกติเราจะมี Layout1 เมื่อสร้างงานใหม่ ซ่ึงจะสร้างป่ ุมใน Layout1 น้ีข้นั ตอนที่ 1 ใหท้ าํ การเพ่มิ Layout2 เพอื่ ลิงคม์ ายงั หนา้ น้ีข้นั ตอนท่ี 2 แทรก Object แบบป่ ุม(Button)ใน Layout1ข้นั ตอนที่ 3 กาํ หนดคาํ สัง่ ในแทป Event Sheet1 โดยกาํ หนดเหตุการณ์เม่ือคลิกป่ ุมแลว้ ใหไ้ ปเปิ ดหนา้ Layout2 12

13

14

15

16

กจิ กรรมท่ี 8 การทาให้ Sprite หนั หน้าตามทิศทางลูกศรซ้าย ขวาปกติเม่ือเราสร้างตวั Sprite ข้ึนมาและกาํ หนดพฤติกรรม Behavior ใหเ้ ป็นแบบ Platformแลว้ เวลาใชล้ ูกศรเลื่อนตวั Sprite จะเห็นวา่ หนั ไปทางเดียวตลอด เรามาฝึกทาํ ให้ Sprite สามารถหนัหนา้ ไปตามทิศซา้ ยขวา ตามลูกศรท่ีเรากดกนั ดูนะครับ1.สร้าง Sprite2.กาํ หนด Behavior เป็นแบบ Platform3. เพ่มิ Object แบบ Keybord เขา้ มาก่อน4. กาํ หนดการทาํ งานใน Event Sheet5.กดป่ ุม F5 ทดสอบการทาํ งาน 17

18

19

20

21

กจิ กรรมที่ 9 การใส่เสียงในการสร้างส่ือใดๆหรือการสร้างเกมใดๆน้นั เสียงเป็นส่วนประกอบท่ีสาํ คญั อยา่ งมาก ที่ทาํ ใหส้ ่ือหรือเกมของเราโดดเด่นน่าสนใจ ซ่ึงในโปรแกรม Construct2 น้ีสนบั สนุนเสียงประเภท .wav .oggดงั น้นั ถา้ เรามีไฟลเ์ สียง .mp3 กใ็ หแ้ ปลงใหเ้ ป็น .wav 16 bit เสียก่อนนะครับ ย้าํ 16 bit ไมใ่ ช่32 bit นะครับ ไม่ง้นั จะไม่สามารถโหลดไฟลเ์ ขา้ มาได้เพือ่ ใหเ้ กิดภาพชดั ในการทาํ งาน ขอแบ่งการทาํ งานออกเป็ น 3 ข้นั ตอน ดงั น้ีข้นั ตอนท่ี 1 ใหท้ าํ การแทรก Object เสียงก่อน โดยการ Double click ที่หนา้ Layout แลว้เลือก Audio แลว้ กด Insert จะปรากฏรูปลาํ โพงท่ี Project ของเราข้นั ตอนท่ี 2 ใหท้ าํ การนาํ เขา้ ไฟลเ์ สียงของเราที่มีนามสกุล .wav อาจจะนาํ เขา้ ในโฟลเดอร์ Soundหรือ โฟลเดอร์ Music ก็ได้ข้นั ตอนที่ 3 ใหก้ าํ หนด Event และ Action การเล่นเสียง เม่ือกาํ หนดเรียบร้อยตามภาพแลว้ กดป่ ุมF5 เพื่อทดสอบการทาํ งาน 22

23

24

25

26

กิจกรรมท่ี 10 ผลไมห้ ล่นอยา่ งง่ายในตวั อยา่ งน้ี เราจะลองฝึกทาํ ผลไมห้ ล่นอยา่ งง่ายๆ 1 ลูกก่อนและค่อยฝึกทาํ แบบสุ่มหล่นลงมาหลายๆ ลูกในคราวถดั ไปข้นั ตอนที่ 1 แทรก Object แบบ Sprite แลว้ วาดรูปผลไมข้ ้ึนมา 1 ลูกข้นั ตอนท่ี 2 กาํ หนด Behavior ใหก้ บั ผลไม้ 2 อยา่ ง คือ2.1 แบบ Physics วตั ถุจะเคลื่อนท่ีแบบฟิ สิกส์2.2 แบบ Destroy Outside Layout เพื่อลบ Object ออกจากหนา้ จอเม่ือพน้ หนา้ จอไปแลว้ เพราะถา้ ไมล่ บ จะทาํ ใหม้ ีการทาํ งานตลอด เป็นการสิ้นเปลืองหน่วยความจาํ 27

28

29

กจิ กรรมท่ี 11 การทาตะกร้ารับผลไม้กิจกรรมน้ีเราจะมาทาํ ตะกร้าสาํ หรับเก็บผลไมก้ นั นะครับ ซ่ึงตะกร้า จะเคล่ือนท่ีไดแ้ ค่ 2 แนวเทา่ น้นั คือเลื่อนซา้ ย ขวา มาดูวธิ ีการทาํ กนั ครับข้นั ตอนท่ี 1 แทรก Object แบบ Sprite แลว้ วาดรูปตะกร้าข้ึนมา 1 ถาดข้นั ตอนท่ี 2 กาํ หนด Behaviors ใหก้ บั ตะกร้าแบบ 8Directionข้นั ตอนท่ี 3 กาํ หนดทิศทาง ใหเ้ คล่ือนท่ีแคซ่ า้ ยกบั ขวาเทา่ น้นัข้นั ตอนที่ 4 กาํ หนดมุม Angle เป็น Noแลว้ รันทดสอบงานกดป่ ุม F5 ดูนะครับ 30

31

กจิ กรรมท่ี 12 การทาเมฆลอยอย่างง่ายกิจกรรมน้ีจะพาทาํ เมฆลอยประกอบฉากใหน้ ่าสนใจนะครับ แต่จะพาทาํ แบบง่ายๆก่อนแบบไมต่ อ้ งเขียนโคด๊ ใดๆ เด๋ียวถดั ไปค่อยทาํ ข้นั สูงคือ ใหส้ ุ่มลอยเองตลอดเวลาโดยการเขียนโคด๊ แบบสุ่มข้นั ตอนที่ 1 แทรก Object แบบ Sprite แลว้ วาดกอ้ นเมฆข้นั ตอนที่ 2 กาํ หนด Behaviors ใหก้ บั กอ้ นเมฆแบบ Bulletข้นั ตอนท่ี 3 กาํ หนด Speed ในการเคล่ือนท่ีลดลงเหลือ 100ข้นั ตอนที่ 4 นาํ กอ้ นเมฆมาวางไวด้ า้ นซา้ ยมือสุดของจอภาพแลว้ รันทดสอบงานกดป่ ุม F5 ดูนะครับ 32

33

กจิ กรรมท่ี 13 การชนกนั (Collision)ของ Objectจากการท่ีเราไดฝ้ ึกสร้างผลไมแ้ ละตะกร้ามาแลว้ เราลองมาทาํ ใหผ้ ลไมท้ ่ีหล่นลงมาชนกนั กบั ตะกร้า โดยใช้คาํ สงั่ Collisionข้นั ตอนที่ 1 สร้างผลไมแ้ ละตะกร้า(ดูกิจกรรมที่ผา่ นมา)ข้นั ตอนที่ 2 กาํ หนด Event ใหก้ บั ตะกร้า เม่ือมีผลไมม้ าชนข้นั ตอนท่ี 3 กาํ หนดใหล้ บผลไมน้ ้นั ออกจาหนา้ จอไปแลว้ กดป่ ุม F5 รันทดสอบงาน 34

35

36

กจิ กรรมท่ี 14 เม่ือชนกนั แล้วให้เพมิ่ Score และโชว์ Scoreจากกิจกรรมที่ 13 เราไดท้ าํ การชนกนั ไดแ้ ลว้ เรากม็ าทาํ ข้นั ตอนเพมิ่ ในส่วนการแสดง Score ดงั น้ีข้นั ตอนที่ 1 ทาํ การเพ่ิม Object แบบ Text ไวส้ าํ หรับแสดง Scoreข้นั ตอนที่ 2 กาํ หนดตวั แปร Score ใหม้ ีค่าเร่ิมตน้ เท่ากบั 0ข้นั ตอนท่ี 3 กาํ หนดเหตุการ์เพมิ่ Scoreข้นั ตอนท่ี 4 กาํ หนดใหแ้ สดง Score ท่ีอพั เดทแลว้กดป่ ุม F5 เพื่อทดสอบการชนแลว้ มี Score แสดงคา่ ออกมา 37

38

39

40

41

กจิ กรรมท่ี 15 การทาให้ผลไม้หล่นลงมาแบบสุ่มจากกิจกรรมท่ี 14 เม่ือผลไมช้ นกบั ตะกร้า กจ็ ะมีคะแนนโชวข์ ้ึนหนา้ จอ แต่ผลไมจ้ ะหล่นลงมาลูกเดียวแลว้หายไปเลย ดงั น้นั เราจะมาทาํ ใหม้ ีผลไมห้ ล่นลงมาเร่ือยๆ ทุกๆ 1 วนิ าที และสุ่มตาํ แหน่งท่ีตกลงมาจากดา้ นบนดว้ ยข้นั ตอนท่ี 1 ใหเ้ พิม่ Event เป็นแบบ System กาํ หนด Every x Secondsกาํ หนดเวลาทุกๆ 1 วนิ าทีข้นั ตอนท่ี 2 Add Action แบบ Creat object แลว้ เลือก ผลไม้ข้นั ตอนที่ 3 กาํ หนดการ random ในแกน xกดป่ ุม F5 เพื่อทดสอบงาน 42

43

กจิ กรรมที่ 16 การจับเวลาเล่นเกมจากกิจกรรมท่ี 15 ผลไมท้ ่ีสุ่มจะหล่นลงมาเรื่อยๆ เราจะมากาํ หนดเวลาในการเล่นเกมวา่ ใหผ้ เู้ ล่นเกบ็ผลไมภ้ ายในเวลาท่ีเรากาํ หนด เม่ือหมดเวลาแลว้ ใหไ้ ปหนา้ จบเกมข้นั ตอนท่ี 1 ใหท้ าํ การเพ่ิม Layout หนา้ จบเกม(Game Over)ข้ึนมาไวก้ ่อนข้นั ตอนที่ 2 เพ่ิม Text สาํ หรับแสดงเวลาข้นั ตอนท่ี 3 กาํ หนดตวั แปรเวลา ในที่น้ีใชช้ ื่อวา่ MaxTime โดยกาํ หนดค่าเร่ิมตน้ คือ 30 วนิ าทีข้นั ตอนท่ี 4 เมื่อเร่ิมเล่นใหท้ าํ การลดเวลาลงทีละ 1 วนิ าทีข้นั ตอนท่ี 5 ตรวจสอบเงื่อนไขวา่ ถา้ เวลาลดลงเท่ากบั 0 แลว้ ใหไ้ ปหนา้ จบเกมข้นั ตอนสุดทา้ ยคือ กดป่ ุม F5 ทาํ การทดสอบเกม 44

45

46

47

48

49

50