在Cocos2d加入UIView

想當初剛接觸iPhone開發時，對UIKit是一翹不通，又是frame又是bounds的，搞的我一整個很挫折。後來因緣際會看到Cocos2d，只要sprite、center和addchild就幾乎搞定所有的畫面呈現，結果UIKit就被我放棄，改玩Cocos2d了。

Cocos2d雖然在畫面呈現上很方便很強大，但並不是什麼事情都用cocos2d做是最好的。有時候靠著UIKit裡內建的元件，我們可以很簡單的達成需要的工作。比方說，在遊戲裡，過關後要玩家輸入姓名，可以用UITextField。

UITextField不但提供了輸入的畫面，連鍵盤都幫你準備好了。Cocos2d再怎麼強大，應該也沒有人想要自己coding一個鍵盤出來吧？

另外有時候需要玩家輸入生日或進行選擇時，UIKit裡也提供了UIPickerView這個元件。

預設的元件，對使用者來說會有一種熟悉感，程式設計師也不用花太多腦筋在介面的呈現上。

這次我們就以UITextField為例，來看看怎麼在cocos2d的畫面上加入UIView吧！什麼？很簡單？cocos2d官網有教？ㄟ….被發現了，不過該講的還是要講，而且你確定官網上沒有漏掉什麼東西嗎？

既然很簡單，我們就來操作一次看看。首先，建立一個新的cocos2d專案。好了以後點選Build & Go確認所有設定運作正常。

“Hello World"，好的，沒有什麼問題。

接著在HelloWorldScene.m裡的- init下加入以下程式，建立一個新的UITextField。

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(50, 50, 200, 40)];
textField.borderStyle = UITextBorderStyleRoundedRect;


然後，剛剛說很簡單的那個，來來來，說看看怎麼把uiview加到cocos2d的畫面裡。

[[[CCDirector sharedDirector] openGLView] addSubview:textField];

這樣對吧？很簡單吼～那來跑看看～

啊不是很簡單＝　＝
這是什麼情形？擺成直的就算了，鍵盤跳出來還擋住輸入畫面是怎麼回事？
官網教歸教，但沒仔細說明橫向遊戲遇到uiview時該怎麼處理。

來來來，看這邊，在addSubview之前，我們要把textField作一點點的調整，輸入：

textField.transform = CGAffineTransformMakeRotation(M_PI * (90.0 / 180.0));

這會讓textField順時針旋轉九十度。還沒有完，因為cocos2d和UIKit的座標原點不一樣，有時在調整uiview的位置時真的會想殺人。還好cocos2d提供了簡單的函式幫我們進行轉換，輸入：

textField.center = [[CCDirector sharedDirector]　convertToUI:ccp(240, 250)];

convertToUI後面輸入的位置是以cocos2d原點在左下角的座標為依據，所以就螢幕上看到的，x=240是橫向螢幕的中心，y=100則是由螢幕下方往上250 pixel的位置。利用上述的函式，我們可以很輕易的把cocos2d裡的位置轉換給uiview。

現在再來看一下執行結果

如何？看著cocos2d和UIView完美的結合在一起，感覺還不賴吧^^

對了，上次有網友提到希望再看到一些遊戲的教學，不過小弟課業工作兩頭忙，要挪出時間來寫一篇豐富的教學實在有點困難。不知道大家還希望看到哪部份的教學，如果有空，我會盡力。

倒是我很佩服http://www.raywenderlich.com/的作者，同樣是iphone開發者，工作之餘還可以花時間寫那麼多長篇的教學。哪天應該寫信去請教他，是否可以讓我把他的文章翻譯後放在我的部落格，這樣以後自己要找資料方便，大家也看的開心。