- 富文本（RichText）
优点：自定义颜色，大小，描边，还能加图片。对于复杂的文本表现力更好。
缺点：cocos的富文本是由Label组件拼装实现的。低版本会打断合批。Label太多导致卡顿。
常用
// 换行符 <br/> // 加粗 <b> </b> // 字体颜色 <color=#FFFFFF> </color> // 描边颜色及宽度 <outline color=#000000 width=2> </outline> // 图片，Image Atlas需先绑定图集，还可以绑定点击事件 <img src='图片名字' click='点击方法名'/> // 字体大小 <size=20>字体大小</size> //斜体 <i>斜体</i> //下划线 <u>下划线</u> //点击事件 记得先挂载脚本，test为方法名 <on click="test">点击</on>
- 遮罩
用例：圆形头像
在父级节点加渲染组建 Mask - 适配
加ui组件Widget - 存储和读取用户数据
- 存储数据
cc.sys.localStorage.setItem('gold', 100);
对于复杂的对象数据，我们可以通过将对象序列化为 JSON 后保存：
userData = { name: 'Tracer', level: 1, gold: 100 }; cc.sys.localStorage.setItem('userData', JSON.stringify(userData));
- 读取数据
cc.sys.localStorage.getItem(key)
读取json数据
var userData = JSON.parse(cc.sys.localStorage.getItem('userData'));
- 清除数据
移除一个数据
cc.sys.localStorage.removeItem('name')
清空数据
cc.sys.localStorage.clear()
- 对象和json数据存储及处理
const {ccclass, property} = cc._decorator; class Person{ id: number; name: string; wugong: string[]; } @ccclass export default class Wuli extends cc.Component { start(){ let person = new Person(); person.id = 10; person.name = '小王'; person.wugong = ['降龙十八掌', '独孤九剑']; //对象转json let json = JSON.stringify(person); //存储 cc.sys.localStorage.setItem('info', json); //json转对象 let person2: Person = Object.assign(new Person(), JSON.parse(json)); } }
- 网络请求
let url = 'http://xxx.com/api?name=xxx'; //请求 let request = cc.loader.getXMLHttpRequest(); request.open('GET', url, true);//true开启异步请求 request.onreadystatechange = () => { //请求结束后，获取数据 if(request.readyState == 4 && request.status == 200){ console.debug('请求完成'); console.debug(request.responseText);//内容 } } request.send();//发送请求
- 用代码自定义一个播放Animation动画播放组件
const {ccclass, property} = cc._decorator; @ccclass export default class MyAnimation extends cc.Component { //每秒播放速度 @property speed: number = 0.1; //播放帧数组 @property([cc.SpriteFrame]) sprites: cc.SpriteFrame[] = []; //是否播放动画 @property isPlay: boolean = false; //当前播放帧 index:number = 0; //计时器 timer:number = 0; start (){} update (dt){ if(this.isPlay){ //播放动画 //计时器增加 this.timer += dt; if(this.timer > this.speed){ this.timer =0; //切换帧 012 012 012 this.index++; if(this.index >= this.sprites.length){ this.index = 0; } //更换帧图片 this.getComponent(cc.Sprite).spriteFrame = this.sprites[this.index]; } } } //开始 play(){ this.isPlay = true; } //停止 stop(){ this.isPlay = false; } }
调用
import MyAnimation from "./MyAnimation"; const {ccclass, property} = cc._decorator; @ccclass export default class NewClass extends cc.Component { start () { this.getComponent(MyAnimation).play(); } }
- 自定义封装一个玩家控制器
const {ccclass, property} = cc._decorator; //写个单例 封装键盘控制玩家移动 export default class Input{ private static instance: Input = null; //水平轴 horizontal: number = 0; //垂直轴 vertical: number = 0; static get Instance(){ if(this.instance = null){ this.instance = new Input(); } return this.instance; } constructor(){ //键盘按下 cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,(event)=>{ if(event.keyCode == cc.macro.KEY.w){ this.vertical = 1; } else if(event.keyCode == cc.macro.KEY.s){ this.vertical = -1; } if(event.keyCode == cc.macro.KEY.a){ this.horizontal = -1; }else if(event.keyCode == cc.macro.KEY.d){ this.horizontal = 1; } }); //键盘抬起 归0 cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,(event)=>{ if(event.keyCode == cc.macro.KEY.w){ this.vertical = 0; } else if(event.keyCode == cc.macro.KEY.s){ this.vertical = 0; } if(event.keyCode == cc.macro.KEY.a){ this.horizontal = 0; }else if(event.keyCode == cc.macro.KEY.d){ this.horizontal = 0; } }); } }
调用
import Input from "./Input"; const {ccclass, property} = cc._decorator; @ccclass export default class Player extends cc.Component { //速度 speed: number = 20; start () { } update (dt) { //移动 this.node.x += this.speed * dt * Input.Instance.horizontal; this.node.y += this.speed * dt * Input.Instance.vertical; } }
- 摄像头跟随玩家移动
update(dt){ //player为玩家 减去的是屏幕一般偏差的距离 if(this.player != null){ cc.Camera.main.node.x = this.player.x-240; cc.Camera.main.node.y = this.player.y-160; } }
- 回调
小鸟预设体绑定脚本
const {ccclass, property} = cc._decorator; @ccclass export default class Bird extends cc.Component { //游戏结束回调 over: Function; //加分回调 add: Function; start () { //结束 this.over(); //加分 this.add(); } update (dt) { } }
其他地方使用
import Bird from "./Bird"; const {ccclass, property} = cc._decorator; @ccclass export default class Test extends cc.Component { //绑定小鸟预设体 @property(cc.Prefab) birdPre: cc.Prefab; score: number = 0; start () { //创建小鸟 let bird = cc.instantiate(this.birdPre); //设置父物体 bird.setParent(this.node); //加分回调 bird.getComponent(Bird).add = ()=> { this.score += 100; } //游戏结束回调 bird.getComponent(Bird).over = ()=> { console.debug('游戏结束'); } } update (dt) { } }
