โปรแกรม construct...
TRANSCRIPT
~ 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