![การ Drag and Drop รูปภาพ ด้วย Cocos2D บน iOS](https://www.daydev.com/wp-content/uploads/2012/11/cover-drag.png)
Tutorial การสร้างเกมบน iOS สำหรับ Game Developer มือใหม่ที่กำลังศึกษาการพัฒนาเกมผ่าน Cocos2D กับเทคนิคการลาก วางภาพกราฟิก (Drag and Drop) อย่างง่าย
![การ Drag and Drop รูปภาพ ด้วย Cocos2D บน iOS การ Drag and Drop รูปภาพ ด้วย Cocos2D บน iOS](https://www.daydev.com/wp-content/uploads/2012/11/cover-drag.png)
เริ่มต้นพัฒนาเกมบน iOS ด้วย Cocos2D กับการลาก และวางรูปภาพ
สร้าง New Project ขึ้นมาใหม่ เลือก Template เป็น Cocos2d Application ทำการตั้งชื่อ Project ใหม่ว่า “DragDrop”
![สร้าง New Project เป็น Cocos2D Application ตั้งชื่อว่า "DragDrop” สร้าง New Project เป็น Cocos2D Application ตั้งชื่อว่า "DragDrop”](https://www.daydev.com/wp-content/uploads/2012/11/Screen-shot-2012-11-09-at-11.40.50-PM.png)
เตรียมความพร้อมด้วยรูปภาพที่เราจะนำมาใช้งาน คือไฟล์ภาพนามสกุล .png ที่เป็นแบบ Transparent มา 4 ภาพ ขนาด ขนาดความกว้าง 70 พิกเซล และความสูง 65 พิกเซล ในตัวอย่างผมเลือกไฟล์ภาพมา 3 ภาพคือ “1.png”,”2.png”,”3.png”,”4.png” พร้อมด้วยภาพฉากหลังขนาด ความกว้าง 802 พิกเซล และความสูง 320 พิกเซล ชื่อว่า “bg.png”
![ภาพ PNG ที่เตรียมการไว้แล้ว แต่ละรูปขนาด 70x65 pixels ภาพ PNG ที่เตรียมการไว้แล้ว แต่ละรูปขนาด 70x65 pixels](https://www.daydev.com/wp-content/uploads/2012/11/Screen-shot-2012-11-09-at-11.35.25-PM-copy.png)
![ภาพ "bg.png” ที่เตรียมไว้เป็นฉากหลังขนาด 802x320 pixels ภาพ "bg.png” ที่เตรียมไว้เป็นฉากหลังขนาด 802x320 pixels](https://www.daydev.com/wp-content/uploads/2012/11/BGGame-copy.png)
ทำการ นำภาพทั้งหมดที่เตรียมมาแล้วไปยัดลงใน Folder ของเกมที่เราได้เตรียมไว้ เลือกเป็น “Copy items into destination group’s folder (if needed)” ให้เสร็จสรรพ
![วางภาพลงใน Project วางภาพลงใน Project](https://www.daydev.com/wp-content/uploads/2012/11/Screen-shot-2012-11-09-at-11.41.41-PM-copy.png)
ไปที่ไฟล์ HelloWorldLayer.h ทำการประกาศตัวแปรออกกลุ่มหนึ่งดังนี้ เหมือนตัวอย่าง
@interface HelloWorldLayer : CCLayer
{
CCSprite * background;
CCSprite * selSprite;
NSMutableArray * movableSprites;
}
// returns a CCScene that contains the HelloWorldLayer as the only child
+(CCScene *) scene;
@end
ต่อมาให้เข้าไปแก้ไขที่ไฟล์ HelloWorldLayer.m ในส่วนของฟังก์ชัน init() ให้ทำการเคลียร์คำสั่งเดิมออกให้หมดแล้วใส่คำสั่งใหม่ลงไปจากเดิมดังนี้
-(id) init {
if((self = [super init])) {
CGSize winSize = [CCDirector sharedDirector].winSize;
[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGB565];
background = [CCSprite spriteWithFile:@"bg.png"];
background.anchorPoint = ccp(0,0);
[self addChild:background];
[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_Default];
movableSprites = [[NSMutableArray alloc] init];
NSArray *images = [NSArray arrayWithObjects:@"1.png", @"2.png", @"3.png", @"4.png", nil];
for(int i = 0; i < images.count; ++i) {
NSString *image = [images objectAtIndex:i];
CCSprite *sprite = [CCSprite spriteWithFile:image];
float offsetFraction = ((float)(i+1))/(images.count+1);
sprite.position = ccp(winSize.width*offsetFraction, winSize.height/2);
[self addChild:sprite];
[movableSprites addObject:sprite];
}
}
return self;
}
เพื่อเป็นการจับ Layer ของตัวละคร "1.png” ถึง "4.png” มาวางทับบน Layer ของ "bg.png” หากลองทำการ "Run" แอพพลิเคชันดูจะได้ผลลัพธ์หน้าจอดังต่อไปนี้
![ลอง "Run” ตัวแอพพลิเคชันของเราดู ลอง "Run” ตัวแอพพลิเคชันของเราดู](https://www.daydev.com/wp-content/uploads/2012/11/Screen-shot-2012-11-12-at-1.21.19-AM.png)
เมื่อมีการเรียกใช้งาน Cocos2D ร่วมกับกราฟิกไปแล้วต่อมาเราต้องทำการ เคลียร์หน่วยความจำของเกมเสมอ ค้นหาฟังก์ชันคลาสของ dealloc() เมื่อพบแล้วให้แทรก คำสั่งต่อไปนี้ลงไป
- (void) dealloc
{
[movableSprites release];
movableSprites = nil;
[super dealloc];
}
ต่อมาให้เราลองทดสอบทำการ เช็คว่าถ้าเราเอานิ้วไปแตะที่ตัวกราฟิก แล้วจะเกิดแอนิเมชันให้มันขยับเล็กน้อย เราต้องแทรก คำสั่งตรวจสอบนี้ลงไปในฟังก์ชัน init() ก่อนที่จะปิดฟังก์ชันตำแหน่งนี้ครับ
[[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];
}
return self;
เพื่อเป็นการ ส่งค่าว่าเราได้แตะโดนตัวกราฟิกตัวไหน แล้วให้มันขยับ หรือสั่นเล็กน้อย โดยการเพิ่มฟังก์ชันใหม่ขึ้นมาใน HelloWorldLayer.m ดังนี้
- (void)selectSpriteForTouch:(CGPoint)touchLocation {
CCSprite * newSprite = nil;
for (CCSprite *sprite in movableSprites) {
if (CGRectContainsPoint(sprite.boundingBox, touchLocation)) {
newSprite = sprite;
break;
}
}
if (newSprite != selSprite) {
[selSprite stopAllActions];
[selSprite runAction:[CCRotateTo actionWithDuration:0.1 angle:0]];
CCRotateTo * rotLeft = [CCRotateBy actionWithDuration:0.1 angle:-4.0];
CCRotateTo * rotCenter = [CCRotateBy actionWithDuration:0.1 angle:0.0];
CCRotateTo * rotRight = [CCRotateBy actionWithDuration:0.1 angle:4.0];
CCSequence * rotSeq = [CCSequence actions:rotLeft, rotCenter, rotRight, rotCenter, nil];
[newSprite runAction:[CCRepeatForever actionWithAction:rotSeq]];
selSprite = newSprite;
}
}
เป็นคำสั่งในการ ตรวจสอบว่ามีการแตะหน้าจอโดนพิกัดที่มีตัวกราฟิก Layer วางอยู่หรือไม่ หากว่าแตะโดนให้คำสั่ง CCRotate ออกมาทำงานประมวลผลให้ภาพกราฟิกตัวการ์ตูน ส่ายไปมาเล็กน้อย เบาๆ แน่นอนว่าอย่าลืมสั่งให้มันทำงานหลังจากที่เราเอานิ้วออกจากหน้าจอแล้วด้วย คำสั่งนี้
- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint touchLocation = [self convertTouchToNodeSpace:touch];
[self selectSpriteForTouch:touchLocation];
return TRUE;
}
ทำการ "Run” ตัวแอพพลิเคชันแล้วลองเอามือไปแตะที่ตัวกราฟิกการ์ตูนดู
![แตะเบาๆ จะเห็นมันสั่นเบาๆ แตะเบาๆ จะเห็นมันสั่นเบาๆ](https://www.daydev.com/wp-content/uploads/2012/11/iOS-Simulator-Screen-shot-Nov-10-2012-12.01.28-AM.png)
ต่อมา เราต้องการที่จะเลื่อน ฉากหลัง ไปมาได้ ประกอบกับโยกย้ายตัวละครไปมาตำแหน่งต่างๆ ได้นั้นเราต้องใช้ฟังก์ชันดังต่อไปนี้ครับ
- (CGPoint)boundLayerPos:(CGPoint)newPos {
CGSize winSize = [CCDirector sharedDirector].winSize;
CGPoint retval = newPos;
retval.x = MIN(retval.x, 0);
retval.x = MAX(retval.x, -background.contentSize.width+winSize.width);
retval.y = self.position.y;
return retval;
}
- (void)panForTranslation:(CGPoint)translation {
if (selSprite) {
CGPoint newPos = ccpAdd(selSprite.position, translation);
selSprite.position = newPos;
} else {
CGPoint newPos = ccpAdd(self.position, translation);
self.position = [self boundLayerPos:newPos];
}
}
- (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event {
CGPoint touchLocation = [self convertTouchToNodeSpace:touch];
CGPoint oldTouchLocation = [touch previousLocationInView:touch.view];
oldTouchLocation = [[CCDirector sharedDirector] convertToGL:oldTouchLocation];
oldTouchLocation = [self convertToNodeSpace:oldTouchLocation];
CGPoint translation = ccpSub(touchLocation, oldTouchLocation);
[self panForTranslation:translation];
}
เป็นคำสั่งเบื้องต้นให้เราสามารถเลื่อนฉากหลังไปมาได้ในพิกัดที่ไม่เกิน ความกว้างของภาพที่เตรียมมาโดยจะแสดงผลแบ่งความกว้างจริงๆ แค่ 480 พิเซลเท่านั้น เช่นกันหากว่าเราทำการแตะที่ตัวกราฟิกของการ์ตูนในแอพพลิเคชันของเราแล้ว ให้ลอกจับลากตัวการ์ตูนของเราไปวางในที่ต่างๆ ดูจะเห็นว่าสามารถทำได้โดยง่าย
![ลากตัวละคร และเลื่อนฉากได้ ลากตัวละคร และเลื่อนฉากได้](https://www.daydev.com/wp-content/uploads/2012/11/iOS-Simulator-Screen-shot-Nov-10-2012-12.12.21-AM.png)
ในการพัฒนาแอพพลิเคชันกึ่งเกมผ่าน Cocos2D นั้นกับการเคลื่อนย้ายตัวกราฟิกไปมาอาจจะจบลงในส่วนนี้ เป็นการแนะนำให้ทำงานร่วมกับภาพกราฟิก และการเคลื่อนไหวที่เกิดขึ้นจากการระบุพิกัด และคืนค่าตำแหน่งของหน้าจอนั่นเอง
อยากได้ Source Code ดาวน์โหลดที่นี่ครับ! : http://code.google.com/p/daydev/downloads/detail?name=DragDrop.zip