cocos2d-x 3.0 Loading界面实现


这个世界每一天都在验证我们的渺小,但我们却在努力创造,不断的在这生活的画卷中留下自己的脚印,也许等到我们老去的那一天,老得不能动只能靠回忆的那一天,你躺在轮椅上,不断的回忆过去,相思的痛苦忘不了,相恋的甜蜜浮现在心头,嘴角不觉一笑,年少时的疯狂,热情,理想和抱负,都随着岁月的流去而化作人生的财富,或多或少,犹如那夕阳西下的余辉,在慢慢消失着不见。。


(不文艺你会死?)


好吧,最近天天在忙着写游戏,天天写,而且效率还不高,光这两天想着怎么优化和控制敌人出现的逻辑和地图数据的存储,就前前后后墨迹了俩天才写完,好吧,要严重反思一下。总结一下如何提高写代码的效率:写代码的时候不要刷微博,写代码的时候不要开qq,写代码的时候不要上知乎。

恩,就这样子!


=========================================================


以上纯属扯淡,恩,扯淡。。。(说废话好玩吗?)


我们在玩游戏的经常会遇到loading界面,顾名思义,主要用来加预先载资源文件。先来一张效果图:


恩,有点丑,不过大概就这样子哈,加载完成后开启游戏界面


其实这就是一张背景图片 + 一个进度条  + 跟随进度条提示的小框框 + 一个loading文字标签


恩,我们来模拟实现它,首先,我们创建这些资源

	auto winSize = Director::getInstance()->getWinSize();
	
	//背景图片
	auto background = Sprite::create(IMG_LOADINGBG);
	background->setPosition(winSize.width / 2, winSize.height / 2);
	this->addChild(background,0);

	//loading文字标签
	_loadingLabel = LabelTTF::create("Loading...", "Arial", 25);
	_loadingLabel->setPosition(winSize.width / 2, winSize.height / 2 - 50);
	this->addChild(_loadingLabel);

	//ControlSlider进度条
	_curProgress = 0;
	_progressBar = ControlSlider::create("bar_bg.png","bar.png","bar_thumb.png");
	_progressBar->setPosition(winSize.width / 2, winSize.height / 2);
	_progressBar->setTouchEnabled(false);
	_progressBar->setMinimumValue(0);
	_progressBar->setMaximumValue(100);
	_progressBar->setValue(0);
	this->addChild(_progressBar,1);

	//进度条上面的提示小框框
	_barTip = Sprite::create(IMG_LOADING_BAR_TIP);
	_barTip->setPosition(
		winSize.width / 2 -  _progressBar->getContentSize().width / 2,
		winSize.height / 2 + 50);
	this->addChild(_barTip,1);

	//提示小框框文字标签
	_barTipLabel = LabelTTF::create("0%", "Arial", 20);
	_barTipLabel->setPosition(
		_barTip->getContentSize().width / 2,_barTip->getContentSize().height / 2
		);

	_barTip->addChild(_barTipLabel);

然后让它动起来,我们让它执行一百次,哈哈

        //interval,repeat,delay
	this->schedule(schedule_selector(LoadingScene::loadingLogic),1.0 / 100 ,100,0.2f);

每次执行动态更新提示框的位置和文字标签的信息,到了第一百次,就开启另外一个界面,恩,就是这么简单。。

void LoadingScene::loadingLogic(float dt){
	_curProgress ++;
	if(_curProgress > 100){
		//begin the game choose scene
		Director::getInstance()->replaceScene(TransitionFade::create(0.5f,ChooseScene::createScene()));
		return;
	}
	_progressBar->setValue(_curProgress);

	int startX = _progressBar->getPositionX() - _progressBar->getContentSize().width / 2 +10 ;
	int unitX = _progressBar->getContentSize().width / 100;

	_barTip->setPositionX(startX + _curProgress * unitX);
	char str[10] = {0};
	sprintf(str,"%d%",_curProgress);

	_barTipLabel->setString(str);

}

咦,看到这里有没有觉得哪里不对?好吧,被你发现了,说好的资源加载哪里去了?而且资源加载的进度百分比怎么算的呢?


好吧,继续,比如我们有一百张图片资源。。。(为什么不是99张?)


void LoadingScene::onEnter(){
	Layer::onEnter();
	//加载一次图片资源就回调一次
	Director::getInstance()->getTextureCache()->addImageAsync("1.png",this,callfunc_selector(LoadingScene::loadingCallback));
	...
	...
	...
	Director::getInstance()->getTextureCache()->addImageAsync("100.png",this,callfunc_selector(LoadingScene::loadingCallback));
	
}

然后回调函数实现,每次执行动态更新提示框的位置和文字标签的信息,到了第一百次,就开启另外一个界面,恩,还是这么简单。。。


void LoadingScene::loadingCallback(){
	_curProgress ++;
	if(_curProgress > 100){
		//begin the game choose scene
		Director::getInstance()->replaceScene(TransitionFade::create(0.5f,ChooseScene::createScene()));
		return;
	}
	_progressBar->setValue(_curProgress);

	int startX = _progressBar->getPositionX() - _progressBar->getContentSize().width / 2 +10 ;
	int unitX = _progressBar->getContentSize().width / 100;

	_barTip->setPositionX(startX + _curProgress * unitX);
	char str[10] = {0};
	sprintf(str,"%d%",_curProgress);

	_barTipLabel->setString(str);

}

其实思路都差不多啦,大概就是根据( 已经加载的图片数 /  总图片资源数)百分比来算出进度条的百分比来滑动,或者干脆把进度条最大值设置成图片资源总数,加载多少就滑动多少。。


==================================


恩,就这样子吧,好困的夜晚。。晚安


  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Cocos2d-x实现流光效果可以使用shader来进行渲染。首先,我们需要创建一个自定义的shader,并将其应用于需要实现流光效果的节点上。 在使用Cocos2d-x的过程中,我们可以使用GLSL语言编写shader代码。在实现流光效果的shader中,我们可以通过改变像素的颜色和透明度来创建流动的效果。 首先,我们定义一个uniform变量time,用于控制流光的移动速度。然后,在片段着色器中,通过改变颜色和透明度的计算公式来实现流动的效果。我们可以使用sin函数或者其他数学函数来计算出每个像素点的颜色和透明度,然后将其应用到节点上。 在节点的渲染流程中,我们将这个自定义的shader应用到节点上,然后传入时间参数,即更新uniform变量time的值。随着时间的增加,我们就可以看到节点上的流光效果在不断地移动。 为了实现更加逼真的流光效果,我们可以尝试给流光添加一些额外的效果,比如模糊、叠加等。通过调整shader代码中的计算公式和传入的参数,我们可以根据自己的需求来调整流光效果的强度和样式。 总结起来,在Cocos2d-x实现流光效果需要创建一个自定义的shader,并将其应用于需要实现效果的节点上。通过改变颜色和透明度的计算公式、传入时间参数等,我们可以实现一个流光效果,使节点看起来具有流动的动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值