在Cocos2d中使用touch event

最近網友的回應讓我想到，教學寫了那麼多，好像還沒教過怎麼處理觸控事件。實在是天大的疏忽，這個教學應該在早早之前就寫了說。iPhone唯一能讓使用者輸入的介面就是那一大片的觸控螢幕，如果一個iPhone app沒有觸控功能，那還搞屁啊？今天我們就來看看如何在程式裡處理觸控事件。

如果你已經看過其他iPone SDK的相關書籍，大概會知道，iPhone的觸控主要由三個函式方法負責：

﹣(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;

﹣(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;

﹣(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

基本上看到函式的名稱就可以知道它所對應的功能。當使用者第一次按下螢幕時，touchesBegan的方法就會被觸發。如果使用者開啟移動，touchesMoved裡的程式便會被執行。最後一個touchesEnded就是當手指離開螢幕時要會觸發的函式。

這三個函式並沒有順序性的關係，也不需要三個函式的內容都寫，完全取決於這個app遇到對應的觸控事件時該怎麼處理對應的動作。

重點來了，如果你在cocos2d的CCLayer裡寫入這三個函式方法，是一點用處也沒有的，因為cocos2d有自己的觸控事件函式。但是也不用太擔心，基本上沒有什麼困難的地方，只不過就是在上述三個函式的名稱前加入cc兩個字而已：

﹣(void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;

﹣(void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;

﹣(void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

至於為什麼要改名字，A兜。。。這個老實說我也不是很清楚，只能告訴你因為cocos2d並沒有直接繼承UIKit的類別，所以很多protocol都得重新稍微定義一下才行，大概是這個樣子。

好了，廢話不多說，來寫程式。這一次的程式目的是建立一個CCSprite物件，使用者可以觸碰這個物件並移動它，當使用者的手指離開螢幕後，物件會回到螢幕中心的位置。

前置作業就不再重覆了，開啟一個cocos2d專案，在HelloWorldScene.h裡的大括內加入

CCSprite *touchIcon;

接著到HelloWorldScene.m裡，把- (init)的部份改為下列程式碼：

-(id) init　{
// always call “super” init
// Apple recommends to re-assign “self” with the “super” return value
if( (self=[super init] )) {

self.isTouchEnabled = YES;

touchIcon = [CCSprite spriteWithFile:@"Icon.png"];
[touchIcon setPosition:ccp(240,160)];
[touchIcon setOpacity:100];
[self addChild:touchIcon];
}
return self;
}

這裡比較重要的大概就是self.isTouchEnabled = YES這行，主要功能就是把接收觸控事件的功能打開，這樣等等加入的觸控函式才能發揮功用。剩下就只是touchIcon這個物件的一些相關設定，這次比較偷懶，連圖檔都不附了，反正cocos2d模版裡就有圖檔，我們就直接拿來用，省去大家還要下載的麻煩。

接著就是今天的重頭戲了，我們要加入負責接收觸控事件的三個函式。將下列程式碼加到HelloWorldScene.m裡：

- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
location = [[CCDirector sharedDirector] convertToGL:location];

CGRect rect = CGRectMake(touchIcon.position.x -
touchIcon.contentSize.width/2, touchIcon.position.y -
touchIcon.contentSize.height/2,
touchIcon.contentSize.width, touchIcon.contentSize.height);

if (CGRectContainsPoint(rect, location)) {
[touchIcon setOpacity:255];
}
}

- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
location = [[CCDirector sharedDirector] convertToGL:location];

CGRect rect = CGRectMake(touchIcon.position.x -
touchIcon.contentSize.width/2, touchIcon.position.y -
touchIcon.contentSize.height/2,
touchIcon.contentSize.width, touchIcon.contentSize.height);

if (CGRectContainsPoint(rect, location)) {
[touchIcon setPosition:location];
}
}

- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
location = [[CCDirector sharedDirector] convertToGL:location];

CGRect rect = CGRectMake(touchIcon.position.x -
touchIcon.contentSize.width/2, touchIcon.position.y -
touchIcon.contentSize.height/2,
touchIcon.contentSize.width, touchIcon.contentSize.height);

if (CGRectContainsPoint(rect, location)) {
[touchIcon runAction:[CCMoveTo actionWithDuration:0.5 　　　　　　　　　　　　position:ccp(240,160)]];
[touchIcon setOpacity:100];
}
}

這三個函式的結構大同小異，所以這裡就將相同的部份統一說明。

首先看到的是

UITouch *myTouch = [touches anyObject];
CGPoint location = [myTouch locationInView:[myTouch view]];
location = [[CCDirector sharedDirector] convertToGL:location];

我們先建立一個UITouch物件myTouch，它的內容來自於touches。接著我們用locationInView這個方法從myTouch中取出觸碰的位置。最後一行相當重要，因為myTouch傳回的位置所用的座標原點是在螢幕左上角，但在cocos2d中所使用的座標原點則是在螢幕左下角，所以cocos2d提供了這個簡便的方法讓我們轉換兩者間的關係。這一步一定要記得做，不然到時觸控起來會很奇怪。

接著程式建立了一個CGrect，

CGRect rect = CGRectMake(touchIcon.position.x – touchIcon.contentSize.width/2, touchIcon.position.y – touchIcon.contentSize.height/2,　touchIcon.contentSize.width, touchIcon.contentSize.height);

這是由Core Graphic所定義的矩形結構，我們用CGRectMake這個C語言函式來建立它。參數依序是矩形左下角的x和y值，以及矩形的寬和高。我們建立的這個大小就是touchIcon的範圍，有了這個範圍，我們再利用CGRectContainsPoint這個函式來判斷這個矩形是否有包函觸碰的位置。如果有，代表使用者按到這個圖形了，我們再依觸碰事件的種類來執行對應的動作，包括：

ccTouchesBegan：使用者第一次按到touchIcon，把圖檔的透明度調成255（即不再半透明）。

ccTouchesMoved：使用者開始移動手指，設定touchIcon的位置為手指移到的位置點。

ccTouchesEnded：使用者手指離開螢幕，此時令touchIcon執行回到中心點的動作，並將圖檔調回半透明。

趕快run一下你的程式，操作起來應該會下面的影片一樣。基本的觸控事件處理大概就是這麼一回事，是不是很簡單呢？