cocos2dxのEditBoxで入力フォームを作成

ゲームが始まる前に名前入力画面がよく見るので、cocos2dxで作ってみた。

EditBox

cocos2dxの入力フォームほぼEditBoxという拡張ライブラリで簡単にできます。早速実装してみよう。ヘッダーファイルに

拡張ライブラリをinclude

#include "extensions/cocos-ext.h"

これがないと話が進みません。

EditBoxDelegateクラスを継承

class HelloWorld : public cocos2d::Layer, public cocos2d::extension::EditBoxDelegate

Delegateメソードを定義する

virtual void editBoxEditingDidBegin(cocos2d::extension::EditBox* editBox);
// インプットしはじめたら実行される

virtual void editBoxEditingDidEnd(cocos2d::extension::EditBox* editBox);
// インプット終了に実行される

virtual void editBoxTextChanged(cocos2d::extension::EditBox* editBox, const std::string& text);
// インプット中に実行される

virtual void editBoxReturn(cocos2d::extension::EditBox* editBox);
// returnを押したら実行される

定義終わったら、宣言します。下記の編集は全部cppファイルで行います。

EditBoxを追加

_input = EditBox::create(Size(400.0f,72.0f), Scale9Sprite::create("input.png"));
// Scale9Spriteって何？ソースコード書いてるが、簡単にいうと形が崩れないように特別用意したSprite、背景として扱えば良い。

_input->setPosition(Point(0.0,0.0));
_input->setFontName("HiraKaku-W3");
// 俺が大好きなヒラギノ
// フォントを設定しないと、下記のsetFontSize効かないので、ご注意を。

_input->setFontSize(32);
_input->setFontColor(Color3B(0,0,0));
// フォント色を設定しないと、真っ白です。

_input->setPlaceHolder("例：befool");
_input->setPlaceholderFontSize(32);
_input->setPlaceholderFontColor(Color3B(200, 200, 200));
_input->setDelegate(this);
// 重要、これがないとDelegateメーソドは実行されません。

追加完了したら、Delegeteメソードを宣言するのを忘れずに。使い方はメソードの定義をみればわかると思うので、詳しくはここで説明しません。

できたもの

cocos2dx EditBox 1

感想

cocos2dxのEditBoxはとても使いやすいです。しかもフォントが自由に指定するので、個性的なUIを作るにはすごい便利です。すこし不満なのは、入力エリアと背景は同じサイズになってるので、実際入力した文字はボックスの枠とくっつてるので、元デザイナーの俺は許しません。今回もEditBoxの背景Scale9Spriteを空画像にして、別レイアーでインプットボックス画像を作っています。