新手引导字幕效果

最新推荐文章于 2025-09-25 11:00:54 发布

原创最新推荐文章于 2025-09-25 11:00:54 发布 · 413 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用Cocos2d-x实现TTF字体打字机效果的方法。通过创建ActionTimeline并逐步显示字符，实现了文字从隐藏到逐渐显现的效果，并详细展示了如何控制文字出现的时间点及淡出过程。

void OpenAnimationLayer::GoAnimation(float delta)
{
	SK_NULL_RETURN(m_pkRoot);
	ActionTimeline* pkMoveAction = CSLoader::createTimeline("UI/CSB/Common/Kaichang.csb");
	SK_NULL_RETURN(pkMoveAction);
	pkMoveAction->gotoFrameAndPlay(0, false);
	m_pkRoot->runAction(pkMoveAction);

	Text* pkFirst = GetRootChild<Text>("Txt_1");
	SK_NULL_RETURN(pkFirst);
	pkFirst->setTextAreaSize(Size(780 / pkFirst->getScale(), 0));
	pkFirst->setString(GAMETEXT(3740));
		
	Label* pkLabel = (Label*)pkFirst->getVirtualRenderer();
	SK_NULL_RETURN(pkLabel);
	pkFirst->setVisible(false);

	//  0.3秒开始出现，3秒跳字结束，4.5秒开始渐隐，5.2秒完全消失
	float fDelayTime = 0.3f;
	this->scheduleOnce(schedule_selector(OpenAnimationLayer::GoFirstDialog), fDelayTime);
	pkFirst->runAction(Sequence::createWithTwoActions(DelayTime::create(4.5f), FadeOut::create(0.7f)));
	
}

//  0.3秒开始出现，3秒跳字结束，4.5秒开始渐隐，5.2秒完全消失
void OpenAnimationLayer::GoFirstDialog(float delta)
{
	Text* pkFirst = GetRootChild<Text>("Txt_1");
	SK_NULL_RETURN(pkFirst);
	Label* pkLabel = (Label*)pkFirst->getVirtualRenderer();
	SK_NULL_RETURN(pkLabel);
	pkFirst->setVisible(true);
	float fInterval = 5.7f / pkLabel->getString().size();
	int iTotal = pkLabel->getString().size();
	int index = 0;
	while (index < iTotal)
	{
		if (pkLabel->getLetter(index))
		{
			pkLabel->getLetter(index)->setVisible(false);
		}
		index++;
	}

	index = 0;
	while (index < iTotal)
	{
		if (pkLabel->getLetter(index))
		{
			pkLabel->getLetter(index)->runAction(
				Sequence::create(
				DelayTime::create(index * fInterval),
				Show::create(), nullptr)
				);
		}
		index++;
	}
}

以上是TTF字体的打字机效果实现，如果是系统默认字体的话就需要update里一点点设置string来显示

static Label * pkLabel = Label::create();
	pkLabel->setString("");
	this->schedule([&](float dt){
		std::string str = content.substr(0, n);
		//n += 3;//中文加3  
		n += 1;//英文加1  
		pkLabel->setString(str);
		if (n > content.length())
		{
			unschedule("schedule_callback");
		}
	}, 0.1f, "schedule_callback");