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);

}

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

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

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

cocos2d-x 3.0 Loading界面实现,布布扣,bubuko.com

时间: 2024-08-04 23:16:53

cocos2d-x 3.0 Loading界面实现的相关文章

Cocos Creator—定制H5游戏首页loading界面

Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有完善的解决方案才对.我在网上搜了一些文章,虽然也有讨论的帖子,但是方案都不尽人意.因此只能再次自己动手丰衣足食了,在此我总结一下我的思路和策略,分享给大家,希望后来的人少走弯路,另外这里的方案只针对H5游戏发布,其他平台可以借鉴思路自己实现. 首页加载的loading界面,官网的文档并没有提及,我是通过构建发

手机商城第一天 loading界面,主界面与baseFragment的创建,Bufferknife的使用

之前的手机影音经过这2天的总结,又从新掌握了不少之前忘记的知识,加深了对于知识的印象,下面的这个是一个新的项目,商城APP,有用到很多旧的知识,当然又有很多新的知识等着我去挑战.学习. 代码托管到码云上,有兴趣的可以去下载看看 https://git.oschina.net/joy_yuan/ShoppingMall 1.创建loading界面 loading界面说白了就是一个简单布局的activity,在这个activity的oncreate方法里,利用handler发送一个延迟2秒的inte

青瓷引擎使用心得——修改引擎的loading界面

一. 修改引擎的Loading界面之使用进度条显示1. 双击打开引擎包中的lib/qc-loading-debug.js,如下图所示: 2. 只需要修改qici.init函数即可改变loading界面.2.1 修改qici.init函数中的loadScript函数,该函数主要完成脚本加载功能,修改后的代码如下: 1 // 加载脚本文件,其中qici.scripts.length为总的脚本长度 2 function loadScript() { 3 4 var totalCount = qici.

10分钟,利用canvas画一个小的loading界面(顺便讨论下绘制效率问题)

首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas> 这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸.(对于这点,建议大家看下W3c文档,不是很

10分钟,利用canvas画一个小的loading界面

首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas> 这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸.(对于这点,建议大家看下W3c文档,不是很

高屋建瓴 cocos2d-x-3.0架构设计 Cocos2d (v.3.0) rendering pipeline roadmap(原文)

Cocos2d (v.3.0) rendering pipeline roadmap Why (the vision) The way currently Cocos2d does rendering is good but it is beginning to feel somehow antiquate and moreover it doesn't actually leverage modern multi core CPUs so popular nowadays on most mo

Android4.0设置界面改动总结(三)

Android4.0设置界面改动总结大概介绍了一下设置改tab风格,事实上原理非常easy,理解两个基本的函数就可以: ①.invalidateHeaders(),调用此函数将又一次调用onBuildHeader()来又一次读取xml文件里的header,又一次刷新HeaderAdapter中的数据,因此刷新了ListView的内容,从而更新了界面. ②.onBuildHeaders()中调用loadHeadersFromResource(resId, headers); 就可以又一次载入Hea

Android4.0设置界面修改总结(四)

之前有跟大家分享设置Tab风格和Item圆角的实现,希望能给有需要的朋友一点点帮助,今天再和大家分享一下用ViewPager实现设置分页,小米和OPPO就是这样的设置,先来看看效果图:   为了帮助大家更清晰的理解,我单独拿出一个小例子,有需要的朋友可以下载下来看看: http://git.oschina.net/way/SettingTab/tree/master 其实要实现这样的风格并不难,只要能比较深入的理解PreferenceActivity.java就可以了.我们都知道Settings

Android UI开发第四十三篇——使用Property Animation实现墨迹天气3.0引导界面及动画实现

前面写过<墨迹天气3.0引导界面及动画实现>,里面完美实现了动画效果,那一篇文章使用的View Animation,这一篇文章使用的Property Animation实现.Property Animation是Android3.0以后新增的动画库. 这篇文章的源码以及效果在github. 实现墨迹天气向上滑动的viewpager使用的开源库ViewPager-Android.ViewPager-Android开源库设置app:orientation定义滑动方向. 墨迹天气引导界面共有4个视图