微信小游戏MagnetGame开发（三）游戏开始场景创建

1. 场景创建

　　我们首先将图中预先准备好的资源2拖入到3中或者1中，都OK。然后调整大小和相对位置。这里我们放了一个Label、背景图片和一个开始的图片。我们要给这个开始图片绑定点击事件。接下来简单介绍一下JSP游戏脚本。
这里写图片描述

2. 脚本介绍

下面是一个简单的Node节点的脚本。

cc.Class({
    extends: cc.Component,
    properties: {   //属性
        scoreFXPrefab: {
            default: null,
            type: cc.Prefab
        },
         scoreDisplay: {
            default: null,
            type: cc.Label
        },
    },
     onLoad () {
     //加载游戏资源
},
    start () {

    },
    update (dt) {
    //游戏刷新
   },
    toStartGame: function () { //切换到游戏场景
        cc.director.loadScene("gamesence")
},);

cc.class

cc.Class 是一个很常用的 API，用于声明 Cocos Creator 中的类。

extends

继承，参考Java中的extends。

properties

在脚本里定义了一个scoreFXPrefab：预制体和scoreDisplay：label。他们有什么用呢？
　　假设我把该脚本绑定到1节点中，在脚本的属性里会出现2 scoreFXPrefab 属性和3 scoreDisplay属性。这样我们可以将资源scoreFX（得分动画）和score（分数显示）分别拖动到2 scoreFXPrefab 属性和3 scoreDisplay属性右侧框中。即将Name和游戏资源绑定。因此，我们可以再脚本中操作游戏资源scoreFX和score。
这里写图片描述

onLoad

加载游戏资源，只执行一次。

start

游戏开始要执行的动作。

update

每隔dt时间更新一次游戏UI。

3. Button点击事件绑定

　　我们在场景中添加了一个Play的图片，用以执行游戏的开始动作。怎么将该图片和脚本绑定呢？接下来要把开始图片和上述脚本中的toStartGame函数绑定。
这里写图片描述
　　通过6添加组件，添加一个Button组件4到该图片节点1中。同样的，将脚本startGame添加到该图片节点1中。设置5中 ClickEvent为1。然后将1拖动到5 中的cc.Node当中，在其右侧分别选择startGame脚本和toStartGame函数。
　　至此，通过点击Play, 就会切换到游戏场景。