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

WonderPlanet DEVELOPER BLOG

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

CCEditBoxの様々なキーボード

Cocos2d-x

はじめまして、エンジニアブログを記事を担当させて頂きます、新卒の加藤です。

今回はCocos2dxでテキストボックスとして使える「CCEditBox」の、キーボードの紹介をしていきたいと思います。

日本語入力にも対応しているこのCCEditBoxですが、例えばパスワードを入力させるシーンや、招待コードの入力など、日本語がボックス内に打ち込めてしまうと逆に困ること、あると思います。

ユーザーに文字を入力させた後、テキスト内に入力されたものが日本語なのか、そうじゃないのかの判定処理を記述して、不適切な文字があればエラー処理を走らせるように作る…のもいいのですが、それはちょっと面倒…。
なによりそもそも想定外の文字を打ち込めてしまう作りはセーフティではありません。

そんなときに便利なのが、「setInputMode」メソッドです。
以下のようにEditBox生成部分にコードを追加すると、入力に使うキーボードタイプを指定することができます。

m_pEditTest = cocos2d::extension::CCEditBox::create(CCSizeMake(350, 40), cocos2d::extension::CCScale9Sprite::create(("Background_TestEdit.png")));
m_pEditTest->setFontColor(ccBLACK);
m_pEditTest->setPlaceholderFontColor(ccWHITE);
m_pEditTest->setPlaceHolder("テキスト入力欄");
m_pEditTest->setMaxLength(8);

//キーボードの入力タイプを設定
m_pEditTest->setInputMode(cocos2d::extension::※ここにパラメータ);
  
m_pEditTest->setReturnType(cocos2d::extension::kKeyboardReturnTypeDone);
m_pEditTest->setDelegate(this);
m_pEditTest->setPosition(ccp(getContentSize().width / 2, getContentSize().height / 2));
this->addChild(m_pEditTest, 2);

「setInputMode」には以下のようなパラメータが設定できます。

■kEditBoxInputModeAny

日本語を含む、あらゆるテキストの入力を許容し、改行も可能です。
※setInputModeを記述していない場合、デフォルトとしてこのパラメータが設定されます。

A_01 A_02 A_03

■kEditBoxInputModeSingleLine

日本語を含む、あらゆるテキストの入力を許容する点は「kEditBoxInputModeAny」と同じですが、改行はできません。

B_01 B_02 B_03

■kEditBoxInputModeEmailAddr

半角英数のみが入力可能で、記号の表示もE-MAILの入力を想定し、「kEditBoxInputModeAny」とは微妙に異なったものになっています。

C_01 C_02 C_03

■kEditBoxInputModeNumeric

キー配置はkEditBoxInputModeAnyと同一のものですが、テキストボックスをタップしたとき、最初に表示されるキー配置が数字になります。

D_01 D_02D_03

■kEditBoxInputModePhoneNumber

電話をかける時に使用するキーボードと同じ物が表示されます。
なお、「pause」は「,」「wait」は「;」となります。

E_01E_02

■kEditBoxInputModeDecimal

パラメータ名の通り、URLの入力に特化したキーボード。
どのキーボードに切り替えても使用頻度の高い「.」「/」「.com」が常に表示されています。

F_01 F_02F_03

■kEditBoxInputModeDecimal

ご覧の通り、数字と「.」のみが入力可能で、英数/数字の切り替えはありません。

G_01

このメソッドが使えるシーンとして、先ほど挙げた例のようにパスワード入力をさせる場合、「kEditBoxInputModeDecimal」を指定すれば、ユーザーは数字しか打ち込めなくなります。
また、シーンにあったキーボードを設定することで入力が楽になり、ユーザーライクなアプリに近づきます。

これらを活用してより良いCCEditBoxライフを!