cocos2dx图文混排(三)

有了文字渲染 那么图片渲染是很简单的(是个人都知道拉 CCSprite* S = CCSprite::createWidthSpriteFrame(FrameName) );

那么我们只要创建一个 CCNode* N然后把 CCSprite和写满字体的CCSpriteBatchNode都加到N的子节点就可以了撒

相信是比较简单的 但是为了给外界一个方便的接口 我们还是是用SetText(const std::string&) 作为我们的接口

那么这样如何区到底是图片还是文字呢? 你可以使用Html, xml 等等数据结构来描述我们的文本

由于我们项目使用的是PrototBuff , 可以很方便的序列化和反序列化字符串

message TextStyle
{
	optional string FontName = 1; //字体 空使用程序默认
	optional uint32 FontSize = 2; //大小 0则使用程序默认
	optional bool UnderLine = 3[default=false]; //下划线
	optional string Image = 4; //图片帧	
	optional string UserID = 5; //自定义ID 0表示没有事件
	optional uint32 R = 6[default=255]; //字体颜色值
	optional uint32 G = 7[default=255];
	optional uint32 B = 8[default=255];
	optional bool Enter = 9; //回车
	optional float ImageScaleFactor = 10[default=1.0];//图片帧缩放
};

message TextContent 
{
	optional TextStyle Style = 1; //样式
	optional string Content = 2;	 //正文
};

message TextContentArray
{
	repeated TextContent Contents = 1;
}

所以我们只要使用google::protobuf::TextFormat::Parser 来反序列化我们的字符串就可以了

伪代码如下

SetText( const string& Text )
{	
	CCNode* N = CCNode::create();
	TextContentArray Array;
	google::protobuf::TextFormat::Parser P;		

	P.ParseFromString( Text, &Array );

	for each ( TextContent  Content in Array )
	{
		if( Content.style().Image().empty() ) 
		{
			CCSprite* Sp = CCSprite::createWidthSpriteFrame( Content.style().Image().c_str() );
			N->addChild(Sp);
		}
		else
		{
			CCSpriteBatchNode* B = CCSpriteBatchNode::createWithTexture(RenderTexture);
			N->addChild(B);
			for each( unicodeChar in Content.content() )
			{
				find TextCharInfo in RenderTexture
				{
					CCSprite* S = CCSprite::createWithTexture( B->getTexture(), TextCharInfo. get CharRect );
					B->addChild(S);
					S->setPosition( YourCoursorX, YourCoursorY );
				}
			}
		}
	}
}

最后把N放到需要显示的地方就可以了