UITextField Example in Cocos2d

Question

Can anyone please suggest some links for using UITextField in cocos2d. I want to press on label, then the UITextField should get selected and I need to edit on that UITextField.

Answer 1

I'm doing this in a current project to allow for entering the number of the level to start playing at, so that's why my variables and methods are named the way they are; you should probably adjust these to make sense for you.

In your app controller, define this as an instance variable:

  UITextField *levelEntryTextField;

Create it inside applicationDidFinishLaunching:

  levelEntryTextField = [[UITextField alloc] initWithFrame:
                                              CGRectMake(60, 165, 200, 90)];
  [levelEntryTextField setDelegate:self];

Define a method to activate the text field. You should also declare it in the header file for your app controller.

- (void)specifyStartLevel
{
    [levelEntryTextField setText:@""];
    [window addSubview:levelEntryTextField];
    [levelEntryTextField becomeFirstResponder];    
}

This will make pressing "return" on the keypad end editing

- (BOOL)textFieldShouldReturn:(UITextField*)textField {
  //Terminate editing
  [textField resignFirstResponder];
  return YES;
}

This is triggered when the editing is actually done.

- (void)textFieldDidEndEditing:(UITextField*)textField {
    if (textField==levelEntryTextField) {
        [levelEntryTextField endEditing:YES];
        [levelEntryTextField removeFromSuperview];
        // here is where you should do something with the data they entered
        NSString *result = levelEntryTextField.text;
    }
}

Now to actually set things in motion, you put this somewhere. I call this from within one of my Scene classes, in response to a user action:

  [[[UIApplication sharedApplication] delegate] specifyStartLevel];

Answer 2

I took the example that Jack provided and actually created a working project, this was done using the Cocos2D 0.7.1 XCode Template, and then just editting the *AppDelegate.m/.h files, which are provided below in there entirety. I also modified some of what Jack said, because I feel that creating the UITextField in the appDidFinishLoading would utilize a bit too much memory, especially if the text field is not used all the time ... this solution creates the text field only when it is needed, the sample draws an empty Cocos2D Layer scene, and on screen touch, it displays the text field for you to start entering text into. It will spit out the result of what you entered to the Console - you can pass this to whatever is necessary in your own code.

the .h

#import <UIKit/UIKit.h>
#import "cocos2d.h"
@interface MYSCENE : Layer <UITextFieldDelegate>
{
    UITextField *myText;
}
-(void)specificStartLevel;
@end
@interface textFieldTestAppDelegate : NSObject <UIAccelerometerDelegate, UIAlertViewDelegate, UITextFieldDelegate, UIApplicationDelegate>
{
    UIWindow *window;
}
@end

and then the .m

#import "textFieldTestAppDelegate.h"
@implementation MYSCENE
-(id) init
{
    self = [super init];
    isTouchEnabled = YES;
    return self;
}
-(BOOL)ccTouchesBegan:(NSSet  *)touches withEvent:(UIEvent *)event {
    [self specifyStartLevel];
    return kEventHandled;
}
-(void)specifyStartLevel {
    myText = [[UITextField alloc] initWithFrame:CGRectMake(60, 165, 200, 90)];
    [myText setDelegate:self];
    [myText setText:@""];
    [myText setTextColor: [UIColor colorWithRed:255 green:255 blue:255 alpha:1.0]];
    [[[[Director sharedDirector] openGLView] window] addSubview:myText];
    [myText becomeFirstResponder];
}
-(BOOL)textFieldShouldReturn:(UITextField *)textField {
    [myText resignFirstResponder];
    return YES;
}
-(void)textFieldDidEndEditing: (UITextField *)textField {
    if(textField == myText) {
        [myText endEditing:YES];
        [myText removeFromSuperview];
        NSString *result = myText.text;
        NSLog([NSString stringWithFormat:@"entered: %@", result]);
    } else {
        NSLog(@"textField did not match myText");
    }
}
-(void) dealloc
{
[super dealloc];
}
@end
@implementation textFieldTestAppDelegate
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
    window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [window setUserInteractionEnabled:YES];
    [[Director sharedDirector] setDisplayFPS:YES];
    [[Director sharedDirector] attachInWindow:window];
    Scene *scene = [Scene node];
    [scene addChild: [MYSCENE node]];
    [window makeKeyAndVisible];
    [[Director sharedDirector] runWithScene: scene];
}
-(void)dealloc
{
    [super dealloc];
}
-(void) applicationWillResignActive:(UIApplication *)application
{
    [[Director sharedDirector] pause];
}
-(void) applicationDidBecomeActive:(UIApplication *)application
{
    [[Director sharedDirector] resume];
}
- (void)applicationDidReceiveMemoryWarning:(UIApplication *)application
{
    [[TextureMgr sharedTextureMgr] removeAllTextures];
}
@end

Answer 3

To add Text field in cocos2d as below code

first of all you add view in Scene and afetr add textfield add in view thats very easy.

-(id) init
{ 
   if( (self=[super init]) )
    {

       // add view in scene

        UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 568)];
        view.backgroundColor  = [UIColor redColor];

     // add textfield in view

        UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(10, 140, 300, 30)];
        textField.borderStyle = UITextBorderStyleRoundedRect;
        textField.font = [UIFont systemFontOfSize:15];
        textField.placeholder = @"enter text";
        textField.autocorrectionType = UITextAutocorrectionTypeNo;
        textField.keyboardType = UIKeyboardTypeDefault;
        textField.returnKeyType = UIReturnKeyDone;
        textField.clearButtonMode = UITextFieldViewModeWhileEditing;
        textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
        textField.delegate = self;
        [view addSubview:textField];

   // add view in scene

      [[[CCDirector sharedDirector] view] addSubview:view];
}
    return self;
}

you can also use CCTextfield in cocos2d best example is https://github.com/iNinja/CCTextField

Answer 4

Try the following CCNode subclass, CCMenuItemTextField, to use text fields in cocos2d.

The class is directly subclassed from CCMenuItemSprite. When tapped, the "selected" method is called and a UITextField is added to the main window. After editing is done, "unselected" method is called and the UITextField is removed from screen. User's input is saved to a CCLabelTTF node, which position itself exactly as the original UITextField.

CCMenuItemTextField.h

@interface CCMenuItemTextField : CCMenuItemSprite<UITextFieldDelegate> {
    UITextField     *textField_;
    CCLabelTTF      *label_;

    CGFloat         paddingLeft_;
}

@property (readonly, nonatomic) UITextField     *textField;
@property (readonly, nonatomic) CCLabelTTF      *label;
@property (assign, nonatomic)   CGFloat         paddingLeft;

- (void)selected;
- (void)unselected;
- (void)setFontSize:(CGFloat)size;

- (NSString*)text;
- (void)setText:(NSString*)text;

@end

CCMenuItemTextField.m

#import "CCMenuItemTextField.h"

@implementation CCMenuItemTextField

@synthesize
textField = textField_,
label = label_,
paddingLeft = paddingLeft_;

- (id)init
{
    CCSprite *normalSprite = [CCSprite spriteWithFile:@"text_field_background.png"];
    CCSprite *selectedSprite = [CCSprite spriteWithFile:@"text_field_background.png"];
    CCSprite *disabledSprite = [CCSprite spriteWithFile:@"text_field_background.png"];

    return [self initWithNormalSprite:normalSprite selectedSprite:selectedSprite disabledSprite:disabledSprite];
}

- (id)initWithNormalSprite:(CCNode<CCRGBAProtocol> *)normalSprite
            selectedSprite:(CCNode<CCRGBAProtocol> *)selectedSprite
            disabledSprite:(CCNode<CCRGBAProtocol> *)disabledSprite 
{
    self = [super initWithNormalSprite:normalSprite
                        selectedSprite:selectedSprite
                        disabledSprite:disabledSprite
                                target:self
                              selector:@selector(selected)];

    if (self) {
        paddingLeft_ = 3.0;

        textField_ = [[UITextField alloc] init];
        [textField_ setTextColor:[UIColor blackColor]];
        [textField_ setFont:[UIFont systemFontOfSize:18]];

        label_ = [[CCLabelTTF node] retain];
        [label_ setAnchorPoint:ccp(0,0.5)];
        [label_ setFontSize:18];
        [label_ setVisible:NO];
        [label_ setColor:ccBLACK];
        [self addChild:label_];
    }

    return self;
}

- (void)dealloc
{
    [label_ release];
    [textField_ release];
    [super dealloc];
}

// --------------------------------
// Public
// --------------------------------

- (void)selected
{
    [super selected];

    [label_ setVisible:NO];

    CGAffineTransform transform = [self nodeToWorldTransform];
    float textFieldHeight = textField_.font.lineHeight;
    float width = self.contentSize.width;
    float height = self.contentSize.height;
    float left = transform.tx + paddingLeft_;
    float top = 480 - transform.ty - height + (height - textFieldHeight) / 2;

    [textField_ setFrame:CGRectMake(left, top, width, height)];
    [[[[CCDirector sharedDirector] view] window] addSubview:textField_];
    [textField_ becomeFirstResponder];
    [textField_ setDelegate:self];
}

- (void)unselected
{
    [super unselected];

    [label_ setVisible:YES];
    [label_ setPosition:ccp(paddingLeft_, self.contentSize.height/2)];

    NSString *text = textField_.text ? textField_.text : @"";
    [label_ setString:text];

    [textField_ resignFirstResponder];
    [textField_ removeFromSuperview];
}

- (NSString*)text
{
    return [label_ string];
}

- (void)setText:(NSString*)text
{
    [label_ setString:text];
    [textField_ setText:text];
}

// --------------------------------
// UITextFieldDelegate
// --------------------------------

- (BOOL)textFieldShouldReturn:(UITextField*)textField {
    [self unselected];
    return YES;
}

- (void)textFieldDidEndEditing:(UITextField*)textField {
    [self unselected];
}

- (void)setFontSize:(CGFloat)size
{
    [label_ setFontSize:size];
    [textField_ setFont:[UIFont systemFontOfSize:size]];
}

// --------------------------------
// CCNode
// --------------------------------

- (void)onExitTransitionDidStart
{
    [super onExitTransitionDidStart];
    [self unselected];
}

@end