~ 1 ~

โปรแกรม Construct 2

Construct 2 คอ Engine ส ำหรบสรำงเกม 2 มต ดวยภำษำ HTML5 โดยลดขนตอนกำรเขยน Code ใหนอยทสด ซงเกมทใชภำษำ HTML5 จะสำมำรถ Run บนอปกรณไดหลำยประเภท ไมวำจะเปน PC แทบ

เลต หรอ Smart Phone ซงนนท ำใหเกมทสรำงดวย Construct 2 มชองทำงกำรเผยแพรหรอจดจ ำหนำยได

หลำยชองทำง

เรำสำมำรถใช Construct2 สรำงเกมไดหลำยแพลตฟอรม

คณสมบตเดนของ Construct2

Quick & Easy

กำรสรำงเกมดวย Construct 2 สำมำรถท ำไดงำยๆ ไมกขนตอน เพยงแคคลกลำกและวำงวตถลงหนำจอ เพม Behavior ใหวตถ และท ำใหพวกมนมชวตดวย Event ทงน เรำสำมำรถ Preview เพอ

ทดลองผลงำนไดเทำทเรำตองกำร

Powerful Event System ระบบกำรเขยน Event ของเกมถกออกมำใหดงำย และใชภำษำทใกลเคยงภำษำมนษย เพยงแค

ผพฒนำเขำใจระบบตรรกะพนฐำน กสำมำรถสรำงเกมงำยๆ ไดแลว โดย Construct 2 จะบงคบให

เรำเขยนโปรแกรมโดยใช Event เทำนน ท ำใหผพฒนำไมจ ำเปนตองสนใจ Code เกมเลย

Flexible Behaviors

Construct 2 จะเตรยมสงทเรยกวำ Behaviors (พฤตกรรม) หลำกหลำยรปแบบ เชน กระพรบไดเปน

วตถทำงตน ขยบได 8 ทศทำง ส ำหรบเพมใหกบวตถในเกมของเรำ ท ำใหลดขนตอบกำรท ำงำนลงไดมำก

Instant Preview

ระบบ Preview ในโปรแกรมสำมำรถท ำไดตลอดเวลำ นอกจำกน license version ยงมระบบ Preview Over Wifi ทชวยใหเรำสำมำรถ preview เกมจำก Pc ดวยมอถอหรอ Taplet ผำน wifi ได

ทนท

~ 2 ~

Stunning Visual Effects

Construct2 ไดเตรยม plug-in ทเกยวกบ effect ไวมำกมำยเชนกน รวมไปถง Particle plug-in ทชวย

ใหเรำสรำง effect สวยๆ ได

Multiplatform Export

เพรำะใชภำษำ HIML5 เปนหลก Construct 2 จงสำมำรถสรำงเกมส ำหรบ Run บนอปกรณหลำย

ประเภท โดยไมตองแกไขไฟลเกมมำกนก ซงกำรเผยแพรเกมไปยง iOS หรอ Android จะตองใชโปรแกรมอนๆ เขำมำชวย

Easy Extensibility

แมวำจะม Construct 2 จะม Plug-in มำกมำยใหเลอกใชอยแลว แตถำเรำตองกำรมำกกวำนน เรำสำมำรถเขยน Plug-in เพมเอง พรอแบงปงกบเพอนๆ นกพฒนำได เขยน Plug – in จ ำเปนตองใช

ควำมรทำงดำน Javascript หรอ GLSL

สวนประกอบของโปรแกรม Construct 2 หลงจากทท าการตดตงเสรจสนแลว สามารถเขาใชงานโปรแกรม Construct 2 ใน Desktop ไดโดย

การคลกท Construct 2 Icon

Icon ของ Construct 2

หลงจากคลกท Icon ใน Desktop เพอท าการเปดโปรแกรม Construct 2 จะปรากฎหนาตาของ โปรแกรม Construct 2

~ 3 ~

แถบค ำสงมำตรฐำน (Menu Bar) ของโปรแกรม Construct 2 มดงน แถบค ำสง File

ในสวนนจะใชจดการเกยวไฟลของโปรแกรม Construct 2 ซงกจะคลายๆ กบโปรแกรมทวไป คอ มการสรางไฟลงานใหม (New) , การเปดไฟลงานทมอยแลว (Open) , การบนทกไฟลงานในลกษณะตางๆ เชน บนทกแบบปกต (Save) , บนทกทงชนงาน (Save As Project..) , บนทกทงหมดดวยไฟลเดยว (Save As Single File..) การบนทกไฟลจะไดไฟลนามสกล .capx ซงตองเปดดวยโปรแกรม Construct 2 เทานน , การสงออกชนงาน (Export project..) , การปดแบบปกต (Close tab) , การปดทงชนงาน (Close project)

แถบค ำสง Home ในสวนนจะรวบรวมค าสงในการท างานตางๆ ไมวาจะเปนค าสงทใชในการจดการคลปบอรดทวๆ

ไป เชน ตด , คดลอก , วาง , เลกท า , ท าซ า , ลบ , เลอกทงหมด ฯลฯ แตกมสวนทเพมเตมขนมา คอค าสงในตงคาการแสดงผลชนงาน ซงสามารถก าหนดประเภทของการแสดงผลใหเหมาะสมกบชนดของอปกรณหรอซอฟตแวรทใชท Active configurations และ Displaying ทหวขอออนไลน (Online) สามารถตดตอขอค าแนะน า หรอเรยนรการใชงานจากผผลตไดโดยตรงตลอดเวลาท Scirra.com หรอ Help นอกจากนนยงสามารถแสดงผลชนงานขณะพฒนาดวยการทดสอบทวไป (Run layout) , แสดงผลชนงานแบบคนหาจดบกพรอง (Debug layout) และการออกแบบชนงาน (Export project)

~ 4 ~

แถบค ำสง View ในสวนนจะรวบรวมค าสงในการก าหนดมมมองของแถบแสดงคณสมบต (Palette Bar) ตาง ๆ โดย

สวนใหญจะใชจดการวตถ (Object) ในหนา Layout เชน Status Bar , Properties Bar , Project Bar , Layer Bar , Z Order Bar , Object Bar เปนตน และสามารถยอ ขยายมมมองของชนดงานท Zoom ไมวาจะเปน Zoom in , Zoom out , Zoom to 100% เปนตน

แถบค ำสง Events ในสวนนจะรวบรวมค าสงในการจดการ Event ซงจะใชงานในหนา Event Sheet

หนำจอหลก (User Interface) ทงหมดของ Construct 2 มดงน

~ 5 ~

แถบแสดงคณสมบตของ Properties ในสวนนจะแสดง และใชก าหนดคณสมบตของวตถ (Object) หรอสวนประกอบตางๆ ของชนงาน

ทสรางขน เชน ขอมลทวไปเกยวกบชนงาน (About) , การตงคาชนงาน (Project Settings) , การตงคาองคประกอบอนๆ (Configuration Settings)

แถบแสดงคณสมบตของ Properties ในโปรแกรม Construct 2

~ 6 ~

แถบแสดงคณสมบตของ Project ในสวนนจะแสดง และใชเขาถงทรพยากรของชนงานได ไมวาจะ

เปนหนา (Layouts) หรอหนา เหตการณ (Event sheets) , เสยงประกอบ (Sounds) , ดนตรประกอบ (Music) ,ไฟล (Files) ฯลฯ ซง ทรพยากรเหลานจะถกแบงแยกและจดเกบไวในแตละโฟลเดอร

แถบแสดงคณสมบตของ Objects

ในสวนนจะแสดง และสามารถเขาถงวตถ (Object) พรอมทงสามารถปรบแตงแกไขวตถตาม ประเภทของแตละวตถ หรอทรพยากรของชนงานนนๆ ได

~ 7 ~

แถบแสดงคณสมบตของ Layers

ในสวนนจะแสดง และก าหนดชนของเลเยอร (Layer) โดยเลเยอรจะมโครงสรางแบบชนเรยง ล าดบใชส าหรบการแยกองคประกอบของชนงานออกเปนสวนๆ และมอสระตอกน

~ 8 ~

แถบแสดงสถำนะกำรท ำำงำน Status ในสวนนจะแสดงสภาวะการท างานในขณะปจจบนของโปรแกรม Construct 2 เชน ขนาดของ

ไฟลชนงาน , ขนาดของหนวยความจ าทใช , จ านวน Event , Layer ปจจบน , ต าแหนงของเมาส ฯลฯ

การปรบขนาด Layout และ Windows Size

โดยท ำกำรปรบใหเปนขนำด Tablet 7 นว แนวนอน และทดลองซมเขำ ออกหนำจอโดยใหกดป ม Ctrl คำงไวแลวหมนป มตรงกลำงเมำส layout ขนำด 1000 x 600 จำกนนคลกท view

ขนำด Window Size 1000 , 600

~ 9 ~

การสราง Object หรอน าเขา Object แบบ Sprite

1. คลกเมำสขวำทวำงแลวเลอกค ำสง insert new obiect หรอ ดบเบลคลกทพนทวำงๆ ไดเลย

2. คลกเลอก Sprite เสรจแลวคลกทป ม Insert

~ 10 ~

3. คลกเมำส 1 ครง เลอกเครองมอวำดรปในพนทสเหลยม

4. หรอ โหลดรปทเรำมอยในคอมพวเตอร

5. เลอกรป เสรจแลวใหคลกทป ม เพอปดหนำตำงน

(นอกจำกวธตำมขนตอนนแลว ยงมอกวธทงำยในกำรน ำภำพเขำมำคอ ลำกภำพในคอมพวเตอร เขำมำ

วำงใน Layout เลยกได)

~ 11 ~

ทดสอบการรนงาน

เมอเรำลองสรำง Object แลว ตองกำรจะดผลงำน ใหทดสอบกำรรนโปรแกรม วธกำรใหไปก ำหนด

Browser ของ Chrome สวนวธลดในกำรทดสอบรนงำน คอกดแปนพมพป ม F5

1. ท Project Properties กดท View

2. ท Configuration Settinge ชอง Preview browser ใหเปลยนเปน Chrome

3. จำกนนคลกทป ม ดำนบน หรอ แทบ Home เลอก

~ 12 ~

สราง Object ใหเปนแบบ Animation

Object ทเรำสรำงขนครงแรก จะมแคเฟรมเดยวคอเฟรม 0 ซงจะแสดงเปนภำพนง แตถำเรำตองกำรท ำใหเคลอนไหวได ตองท ำใหเปนแบบ Animation

1. Double Click ท Layout เพอสรำง Sprite

2. ใช เครองมอ Brush ปรบหวแปรง 200 3. เลอกสและคลกวำดลงดำนบนเฟรมรปสเหลยม

4. คลกเมำสขวำท Animation frame เลอก Add frame

5. คลกวำดลงดำนลำงเฟรมรปวงกลม เพอใหอยคนละต ำแนง

~ 13 ~

6. คลกทหนำตำง Animation จำกนนไปทหนำตำงคณสมบต ปรบคำ Speed ลดลงเหลอ 2 และเลอก

Loop ใหเปน Yes

7. กดป ม F5 ทดสอบกำรท ำงำน (หมำยเหต กำรแกไข Object ใด ให Double Click ท Object นน)

วงกลมจะเลอนลง มำและยอนกลบไปดำนบน เรอยๆ

~ 14 ~

สรางภาพแบบ Tile Background

Tile กคอแผนกระเบอง ดงนนกำรสรำงภำพแบบ Tile Background กเปนเหมอนกำรสรำงกระเบอง 1 แผน แลวกปกระเบองนนใหเตมพนททเรำตองกำร

1. Double Click ท Layout เพอสรำง Object แบบ Tile Background

2. คลกเครองมอ ยอ ขยำยภำพ

3. ก ำหนดขนำดภำพใหเหลอแค 100 x 100 pixel

4. คลกทป ม OK

~ 15 ~

5. ใชเครองมอวำดรปลงในพนทสเหลยม ปดหนำตำงกำรวำดรป

6. ใชเมำสยอ ขยำยภำพใหเตมพนททตองกำร

7. กดป ม F5 ทดสอบกำรท ำงำน

Layout ในโปรแกรม Construct2 เปรยบเทยบกบโปรแกรม Flash กคอ Scence หรอฉำก หรอจะมองเทยบกบ Powerpoint กเหมอน สไลด 1 แผน เรำสำมำรถทจะเปลยนชอหรอเพม Layout ได และในแต

ละ Layout จะม Layer ใหเรำเพม ลบ ซอน เลเยอรได ท ำใหงำยในกำรออกแบบงำน

คลกขวำเลอก Duplicate เพม Layout คลกขวำเลอก Rename เปลยนชอ Layout

~ 16 ~

ในเลเยอร เรำยงสำมำรถลงสใหกบเลเยอรไดดวย เลเยอรกเหมอนแผนใสมำซอนทบกน เลเยอร

ลำงสดจะอยต ำแหนง 0 เรำนยมใชท ำเปนฉำก Background

เปลยนชอ Layer

เปด/ปดการแสดง Layer

เปด/ปดลอก Layer

ลบ Layer เพม Layer

~ 17 ~

ทดสอบสรางเกมแนว Platform เกมแนว Platform หรอในมมมอง Side Scroll ตวอยำงเชน เกมมำรโอ ทเดน กระโดด เปนตน มวธ

ท ำงำยๆ ดงน 1. สรำง Object ตวละคร และพนส ำหรบเดน และพนทกระโดดไปยน

2. ท ำกำรก ำหนดพฤตกรรมหรอ Behavior ใหกบ Object ทเรำสรำง

- ก ำหนด Behavior ตวละคร ใหเปนแบบ Platform

~ 18 ~

- ก ำหนด Behavior ตวพน ใหเปนแบบ Solid

3. กดป ม F5 เพอรนทดสอบงำน

4. ใชป มลกศรกดเดนหนำ ถอยหลง ลกศรชขนส ำหรบกระโดด

~ 19 ~

การท าให Sprite หนหนาตามทศทางลกศรซาย ขวา ปกตเมอเรำสรำงตว Sprite ขนมำและก ำหนดพฤตกรรม Behavior ใหเปนแบบ Platform แลว เวลำ

ใชลกศรเลอนตว Sprite จะเหนวำหนไปทำงเดยวตลอด เรำมำฝกท ำให Sprite สำมำรถหนหนำไปตำมทศซำยขวำ ตำมลกศรทเรำกด

1. สรำง Sprite

2. ก ำหนด Behavior เปนแบบ Platform

3. ดบเบลคลกทพนทเพอเพม Object แบบ Keybord เขำมำ

~ 20 ~

4. ก ำหนดกำรท ำงำนใน Event Sheet คลกท add event เลอก Keyboard คลกทป ม Next จะม

keyboard ปรำกฏขนมำใน Projects

~ 21 ~

ใหเลอกค ำสง On key pressd จำกนนใหคลกป ม Next

~ 22 ~

~ 23 ~

5. จำกนนท ำแบบเดมอกครงเพอเลอกเปนลกศรซำย

6. กดป ม F5 ทดสอบกำรท ำงำน

~ 24 ~

ผลไมหลนอยางงาย ในตวอยำงน เรำจะลองฝกท ำผลไมหลนอยำงงำยๆ 1 ลกกอนและคอยฝกท ำแบบสมหลนลงมำ

หลำยๆ ลกในครำวถดไป ขนตอนท 1 แทรก Object แบบ Sprite แลววำดรปผลไมขนมำ 1 ลก

ขนตอนท 2 ก ำหนด Behavior ใหกบผลไม 2 อยำง คอ

2.1 แบบ Physics วตถจะเคลอนทแบบฟสกส

2.2 แบบ Destroy Outside Layout เพอลบ Object ออกจำกหนำจอเมอพนหนำจอไปแลว เพรำะถำไมลบ จะท ำใหมกำรท ำงำนตลอด เปนกำรสนเปลองหนวยควำมจ ำ

~ 25 ~

น ำผลไมไปวำงไวดำนขอบบนจอ จำกนนเลอก Behaviers กด + เลอก Physics กดป ม Add

~ 26 ~

การท าตะกรารบผลไม

กจกรรมนเรำจะมำท ำตะกรำส ำหรบเกบผลไมกน ซงตะกรำ จะเคลอนทไดแค 2 แนวเทำนน คอเลอนซำย ขวำ มำดวธกำรท ำ ขนตอนท 1 แทรก Object แบบ Sprite แลววำดรปตะกรำขนมำ 1 ถำด

ขนตอนท 2 ก ำหนด Behaviors ใหกบตะกรำแบบ 8Direction

~ 27 ~

ขนตอนท 3 ก ำหนดทศทำง ใหเคลอนทแคซำยกบขวำเทำนน

- Directions : Left & right

-

ขนตอนท 4 ก ำหนดมม Angle เปน No - Set angle : No

แลวรนทดสอบงำนกดป ม F5

~ 28 ~

การชนกน(Collision)ของ Object จำกกำรทเรำไดฝกสรำงผลไมและตะกรำมำแลว เรำลองมำท ำใหผลไมทหลนลงมำชนกนกบตะกรำ

โดยใชค ำสง Collision ขนตอนท 1 สรำงผลไมและตะกรำ(ดกจกรรมทผำนมำ) ขนตอนท 2 ก ำหนด Event ใหกบตะกรำ เมอมผลไมมำชน

ขนตอนท 3 ก ำหนดใหลบผลไมนนออกจำกหนำจอไป

~ 29 ~

~ 30 ~

เมอ ตะกรา ชนกบ ผลไม ให ผลไม หายไป

แลวกดป ม F5 รนทดสอบงำน

เมอชนกนแลวใหเพม Score และโชว Score เรำไดท ำกำรชนกนไดแลว เรำกมำท ำขนตอนเพมในสวนกำรแสดง Score ดงน

ขนตอนท 1 ท ำกำรเพม Object แบบ Text ไวส ำหรบแสดง Score

~ 31 ~

ขนตอนท 2 ก ำหนดตวแปร Score ใหมคำเรมตนเทำกบ 0

ขนตอนท 3 ก ำหนดเหตกำรณเพม Score

คลกเมาสขวาทวาง

แกไขจากค าวา Text ใหเปน 0

~ 32 ~

ขนตอนท 4 ก ำหนดใหแสดง Score ทอพเดทแลว

~ 33 ~

กดป ม F5 เพอทดสอบกำรชนแลวม Score แสดงคำออกมำ

เมอตะกรา ชนผลไม

ผลไมหายไป

เพมคะแนน 1 คะแนน

แสดงคะแนน

~ 34 ~

การทาใหผลไมหลนลงมาแบบสม

เมอผลไมชนกบตะกรำ กจะมคะแนนโชวขนหนำจอ แตผลไมจะหลนลงมำลกเดยวแลวหำยไปเลย ดงนนเรำจะมำท ำใหมผลไมหลนลงมำเรอยๆ ทกๆ 1 วนำท และสมต ำแหนงทตกลงมำจำกดำนบนดวย ขนตอนท 1 ใหเพม Event เปนแบบ System ก ำหนด Every x Seconds ก ำหนดเวลำทกๆ 1 วนำท คลกท Add event เลอกไปท System จำกนนคลกทป ม Next

เลอก ค ำสง Every X seconds จำกนนคลกท Next

ในชอง Interval (seconds) เปน 1.0

~ 35 ~

ขนตอนท 2 Add Action แบบ Creat object แลวเลอก ผลไม

ขนตอนท 3 ก ำหนดกำร random ในแกน x

~ 36 ~

กดป ม F5 เพอทดสอบงำน

การจบเวลาเลนเกม ผลไมทสมจะหลนลงมำเรอยๆ เรำจะมำก ำหนดเวลำในกำรเลนเกมวำ ใหผเลนเกบผลไมภำยในเวลำ

ทเรำก ำหนด เมอหมดเวลำแลวใหไปหนำจบเกม ขนตอนท 1 ใหท ำกำรเพม Layout หนำจบเกม(Game Over)ขนมำไวกอน

ขนตอนท 2 เพม Text ส ำหรบแสดงเวลำ

ทกๆ 1 วนาท ใหสรางผลไม สมมาปรากฏดานบนจอภาพ

~ 37 ~

ขนตอนท 3 ก ำหนดตวแปรเวลำ ในทนใชชอวำ MaxTime โดยก ำหนดคำเรมตนคอ 30 วนำท

แกไขค ำวำ Text เปนตน 30

ขนตอนท 4 เมอเรมเลนใหท ำกำรลดเวลำลงทละ 1 วนำท

คลกขวาทวาง

~ 38 ~

ขนตอนท 5 ตรวจสอบเงอนไขวำ ถำเวลำลดลงเทำกบ 0 แลว ใหไปหนำจบเกม

~ 39 ~

คลกขวาตรงทวาง

~ 40 ~

~ 41 ~

ภำพสรปกำรท ำงำนของโคดจบเวลำ

ขนตอนสดทำยคอ กดป ม F5 ท ำกำรทดสอบเกม

เมอเวลาหมด ใหไปทหนา Game Over