cocos2dx 4.0入门之泡泡龙项目的分解（三）

导读

上一章，我们讲解了cocos的基本概念。我们做一个场景基本的步骤是：
创建一个场景---->交给层类布置---->将层加入场景
本章要讲的是：
1.cocos2dx加载图片资源的两种方式
2.cocos2dx音效的使用
3.cocos2dx粒子系统的使用
4.一些控件的使用

一、cocos2dx概念

1、cocos2dx加载图片资源的两种方式

cocos2d的资源加载方式大致可以分为两种
1.同步加载
2.异步加载
个人觉得游戏其本质上与GUI程序是相同的东西，如果我们在主线程上进行耗时的资源加载或者操作，那就会表现出界面不响应，假死的现象，因此我们遇到一些耗时操作时候，应该使用异步加载和处理。（其中涉及多线程相关知识，我们不多做深究，只要知道遇到耗时操作时，应该异步加载。）
接下来会结合代码讲解，详细内容参见《cocos2d-x 3.0 游戏开发实战详解》的2.7节。

2、cocos2dx音效的概念

我们知道电影和游戏里的音效主要有两种：
1.背景音乐（BGM）
2.即时音效
这两个很好理解，背景音乐是持续不断播放的，营造一种戏剧氛围。即时音乐是根据相应的事件产生的，例如：枪声、击打声、喊出中二的技能名等。
音效的使用主要是通过SimpleAudioEngine（相当于音效师）来实现的。
详细内容参见《cocos2d-x 3.0 游戏开发实战详解》的5.7节。

3、cocos2dx粒子系统的概念

粒子系统的朴素理解就是实现类似于烟花、爆炸、火焰、天气（主要是下雨、下雪这些）等效果的系统，因为这些效果看起来就是很多的小粒子组成的。
cocos2dx的粒子效果的设计和使用主要是通过操作plist文件。
详细内容参见《cocos2d-x 3.0 游戏开发实战详解》的第4章。

二、认识道具师团队

导演来到道具师的团队了，团队主要有两个成员：
道具师（StartLayer）
音效师（SimpleAudioEngine）
现场一片狼藉，散落着许多还未布置的道具(MenuItemImage、Label等控件)，但是我们隐约可以看到搭建起来的雏形（图片加载进度场景）：

2.1 实现初始化

#ifndef __StartLayer_H__
#define __StartLayer_H__
#include "cocos2d.h"
#include "ShootBubbleSceneManager.h"
using namespace cocos2d;
class StartLayer: public Layer
{
public:
//		初始化布景
		virtual bool init();
   
public:
//    声明一个指向场景管理器对象的指针
		ShootBubbleSceneManager *sbsm;

//    声明一个用于加载图片资源时显示的精灵
		Sprite* loadingPic;
        Label* lPros;

//定义其构造函数的宏
	CREATE_FUNC(StartLayer);

};
#endif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#include "StartLayer.h"
#include "cocos2d.h"
#include "SimpleAudioEngine.h"
#include "extensions/cocos-ext.h"

//引用cocos2d名称空间
using namespace cocos2d;

bool StartLayer::soundB=true;

//实现初始化布景方法
bool StartLayer::init()
{
	//调用父类的初始化方法
	if ( !Layer::init() )
	{
		return false;
	}
	 //获取可见区域的尺寸
	Size visibleSize = Director::getInstance()->getVisibleSize();
//    创建一个精灵当作背景图片
	loadingPic = Sprite::create("loading.jpg");
//    设置其位置
	loadingPic->setPosition(visibleSize.width/2,visibleSize.height/2);
//    将其添加到布景中
	this->addChild(loadingPic,0);
    lPros = Label::createWithTTF("0%","FZKATJW.ttf",50);
    lPros->setPosition(Point(270,480));
    this->addChild(lPros,1);
	return true;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

该雏形（图片加载进度场景）由两个部分组成，一个背景板（loadingPic），一个加载进度显示条（lPros ）。
背景板（loadingPic）贴上了海报（loading.jpg），加载进度显示条（lPros ）使用了字体（“FZKATJW.ttf”）。
其目的在于：在主场景的搭建过程中，我们需要做大量的准备工作（如：加载资源、读取数据等），在完成这些操作之前，我不能把还在搭建的场景显示给观众，我们需要用一个进度加载场景让观众进行等待，并告诉观众加载到哪里了。（目前该项目比较少资源，加载太快，一般不看不到该界面）。
接下来实现的是显示加载百分比的功能，与加载资源功能，该方法是异步加载的

2.2 显示加载百分比

  //    加载完成一副图片时回调的方法
    void loadingCallBack(Texture2D* tt);
    //	异步加载的方法
	void loadingTexturesAsync();
1
2
3
4

void StartLayer::loadingTexturesAsync()
{
//    将需要加载到图片储存在一个数组中
	std::string sa[16]=
	{
		"ball_1.png","ball_2.png","ball_3.png","ball_4.png",
		"ball_5.png","ball_6.png","ball_7.png","ball_8.png",
		"frozen_1.png","frozen_2.png","frozen_3.png","frozen_4.png",
		"frozen_5.png","frozen_6.png","frozen_7.png","frozen_8.png"
	};
	for(int i=0;i<16;i++)
	{
		
			Director::getInstance()->getTextureCache()->addImageAsync(  	 //加载图片资源
						sa[i],		  									//图片资源路径
                        CC_CALLBACK_1(StartLayer::loadingCallBack, this) //加载完成时被回调的方法
			);
			
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

加载总共16张图片，每加载一次，回调一次StartLayer::loadingCallBack函数。

void StartLayer::loadingCallBack(Texture2D* tt)//加载完成时被回调的方法
{
	
//创建主界面的代码，接下来要实现



	}else
    {
	
	//显示当前加载进度
        lPros->setString(StringUtils::format("%d",100/16*jd)+"%");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果：

2.3 资源加载界面替换为进入主界面

加载主界面代码的实现

/首先删除前面创建的背景与标签。/
 // 如果加载完成
        lPros->setString("100%");
        this->removeChild(lPros);
//        获取可见区域的尺寸
		Size visibleSize = Director::getInstance()->getVisibleSize();
		
		
//        删除加载时用作背景的精灵对象
		this->removeChild(loadingPic);
/首先删除前面创建的背景与标签。/

///替换的新背景///
// 创建一个精灵用于显示当前背景
		Sprite* mainbg = Sprite::create("bg.png");
//        设置其位置
		mainbg->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
//        将其添加到布景中
		this->addChild(mainbg,0);
///替换的新背景///

///显示顶端的泡泡龙///	
 Sprite* sppl = Sprite::create("menu_title.png");
        sppl->setPosition(Point(270,800));
        this->addChild(sppl,2);
///显示顶端的泡泡龙///


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2.4 实现一个菜单项

下面的代码是实现一个项的菜单

实现开始菜单///
    // 创建一个开始菜单项
		MenuItemImage* puzzle = MenuItemImage::create
		(
			   "start.png",	//正常图片
			   "startp.png",	//按下时图片
			   CC_CALLBACK_0(StartLayer::startCallback, this) //点击被回调掉的方法
		);
		//设置其位置
		puzzle->setPosition(Point(270,630));
		
	Menu* menu = Menu::create(puzzle, NULL);
		//设置其位置
		menu->setPosition(Point::ZERO);
		//将其添加到布景中
		this->addChild(menu, 2);
		实现开始菜单///
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

开始游戏菜单的回调函数

void StartLayer::startCallback()
{
   
//暂时什么也不实现
}
1
2
3
4
5

依样画葫芦，实现所有菜单项

//        创建一个开始菜单项
		MenuItemImage* puzzle = MenuItemImage::create
		(
			   "start.png",	//正常图片
			   "startp.png",	//按下时图片
			   CC_CALLBACK_0(StartLayer::startCallback, this) //点击被回调掉的方法
		);
		//设置其位置
		puzzle->setPosition(Point(270,630));

		
		//创建帮助菜单项
		MenuItemImage* arcade = MenuItemImage::create(
			   "help.png",		//正常图片
			   "helpp.png",     //按下时的图片
			   CC_CALLBACK_0(StartLayer::helpCallback, this) //点击时被回调的方法
		);

		//设置其位置
		arcade->setPosition(Point(270,530));
        //创建帮助菜单项
		MenuItemImage* jfb = MenuItemImage::create(
                                                      "board.png",		//正常图片
                                                      "boardp.png",	//按下时的图片
                                                      CC_CALLBACK_0(StartLayer::phbCallback, this) //点击时被回调的方法
                                                      );
		//设置其位置
		jfb->setPosition(Point(270,430));
		//创建关于菜单项
		MenuItemImage* aboutUS = MenuItemImage::create(
			   "aboutus.png",	//正常图片
			   "aboutusp.png",	//按下时的图片
			   CC_CALLBACK_0(StartLayer::aboutCallback, this) //按下时被回调的方法
		);
        
		//设置其位置
		aboutUS->setPosition(Point(270,230));
    
        Sprite* s = Sprite::create("yinxiao.png");
        s->setPosition(Point(270,330));
        this->addChild(s);
        //   创建返回菜单项
        soundon = MenuItemImage::create(
                                                 "yinyue.png",	//正常图片
                                                 "jingyin.png",	//按下图片
                                                 CC_CALLBACK_0(StartLayer::soundCallback, this) //被点击时回调的方法
                                                 );
        //设置其位置
        soundon->setPosition(Point(400,330));
        soundon->setScale(0.5);
        //   创建返回菜单项
        soundoff = MenuItemImage::create(
                                                  "jingyin.png",	//正常图片
                                                  "yinyue.png",	//按下图片
                                                  CC_CALLBACK_0(StartLayer::soundCallback, this) //被点击时回调的方法
                                                  );
        //设置其位置
        soundoff->setPosition(Point(400,330));
        soundoff->setScale(0.5);
        
		 

		//创建一个菜单对象
		Menu* menu = Menu::create(puzzle,arcade,aboutUS,soundon,soundoff,jfb,NULL);
	
		//设置其位置
		menu->setPosition(Point::ZERO);
		//将其添加到布景中
		this->addChild(menu, 2);
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

1.博客中标注原创的文章，版权归原作者 酒与花生米 所有；

2.未经原作者允许不得转载本文内容，否则将视为侵权；

3.转载或者引用本文内容请注明来源及原作者；

4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。