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

フニゲの開発日記

Electronとか...

cc.EditBox

cocos2d-html5


 Cocos2d-html5ではキーボードから入力された文字列を扱うためにcc.TextFieldTTFとcc.EditBoxの2つのクラスがある。cc.TextFieldTTFはよく設計されている感じなのだが、どうもアカデミックというか、大卒のエリート的な印象のクラスだ。
 cc.EditBoxの方はいかにも現場の匂いがする、百戦錬磨のプログラマが開発中に必要に迫られて作った感じのクラスで、規約とか細かいことはいいからとにかく簡単に使えてちゃんと動くものが欲しいという思いが伝わってくる。

 ここではcc.EditBoxを使ってみる。
 cc.EditBoxを作るときは、背景に貼る画像を指定しなければいけない。背景に使うcc.Scale9Spriteの使い方については以前の記事を参照。

 画像は何でもよかったので、とりあえずImageMagickで適当に作った。

# 32x32の適当な画像を作成
$ convert -size 32x32 xc:#555 bg.png

 以前の記事でも書いたけど、先読みしておかないとScale9Spriteは何も表示してくれないので、resource.jsで必ず先読みしておくこと。

    var size = cc.Director.getInstance().getWinSize();

    // EditBox
    var bg = cc.Scale9Sprite.create("res/bg.png");
    var editBox = cc.EditBox.create(cc.size(200, 50), bg);
    editBox.setPosition(cc.p(size.width / 2, size.height / 2));
    editBox.setDelegate(this);
    this.addChild(editBox);

 ここではサンプルとして、入力した式を評価して出力する簡単な電卓を作ってみよう。まず結果を出力するラベルを用意する。

    // answer
    var answer = cc.LabelTTF.create("", "Arial", 32);
    answer.setPosition(cc.p(size.width / 2, size.height / 2 - 100));
    this.addChild(answer);
    this.answer = answer;

 EditBoxの内容が変化したときは、setDelegateで指定したオブジェクト(this)にメッセージが送られる。

    // cc.EditBoxDelegate

    editBoxReturn:function (sender) {
        this.answer.setString(eval(sender.getText()));
    },

f:id:funige:20131213181712p:plain

 これだけでちゃんとEditBoxの位置がタップされたかどうか調べて、タップされたらキーボードを表示してくれる。便利すぎて気味が悪いぐらいだ。

サンプルはこちら。

広告を非表示にする