文档章节

Cocos2d-JS开发中的一些小技巧(持续更新)

piggybear
 piggybear
发布于 2015/02/16 10:28
字数 770
阅读 20
收藏 0

1、获取URL中的请求参数的值----此方法接收参数名

1
2
3
4
5
6
function getQueryString(name) {
     var reg =  new  RegExp( "(^|&)"  + name +  "=([^&]*)(&|$)" "i" );
     var r = window.location.search.substr(1).match(reg);
     if  (r != null)  return  decodeURIComponent(r[2]);
     return  null;
};


2、底图上添加文字---适用于按钮Sprite

1
2
3
4
5
6
7
8
9
10
var MyButtonSprite = cc.Sprite.extend({
     ctor: function (fileName, title, fontName, fontSize) {
         this ._super(fileName);
  
         var titleLabel =  new  cc.LabelTTF(title, fontName, fontSize);
         this .addChild(titleLabel);
         titleLabel.x =  this .getContentSize().width / 2;
         titleLabel.y =  this .getContentSize().height / 2;
     }
});


3、远程图片加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
loadImgFromUrl: function (target, imgUrl, p, tag) {
         if (!imgUrl) return ;
         var self = target;
         var loadCb = function(err, img){
             cc.textureCache.addImage(imgUrl);
             var texture2d =  new  cc.Texture2D();
             texture2d.initWithElement(img);
             texture2d.handleLoadedTexture();
             var sp =  new  cc.Sprite();
             sp.initWithTexture(texture2d);
             self.addChild(sp);
             sp.x = p.x;
             sp.y = p.y;
             sp.tag = tag;
         };
         cc.loader.loadImg(imgUrl, {isCrossOrigin :  false  }, loadCb);
     },


4、XMLHttpRequest

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
var sendRequest = function(url, params, isPost, callback, errorcallback){
     if (url == null || url ==  '' )
         return ;
          
     var xhr = cc.loader.getXMLHttpRequest();
     if (isPost){
         xhr.open( "POST" ,url);
     } else {
         xhr.open( "GET" ,url);
     }
     xhr.setRequestHeader( "Content-Type" "application/x-www-form-urlencoded" );
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4 && xhr.status == 200){
             var response = xhr.responseText;
             if (callback)
                 callback(response);
         } else  if (xhr.readyState == 4 && xhr.status != 200){
             var response = xhr.responseText;
             if (errorcallback)
                 errorcallback(response);
         }
     };
  
     if (params == null || params ==  "" ){
         xhr.send();
     } else {
         xhr.send(params);
     }
};


5、JSON解析以及上述第4条的回调方法

1
2
3
4
5
6
7
8
var callback = function (response) {
         var jsonData = JSON.parse(response);
         var data = jsonData[ "users" ];
         if (data){
             alert(data[ "name" ]);
             // todo something
         }
     };


6、自定义Loading界面

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var MyLoaderScene = cc.Scene.extend({
     _interval : null,
     _length : 0,
     _count : 0,
     _label : null,
     _className: "MyLoaderScene" ,
     init : function(){
         var self =  this ;
  
         // bg
         var bgLayer = self._bgLayer = cc.LayerColor.create(cc.color(32, 32, 32, 255));
         bgLayer.setPosition(cc.visibleRect.bottomLeft);
         self.addChild(bgLayer, 0);
  
         //loading percent
         var label = self._label = cc.LabelTTF.create( "玩命加载中... 0%" "Arial" , 24);
         label.setPosition(cc.pAdd(cc.visibleRect.center, cc.p(0, 0)));
         label.setColor(cc.color(180, 180, 180));
         bgLayer.addChild( this ._label, 10);
         return  true ;
     },
  
     _initStage: function (img, centerPos) {
         var self =  this ;
         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 =  this ;
         cc.Node.prototype.onEnter.call(self);
         self.schedule(self._startLoading, 0.3);
     },
  
     onExit: function () {
         cc.Node.prototype.onExit.call( this );
         var tmpStr =  "玩命加载中... 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 || [];
         this .cb = cb;
     },
  
     _startLoading: function () {
         var self =  this ;
         self.unschedule(self._startLoading);
         var res = self.resources;
         self._length = res.length;
         self._count = 0;
         cc.loader.load(res, function(result, count){ self._count = count; }, function(){
             if (self.cb)
                 self.cb();
         });
         self.schedule(self._updatePercent);
     },
  
     _updatePercent: function () {
         var self =  this ;
         var count = self._count;
         var length = self._length;
         var percent = (count / length * 100) | 0;
         percent = Math.min(percent, 100);
         self._label.setString( "玩命加载中... "  + percent +  "%" );
         if (count >= length) self.unschedule(self._updatePercent);
     }
});
MyLoaderScene.preload = function(resources, cb){
     var _myLoaderScene = null;
     if (!_myLoaderScene) {
         _myLoaderScene =  new  MyLoaderScene();
         _myLoaderScene.init();
     }
     _myLoaderScene.initWithResources(resources, cb);
  
     cc.director.runScene(_myLoaderScene);
     return  _myLoaderScene;
};


7、网页跳转

1
window.location.href =  "http://www.baidu.com"


8、关于进入游戏时黑屏时间较长的处理方法

1)

1
<body style= "padding:0; margin: 0; background: #000;" >

删除index.html中<body>标签的样式background: #000;


2)按照自己需要添加编译模块 修改project.json如

1
"modules"  : [ "core" "actions" , "shape-nodes" "labels" , "menus" , "transitions" , "physics" , "chipmunk" , "gui" ],


本文由CocoaChina会员happyfhc总结,欢迎大家学习与讨论。


来源网址:http://www.cocoachina.com/bbs/read.php?tid=226079

本文转载自:http://blog.csdn.net/aa294194253/article/details/43056949

共有 人打赏支持
piggybear
粉丝 3
博文 237
码字总数 37552
作品 0
西安
技术主管
私信 提问
前端JS开发总结

VUE element 饿了吗vue2.0组件 http://element.eleme.io/#/zh-CN/resource vue开发步骤: 1 http://www.jianshu.com/p/5ba253651c3b 2 1)http://www.jianshu.com/p/5ba253651c3b 2)http://......

mircle
2017/05/27
1
0
Cocos2d-JS v3.0 Final 发布,终于来了!

Cocos2d-JS v3.0 Final 发布,这是最终版本啦:可以在任意地方运行的代码基础,精简的工作流,完整的工具链,assets 和脚本的热更新! 2014 年 3 月 15 日在 Cocoa China 开发者大会发布 Co...

oschina
2014/09/11
7K
5
Cocos2d-JS v3.0 RC2 发布

Cocos2d-JS v3.0 RC2 发布了,下载地址: cocos2d-js-v3.0-rc2.zip For Web Development Only Online API reference Downloadable API Reference Online test cases Cocos2d-JS是Cocos2d-x的......

oschina
2014/08/13
1K
1
搭建Cocos2d-JS开发环境

使用Cocos2d-JS引擎开发游戏,主要的程序代码是JavaScript语言,因此,凡是能够开发JavaScript语言工具都适用于Cocos2d-JS游戏开发。本书我们推荐WebStorm和Cocos Code IDE工具。 搭建WebSt...

智捷课堂
2015/03/18
0
0
Cocos2d-JS v3.0 RC3 发布!

Cocos2d-JS v3.0 RC3 发布! Cocos2d-JS v3.0 RC3 提供 Facebook SDK Beta;改进了 API 参考;大大提升系统稳定性。 下载: cocos2d-js-v3.0-rc3.zip For Web Development Only Online API ......

oschina
2014/08/30
2.2K
6

没有更多内容

加载失败,请刷新页面

加载更多

大数据处理也要安全--关于MaxCompute的安全科普

摘要: 企业从未像今天这样可以轻易地存储和使用大数据。然而,当您在使用大数据产品时,是否考虑过其中的安全问题呢?庆幸的是,阿里云产品专家和安全专家早就想你所想急你所急,先行一步将...

阿里云云栖社区
14分钟前
0
0
vue如何编写组件可以通过Vue.use()使用

一般平时用别人的组件时都是通过import引入然后Vue.use()来使用,那么如何让我们写的组件也可以用这种方式使用呢? 1.首先新建一个文件夹例如:Home,然后在该文件中新建两个文件Home.vue和i...

北辰丨丶
15分钟前
1
0
SpringBoot自动配置原理

前言 只有光头才能变强。 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面Spring的文章(以学习的顺序排好): Spring入门这一篇就够了 Spring【依赖注...

Java3y
19分钟前
0
0
如何伪装成一个服务端开发(十) -- Spring MVC 源码

前言 在第七篇我们已经聊过了一些Spring MVC的运行原理,当然大多数人应该还是和我一样迷迷糊糊,只知道一个大概的运行过程,这一篇,我想要从源码的角度更加进一步去了解Spring MVC的整个运...

街角的小丑
24分钟前
1
0
应用前台耗电怎么破?功耗避雷指南已“佩奇”

使用应用时被用户吐槽手机掉电快、卡顿、过度发热,导致用户体验差,以上情况的产生,应用的功耗设计不足是直接症结。 当前,人们对性能体验的追求前所未有,应用设计功能越来越强大,界面也...

安卓绿色联盟
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部