Home / Developer  / Game Development  / 2D Game Development  / iOS Game Developer Tutorial: การ Drag and Drop รูปภาพด้วย Cocos2d

iOS Game Developer Tutorial: การ Drag and Drop รูปภาพด้วย Cocos2d

การ Drag and Drop รูปภาพ ด้วย Cocos2D บน iOS

Tutorial การสร้างเกมบน iOS สำหรับ Game Developer มือใหม่ที่กำลังศึกษาการพัฒนาเกมผ่าน Cocos2D กับเทคนิคการลาก วางภาพกราฟิก (Drag and Drop) อย่างง่าย

การ Drag and Drop รูปภาพ ด้วย Cocos2D บน iOS

การ Drag and Drop รูปภาพ ด้วย Cocos2D บน iOS

เริ่มต้นพัฒนาเกมบน iOS ด้วย Cocos2D กับการลาก และวางรูปภาพ

สร้าง New Project ขึ้นมาใหม่ เลือก Template เป็น Cocos2d Application ทำการตั้งชื่อ Project ใหม่ว่า “DragDrop”

สร้าง New Project เป็น Cocos2D Application ตั้งชื่อว่า "DragDrop”

สร้าง New Project เป็น Cocos2D Application ตั้งชื่อว่า “DragDrop”

เตรียมความพร้อมด้วยรูปภาพที่เราจะนำมาใช้งาน คือไฟล์ภาพนามสกุล .png ที่เป็นแบบ Transparent มา 4 ภาพ ขนาด ขนาดความกว้าง 70 พิกเซล และความสูง 65 พิกเซล ในตัวอย่างผมเลือกไฟล์ภาพมา 3 ภาพคือ “1.png”,”2.png”,”3.png”,”4.png” พร้อมด้วยภาพฉากหลังขนาด ความกว้าง 802 พิกเซล และความสูง 320 พิกเซล ชื่อว่า “bg.png”

ภาพ PNG ที่เตรียมการไว้แล้ว แต่ละรูปขนาด 70x65 pixels

ภาพ PNG ที่เตรียมการไว้แล้ว แต่ละรูปขนาด 70×65 pixels

ภาพ "bg.png” ที่เตรียมไว้เป็นฉากหลังขนาด 802x320 pixels

ภาพ “bg.png” ที่เตรียมไว้เป็นฉากหลังขนาด 802×320 pixels

ทำการ นำภาพทั้งหมดที่เตรียมมาแล้วไปยัดลงใน Folder ของเกมที่เราได้เตรียมไว้ เลือกเป็น “Copy items into destination group’s folder (if needed)” ให้เสร็จสรรพ

วางภาพลงใน Project

วางภาพลงใน Project

ไปที่ไฟล์ HelloWorldLayer.h ทำการประกาศตัวแปรออกกลุ่มหนึ่งดังนี้ เหมือนตัวอย่าง

ต่อมาให้เข้าไปแก้ไขที่ไฟล์ HelloWorldLayer.m ในส่วนของฟังก์ชัน init() ให้ทำการเคลียร์คำสั่งเดิมออกให้หมดแล้วใส่คำสั่งใหม่ลงไปจากเดิมดังนี้

เพื่อเป็นการจับ Layer ของตัวละคร “1.png” ถึง “4.png” มาวางทับบน Layer ของ “bg.png” หากลองทำการ “Run” แอพพลิเคชันดูจะได้ผลลัพธ์หน้าจอดังต่อไปนี้

ลอง "Run” ตัวแอพพลิเคชันของเราดู

ลอง “Run” ตัวแอพพลิเคชันของเราดู

เมื่อมีการเรียกใช้งาน Cocos2D ร่วมกับกราฟิกไปแล้วต่อมาเราต้องทำการ เคลียร์หน่วยความจำของเกมเสมอ ค้นหาฟังก์ชันคลาสของ dealloc() เมื่อพบแล้วให้แทรก คำสั่งต่อไปนี้ลงไป

ต่อมาให้เราลองทดสอบทำการ เช็คว่าถ้าเราเอานิ้วไปแตะที่ตัวกราฟิก แล้วจะเกิดแอนิเมชันให้มันขยับเล็กน้อย เราต้องแทรก คำสั่งตรวจสอบนี้ลงไปในฟังก์ชัน init() ก่อนที่จะปิดฟังก์ชันตำแหน่งนี้ครับ

เพื่อเป็นการ ส่งค่าว่าเราได้แตะโดนตัวกราฟิกตัวไหน แล้วให้มันขยับ หรือสั่นเล็กน้อย โดยการเพิ่มฟังก์ชันใหม่ขึ้นมาใน HelloWorldLayer.m ดังนี้

เป็นคำสั่งในการ ตรวจสอบว่ามีการแตะหน้าจอโดนพิกัดที่มีตัวกราฟิก Layer วางอยู่หรือไม่ หากว่าแตะโดนให้คำสั่ง CCRotate ออกมาทำงานประมวลผลให้ภาพกราฟิกตัวการ์ตูน ส่ายไปมาเล็กน้อย เบาๆ แน่นอนว่าอย่าลืมสั่งให้มันทำงานหลังจากที่เราเอานิ้วออกจากหน้าจอแล้วด้วย คำสั่งนี้

ทำการ “Run” ตัวแอพพลิเคชันแล้วลองเอามือไปแตะที่ตัวกราฟิกการ์ตูนดู

แตะเบาๆ จะเห็นมันสั่นเบาๆ

แตะเบาๆ จะเห็นมันสั่นเบาๆ

ต่อมา เราต้องการที่จะเลื่อน ฉากหลัง ไปมาได้ ประกอบกับโยกย้ายตัวละครไปมาตำแหน่งต่างๆ ได้นั้นเราต้องใช้ฟังก์ชันดังต่อไปนี้ครับ

เป็นคำสั่งเบื้องต้นให้เราสามารถเลื่อนฉากหลังไปมาได้ในพิกัดที่ไม่เกิน ความกว้างของภาพที่เตรียมมาโดยจะแสดงผลแบ่งความกว้างจริงๆ แค่ 480 พิเซลเท่านั้น เช่นกันหากว่าเราทำการแตะที่ตัวกราฟิกของการ์ตูนในแอพพลิเคชันของเราแล้ว ให้ลอกจับลากตัวการ์ตูนของเราไปวางในที่ต่างๆ ดูจะเห็นว่าสามารถทำได้โดยง่าย

ลากตัวละคร และเลื่อนฉากได้

ลากตัวละคร และเลื่อนฉากได้

ในการพัฒนาแอพพลิเคชันกึ่งเกมผ่าน Cocos2D นั้นกับการเคลื่อนย้ายตัวกราฟิกไปมาอาจจะจบลงในส่วนนี้ เป็นการแนะนำให้ทำงานร่วมกับภาพกราฟิก และการเคลื่อนไหวที่เกิดขึ้นจากการระบุพิกัด และคืนค่าตำแหน่งของหน้าจอนั่นเอง

อยากได้ Source Code ดาวน์โหลดที่นี่ครับ! : http://code.google.com/p/daydev/downloads/detail?name=DragDrop.zip

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

POST A COMMENT