cocos creator入门教程（一）—— 初识creator

一、我们在cocos creator新建一个Hello JavaScript项目，都会有一个assets/Scene/helloworld.fire文件。使用cocos creator开发游戏时，项目可以只有一个.fire文件。一般地，我会把这个文件夹改名为assets/scene，下面只有main.fire文件：assets/scene/main.fire。资源管理器结果图如下：

本地目录结构：

打箭头的是需要提交到版本管理库，其他的可以不用提交。

二、双击helloworld.fire文件，在层级管理器可以看到它的结构，

根节点是一个Canvas，点击Canvas节点，在右边的属性面板可以看到Canvas组件有Design Resolution属性，作为屏幕适配的尺寸。例如设置为1334x750，那么美术出资源时一屏界面的大小就是这个尺寸。不同的手机屏幕引擎自动做等比例缩放，具体缩放倍数，当勾选Fix Width表示界面的宽缩放到跟实际屏幕一样，当勾选Fix Height表示界面的高缩放到跟实际屏幕一样。另外一边相应等比例缩放，可能小于屏幕大小而出现黑边，也可能大于屏幕而被裁剪，这些可能都不是我们想要的，后面会说怎么解决。

cocos creator2.1.2版本默认Canvas下面有Main Camera子节点，其他子节点是模版示例。我们下面利用Hello world的模板来实现一个数字自增长的简单例子。首先在Canvas下面添加Label文字节点，如下图：

修改属性检查器：控件名字，默认值，坐标位置。如下图：

 

然后，就可以开始写入口脚本，把它挂到Canvas节点。cocos creator采用组件模式，每个节点都可以挂载不同的组件，包括自己开发的脚本组件。新建一个HelloWorld.js，所有跟界面节点关联的脚本类都继承自cc.Component，我们可以声明一个Label属性，用于关联界面的场景num节点。cc.Component定义了一系列生命周期方法，在节点不同生命周期会调用。下面是入口脚本的简单实现。

第1和2处：声明Label类型的num属性和一个初始为0的数字类型；

第3处：在update函数里面进行自加和修改，这里用了一个系统函数floor；

this.num.string = Math.floor(this._num);

保存之后，点击编辑器中间的播放按钮，用浏览器或者模拟器看效果。

下面我们来看看prefab预制体。在游戏中，经常会遇到一列列的信息，还是动态变化的；比如排行榜里面的每一列，有名次、头像、玩家昵称、金币数量等信息。商场里面的售卖物品，有物品图标，价格等信息。这些信息可以由每一列来动态组成。我们就可以用prefab预制体来实现。我们先在层级管理器中创建好节点关系，如下图：

然后将rankitem节点有层级管理器中拖到下面的资源管理器中，就可以生成预制体。如下图：

然后就可以删除层级管理器中的rankitem节点，直接使用资源管理器的预制rankitem资源。

 

下面我们通过日志看看creator JS函数执行流程：代码如下

通过日志打印，可以看到函数执行的流程：

现在我们已经知道怎样建立游戏入口，怎样制作、加载、显示界面、预制体、执行流程等；

下一篇：UI组件和JS脚本事件绑定