読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

「CCTextFieldTTF」と「CCEditBox」

Cocos2d-x

今回のエンジニアブログの筆者の中村です。

今日はcocos2d-xでテキスト入力する際に使用することになる「CCTextFieldTTF」と「CCEditBox」について書いてみようと思います。

※これはcocos2d-xのバージョン2.0.4での話です。


cocos2d-xでテキスト入力をしようとしてネットを調べると「CCTextFieldTTF」がヒットすることがほとんどだと思います。

しかし、この「CCTextFieldTTF」かなりのくせ者です。

まず、cocos2d-xのサンプルを動かしてみると。。。

☆文字変換ができない。
→”1文字入力するごとに確定してしまう”ので「なかむら」と入力しても漢字に変換できません。
 ひらがなを漢字に変換するような文化は日本だけなのでしょうか。。。(英語はもちろん、確かに中国語もハングル語も変換はしなさそう)

日本人が利用するには致命的なこの仕様。。。


この問題をどうしても解決できなかったので他にいいものはないかと探した結果「CCEditBox」が出てきました。

この「CCEditBox」であれば変換ができます!キーボードの種類も指定でき、パスワードモード(*で置換していく)も使える!PlaceHolderも設定できる!

いいことばかりかと思いきや、少し困ったことが。。。

☆Enable、Visibleが設定できない。

☆EditBox内に表示されている文字が常時一番上に表示されてしまう。(PlaceHolderも含む)
⇒zOrder値を変更しても効果がない。例)ダイヤログを上に重ねていてもEditBox内の文字だけがダイヤログの上に乗っかってくる。

☆縦向き⇔横向きにすると変な位置にずれる。

頑張って何とかしたいと思います。


まずEnable、Visibleですが、この問題はCCEditBox自体を改良すれば解決できそうでした。

手順①CCEditBox.h にsetVisibleとsetEnabledを宣言します
void setVisible(bool isVisible);
virtual void setEnabled(bool isEnable);

※CCEditBoxはCCControlButtonを継承していてCCControlButtonにsetEnabledが実装されているのでメソッド名をsetEnableにしてしまうと紛らわしいので注意!
※setEnabledは仮想関数としてオーバーライドしてあげます。

手順②CCEditBox.cppにsetVisibleとsetEnabledを実装します
void CCEditBox::setVisible(bool isVisible){
 CCControl::setVisible(isVisible);
 if (m_pEditBoxImpl != NULL){
  m_pEditBoxImpl->setVisible(isVisible);
    }
}

void CCEditBox::setEnabled(bool isEnable){
 CCControl::setEnabled(isEnable);
 if (m_pEditBoxImpl != NULL){
  m_pEditBoxImpl->setEnable(isEnable);
 }
}

※m_pEditBoxImpl(CCEditBoxImpl)はCCEditBox内で使われているラッパでCCEditBoxImplIOS.mm(Objective-C)をC++から操作しています

手順③EditBoxImplIOS.mmにsetVisibleとsetEnabledを実装します
- (void) setVisible:(BOOL)isVisible{
 textField_.hidden = (!isVisible);
}

- (void) setEnable:(BOOL)isEnable{
 textField_.enabled = isEnable;
}

以上で改造完了!

これでEnableとVisibleが効くようになりました!


次に「EditBox内の文字が常時一番上に表示されてしまう」問題ですが。。。現時点で解決方法が見つかっていないです。

仕方なく、ダイヤログを表示している場合などはVisibleをFalseにして対応しています。

対応方法をご存知の方がいらっしゃったら是非教えていただきたいです。m( )m


最後に「縦向き⇔横向きにすると変な位置にずれる」問題ですが、これはiPhoneのみの現象でAndroidでは発生しませんでした。

CCEditBoxImplIOS.mmのsetPositionにautoresizingMaskの設定を追記して対応しました。

-(void) setPosition:(CGPoint) pos{
 CGRect frame = [textField_ frame];
 frame.origin = pos;

 //テキストフィールドのマージンを固定する(縦横変化した時に動かないように設定)

 textField_.autoresizingMask =   UIViewAutoresizingFlexibleTopMargin;
 [textField_ setFrame:frame];
}


個人的にはCCEditBoxの方がCCTextFieldTTFよりも使い勝手がいいのではないかと感じました。

でもネットに載ってる情報はCCTextFieldTTFばかり。。。

CCEditBox頑張れ!!!!