更新于 

Script 脚本

官方脚本介绍

修改模版

点击右上角【编辑器】按钮，
打开本地资源文件，
进入Creator\2.4.10\resources\static\template文件夹中，
修改初始化脚本文件：

  • new-script.js
  • new-script.ts

注释器

decorator
双斜杠和单斜杠的区别

一般来说：

  • 双斜杠是注释，一般给人看
  • 单斜杠是注解，一般给编译器看
1
2
3
4
5
6
7
8
const {ccclass, property} = cc._decorator;
// 使用@ccclass标注类
@ccclass
export default class HelloWorld extends cc.Component {
    // 使用@property标注属性
    @property(cc.Label)
    label: cc.Label = null;
}

生命周期

Life Cycle Callbacks

下面是按照执行顺序进行排序的生命周期钩子方法：

  • onLoad
    • 组件被加载时调用
  • onEnable
    • 当做键可用时执行
  • start
    • 初始化时调用
  • update(dt)
    • dt表示帧间隔时间
    • 刷新每一帧时执行
  • lateUpdate(dt)
    • update执行完后马上执行
  • onDisable
    • 组件不可用时执行
  • onDestroy
    • 组件被销毁时调用

脚本的使用

脚本使用官方文档

常用API
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
// 获取当前节点
this.node

// 获取节点子节点数组
node.children

// 通过名称获取子节点
node.getChildByName("name")

// 根据节点路径获取节点
cc.find("parentNode/rootNode")

// 获取父节点
node.getParent()

// 将当前节点设置为nodeA的子节点
node.setParent(nodeA)

// 移除节点的所有子节点
node.removeAllChildren()

// 移除节点的子节点nodeA
node.removeChild(nodeA)

// 将节点移除出它的父节点
node.removeFromParent()

// 获取当前节点的组件
this.getComponent(cc.Component)

// 从当前节点的子节点中获取组件
this.getComponentInChildren(cc.Component)
实际使用
Pause按钮点击时显示菜单
Pause按钮点击时显示菜单

创建PauseButton的Node，在上面添加PauseButton脚本，
并将菜单的Node和PauseButton的menu关联：

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
const {ccclass, property} = cc._decorator;

@ccclass
export default class PauseButton extends cc.Component {

    @property(cc.Node)
    menu: cc.Node = null;

    isPause: boolean = false
    start () {
        if(!this.menu){
            console.log("没有指定Menu节点")
            return;
        }
        this.node.on(cc.Node.EventType.MOUSE_DOWN, () => {
            this.isPause = !this.isPause
            if (this.isPause){ // 执行暂停
                this.menu.active = true
                // 直接获取子节点中的Label组件，并进行修改
                this.getComponentInChildren(cc.Label).string = "Continue"

            } else{ // 暂停解除
                this.menu.active = false
                this.getComponentInChildren(cc.Label).string = "Pause"
            }
            
        })
    }
    
}
Quit按钮点击时退出游戏
Quit按钮点击时退出游戏

在Quit按钮上绑定DestroyBtn脚本，
在按钮的MOUSE_DOWN事件被触发时，销毁游戏主界面：

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
@ccclass
export default class DestroyBtn extends cc.Component {

    @property(cc.Node)
    GameWindow: cc.Node = null

    @property(cc.Node)
    MainTitle: cc.Node = null

    isEnd: boolean = false

    start () {
        if(!this.GameWindow || !this.MainTitle){
            console.log("没有指定游戏窗口或结束页面")
            return
        }
        this.node.on(cc.Node.EventType.MOUSE_DOWN,()=>{
            if(!this.isEnd){
                // 将游戏主界面销毁
                this.GameWindow.destroy()
                this.getComponent(cc.Button).interactable = false

                const back = this.MainTitle.children[0]
                back.height = 844;
                back.y = 0

                const titleShadow = this.MainTitle.children[1]
                const titleInner = this.MainTitle.children[2]

                titleShadow.getComponent(cc.Label).string = 'Game Over'
                titleInner.getComponent(cc.Label).string = 'Game Over'

                titleShadow.y = titleInner.y = 500
                this.isEnd = true
            }
        })
    }

}

在update中更新Player位置
在update中更新Player位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@ccclass
export default class Player extends cc.Component {

    @property
    speed: number = 5

    @property
    rotateSpeed: number = 1000

    update (dt) {
        
        // 玩家向上移动
        this.node.y += this.speed * dt;

        // 围绕玩家的特效
        this.node.children[0].angle += this.rotateSpeed * dt;
    }
}

获取和设置资源

Asset Bundle

cocos中，固定使用assets下resources文件夹作为动态加载资源文件夹，

使用cc.resources获取到指定资源：

1
2
3
cc.resources.load('img/target', cc.SpriteFrame,(error:Error, assets: cc.SpriteFrame) => {
    // assets为获取到的资源
})

定时器

cocos提供了定时器方法：

1
schedule( callback:function, interval:number, repeat:number, delay:number);
  • callback 定时器回调
    • 带参数dt，表示间隔时间
  • interval 间隔时间
    • 单位：秒
  • repeat 执行次数
  • delay 延迟时间
    • 单位：秒