李叔叔之游戏引擎Cocos creator基础教程（一）：新建场景树+点击事件

李叔叔之游戏引擎Cocos creator基础教程（一）：新建场景树+点击事件

前言

由于近些年cocos发展迅猛，端游，页游，手游以及最近很火的微信小游戏，基于cocos creator都可以研发，那么现在确实是学习这个国产游戏引擎的好时候。
本文章基于Cocos creator v1.9.1版本，下载安装及环境配置由于太过简单这里不再赘述，本系列旨在讨论技术，交流心得，素材来源于网络：

目录

---

添加场景

第一次进入新建的项目时，在左上角的层级管理器内会自动新增一个名叫Canvas的根节点，该节点的作用可以理解为画板，你可以在这个画板里添加各种类型的节点，来展示你所需要的界面，我这里把这个根节点Canvas改名为START_VIEW。

为了更好的适应手机屏幕，这里建议对场景的分辨率作调整，好处是该场景下的子节点都会根据场景的宽高自动调整。下面的Fit Height默认勾选，而Fit Width也建议勾选，分别为填充满高度和填充满宽度的意思。这里可就要注意咯，如果图片的原始宽高和你设定的场景宽高差别比较大，可能会出现拉伸的现象，所以要提前和美工MM沟通好，当然，如果是GG也请好好沟通。

画板定义好了以后，我们需要把画板存放至一个场景文件内，那么就需要有一个存放场景的文件夹，我们在assets内新建一个文件夹scenes，并在其中新建一个类型为“scene”的场景文件，命名为start_scene。选中start_scene后按ctrl+s，可以将目前的画板内容全部保存在场景内。以后如果有多个场景文件，那么双击选中后展示的便是该场景保存的画板内容。

添加背景

在资源管理器内的assets文件夹下新建resourcse文件夹，并将需要作为背景的图片存放在该目录下。这样做的好处是在后期打包的时候可以方便ide为资源分类，区分哪些资源是需要压缩打包的，可以有效避免打包多余的资源，减小安装包的体积。

将需要作为背景的图片拖拽至场景下，看到场景左侧有一个向下的箭头即可，代表该图片存放于场景内部。拖拽的时候不要手抖哦，一不小心就会变成同级目录啦!

添加按钮

具体操作同背景，这里我给按钮的图片改个名字叫做start_bt，不同的公司可能会有一些不同的命名规则，这里就不过多约束了。图片添加进场景后，默认以图片的xy轴中心点为锚点，展示在场景的锚点上（场景的锚点默认也是正中间 且不可修改）。这里可以将按钮图片向下拖动，用户体验会更和谐，你要是想反人类，那么…你开心就好。

为场景添加JS文件

首先我们需要有一个存放js代码的文件夹，在assets下新建scripts文件夹，并在内创建一个类型为JavaScript的文件，命名为start_scene，这里和场景的名称一致，这样做的好处是如果场景过多，js文件过多，从命名上就可以看出场景与js文件的关联关系。

为按钮添加点击事件

我们的按钮需要有点击事件，才可以让游戏正常运行下去，那么下面我们就来看看如何为按钮添加一个点击事件。首先选中按钮节点，在右侧的属性检查器中拖至最下方。

选择添加组件>选择添加UI组件>Button

按钮的点击事件添加好了，下面需要为这个按钮的点击事件添加业务逻辑，这就需要用js代码来实现了，这里以场景跳转为例，我们让按钮被点击后，跳转至另一个场景。打开start_scene.js文件，添加如下代码：

现在js代码写好了，我们把js文件和按钮的点击事件关联起来：首先，选中我们最初的画板，也就是START_VIEW，在右侧的属性检查器中选择：添加组件>添加用户脚本组件>start_scene，这样，我们的画板和js文件就关联起来了。

接着是添加按钮需要被执行的方法数量，注意，是数量：

选择按钮节点，然后在右侧的Button内将Click Events的数字改为1，这代表点击后有一个方法被执行。

下面需要选择被执行的方法，因为方法是存在于js文件，而js文件是被关联在场景内，而这里可以输入的类型为cc.Node，我们无法直接把场景拖拽进去，所以我们需要把场景的根节点拖拽至Click Events下面的cc.Node内，依次选择start_scene以及我们自定义的方法。这样系统才能识别出要执行的是哪个js文件内的哪个方法。

最后启动，运行，大功告成，由于在外出差，同行的黄总已经熟睡很久了，结尾略简单，下一章介绍如何为按钮添加点击动画+场景跳转，恩，暂时先叫这个吧，我先去睡一觉再说，拜。