cocos2dx之彩色编辑输入框的设计

在游戏开发当中，我们可能有比较特殊的需求，比如今天要讲解的，做一个具有游戏特色的简单的编辑输入框。还是老规矩，先看一下效果图吧，这里有三张，因为输入的键盘的弹出方式有三种，这里根据每种情况对其功能需求做一下简要说明：

首先是一般的形式：

（画面太美，不忍直视。。。）

功能需求：

1、只有点击输入框才弹出键盘；

2、键盘出来的简单动画和点击键盘按钮的简单动画；

3、输入框实时显示键盘的输入，可以删除输入内容；

4、点击确定按钮，或点击除了输入框和键盘的地方，键盘消失的简单动画。

有的时候，键盘弹出来会挡住输入框，看着有点不爽，所以我们可以如下方案：

功能需求：

1、和前一个相比，其实就是改变了键盘的弹出方式，其实也没改变，就是让原来不动的背景图也跟着一起动。

可是这种显示方案也不足，要是输入框所处的位置比较便上，那么背景图上移的时候，很可能就看不到输入框了。那么，问题来了，学挖掘机........键盘弹出方案哪家强？(打字打顺了~。~)，想必大部分人都知道了，来看看最后一种显示：

功能需求：

1、和前面的相比，变成了全屏输入，多加了一个阴影层和输入框。

PS：1、补充下，那个键盘要适配屏幕的大小。

2、我们可以将键盘上的按钮图片换成具有自己游戏中的元素的图片

接下来，来看看代码的大致实现：

先浏览下头文件：

#ifndef _COLOR_EDIT_H_
#define _COLOR_EDIT_H_

#include cocos2d.h
#include cocos-ext.h

USING_NS_CC;
USING_NS_CC_EXT;

enum EditType
{
	EditType_No = 0,
	Edit_Number,
	Edit_Alphabet,
	Edit_PinYin
};

enum EditLocation
{
	EditLocation_No = 0,
	Location_Down,
	Location_Nature,
	Location_Screen
};

enum KeyBtn
{
	Key_Num_0 = 0,
	Key_Num_1,
	Key_Num_2,
	Key_Num_3,
	Key_Num_4,
	Key_Num_5,
	Key_Num_6,
	Key_Num_7,
	Key_Num_8,
	Key_Num_9,
	Key_Delete,
	Key_Sure
};

class ColorEdit : public cocos2d::Layer
{
public:
	~ColorEdit();
	ColorEdit();

	static ColorEdit * create(const Size & size, const char * BgFile,Node * parent,EditLocation editLocation,EditType editType = Edit_Number);
	static ColorEdit * create(const Size & size,Scale9Sprite * pBgSprite,Node * parent,EditLocation editLocation,EditType editType = Edit_Number);
	bool myInit(Scale9Sprite * pBgSprite,Node * parent,EditLocation editLocation,EditType editType);

protected:
	virtual bool onTouchBegan(Touch* touch, Event* pEvent);

	void onNumBtnCallback(Ref * obj);
	void onFunBtnCallback(Ref * obj);

	int getMaxZOrder(Node * node);
	void moveAction(bool isShow);
	void updateText();
private:
	Scale9Sprite * m_pEditBg;
	Sprite * m_pKeyBoard;
	EditType m_editType;
	EditLocation m_editLocation;
	Sprite * m_keyBg;
	Node * m_pTarget;
	bool m_isKeyShow;
	std::string m_text;
};

#endif