本文将用到cocos2dx的纹理工具TexturePicker,首先申明，这里面的一部分素材是我自己做的，很丑，毕竟不是美工，也毕竟只是自己琢磨的ps边学边做的。废话不多说。先看本篇的资源

这里我不直接用这个，我将用TexturePicker进行打包。

我们打开TexturePicker看到如下界面

然后把我们的游戏资源拖动到右侧Sprites区域。如此，我们会得到如图所示界面：

接下来，我们需要设置左侧的选项。点击左侧的Data file 后面的省略号按钮，在弹出的路径中指向自己项目的Resources文件夹，并在文件夹的输入区域输入imageResource如图

然后点击保存。

然后找到工具栏中的Publish,点击。如图：

然后你再看看项目目录的Resourses文件夹下已经有了2个文件。

然后，回到我们的VS上面来。

在LoadScene.cpp的LoadLayer的init函数里面加入如下代码：

<span style="white-space:pre">	</span>//加载资源
	SpriteFrameCache *frameCache = SpriteFrameCache::getInstance();
	frameCache->addSpriteFramesWithFile("imageResource.plist","imageResource.png");
	//加入背景页
	Sprite *bg = Sprite::createWithSpriteFrameName("loading_bg.png");
	bg->setPosition(VisibleRect::center());
	this->addChild(bg,10);
	//加入加载中正常状态的精灵
	Sprite *loadBar_nomal = Sprite::createWithSpriteFrameName("loading_normal.png");
	loadBar_nomal->setPosition(VisibleRect::center());
	this->addChild(loadBar_nomal,11);

	//加入进度条
	loadBar_loading = ProgressTimer::create(Sprite::createWithSpriteFrameName("loading_loading.png"));
	//初始百分比
	loadBar_loading->setPercentage(0.0f);
	//坐标位置，一般是与上面的正常状态的位置一样的
	loadBar_loading->setPosition(VisibleRect::center());
	//设置类型为BAR
	loadBar_loading->setType(ProgressTimer::Type::BAR);
	//setBarChangeRate方法用来设置进度条变化方向的，如果不用变化的方向，则设置该方向为0，否则设置为1。所以（1,0）表示横方向，（0,1）表示纵方向。
	loadBar_loading->setBarChangeRate(Point(0,1));
	//setMidpoint方法设置进度条的起始点，（0，y）表示最左边，（1，y）表示最右边，（x，1）表示最上面，（x，0）表示最下面。
	loadBar_loading->setMidpoint(Point(0,0));
	//把loadBar_loading加入到场景中
	this->addChild(loadBar_loading,12);