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

****************************************************************************

时间：2015-01-26

作者：Sharing_Li

转载出处：http://blog.csdn.net/sharing_li/article/details/42582625

****************************************************************************

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

首先是一般的形式：

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

功能需求：

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

再来具体看看实现部分：

首先初始化：

bool ColorEdit::myInit(Scale9Sprite * pBgSprite,Node * parent,EditLocation editLocation,EditType editType)
{
	if (!Layer::init())
	{
		return false;
	}
	m_pEditBg = pBgSprite;
	m_pTarget = parent;
	m_editLocation = editLocation;
	m_editType = editType;

	this->addChild(m_pEditBg);
	auto centerSize = m_pEditBg->getContentSize();
	//这里要设置好九宫图中间的矩形的大小，因为我们要把输入的内容显示在上面，否则会看起来乱七八糟
	m_pEditBg->setCapInsets(Rect(0,0,centerSize.width * 0.9,centerSize.height * 0.9));
	auto pLabel = Label::createWithTTF("","fonts/Marker Felt.ttf",centerSize.height * 0.75);
	pLabel->setColor(Color3B::WHITE);
	pLabel->setAnchorPoint(Vec2(0,0.5));
	pLabel->setTag(103);
	pLabel->setPosition(Vec2(centerSize.width * 0.08,centerSize.height * 0.5));
	m_pEditBg->addChild(pLabel,2);
	//如果是全屏显示类型
	if (m_editLocation == Location_Screen)
	{
		//添加阴影层，先隐藏
		auto keyLayer = LayerColor::create(Color4B(0,0,0,100));
		keyLayer->setPosition(Point::ZERO);
		keyLayer->setTag(100);
		m_pTarget->addChild(keyLayer,this->getMaxZOrder(parent) + 2);
		keyLayer->setVisible(false);
		//添加上方的输入框
		auto key_bigbg = Scale9Sprite::create("coloredit/key_bigbg.png");
		key_bigbg->setContentSize(Size(Director::getInstance()->getWinSize().width,key_bigbg->getContentSize().height));
		key_bigbg->setTag(101);
		key_bigbg->setAnchorPoint(Vec2(0.5,0));
		auto upSize = key_bigbg->getContentSize();
		key_bigbg->setPosition(Vec2(m_pTarget->getContentSize().width / 2,m_pTarget->getContentSize().height));
		m_pTarget->addChild(key_bigbg,this->getMaxZOrder(parent) + 2);
		//同样设置九宫图中间的矩形
		key_bigbg->setCapInsets(Rect(0,0,upSize.width * 0.9,upSize.height * 0.9));
		auto label_up = Label::createWithTTF("","fonts/Marker Felt.ttf",upSize.height * 0.75);
		label_up->setColor(Color3B::WHITE);
		label_up->setAnchorPoint(Vec2(0,0.5));
		label_up->setTag(102);
		label_up->setPosition(Vec2(upSize.width * 0.08,upSize.height / 2));
		key_bigbg->addChild(label_up);
	}

	m_keyBg = Sprite::create("coloredit/key_bg.png");
	m_keyBg->setAnchorPoint(Vec2(0.5,1));
	m_keyBg->setPosition(Vec2(m_pTarget->getContentSize().width / 2,0));
	m_pTarget->addChild(m_keyBg,this->getMaxZOrder(parent) + 2);

	auto bgSize = m_keyBg->getContentSize();
	auto pMenu = Menu::create();
	pMenu->setPosition(Vec2::ZERO);
	m_keyBg->addChild(pMenu);
	if (m_editType == Edit_Number)//添加数字键盘
	{
		for (int i = 0; i < 2; i++)
		{
			for (int j = 0; j < 5; j++)
			{
				auto numSprNor = Sprite::create(__String::createWithFormat("coloredit/num_%d.png",i * 5 + j)->getCString());
				auto numSprSel = Sprite::create(__String::createWithFormat("coloredit/num_%d.png",i * 5 + j)->getCString());
				auto numBtn = MenuItemSprite::create(numSprNor,numSprSel,CC_CALLBACK_1(ColorEdit::onNumBtnCallback,this));
				numBtn->setTag(Key_Num_0 + i * 5 + j);

				numBtn->setPosition(Vec2(bgSize.width / 10 * (j * 2 + 1),bgSize.height / 6 * ((3 - i) * 2 - 1)));
				pMenu->addChild(numBtn);
			}
		}

		auto delSprNor = Sprite::create("coloredit/btn_del.png");
		auto delSprSel = Sprite::create("coloredit/btn_del.png");
		auto delBtn = MenuItemSprite::create(delSprNor,delSprSel,CC_CALLBACK_1(ColorEdit::onFunBtnCallback,this));
		delBtn->setTag(Key_Delete);
		delBtn->setPosition(Vec2(bgSize.width / 4 - 15,bgSize.height / 6));
		pMenu->addChild(delBtn);

		auto sureSprNor = Sprite::create("coloredit/btn_sure.png");
		auto sureSprSel = Sprite::create("coloredit/btn_sure.png");
		auto sureBtn = MenuItemSprite::create(sureSprNor,sureSprSel,CC_CALLBACK_1(ColorEdit::onFunBtnCallback,this));
		sureBtn->setTag(Key_Sure);
		sureBtn->setPosition(Vec2(bgSize.width / 4 * 3 + 15,bgSize.height / 6));
		pMenu->addChild(sureBtn);
	}
	else if (m_editType == Edit_Alphabet)//和number差不多，多了些按钮而已
	{
	}
	else if (m_editType == Edit_PinYin)//这个要是实现的话，就成输入法了，咱们还是调用系统的吧。
	{
	}

	//简单暴力的屏幕适配
	auto rate_x = Director::getInstance()->getWinSize().width / bgSize.width;
	m_keyBg->setScaleX(rate_x);

	auto listenerT = EventListenerTouchOneByOne::create();
	listenerT->onTouchBegan = CC_CALLBACK_2(ColorEdit::onTouchBegan,this);
	listenerT->setSwallowTouches(false);
	Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listenerT,this);

	return true;
}

然后是触摸函数的实现：

bool ColorEdit::onTouchBegan(Touch* touch, Event* pEvent)
{
	auto touchPoint = touch->getLocation();
	//如果是全屏显示类型，并且键盘已弹出
	if (m_editLocation == Location_Screen && m_isKeyShow)
	{
		auto key_upEdit = (Scale9Sprite *)m_pTarget->getChildByTag(101);
		//如果点击除了顶层输入框和键盘的其他地方，则键盘消失
		if (!m_keyBg->getBoundingBox().containsPoint(touchPoint) &&
			!key_upEdit->getBoundingBox().containsPoint(touchPoint))
		{
			this->moveAction(false);
			return true;
		}
		return false;
	}

	//将触摸点转为在当前子层下的坐标
	touchPoint = this->convertToNodeSpace(touchPoint);
	if (!m_pEditBg->getBoundingBox().containsPoint(touchPoint))
	{
		if (m_isKeyShow)
		{
			if (!m_keyBg->getBoundingBox().containsPoint(Vec2(touch->getLocation().x,
					touch->getLocation().y - (m_editLocation == Location_Down ? 1 : 0) * m_keyBg->getContentSize().height)))
			{
				this->moveAction(false);
			}
		}
		return false;
	}
	//如果点击了输入框，并且键盘还未弹出
	if (!m_isKeyShow)
	{
		this->updateText();
		this->moveAction(true);
	} 

	return true;
}

这里有个要注意的地方：

if (!m_keyBg->getBoundingBox().containsPoint(Vec2(touch->getLocation().x,
					touch->getLocation().y - (m_editLocation == Location_Down ? 1 : 0) * m_keyBg->getContentSize().height)))
			{
				this->moveAction(false);
			}

当键盘的弹出方式是效果图第二张时，因为背景图向上移动了一段距离，touch->getLocation()的y坐标要做一下修改，否则getBoundingBox的判断不正确。

再来看看对于键盘点击的响应函数：

void ColorEdit::onNumBtnCallback(Ref * obj)
{
	int tag = ((Node *)obj)->getTag();
	//点击按钮的简单动画
	((MenuItemSprite *)obj)->runAction(Sequence::create(ScaleTo::create(0.1,10 / 8.0),ScaleTo::create(0.1,1),NULL));

	char temp[3];
	sprintf(temp,"%d",tag);
	m_text += temp;
	//更新内容
	this->updateText();

	log("keyboard------->%d",tag);
}

void ColorEdit::onFunBtnCallback(Ref * obj)
{
	((MenuItemSprite *)obj)->runAction(Sequence::create(ScaleTo::create(0.1,10 / 8.0),ScaleTo::create(0.1,1),NULL));

	if (((Node *)obj)->getTag() == Key_Sure)
	{
		this->moveAction(false);
	}
	else
	{
		auto n = m_text.size();
		if (n > 0)
		{
			m_text = m_text.substr(0,n - 1);
		}
		this->updateText();
	}
}

接着是键盘的出现与消失：

void ColorEdit::moveAction(bool isShow)
{
	if (m_editLocation == Location_Screen)
	{
		auto keyLayer = (LayerColor *)m_pTarget->getChildByTag(100);
		auto key_upEdit = (Scale9Sprite *)m_pTarget->getChildByTag(101);

		keyLayer->setVisible(isShow);
		key_upEdit->runAction(MoveBy::create(0.35,Vec2(0,(isShow ? -1 : 1) * key_upEdit->getContentSize().height)));
		m_keyBg->runAction(MoveBy::create(0.35,Vec2(0,(isShow ? 1 : -1) * m_keyBg->getContentSize().height)));
	}
	else if (m_editLocation == Location_Down)
	{
		Director::getInstance()->getRunningScene()->runAction(MoveBy::create(0.35,Vec2(0,(isShow ? 1 : -1) * m_keyBg->getContentSize().height)));
	}
	else if (m_editLocation == Location_Nature)
	{
		m_keyBg->runAction(MoveBy::create(0.35,Vec2(0,(isShow ? 1 : -1) * m_keyBg->getContentSize().height)));
	}

	m_isKeyShow = isShow;
	if (!isShow)
	{
		m_text = "";
	}
}

剩下的其他函数：

//获取最大的Zorder
int ColorEdit::getMaxZOrder(Node * node)
{
	int zorder = -1;
	Vector<Node *> nodeVec = node->getChildren();
	for (auto node : nodeVec)
	{
		int temp = node->getLocalZOrder();
		if (temp > zorder)
		{
			zorder = temp;
		}
	}
	log("children's max zorder is %d",zorder);

	return zorder;
}

void ColorEdit::updateText()
{
	if (m_editLocation == Location_Screen)
	{
		((Label *)((Scale9Sprite *)(m_pTarget->getChildByTag(101)))->getChildByTag(102))->setString(m_text);
	}
	else
	{
		((Label *)(m_pEditBg->getChildByTag(103)))->setString(m_text);
	}
}

最后我们在使用的时候，只需几行代码就行了。

auto colorEdit = ColorEdit::create(Size(250,40),"coloredit/input_box.png",this,Location_Nature);

colorEdit->setPosition(Vec2(bgSize.width / 2,bgSize.height / 2));

bg->addChild(colorEdit);

到这里基本上说完了，写的不好的地方还请见谅。

资源下载处：http://download.csdn.net/detail/sharing_li/8398363

时间： 2024-08-05 13:54:07

cocos2dx之彩色编辑输入框的设计的相关文章

datagrid直接编辑保存的“设计缺陷”

今天在使用easyUI的datagrid组件的时候,碰到了一些问题,记录下来以便下次快速解决. 需求是在一张表单里会关联有一个列表,可以增删查改 以前没用easyUI的时候,这个增和改的页面我一般是用一个dialog来做,保存之后再ajax传到列表里通过hidden来进行提交. 当然现在我也可以这么做,但是我想换种方式,因为easyUI的datagrid提供了直接在datagrid上编辑的功能(Row Editing in DataGrid). 照着官网上的demo试了一下,也就是editor的

datagrid直接编辑保存的“设计缺陷”之二

datagrid直接编辑保存的"设计缺陷"只是解决了如何让后台能接收到前台的数据 但是,如何处理前台数据短暂的保存,对我来说还是有点疑惑~ 所以本篇文章是接上篇文章的后续处理~重点并不是在讨论"设计缺陷"了~ 因为貌似js中没有集合类型,所以这里用js中的array来保存数据. 那么这里有几个问题: 1.每次编辑完成(endEdit)的时候将编辑行保存,这里完成编辑包括三种情况(保存.新增和点击另一行) 值得注意的是,这里点击datagrid之外的input或者其他

实习小白：：(转) cocos2d-x使用cocosStudio编辑的动画文件

1CocoStudio 简介 CocoStudio 是由 Cocos2d-x 官方推出的一个专门针对 Cocos2d-x 游戏开发的免费工具集,目前正在开发阶段,且日益完善之中!既是工具集,当然集成了现有各零零散散工具的功能,并且不断扩充,包含动画编辑器,UI编辑 器,场景编辑器和数据编辑器.具体内容及其特性欢迎访问 CocoStudio 官网 http://cocostudio.org/ .在这里,我们通过动画编辑器来快速体验一下 CocoStudio 为我们开发带来的便捷~ 2环境搭建与配置

cocos2dx 3.2 解决输入框(TextField,TextFieldTTF) 中文乱码问题

近期开发cocos2dx 项目,做一个小游戏.(个人喜欢用最新版本号) 没系统学习就是问题多多,遇到了非常多问题,比方全部的opengl api都必须在主线程中调用, 这让我在多线程载入方面吃了不少亏,浪费了非常多时间. 这次遇到了输入框中输入中文出现乱码问题.搜索了非常多方法,都没找到.没办法.可是知道cocos2dx 2.x版本号没有这个问题,所以就仅仅有跟进代码了. 首先 找到2.x中找到WM_CHAR的派发消息: 在platform/win32/下的CCEGLView.cpp 中 LRE

常用输入框测试用例设计分享

普通输入框字段校验测试 1. 不输入,空内容 2. 输入1个字符 3. 若输入框有长度限制为N个字符,测试N-1个字符,N个字符,N+1个字符,N+N+...(超长)这几个边界值 4. 还需要测试下通过复制大于长度的值粘贴进去看是否能输入 5. 输入半角/全角空格 6. 输入半角/全角,大写/小写英文字符 7. 输入半角/全角数字 8. 输入简体中文字符(默认全角) 9. 输入繁体中文字符(默认全角) 10. 输入半角特殊字符:!@#￥%……&*() 11. 输入全角特殊字符:[email pr

无代码软件开发输入框样式设计

腾讯课堂免费学习,3小时学会开发,可开发一套简单系统无代码开发时,对输入框等任何显示元件,都可以用样式标签来定义显示样式(两种样式设定方式之一):选中显示元件,添加样式属性名称,添加样式标签及值,保存运行可以用CSS样式标签,对输入框元件设定宽度.高度.边距等常用样式.以下演示中,我们设定了宽度为上级元件宽度的60%.左边距为整行宽度的13%使输入框基本显示在页面中间(也可以是15%).且高度为35像素,样式值写为:width:70%;margin-left:13%;height:35px; 主

cocos2d-x 3.3 之卡牌设计 NO.6 Loading界面（异步加载图片，plist）

刚开始做卡牌的时候没有想到要做loading,因为小游戏资源不多. 但是后来不断的加图片,直到在真机上发现卡顿的问题,我才知道该需要加loading了...... 首先,我们先定义类: class Loading : public Layer { public: bool init(); CREATE_FUNC( Loading); static Scene* CreateScene(); int total_pic_num;//需加载图片数 int total_sound_num;//需加载声

Cocos2dx使用TextField实现输入框

游戏login的时候必须要求玩家输入用户名.密码,还要可以删除. cocostudio画一个textfield,直接读入好了: textField类,继承读取的widget. local textField = class("textField", function GUIReader:shareReader():widgetFromJsonFile(jsonPath)  end) --获得textField组件 function testField:ctor() self.mText

cocos2dx 3.x 解决输入框(TextField,TextFieldTTF) 输入中文变乱码的问题

修改cocos2d-x-3.x\cocos\2d\platform\desktop\CCGLView.cpp    GLView::onGLFWCharCallback方法 //原来的方法如下: void GLView::onGLFWCharCallback(GLFWwindow *window, unsigned int character) { IMEDispatcher::sharedDispatcher()->dispatchInsertText((const char*)&char