第01课:初识

第01课:初识 Cocos Creator 之“Hello World”

开篇对 Cocos Creator 做了简单的介绍。本文将介绍正式使用 Cocos Creator 开发前的准备工作,主要内容包括:

  • 下载与安装
  • 创建第一个项目“Hello World”
  • 工作视图区域介绍
  • 拆解“Hello World”项目
  • 调试与运行

下载与安装

访问 Cocos Creator 官方下载地址,在这里很容易找到 “COCOS CREATOR”下载项。一般情况下,我们选择稳定版本即可,有兴趣体验最新版本的开发者,可以选“最新版本”,但这一版本可能会存在 Bug。

本课重点解析 Cocos Creator 2.0 最新版本,我们选择最左边 V2.0 版,根据自己的操作系统下载即可。下载完成后,运行安装程序,顺利的话,大概需要五六分钟,便可成功安装。

创建第一个项目“Hello World”

单击桌面上新生成的“Cocos Creator.exe”图标,启动 Cocos Creator,进入项目管理面板,如下图所示:

该面板上,有“最近打开项目”、“新建项目”、“打开其它项目…”、“帮助”四个选项卡。之前的历史项目记录会展示在“最近打开项目”选项卡的列表中,单击列表中的项目图标,会显示出“打开”按钮和“关闭”文字,单击即可打开或移除项目。

这次,我们单击“新建项目”选项卡,可以看到,Cocos Creator 提供了四种类型的项目模版,分别是“Hello World”、“空白项目”、“范例集合”、“Hello TypeScript"。如果您之前使用过 Cocos 引擎开发项目,相信比较熟悉 Cocos 引擎中的 Sample 目录,它包含了官方提供的各功能模块的使用范例。前三个项目模版,实际上对应着 Sample 目录中的 “Hello World”、“空白项目”,以及“cpp-tests”或“lua-tests”案例。

范例集合

单击“Hello World”项目图标,在目录地址中选择将要创建的目录,单击“新建项目”,稍等几秒后,便可开启 Cocos Creator 的工作视图,如下图所示。

工作视图区域介绍

接下来,我将带大家初步认识下 Cocos Creator 工作视图中的各个组成部分。

层级管理器

左上部分是层级管理器,用于罗列当前场景中的所有节点及其父子关系树。

在 “Hello World” 的场景中,层级管理器共有五个节点,分别是 Canvas、Main Camera、background、cocos、label,分别对应了场景中的画布、摄像机、背景图、Cocos 图标精灵、文字。每一个场景都有一个默认顶层节点,命名为画布 Canvas。鼠标右键层级管理器任意地方,即可通过弹出的菜单为任意节点创建精灵、字体、UI 控件、粒子系统等子节点。

资源管理器

左下部分是资源管理器。工程创建完成,Cocos Creator 会在工程目录下自动生成 assets 目录,存放游戏所用的各类资源文件,并在资源管理器中罗列出来。

在“Hello World”工程的 assets 下,工程默认创建了 Scene、Script、Texture 三个目录,分别对应场景、脚本、图片资源。

当然,游戏开发所需的其它资源,都可放在 assets 目录中,资源管理器会及时将它们展示出来。需要注意的是,Cocos Creator 会自动为每一个资源文件或目录生成 meta 文件,且放在同级目录下,并以它们的名称来命名。该文件主要用来存放对应文件的版本及其它相关信息。不要随意删除它,特别当您使用 SVN 或 Git 进行版本协作时,需同时提交它,保证 Cocos Creator 正确加载资源,及资源信息的统一更新。

场景编辑器

中央 C 位为场景编辑器,主要用来摆放场景。将右边控件库中的控件图标拖进场景中,便可在场景中创建相应的节点。您也可以直接将资源管理器中的资源文件拖进来,Cocos Creator 将在场景中自动生成相应的资源节点。

场景视图

这种拖放式的操作,可高效快速地构建您想表达的场景。当然该工作可以交给美术同学来完成。

控件库

控件库用于管理可放入场景中的控件,内置控件包括精灵、文本、粒子系统、TiledMap 以及一些常用的 UI 控件。选择需要的控件拖动到场景主视图中,即可创建相应控件节点。

若这些内置控件无法满足需求,我们还可以扩展所需要的控件,将其放入“自定义控件”面板项里。添加控件的方法,可参考这里

属性检查器

当我们在层级管理器或者场景编辑器中选择任何一个节点时,场景编辑器右边会展开一个“属性检查器”面板,在这里可以设置节点对象的开放属性,比如位置、大小、缩放、旋转、锚点、颜色、透明度等。当然,不同的节点类型所展示的属性也会有所不同。比如 Canvas,它本身具有 Node 相关属性,除此以外,还有 Canvas 独有的分辨率属性。

另外,如果我们需要为一个节点对象添加 Cocos 引擎功能组件或自定义的脚本组件,可以通过下部“添加组件”按钮来设置。单击“添加组件”,可通过弹出的菜单,为节点增加相应组件功能,包括“碰撞处理”、“动画”、“物理”、“UI 组件”以及我们自己编写的脚本类组件。我们可以使用这种组件化取用的方式,灵活地扩展节点。下图展示了我在项目中所用到的一些脚本组件。

添加组件

控制台

控制台主要用于打印输出日志和错误信息,方便我们排查错误,假如 JavaScript 脚本中出现了一些错误,如下图所示,我在 onLoad() 函数语句前加入“xxx”,很明显,编译将不通过。

这时,我们会在控制台面板上看到如下提示错误:

此外,我们可以通过面板上的字体设置重新设置日志文字的样式,同时,也可将日志复制到文件中。

动画编辑器

在动画编辑器中,我们可进行基本的序列帧动画编辑,这部分内容在后面的开发过程中我们再具体讲解。如果想做更复杂的骨骼动画,我建议大家直接用 Spine,其处理动画的功能更加强大。

拆解“Hello World”项目

Cocos Creator 将设计与编码有机结合,但又让彼此互相独立。前面介绍了工作视图区域的各个组成,下面我们就来看看这些组成是如何有机结合在一起的。

层级管理器中单击“Canvas”,我们将在属性检查器中看到如上图所示的三部分信息。最上面是基类 Node 的基础属性,包括位置、旋转、缩放、锚点、大小、颜色、透明度、变形、分组信息(这是碰撞处理时区分各组是否互相碰撞的重要设置项)。中间是画布 Canvas 的独有属性,包括分辨率。这里请注意一个问题,当机型分辨率与所设置的分辨率不同时,如何适配呢?Cocos 引擎内置了几种常用规则,比如按横向或纵向分辨率进行等比缩放,抑或横、纵向同时等比缩放,且居中留黑边显示等。

第三部分是一个“Hello World”属性区域,用来显示该 Canvas 所挂接的 JS 组件,并显示该组件类所公开的接口属性及属性值。从上图中可以看出,Script 项展示的“HelloWorld.js” 为该项目挂接的 JS 组件,Lable 项展示的“lable”为组件公开的接口属性,Text 中的“Hello,World!”为 lable 的属性值。

Canvas 挂接 JS 组件的流程是这样的:单击下方“添加组件”按钮,在弹出的“添加用户组件”菜单中选择 Script 目录中的 JS 脚本组件类,组件类属性及属性值将同步显示在面板中,且属性值可做修改。菜单式操作方式可以让我们为一个对象很容易挂接多个脚本并传入参数。

接下来,我们结合 HelloWorld.js 源码,进一步了解“Lable”、“Text”所代表的具体含义,以及两者之间的关联。

打开 assets 目录下的 Script 目录,就可以看到这个 HelloWorld.js 文件。用文本编辑器(推荐使用 Sublime Text)打开它,可以看到下图所示的源码。

我们稍微分析下这段源码。cc.Class 是一个由 cc.Component 派生出来的组件类。它通过 properties 关键字,定义了一系列属性:label 是一个默认值为 null 的 cc.Label 对象,text 是一个字符串。接着是两个函数,第一个是 onLoad() 函数,即组件挂接的对象在初始化完成后的回调函数,其中的代码表示将当前脚本的 label 对象显示的文本字符串设置成字符串 text 的值。第二个是 update 函数,即每一帧更新时的回调函数。

现在,我们已了解了组件类的脚本内容,而且它与 Canvas 挂接在一起。

下面,我们再来看看组件类的 label 是如何传入,并通过 Canvas,在场景中显示的。

回到层级管理器,我们看到在 Canvas 下面还有四个对象,分别是 MainCamera、background、cocos、label。在 Cocos Creator 1.X 版本中, 并没有 MainCamera 组件,是 2.0 版本中,新增加的功能。

单击层级管理器中的“MainCamera”,在右边的属性检查器中看到它有 Node 基本属性和 Camera 独有属性。Camera 主要包括以下几个属性。

  • ZoomRatio:视图缩放,改变这个值可以缩放摄像机看到的景象,相当于摄像机的拉进拉远操作。
  • BackgroundColor:颜色缓冲区清空时显示的底色,将 background 删除后,将显示 BackgroundColor 所设置的颜色。
  • Depth:摄像机的深度缓冲值。
  • cullingMask:删除 Mask 值设置,如果您希望某些 Node 属性不显示,可以使用它。
  • clearFlags:是否清空颜色缓冲、深度缓冲、模版缓冲区。

单击 background,在属性检查器中可以看到它包含基类 Node、Widget 和 Sprite 三大属性。将 Node 区域中的 Color 设置成白色,场景编辑器中的背景对象会马上变成白色。

Widget 主要用于排版布局,在这里可以设置如何对齐,如下图所示:

Sprite 是我们经常要用的精灵。开发时,我们只需从资源管理器中拖动一张图片到下方的 SpriteFrame,即可对背景精灵的图片进行快速设置。本例中,我们选用了资源管理器中的 SingleColor 图片,它是一张纯白色图片,当引擎绘制精灵时,默认的颜色混合方式(最终色 = 纹理色(纯白)x 顶点色)决定了它将显示 Node 中设置的颜色。

在层级管理器里单击 Cocos,可以看到图标精灵 Sprite 属性中 SpriteFrame 项为 HelloWorld.png。下面的 Type 项用来设置渲染方式,本项目选择普通(SIMPLE),SizeMode 设置为 TRIMMED,即按照图片非透明区域大小设置精灵大小。若想手动设置它的大小,SizeMode 可改为 CUSTOM;若采用图片原始大小,可选择 RAW。后面的 Trim 项用来设置精灵是否裁切透明边缘区域。最后的 Blend 项,用来设置渲染时顶点混合方式。

我们将 background 再调整为黑色,并在层级管理器中单击“label”,这时场景管理器中对象的 Label 被选中,在属性检查器里,Label 组件的属性也列了出来,如下图所示。

在 String 项后面的输入框中输入文字,即可改变 Label 的文字内容,后面还有一些常用的文字设置,包括对齐方式、大小、排版模式、字体等。

如果将一个 TTF 字体文件放在 assets 下,您便可直接在资源管理器中将它拖放到 Font 框里,从而完成对 Lable 字体的设置。

现在我们明白了,Cocos Creator “Hello World”的工作方式是这样的:

  1. 首先,在空工程里建一个名为“Hello World”的 Scene;
  2. 接着,在该 Scene 里创建一个 Canvas,创建一个精灵 background 作为它的背景,将纯白色图 singleColor.png 设置为它的前景图片,通过 Node 属性中的颜色与它混合后的结果作为背景颜色;
  3. 之后,再创建一个精灵 cocos,将 HelloWorld.png 设置为它的前景图片;
  4. 最后,创建一个文本控件 Label。

完成该设计后,创建 JavaScript 脚本组件类,其中包含 label 和 text 两个参数,在代码中将 text 的值赋给 label 的 String 属性,并在 Cocos Creator 中将 JS 组件类挂接在 Canvas 对象上,再用鼠标单击 label 对象,保持按下状态拖动到属性检查器的 JS 组件参数上,同时在 Text 属性输入框中输入“Hello,World!”,为 text 属性完成赋值。这样整个工程就完成了。

调试与运行

Cocos 的调试运行非常简单。一般情况下,我们直接单击顶点的三角形,运行图标按钮即可弹出浏览器运行。如果想以独立窗口方式运行,可以将“浏览器”切换成“模拟器”再单击运行图标,这时在 PC 上会有独立的 EXE 窗口运行工程。

除此之外,如果您想在手机上尽快看到效果,可以用手机扫描二维码,即可看到工程在移动端的运行效果。是不是很酷?当然,要确保手机和 PC 在同一个局域网里。

总结

如果您使用过 Unity,可能对这一切都比较熟悉。Cocos Creator 的整个布局和操作习惯与 Unity 有很多相似之处,这一点非常棒。对于游戏团队来说,可以在 Unity 和 Cocos Creator 中快速切换,大大降低了学习成本。当然,如果您还只是一个新手,也没关系,学完本课程内容后,您将会很快熟练掌握这一切!

上一篇
下一篇
目录