cocos2d-js:定制加载界面 - 博客频道 - CSDN.NET
东子的博客
分享技术，让技术成为一种爱好、一种乐趣
分类：游戏开发
cocos2d进入游戏前都有一个默认的加载界面,如图，如果要自己定制这个加载界面，应该如何做呢
以下是main.js的代码
cc.game.onStart = function(){
//cc.view.adjustViewPort(true);
//2.根据不同的环境设置不同的分辨率
if(cc.sys.isMobile)
cc.view.setDesignResolutionSize(320, 500, cc.ResolutionPolicy.FIXED_WIDTH);
else cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL)
//cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.EXACT_FIT);
cc.view.resizeWithBrowserSize(true);
//3.预加载
cc.LoaderScene.preload(g_resources, function () {
//4.加载第一场景
cc.director.runScene(new GameScene());
cc.game.run();
其中cc.LoaderScene就是Loading界面的实现类，对应的文件就是CCLoaderScene.js，我们只需参考这个文件自定义一个LoaderScene类就可以了。
类名叫MyLoading,代码如下
var logoData = &data:image/base64,/9.............&; //图片的base64数据
MyLoading = cc.Scene.extend({
_interval : null,
_length : 0,
_count : 0,
_label : null,
_winSize : null,
_className:&MyLoading&,
_processLayer: null,
_processLayerLength: null,
init : function(){
var self =
var logoWidth = 160;
var logoHeight = 200;
var bgLayer = self._bgLayer = cc.LayerColor.create(cc.color(32, 32, 32, 255));
bgLayer.setPosition(cc.visibleRect.bottomLeft);
self.addChild(bgLayer, 0);
//image move to CCSceneFile.js
var fontSize = 24, lblHeight =
-logoHeight / 2 + 100;
if(cc._loaderImage){
//loading logo
cc.loader.loadImg(logoData, {isCrossOrigin : false }, function(err, img){
logoWidth = img.
logoHeight = img.
self._initStage(img, cc.visibleRect.center);
fontSize = 14;
lblHeight = -logoHeight / 2 - 10;
//loading percent
var label = self._label = cc.LabelTTF.create(&Loading... 0%&, &Arial&, fontSize);
label.setPosition(cc.pAdd(cc.visibleRect.center, cc.p(0, lblHeight)));
label.setColor(cc.color(180, 180, 180));
bgLayer.addChild(this._label, 10);
// 定义进度条层
this._winSize = cc.director.getWinSize();
var centerPos = cc.p(this._winSize.width / 2, this._winSize.height / 2);
self._processLayerLength = 500;
self._processLayer = cc.LayerColor.create(cc.color(255, 100, 100, 128), 1, 30);
self._processLayer.setPosition(cc.pAdd(centerPos, cc.p(- this._processLayerLength / 2, -logoHeight / 2 - 50)));
self._bgLayer.addChild(this._processLayer);
_initStage: function (img, centerPos) {
var self =
var texture2d = self._texture2d = new cc.Texture2D();
texture2d.initWithElement(img);
texture2d.handleLoadedTexture();
var logo = self._logo = cc.Sprite.create(texture2d);
logo.setScale(cc.contentScaleFactor());
logo.x = centerPos.x;
logo.y = centerPos.y;
self._bgLayer.addChild(logo, 10);
onEnter: function () {
var self =
cc.Node.prototype.onEnter.call(self);
self.schedule(self._startLoading, 0.3);
onExit: function () {
cc.Node.prototype.onExit.call(this);
var tmpStr = &Loading... 0%&;
this._label.setString(tmpStr);
* init with resources
* @param {Array} resources
* @param {Function|String} cb
initWithResources: function (resources, cb) {
if(typeof resources == &string&) resources = [resources];
this.resources = resources || [];
_startLoading: function () {
var self =
self.unschedule(self._startLoading);
var res = self.
self._length = res.
self._count = 0;
cc.loader.load(res, function(result, count){ self._count = }, function(){
if(self.cb)
self.cb();
self.schedule(self._updatePercent);
_updatePercent: function () {
var self =
var count = self._
var length = self._
var percent = (count / length * 100) | 0;
percent = Math.min(percent, 100);
self._label.setString(&Loading... & + percent + &%&);
// 更新进度条的长度
this._processLayer.changeWidth(this._processLayerLength * percent / 100);
if(count &= length) self.unschedule(self._updatePercent);
MyLoading.preload = function(resources, cb){
if(!_cc.myLoading) {
_cc.myLoading = new MyLoading();
_cc.myLoading.init();
_cc.myLoading.initWithResources(resources, cb);
cc.director.runScene(_cc.myLoading);
return _cc.myL
jonahzheng
排名：第2028名
（16）（4）（11）（9）（16）（8）（47）（11）（24）（50）（1）（0）（15）（3）（0）（12）（14）（4）（3）（44）（8）（17）
喜欢进行技术探讨, 对各种IT技术都所涉猎,本博客内容为工作与学习的整理。
近期关注游戏开发，移动应用，Spark，OpenStack，云计算开发,移动开发。
欢迎来信交流, ,欢迎转载,大家转载请注明出处,用于商业目的请告知。
福建手游开发技术群：
我关注的站点&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！Cocos2d-html5资源预加载列表自动扫描脚本 - SeanLin - 博客园
随笔 - 47, 文章 - 0, 评论 - 18, 引用 - 0
Cocos2d-html5引擎资源加载列表的自动产生脚本，已经在捕鱼达人上验证过。
&脚本的使用方法：
1. 将脚本放到res目录下（默认目录名是res，当然你也可以手动替换为其他名字，修改path）
2. 修改输出文件路径和和资源文件夹的目录名
3. 执行脚本，就能自动扫描当前目录和子目录的所有文件，自动判断类型，产生出Cocos2d-html5支持的资源列表到js文件中。
# 1. Change the output file path by yourself&
outputfile=/Users/linshun/work/FishingJoyH5/FishingJoyResource.js
# 2. Specify your resources directory name
path="res"
loopDir(){
for file in find *
if [ -d $file ]&
echo "$file is directory"&
cd ./$file
elif [ -f $file ]
echo "$file is file"
if [ ${file##*.} = "png" -o ${file##*.} = "jpg" ]&
#echo "$extension"
echo "{type:\"image\", src:\"$path${PWD##*$path}/$file\"}," && &$outputfile
elif [ ${file##*.} = "plist" ]
echo "{type:\"plist\", src:\"$path${PWD##*$path}/$file\"}," && &$outputfile
elif [ ${file##*.} = "fnt" ]
echo "{type:\"fnt\", src:\"$path${PWD##*$path}/$file\"}," && &$outputfile
elif [ ${file##*.} = "tga" ]
echo "{type:\"tga\", src:\"$path${PWD##*$path}/$file\"}," && &$outputfile
elif [ ${file##*.} = "tmx" ]
echo "{type:\"tmx\", src:"$path${PWD##*$path}"/"$file"}," && &$outputfile
elif [ ${file##*.} = "mp3" -o ${file##*.} = "ogg" ]&
#echo "$extension"
echo "{type:\"effect\", src:"$path${PWD##*$path}"/"$file"}," && &$outputfile
# Release the resource array to js file.
echo "var g_ressources = [" && $outputfile
#echo "{type:\"null\", src:\"null\"}" && &$outputfile
# remove the last comma
echo "];" && $outputfile
echo "Finish."
转载请注明：SeanLin，/SeanLin/archive//2621325.htmlcocos2dx（44）

1 draw绘图
__T19Draw_H__
__T19Draw_H__
&cocos2d.h&
USING_NS_CC;
T19Draw:public
CREATE_FUNC(T19Draw);
T19Draw.cpp
&T19Draw.h&
&AppMacros.h&
CCScene *T19Draw::scene()
CCScene::create();
T19Draw::create();
scene-&addChild();
T19Draw::init()
TBack::init();
T19Draw::draw()
//设置点的尺寸大小
ccPointSize(10);
//设置颜色
ccDrawColor4B(255,0,0,0);
//做一个点，ccp(100,100)中的值是点的坐标位置
ccDrawPoint(ccp(100,100));
//定义一个点的集合
[] = {ccp(100,200),ccp(100,300),ccp(200,100)};
//开始画点，第二个参数表示点的个数
ccDrawPoints(,
//画一条线段
ccDrawColor4B(0, 255, 0, 0);
glLineWidth(5);
ccDrawLine(ccp(100,300),ccp(200,100));
//画一个矩形,由对角线的两个点最终生成两个矩形
ccDrawRect(ccp(100,100),ccp(400,300));
ccDrawColor4B(0, 0, 255, 0);
ccp(150, 100),
ccp(200, 150),
ccp(300, 10) };
//以上面的三个点画出一个矩形，最后一个false来控制形状是否合并
//第二个参数表示的是点的个数
ccDrawPoly(,
//这里表示话一个圆
ccDrawCircle(ccp(240,160),60,3.14,100,true);
运行结果：
声音和音效
一个游戏，如果不加声音会降低整个游戏的吸引力，一些经典的游戏，我们一听到声音，就知道是什么游戏。这就是声音给玩家留下的深刻音效，游戏里面的声音分为两种：北京音乐和音效使用音效引擎
我们可以使用Cocos2d-x自带的CocosDension库来使用声音引擎。CocosDension实现了简单易用的SimpleAudioEngin类，为了使用它，我们只需要引入它的头文件即可：
#include &SimpleAudioEngine.h&
using namespace CocosD
支持平台与格式
CocosDension支持的音乐格式如下：
支持的常见文件格式
mp3,mid,oggg,wav
可以播放android,media,MediaPlayer所支持的所有格式
acc,caf,mp3,wav
可以播放AVAudioPlayer所支持的所有格式
mid,mp3,wav
CocosDension支持的音效格式如下：
支持的常见文件格式
对wav的支持不完美
可以播放Cocos2d-iphone,CocosDesion所支持的所有格式
加载音乐和音效通常是一个耗时间的过程，因此为了防止由加载产生的延时导致实际播放与游戏播放不协调的现象。在播放音效和音乐前，需要预加载音乐文件。
通常我们会在进入场景前调用一下两个方法来预加载文件。
SimpleAudioEngine::sharedEngine()-&preloadBackgroundMusic(&audio/start.wav&);
SimpleAudioEngine::sharedEngine()-&preloadEffect(“audio/onclick.wav”);
播放与停止Vs暂停和恢复
SimpleAudioEngine::sharedEngine()-&playBackgroundMusic(“audio/start.wav”);
bool T19Music::ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent) {
SimpleAudioEngine::sharedEngine()-&playEffect(&audio/onclick.wav&);
static bool flag =
if (flag) {
SimpleAudioEngine::sharedEngine()-&pauseBackgroundMusic();
//SimpleAudioEngine::sharedEngine()-&stopBackgroundMusic();
SimpleAudioEngine::sharedEngine()-&resumeBackgroundMusic();
//SimpleAudioEngine::sharedEngine()-&playBackgroundMusic(&audio/start.wav&);
volumn范围为[0,1]
//设置音量大小
SimpleAudioEngine::sharedEngine()-&setBackgroundMusicVolume(0.1f);
//获得音量的大小
SimpleAudioEngine::sharedEngine()-&getBackgroundMusicVolume();
进入后台或从后台进入
void AppDelegate::applicationDidEnterBackground() {
CCDirector::sharedDirector()-&stopAnimation();
// if you use SimpleAudioEngine, it must be pause
// SimpleAudioEngine::sharedEngine()-&pauseBackgroundMusic();
// this function will be called when the app is active again
void AppDelegate::applicationWillEnterForeground() {
CCDirector::sharedDirector()-&startAnimation();
// if you use SimpleAudioEngine, it must resume here
// SimpleAudioEngine::sharedEngine()-&resumeBackgroundMusic();
案例说明：
T20Music.h
__T20Music_H__
__T20Music_H__
&cocos2d.h&
USING_NS_CC;
T20Music :public
CREATE_FUNC(T20Music);
ccTouchBegan(CCTouch
CCEvent *);
T20Music.cpp
&T20Music.h&
&AppMacros.h&
&SimpleAudioEngine.h&
CocosDenshion;
CCScene *T20Music::scene()
CCScene *scene
= CCScene::create();
T20Music *
T20Music::create();
scene-&addChild();
T20Music::init()
TBack::init();
//预加载音乐
SimpleAudioEngine::sharedEngine()-&preloadBackgroundMusic(&audio/start.wav&);
SimpleAudioEngine::sharedEngine()-&preloadEffect(&audio/onclick.wav&);
SimpleAudioEngine::sharedEngine()-&playBackgroundMusic(&audio/start.wav&);
//设置触摸可以行
setTouchEnabled(true);
setTouchMode(kCCTouchesOneByOne);
//通过鼠标事件控制声音的显示和消失
T20Music::ccTouchBegan(CCTouch
CCEvent *)
SimpleAudioEngine::sharedEngine()-&playEffect(&audio/onclick.wav&);
&&& //SimpleAudioEngine::sharedEngine()-&playBackgroundMusic(&audio/start.wav&);
//暂停播放音乐
SimpleAudioEngine::sharedEngine()-&pauseBackgroundMusic();
&&& //SimpleAudioEngine::sharedEngine()-&stopBackgroundMusic(&audio/start.wav&);
//重新恢复播放音乐
SimpleAudioEngine::sharedEngine()-&resumeBackgroundMusic();
//控制音量
SimpleAudioEngine::sharedEngine()-&setBackgroundMusicVolume(0.1f);
SimpleAudioEngine::sharedEngine()-&stopAllEffects();
SimpleAudioEngine::sharedEngine()-&unloadEffect(&audio/start.wav&);
运行效果是：当进入这个scene之后就会听见音乐，当鼠标点击的时候声音停止了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1231531次
积分：20318
积分：20318
排名：第292名
原创：769篇
转载：412篇
评论：110条
(6)(2)(10)(6)(4)(35)(5)(6)(3)(1)(6)(4)(12)(14)(3)(18)(29)(28)(17)(23)(12)(7)(18)(51)(46)(76)(93)(57)(42)(12)(27)(11)(25)(16)(23)(5)(6)(23)(64)(51)(9)(15)(18)(23)(17)(11)(9)(32)(41)(14)(74)(21)(1)
阅读：7986
文章：32篇
阅读：45182}