Home / Developer  / Game Development  / Article for Gamer  / เริ่มต้นทดสอบการพัฒนาเกมด้วย Cocos Code IDE ด้วย JS Framework

เริ่มต้นทดสอบการพัฒนาเกมด้วย Cocos Code IDE ด้วย JS Framework

บทเรียนเริ่มต้นสำหรับการพัฒนาเกมด้วย JS Framework ร่วมกับ Cocos Code IDE สำหรับทดสอบเกมที่ใช้งานได้จริง และ Feature แต่ละตัวของ Cocos Code IDE ครับ

โฆษณา

จากบทความก่อนหน้าแนะนำการใช้งาน Cocos Code IDE (อ่านได้ที่: พัฒนาเกมบน Mobile กับเครื่องมือ Cocos Code IDE) คราวนี้จะพามาทดสอบกันหน่อยว่ามันใช้งานง่ายหรือไม่ ในตัวอย่างนี้ผมจะเน้นที่ Javascript Framework ก่อน Lua นะครับ

ให้ไปดาวน์โหลด Framework Javascript ก่อนที่ http://www.cocos2d-x.org/filedown/cocos2d-js-v3.0.zip หรือถ้าจะเตรียมพร้อม Lua ก็ดาวน์โหลด ต่อด้วยนี่เลยก็ได้  http://www.cocos2d-x.org/filedown/cocos2d-x-3.2.zip

Screen Shot 2557-09-23 at 10.34.12 PM

เปิดตัว Cocos Code IDE ขึ้นมา สร้าง New Project เลือก Path สำหรับ Framework ตัวอย่างผมแตก Zip File ของ Javascript Framework ไว้สักที่ของเครื่อง ก็ให้ชี้ Path ไปที่นั่นครับ ก็จะสร้าง โปรเจ็คได้ทันที

Screen Shot 2557-09-23 at 10.34.23 PM

สร้าง Cocos Javascript Project ขึ้นมา เหมือนสร้าง Project ของ Android บน eClipse เลยครับหลายคนคงคุ้นกันดีแน่ๆ ถ้าเคยเขียน Android

Screen Shot 2557-09-23 at 10.34.31 PM

ตั้งชื่อ Project

Screen Shot 2557-09-23 at 10.34.49 PM

เลือก แนวตั้ง หรือแนวนอนของ Project เกมของเรา

เลือก Simulator ของเราให้เรียบร้อย

เลือก Simulator ของเราให้เรียบร้อย

การเริ่มต้นเขียน Project เราจะสามารถเลือก Portrait ของหน้าจอ ไปจนถึง Emulator สำหรับทดสอบ Project ครับ

Screen Shot 2557-09-23 at 10.36.08 PM

ลอง Run Code ตัวอย่างดู

ให้คุณลองทำการ Run ตัว Code ตัวอย่าง ไฟล์ทำงานหลังอยู่ที่ Main.js

เวลาทำการ Run ให้ทำตามขั้นตอนนี้นะครับ เราจะสามารถเลือกได้ว่าจะ Run จากเครื่องมือจำลองตัวไหน ถ้านึกไม่ออกก็เลือก JSBinding พื้นฐานของเครื่องหรือเว็บไซต์เลยก็ได้ครับ

Screen Shot 2557-09-23 at 10.36.19 PM

เลือกตั้งค่าการ Run ได้ตามนี้

Screen Shot 2557-09-23 at 10.36.36 PM

เลือกได้ตามใจ

ทดสอบการ Run ของผมผ่าน Mac OSX ผ่าน RunTime

Screen Shot 2557-09-23 at 10.37.21 PM

ทีนี้ลองไปหาภาพ มาสักภาพตัวอย่างผมคือ duck.png หรือภาพเป็ด นำไปวางใน Folder ของ Project/res หรือ Folder ชื่อ “res” ครับ

Screen Shot 2557-09-23 at 10.44.30 PM

วางเป็ดลงไปนะอ้ายเจ็ดเป็ด

คราวนี้ก็เป็น Code ของผมเองในการ Add Sprite ลงในไฟล์ Main.js

แล้วลองทำการ Run อีกครั้ง

Screen Shot 2557-09-23 at 10.37.31 PM

ผลลัพธ์ที่ได้ก็จะเป็นดังนี้ครับ

Screen Shot 2557-09-23 at 10.37.55 PM

ไม่ยากไม่ง่าย ขอให้มีพื้นฐาน Javascript และ Cocos-2D มาก่อนก็ไม่น่าจะมีปัญหาอะไรครับ ลองทำกันดู

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: