cocos 2.4*版本的基础使用笔记分享（三）

富文本（RichText）

优点：自定义颜色，大小，描边，还能加图片。对于复杂的文本表现力更好。
缺点：cocos的富文本是由Label组件拼装实现的。低版本会打断合批。Label太多导致卡顿。

常用

// 换行符
<br/>
// 加粗
<b> b>
// 字体颜色
 color>
// 描边颜色及宽度
<outline color=#000000 width=2> outline>
// 图片，Image Atlas需先绑定图集，还可以绑定点击事件
<img src='图片名字' click='点击方法名'/>
// 字体大小
字体大小size>
//斜体
<i>斜体i>
//下划线
<u>下划线u>
//点击事件 记得先挂载脚本，test为方法名 
<on click="test">点击on>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

遮罩
用例：圆形头像
在父级节点加渲染组建 Mask

适配
加ui组件Widget

存储和读取用户数据

网络请求

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();//发送请求
1
2
3
4
5
6
7
8
9
10
11
12

用代码自定义一个播放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;
    }
}
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

调用

import MyAnimation from "./MyAnimation";

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    start () {
        this.getComponent(MyAnimation).play();
    }
}
1
2
3
4
5
6
7
8
9
10
11

自定义封装一个玩家控制器

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;
            }
        });
    }
}
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

调用

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;
    }
}

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

摄像头跟随玩家移动

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;
	}
}
1
2
3
4
5
6
7

回调
小鸟预设体绑定脚本

const {ccclass, property} = cc._decorator;

@ccclass
export default class Bird extends cc.Component {
    //游戏结束回调
    over: Function;
    //加分回调
    add: Function;

    start () {
        //结束
        this.over();
        //加分
        this.add();
    }

    update (dt) {
        
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

其他地方使用

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) {
        
    }
}
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