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放到需要显示的地方就可以了