hyoromoのブログ

最近はVRSNS向けに作ったものについて書いています

Cocos2d-xでのEditBoxの使い方

f:id:hyoromo:20141217210659j:plain
Cocos2d-xにはテキスト入力を行うWidgetとして「EditBox」が用意されています。
iOSだとUITextField、AndroidだとEditTextに相当するWidgetとなります。
今回はこのWidgetの使い方について書きます。

出来る事

だいたいiOS/Androidにあるテキスト入力のWidgetと出来る事は同じです。

  • テキストを入力する
  • EditBox内に説明文を表示*1
  • EditBoxの画像設定。スケールも可
  • 入力文字数を制限
  • 文字入力タイプの制限*2
  • キーボードの決定ボタンの種類指定
  • フォント種類指定、フォント色指定、フォントサイズ指定
  • 入力開始/入力後の文字入力イベント取得
  • キーボードの決定ボタンが押下されたイベント取得

コード

設定している内容の意味に関してはメソッド名でおおよそ検討付くかと思いますので省略します。気になるようでしたら公式ドキュメントを参照ください。

.h
#include "extensions/cocos-ext.h"
using namespace ui;

class HogeClass : public Layer, public EditBoxDelegate
{
public:
    (略)

private:
    virtual void editBoxEditingDidBegin(EditBox *editBox);
    virtual void editBoxEditingDidEnd(EditBox *editBox);
    virtual void editBoxTextChanged(EditBox *editBox, const std::string& text);
    virtual void editBoxReturn(EditBox *editBox);
}
.cpp
auto editBox = EditBox::create(Size(100, 300), Scale9Sprite::create("image.png"));
editBox->setFont("font.ttf", 46.0f);
editBox->setPlaceHolder("ここに入力してください");
editBox->setPlaceholderFontColor(Color3B::BLACK);
editBox->setFontColor(Color3B::BLACK);
editBox->setMaxLength(100);
editBox->setText("初期設定文字");
editBox->setReturnType(EditBox::KeyboardReturnType::DONE);
editBox->setInputMode(EditBox::InputMode::ANY);
editBox->setDelegate(this);
this->addChild(editBox);
#pragma mark - EditBoxDelegate
void HogeClass::editBoxEditingDidBegin(EditBox *editBox) {
}

void HogeClass::editBoxEditingDidEnd(EditBox *editBox) {
}

void HogeClass::editBoxTextChanged(EditBox *editBox, const std::string& text) {
}

void HogeClass::editBoxReturn(EditBox *editBox) {
}

画面表示時に初期フォーカスの設定を行う

初期フォーカスをEditBoxに当ててソフトキーボードを起動させるには、画面表示されるタイミングで以下のコードで対応可能です。setFocusではソフトキーボードが起動しないため仕方なくtouchDownActionを呼ぶことにしています。

editBox->touchDownAction(NULL, cocos2d::ui::Widget::TouchEventType::ENDED);

*1:placeholderの事です

*2:キーボード種類の指定