存储数据

cc.sys.localStorage.setItem(key, value)

上面的方法需要两个参数，用来索引的字符串键值 key，和要保存的字符串数据 value。

假如我们要保存玩家最高分，假设键值为 score:cc.sys.localStorage.setItem('score', 0);

复杂的对象数据，我们可以通过将对象序列化为 JSON 后保存：

Data = {    name: 'Tracer',    level: 1,    gold: 100}; cc.sys.localStorage.setItem('Data', JSON.stringify(Data));

读取数据

cc.sys.localStorage.getItem(key)

和 setItem 相对应，getItem 方法只要一个键值参数就可以取出我们之前保存的值了。对于上文中储存的用户数据：

var userData = JSON.parse(cc.sys.localStorage.getItem('userData'));

移除键值对

移除：cc.sys.localStorage.removeItem(key)

数据加密

对于单机游戏来说，对玩家存档进行加密可以延缓游戏被破解的时间。要加密存储数据，只要在将数据通过JSON.stringify 转化为字符串后调用你选中的加密算法进行处理，再将加密结果传入 setItem 接口即可。

您可以搜索并选择一个适用的加密算法和第三方库，比如 encryptjs，将下载好的库文件放入你的项目，存储时：

var encrypt=require('encryptjs');
var secretkey= 'open_sesame'; // 加密密钥
 
var dataString = JSON.stringify(userData);
var encrypted = encrypt.encrypt(dataString,secretkey,256);
 
cc.sys.localStorage.setItem('userData', encrypted);

读取：

var cipherText = cc.sys.localStorage.getItem('userData');
var userData=JSON.parse(encrypt.decrypt(cipherText,secretkey,256));

注意 数据加密不能保证对用户档案的完全掌控，如果您需要确保游戏存档不被破解，请使用服务器进行数据存取。

转载于:https://www.cnblogs.com/allyh/p/9839762.html

需求：根据json文件中数据动态生成label并展示

实现：首先生成node,在node的基础上添加组件addComponent(cc.Label)

然后可以为label设置基本的样式比如fontSize、string等，以及为了在规定宽度中展示，需要为node设置宽度，在设置label的overflow值（注意大小写！）

function sendPostRequest(ServerLink,str,callback,errcall) {
var sendstr=JSON.stringify(str);
var xhr = cc.loader.getXMLHttpRequest();
xhr.open(“POST”, ServerLink);
//xhr.open(“GET”, ServerLink+link+”?”+parm,false);
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
xhr.send(sendstr);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) {
var result = JSON.parse(xhr.responseText);
if(result[“act”]==”erro”) {
errcall(result[“msg”]);
return;
}
callback(result);
}
};
}

//设置显示图片
function setImg(imgNode, spriteFrame) {
    imgNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
}
//加载网络图片
function loadImgByUrl(imgNode, remoteUrl, imageType) {
    if (!imageType) {
        imageType = “png”;
    }
    cc.loader.load({
        url: remoteUrl,
        type: imageType
    }, function (err, texture) {
        if (err) {
            return;
        }
        setImg(imgNode, new cc.SpriteFrame(texture));
    });
}
//加载手机本地图片
function loadLocal(imgNode, absolutePath) {
    cc.loader.load(absolutePath, function (err, texture) {
        if (err) {
            return;
        }
        setImg(imgNode, new cc.SpriteFrame(texture));
    });
}

module.exports = {
    loadImgByUrl: loadImgByUrl,
    loadLocal: loadLocal,
    setImg: setImg,
};

今天菜鸟分享一个小的技术点：3D模型应该怎样显示到2D的ui层上边。最近逛论坛经常看见有关于这个问题的帖子，正好菜鸟后边也要用到，那就提前研究一下。下边将实现的两种方式简单说明一下。

效果

咱们还是先来看看效果：

1.UIMeshRenderer 组件实现效果

刚接触1.2.0版本的人可能对这个比较陌生，在之前的版本他有另一个名字UIModel，在1.2.0版本改名成了UIMeshRenderer

2.RenderTexture 实现效果

正文

1.UIMeshRenderer实现方式

首先建议大家看一下UIMeshRenderer组件的官方文档，这种方式的实现基本上不涉及代码，但是有几个特别需要注意的问题，我大概说下

• 1.菜鸟习惯将3d节点与2d的ui节点分开放，2d的ui节点默认在Canvas下。3d的节点会创建一个父节点放置，也就是统一放置到ModelContro下，类似于这样：

• 2.添加MeshRenderer组件到3d模型节点，
  • 官方文档是这样说的
  添加方式是在层级管理器中选中带有或继承自 MeshRenderer 组件的节点， 然后点击 属性检查器 下方的 添加组件 按钮，选择 UI/MeshRenderer即可
• 3.添加了MeshRenderer组件后大家预览可能发现并没有效果
  • 接下来就是这种方式的需要注意的重点了：
  • 1：绑定了MeshRenderer组件的3d节点必须放在Canvas下，也就是2DUI层
  • 2：3d节点的大小，3d节点添加了MeshRenderer组件，并且放置到Canvas下，那么他的大小将不会按照3d节点在摄像机下的大小显示，而是按照3d节点相对Canvas的大小来显示，通常模型的大小需要缩放到在UI层下的实际预览大小
  • 3：材质，当大小和层级调整好以后你会发现模型是显示出来了，但是是黑的，如图：

• 你已经到了最后一步了，大家的默认effect 应该是builtin-standard吧，只需要将其改为builtin-unlit就可以了

2.RenderTexture 实现方式

这种方式主要是通过代码来实现的，把 3D 相机照射的内容绘制到 UI 的精灵帧上。 在菜鸟出demo的时候是国庆前，文档和API都还没有更新，还是之前版本的。1.2.0版本对部分参数进行了调整。现在好像API调整了，文档还是之前的，但是没啥影响。 下边咱们说一下重点：

• 1.原理就是 把 3D 相机照射的内容绘制到 UI 的精灵帧上
• 2.那么主要就是3d摄像机，需要创建一个摄像机，然后将你所需要显示在ui上的3d节点移动到摄像机的视觉范围内
• 3.创建Sprite用来摄像机渲染出来的显示
• 4.代码实现

const _colorAttachment = new GFXColorAttachment();
const _depthStencilAttachment = new GFXDepthStencilAttachment();
let renderTex = new RenderTexture();
renderTex.reset({
    width: 500,
    height: 700,
    passInfo: {
        colorAttachments: [_colorAttachment],
        depthStencilAttachment: _depthStencilAttachment,
    }
});

let spriteframe: SpriteFrame = this.camerSprite.spriteFrame;
let sp: SpriteFrame = new SpriteFrame();
sp.reset({
    originalSize: spriteframe.originalSize,
    rect: spriteframe.rect,
    offset: spriteframe.offset,
    isRotate: spriteframe.rotated,
    borderTop: spriteframe.insetTop,
    borderLeft: spriteframe.insetLeft,
    borderBottom: spriteframe.insetBottom,
    borderRight: spriteframe.insetRight,
});

this.camera.targetTexture = renderTex;
sp.texture = renderTex;
this.camerSprite.spriteFrame = sp;

//对比和之前版本的代码，两点调整：
//- 1.SpriteFrame 属性调整
//- 2.renderTex.reset 参数的调整

• 5.在实现过程中可能会出现，本来只想显示指定的模型，但是会将摄像机的缓冲颜色也显示出来，如图：

这里菜鸟是将摄像机的ClearColor的透明度直接调为0，

以 label 为例：

this.label.node.active = fasle 隐藏节点
this.label.ndoe.active = true显示节点

cc.Sprite使用

cc.Sprite

1: 游戏中显示一个图片，通常我们把这个叫做”精灵” sprite

2: cocos creator如果需要显示一个图片，那么需要在节点上挂一个精灵组件,为这个组件指定要显示的图片(SpriteFrame)

3: 显示一个图片的步骤:      

(1) 创建一个节点;      

(2) 添加一个组件;    

 (3) 要显示的图片(SpriteFrame)拖动到SpriteFrame;    

 (4) 配置图片的SIZE_MODE:                

a: CUSTOM 大小和CCNode的大小一致;            

 b: RAW 原始的图片大小;              

c:  TRIMMED 大小为原始图片大小, 显示的内容是裁剪掉透明像素后的图片;      

(5) trim: 是否裁剪掉 图片的透明区域, 如果勾选，就会把完全透明的行和列裁掉, 做帧动画的时候，我们一般是用原始大小不去透明度,动画，不至于抖动;

4: 精灵更换spriteFame;

5: 快捷创建带精灵组件的节点;

图片模式

1:  simple: 精灵最普通的模式, 选择该模式后,图片将缩放到指定的大小;

2:  Tiled: 平铺模式, 图片以平铺的模式，铺地板砖的模式，铺到目标大小上;

3:  Slice: 九宫格模式，指定拉伸区域;    

4:  Filled: 设置填充的方式(圆，矩形)，可以使用比例来裁剪显示图片(只显示的比例);

九宫格的使用

1:  指定拉伸区域, 让图片在拉伸的时候某些区域不会改变;        比如圆角,聊天气泡等

2:  九宫格能省图片资源, (对话框);

3:  编辑九宫格,来制定缩放区域;

4: 体会对话框背景的九宫拉伸;

Filled模式

1:  配置Filled模式

2: 配置Filled模式, 设置为Radius参数;

3: 配置Radius的参数模式,            

中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点                      

 Fill Start 开始的位置: 0 ~1, 右边中心点开始，逆时针走          

 Fill Range: 填充总量(0, 1];          

 FillRange为正，那么就是逆时针，如果为负，那么就是顺时针;

4: 个性化时间进度条案例;

5: 游戏中道具的时间进度显示都可以;

这里Fill Range为负数的时候，会改变旋转方向。正数是逆时针，负数是顺时针。

head.js周围边框倒计时效果

// Learn cc.Class://  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html// Learn Attribute://  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html// Learn life-cycle callbacks://  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html cc.Class({    extends: cc.Component,     properties: {        // foo: {        //     // ATTRIBUTES:        //     default: null,        // The default value will be used only when the component attaching        //                           // to a node for the first time        //     type: cc.SpriteFrame, // optional, default is typeof default        //     serializable: true,   // optional, default is true        // },        // bar: {        //     get () {        //         return this._bar;        //     },        //     set (value) {        //         this._bar = value;        //     }        // },         sprite: {            default: null,            type: cc.Sprite,        },         act_time: 15,    },     // LIFE-CYCLE CALLBACKS:     onLoad () {        //获取组件实例：1代码获取、2编辑器绑定        var _node = this.node.getChildByName("time_bar");        this.sp = _node.getComponent(cc.Sprite);         //1.增加        //this.now_time = 0;         //2.减少        this.now_time = this.act_time;    },     start () {     },     update (dt) {        // //1.增加        // this.now_time += dt;        // var percent = this.now_time / this.act_time; //百分比        // if(percent >= 1){        //     percent = 1;        //     this.now_time = 0;//重新开始        // }        // this.sp.fillRange = percent;          //2.减少        this.now_time -= dt;        var percent = this.now_time / this.act_time; //百分比        if(percent <= 0){            this.now_time = this.act_time;//重新开始        }        this.sp.fillRange = percent;    },});

change_frame.js

// Learn cc.Class://  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/class.html//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/class.html// Learn Attribute://  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html//  - [English] http://docs.cocos2d-x.org/creator/manual/en/scripting/reference/attributes.html// Learn life-cycle callbacks://  - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html//  - [English] https://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.htmlcc.Class({    extends: cc.Component,    properties: {        // foo: {        //     // ATTRIBUTES:        //     default: null,        // The default value will be used only when the component attaching        //                           // to a node for the first time        //     type: cc.SpriteFrame, // optional, default is typeof default        //     serializable: true,   // optional, default is true        // },        // bar: {        //     get () {        //         return this._bar;        //     },        //     set (value) {        //         this._bar = value;        //     }        // },        //1编辑器方式，2代码资源的动态加载        sprite_frame: {            default: null,            type: cc.SpriteFrame,        },    },    // LIFE-CYCLE CALLBACKS:    onLoad () {        //获取组件实例：1代码获取、2编辑器绑定        //var node = this.node.getChildByName("img_time");        this.sp = this.getComponent(cc.Sprite);        this.sp.spriteFrame = this.sprite_frame;//注意是小写spriteFrame    },    start () {    },    // update (dt) {},});

https://blog.csdn.net/ccnu027cs/article/details/102472127

//getCholdByName 获取某个节点 getComponent 获取节点的某个元素
that._addSpriteFrameToContainer(newNode.getChildByName(‘pic’//元素名称).getComponent(cc.Sprite//组件名称), personOb.icon)

前言
在Cocos Creator游戏开发中， 为了改善用户体验，通常会使用声音特效。

一、cc.AudioSource组件简介和基础使用
1:AudioSource组件是音频源组件, 发出声音的源头;
2: AudioSource组件面板:
clip: 声源的播放的音频对象: AudioClip, mp3, wav, ogg,
volume: 音量大小, [0, 1]百分比
mute: 是否静音;
Loop: 是否循环播放;
Play on Load: 是否在组件加载的时候播放;
Preload: 是否预先加载;

二、cc.AudioClip对象
1: 音频剪辑对象，支持的格式有mp3, wav, ogg
2: 可以在编辑器上手动关联,生成AudioCip对象;
3: 可以通过代码加载AudioCip; (后续资源加载模块详细讲解);

三、AudioSource代码使用
1: 代码中获得cc.AudioSource组件:
编辑器关联;
代码获取组件;
2: AudioSource 主要的方法:
play(); 播放音频;
stop(); 停止声音播放;
pause(); 暂停声音播放;
resume(); 恢复声音播放;
rewind(); 重头开始播放;
其它接口见文档;

3: AudioSource代码主要属性:
loop: 是否循环播放
isPlaying: 是否正在播放;
mute: 是否静音;
如果要在开始的时候设置某些属性，可以放到start函数里面;

start () {
      let audioSource : cc.AudioSource = this.node.getChildByName("AudioNode").getComponent(cc.AudioSource);
      audioSource.volume = 0.5;
  
      this.scheduleOnce(function(){
          console.log(audioSource.isPlaying);
          audioSource.pause();     // 暂停播放
      }, 1);
      
      this.scheduleOnce(function(){
          console.log("2",audioSource.isPlaying);
          audioSource.resume();   // 恢复播放
      }, 2);

      this.scheduleOnce(function(){
          console.log("3",audioSource.isPlaying);
          audioSource.rewind();   // 从头开始播放
      }, 3);
      
      this.scheduleOnce(function(){
          console.log("4",audioSource.isPlaying);
          audioSource.stop();   // 停止播放
      }, 4);
      
  }

1: 掌握cc.AudioSource组件的使用;

cc.AudioSource

1:AudioSource组件是音频源组件, 发出声音的源头;
2: AudioSource组件面板:
　　clip: 声源的播放的音频对象: AudioClip, mp3, wav, ogg,
　　volume: 音量大小, [0, 1]百分比
　　mute: 是否静音;
　　Loop: 是否循环播放;
　　Play on Load: 是否在组件加载的时候播放;
　　Preload: 是否预先加载;

cc.AudioClip对象

1: 音频剪辑对象，支持的格式有mp3, wav, ogg
2: 可以在编辑器上手动关联,生成AudioCip对象;
3: 可以通过代码加载AudioCip; (资源加载详细讲解);

AudioSource代码使用

1: 代码中获得cc.AudioSource组件:
　　编辑器关联;
　　代码获取组件;
2: AudioSource 主要的方法:
　　play(); 播放音频;
　　stop(); 停止声音播放;
　　pause(); 暂停声音播放;
　　resume(); 恢复声音播放;
　　rewind(); 重头开始播放;
　　其它接口见文档;
3: AudioSource代码主要属性:
　　loop: 是否循环播放
　　isPlaying: 是否正在播放;
　　mute: 是否静音;
　　如果要在开始的时候设置某些属性，可以放到start函数里面;

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        // 编辑器来指定
        audio: {
            type: cc.AudioSource, 
            default: null,
        },
    },

    // use this for initialization
    onLoad: function () {
        // 获得节点, 获得节点上的组件
        this.audio2 = this.node.getChildByName("audio").getComponent(cc.AudioSource);
    },
    
    start: function() {
        this.audio2.loop = true; // 循环播放, 注意一下位置
        this.audio2.mute = false; // 设置静音
        console.log(this.audio2.isPlaying); // 是否正在播放
        // this.audio.play();
        this.audio2.play();

        /*this.scheduleOnce(function() {
            this.audio.stop();
        }.bind(this), 3);*/

        /*this.scheduleOnce(function() {
            this.audio.pause(); // 暂停
        }.bind(this), 3);
        
        this.scheduleOnce(function() {
            this.audio.resume(); // 恢复
        }.bind(this), 6);*/
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});