GUI's and Text Input with Cocos2D-js

GUI's and Text Input with Cocos2D-js

Postby BenChang » Sun Oct 05, 2014 10:21 am

Cocos2D has several different ways of doing UI. Here are two different ways of doing a text input box.

This code creates a button and a text field using cc.ControlButton and cc.TextFieldTTF.

ControlButton uses a cc.Label for its text and a cc.Sprite for its background. Here I use cc.Scale9Sprite, which is a special kind of sprite that scales nicely, so it auto-resizes to the size of the text label.

I also set an optional sprite for the highlighted, or pressed, state.

"Marker Felt" is a custom font, MarkerFelt.ttf, which is stored in the res/ subdirectory.

There are two event handlers. onMouseUp is a general event handler for the whole layer; it checks to see if you've clicked (or touched) in the text area. attachWithIME() and detachWithIME() handle focus on the text area.

ButtonClicked is attached to the button. this.textField.getString() returns the current string in the text field.

Method 1: cc.TextFieldTTF
Code: Select all
var ControlsTestLayer = cc.Layer.extend ({
   onEnter:function ()
   {
      this._super();
      var label = new cc.LabelTTF("Click Me","Marker Felt",24);
      
      var buttonSprite = new cc.Scale9Sprite(res.button);
      var buttonSpriteHighlighted = new cc.Scale9Sprite(res.buttonHighlighted);

      var button1 = new cc.ControlButton (label,buttonSprite);
      button1.setBackgroundSpriteForState(buttonSpriteHighlighted, cc.CONTROL_STATE_HIGHLIGHTED);

      this.addChild(button1);

      button1.setPosition(400,100);
      
      button1.addTargetWithActionForControlEvents(this, this.buttonClicked, cc.CONTROL_EVENT_TOUCH_UP_INSIDE);

      // create a textField

      this.textField = new cc.TextFieldTTF ("Enter Text Here", cc.size(200,50), cc.TEXT_ALIGNMENT_CENTER,"Marker Felt", 24);
      this.addChild(this.textField);
      
      this.textField.setPosition(400,200);

      cc.eventManager.addListener({
                event: cc.EventListener.MOUSE,
                onMouseUp: function(event) { event.getCurrentTarget().onMouseUp(event); }
            }, this);
   },
   
   buttonClicked:function (sender, controlEvent) {
        var s = this.textField.getString();
        var t = this.textField.getContentText();
        var p = this.textField.getPlaceHolder();
       
        cc.log ("string: " + s + " ContentText: " + t + " placeholder: " + p);
    },
   
   onMouseUp:function(event){
      var point = event.getLocation();
      var rect = this.textField.getBoundingBox();
      console.log("onMouseUp");
      console.log(point);
      console.log(rect);
      
      if (cc.rectContainsPoint(rect,point)) {
         console.log("Clicked in the text field");
         this.textField.setPlaceHolder("");
         this.textField.attachWithIME();
      }
      else
      {
         console.log("Clicked out of the text field");
         this.textField.detachWithIME();
      }
   }
   
});
User avatar
BenChang
 
Posts: 176
Joined: Mon Jan 17, 2011 4:48 pm

Re: GUI's and Text Input with Cocos2D-js

Postby BenChang » Sun Oct 05, 2014 10:25 am

Method 2: ccui.Button and ccui.TextField

The CocosUI library has an additional set of widgets that can be a little easier to use than the standard controls in the cc.* library.

To use these you must first add the ccui module to your project.json file:

Code: Select all
{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : false,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d","ccui"],

    "jsList" : [
        "src/resource.js",
        "src/app.js"
    ]
}


The nice thing about the CCUI text field is that it handles touch/click focus automatically. This code creates a button, a label, and a text field. No event listeners have to be added to the text field to make it work, you just have to call setTouchEnabled(true).

We add an event listener to the button, which then gets the current string in the edit field and displays it in the label.

Code: Select all
var UITestLayer = cc.Layer.extend({
   onEnter:function() {
      this._super();
      var button = new ccui.Button();
      button.loadTextures(res.button2,res.button2pressed);
      button.setTitleText("Click Me");
      button.setTitleFontName("Marker Felt");
      button.setPosition(400,100);
      button.setTouchEnabled(true);
      button.addTouchEventListener (this.touchEvent,this);
      this.addChild(button);
      
      this.label = new cc.LabelTTF("A text label");
      this.label.setPosition(400,400);
      this.addChild(this.label);
      
      var tf = new ccui.TextField();
      this.textField=tf
      
      tf.setTouchEnabled(true);
      tf.setFontName("Marker Felt");
      tf.setFontSize(16);
      tf.setPlaceHolder("input text here");
      tf.setPosition(400,200);
      this.addChild(tf);
   },
   touchEvent:function (sender,type){
       switch (type) {
            case ccui.Widget.TOUCH_BEGAN:
                this.label.setString(this.textField.getString());
                break;
            case ccui.Widget.TOUCH_MOVED:
                break;
            case ccui.Widget.TOUCH_ENDED:
                break;
            case ccui.Widget.TOUCH_CANCELED:
                break;
            default:
                break;
        }
   }

});
User avatar
BenChang
 
Posts: 176
Joined: Mon Jan 17, 2011 4:48 pm


Return to Game Development

Who is online

Users browsing this forum: No registered users and 1 guest

cron