微信号:CocosEngine

介绍:Cocos引擎官方账号,第一时间为您送上引擎动态、精品教程、达人专访等干货,还会定期举办有奖活动喔!

开启你的 Cocos Creator 第一个小游戏吧!

2018-03-06 23:55 stillwater123

这是一个官方文档的补充版,以官方文档的「快速上手:制作第一个游戏」为基础,整合了其他文档内容,同时添加一下自己学习文档的理解,不仅能复习自己学到的知识,也帮助新人学习开发更加简单,好了,话不多说,进入正题。 


ps: 
1、观看这篇的同学默认都掌握了 Javascript 基础知识 
2、直到编写主角脚本部分之前基本是官方文档的内容,从编写主角脚本部分开始会在官方文档的基础上加入自己的理解并且整合了官方没有整合到「快速上手:制作第一个游戏」的文档内容,
红色部分为重点 
3、有能力的同学建议最好还是自己查阅官方 API 和说明来理解文档内容,这样会更加深刻。
4、如有理解错误,欢迎指正


打开初始项目


1、我们首先启动 Cocos Creator,然后选择打开其他项目

2、在弹出的文件夹选择对话框中,选中我们刚下载并解压完成的 start_project,点击打开按钮

3、Cocos Creator 编辑器主窗口会打开,我们将看到如下的项目状态



检查游戏资源


下面我们先来了解一下项目中都有哪些资源,请关注名为资源管理器的面板,这里显示的是项目中的所有资源树状结构。(项目资源指的就是游戏的字体、场景图片、主角模型、音乐音效等) 

可以看到,项目资源的根目录名叫assets,对应我们解压之后初始项目中的 assets 目录,只有这个目录下的资源才会被 Cocos Creator 导入项目并进行管理。 

资源管理器可以显示任意层次的目录结构,我们可以看到这样的图标就代表一个文件夹,点击文件夹左边的三角图标可以展开文件夹的内容。将文件夹全部展开后, 资源管理器 中就会呈现如下图的状态。 

 
每个资源都是一个文件,导入项目后根据扩展名的不同而被识别为不同的资源类型,其图标也会有所区别,下面我们来看看项目中的资源各自的类型和作用:

  • 声音文件,一般为 mp3 文件,我们将在主角跳跃和得分时播放名为 jump 和 score 的声音文件

  • 位图字体,由 fnt 文件和同名的 png 图片文件共同组成。位图字体(Bitmap Font)是一种游戏开发中常用的字体资源


  • 各式各样的缩略图标,这些都是图像资源,一般是 png 或 jpg 文件。图片文件导入项目后会经过简单的处理成为 texture 类型的资源,之后就可以将这些资源拖拽到场景或组件属性中去使用了。


创建游戏场景


场景是承载了所有游戏内容的载体,当玩家运行游戏时,就会载入游戏场景,游戏场景加载后就会自动运行所包含组件的游戏脚本,实现各种各样开发者设置的逻辑功能。所以除了资源以外,游戏场景是一切内容创作的基础,我们现在就新建一个场景。

1、在资源管理器中点击选中 assets 目录,确保我们的场景会被创建在这个目录下

2、点击资源管理器左上角的加号按钮,在弹出的菜单中选择 Scene 

3、我们创建了一个名叫 New Scene 的场景文件,右键点击它并选择重命名,将它改名为 game

4、双击 game,就会在场景编辑器层级编辑器中打开这个场景


了解 Canvas


打开场景后, 层级管理器中会显示当前场景中的所有节点和他们的层级关系。我们刚刚新建的场景中只有一个名叫 Canvas 的节点,Canvas 可以被称为画布节点或渲染根节点,点击选中 Canvas,可以在属性检查器中看到他的属性。 

这里的 Design Resolution 属性规定了游戏的设计分辨率,Fit Height 和 Fit Width 规定了在不同尺寸的屏幕上运行时,我们将如何缩放 Canvas 以适配不同的分辨率。 


由于提供了多分辨率适配的功能,
我们一般会将场景中的所有负责图像显示的节点都放在 Canvas 下面。这样当 Canvas 的 scale(缩放)属性改变时,所有作为其子节点的图像也会跟着一起缩放以适应不同屏幕的大小。


设置场景图像


添加背景

首先在资源管理器里按照 assets/textures/background 的路径找到我们的背景图像资源,点击并拖拽这个资源到层级编辑器中的 Canvas 节点上,直到 Canvas 节点显示橙色高亮,表示将会添加一个以 background 为贴图资源的子节点。 
 

这时松开鼠标按键,可以看到 Canvas 下面添加了一个名叫 background 的节点。当我们使用拖拽资源的方式添加节点时,节点会自动以贴图资源的文件名来命名。 


我们在对场景进行编辑修改时,可以通过主菜单文件->保存场景来及时保存我们的修改。也可以使用快捷键 Ctrl+S(Windows)或 Cmd + S(Mac)来保存。


修改背景尺寸


在 场景编辑器中,可以看到我们刚刚添加的背景图像,下面我们将修改背景图像的尺寸,来让他覆盖整个屏幕。 


首先选中 background 节点,然后点击主窗口左上角工具栏第四个矩形变换工具: 
 
使用这个工具我们可以方便的修改图像节点尺寸,将鼠标移动到场景编辑器 background 的左边,按住并向左拖拽直到 background 左边超出表示设计分辨率的蓝色线框。然后再用同样的方法将 background 的右边向右拖拽。 

之后需要拖拽上下两边,使背景图的大小能够填满设计分辨率的线框。 

在使用 矩形变换工具 修改背景图尺寸时,可以在属性检查器中看到 Node (节点)中的 Size 属性也在随之变化,完成后我们的背景图尺寸大概是 (1360, 760)。你也可以直接在 Size 属性的输入框中输入数值,使用矩形变换工具可以达到同样效果。这样大小的背景图在市面流行的手机上都可以覆盖整个屏幕,不会出现穿帮情况。


添加地面

我们的主角需要一个可以在上面跳跃的地面,我们马上来添加一个。用和添加背景图相同的方式,拖拽资源管理器中 assets/textures/ground 资源到层级管理器的 Canvas 上。这次在拖拽时我们还可以选择新添加的节点和 background 节点的顺序关系。拖拽资源的状态下移动鼠标指针到 background 节点的下方,直到在 Canvas 上显示橙色高亮框,并同时在 background 下方显示表示插入位置的绿色线条,然后松开鼠标,这样 ground 在场景层级中就被放在了 background 下方,同时也是 Canvas 的一个子节点。


在层级管理器中,显示在下方节点的渲染顺序会在上方节点的后面,我们可以看到位于最下的 ground 物体在场景编辑器中显示在了最前。另外子节点也会永远显示在父节点之前,我们可以随时调整节点的层级顺序和关系来控制他们的显示顺序。


按照修改背景的方法,我们也可以使用矩形变换工具来为地面节点设置一个合适的大小。在激活矩形变换工具的时候,如果拖拽节点顶点和四边之外的部分,就可以更改节点的位置。下图是我们设置好的地面节点状态: 

除了矩形变换工具之外,我们还可以使用移动工具来改变节点的位置。尝试按住移动工具显示在节点上的箭头并拖拽,就可以一次改变节点在单个坐标轴上的位置。


我们在设置背景和地面的位置和尺寸时不需要很精确的数值,可以凭感觉拖拽。如果您偏好比较完整的数字,也可以按照截图直接输入 position 和 size 的数值。


添加主角

接下来我们的主角小怪兽要登场了,从资源管理器拖拽 assets/texture/PurpleMonster 到层级管理器中 Canvas 的下面,并确保他的排序在 ground 之下,这样我们的主角会显示在最前面。 注意小怪兽节点应该是 Canvas 的子节点,和 ground 节点平行。


为了让主角的光环在场景节点中非常醒目,我们右键点击刚刚添加的 PurpleMonster 节点,选择重命名之后将其改名为 Player。


接下来我们要对主角的属性进行一些设置,首先是改变锚点 (Anchor) 的位置。默认状态下,任何节点的锚点都会在节点的中心,也就是说该节点中心点所在的位置就是该节点的位置。我们希望控制主角的底部的位置来模拟在地面上跳跃的效果,所以现在我们需要把主角的锚点设置在脚下。在属性检查器里找到 Anchor 属性,把其中的 y 值设为 0,可以看到场景编辑器中,表示主角位置的移动工具的箭头出现在了主角脚下。 


注意锚点的取值,锚点的取值为 (0,0) 时表示锚点在节点的左下角,取值为 (1,1) 时表示锚点在节点的右上角,(0.5,0.5) 表示在节点的中心,其他的可以类推。 


接下来在场景编辑器中拖拽 Player,把他放在地面上,效果如下图: 

这样我们基本的场景美术内容就配置好了。下面一节我们要编写代码让游戏里的内容生动起来。


编写主角脚本


Cocos Creator 开发游戏的一个核心理念就是让内容生产和功能开发可以流畅的并行协作,我们在上个部分着重于处理美术内容,而接下来就是通过编写脚本来开发功能的流程,之后我们还会看到写好的程序脚本可以很容易的被内容生产者使用。


如果你从没写过程序也不用担心,我们会在教程中提供所有需要的代码,只要复制粘贴到正确的位置就可以了,之后这部分工作可以找您的程序员小伙伴来解决。下面让我们开始创建驱动主角行动的脚本吧。


1、首先在资源管理器中右键点击 assets 文件夹,选择新建->文件夹 

2、右键点击 New Folder,选择重命名,将其改名为 scripts,之后我们所有的脚本都会存放在这里。

3、右键点击 scripts 文件夹,选择新建->JavaScript,创建一个 JavaScript 脚本

4、将新建脚本的名字改为 Player。双击这个脚本,打开代码编辑器。


注意: Cocos Creator 中脚本名称就是组件的名称,这个命名是大小写敏感的!如果组件名称的大小写不正确,将无法正确通过名称使用组件!


编写组件属性


打开脚本后我们会发现里面已经有一些编辑好的代码块:



我们来大概了解一下这些代码的作用。首先我们可以看到一个包裹了全局的 cc.Class() 方法,什么是 cc 呢?cc 是 Cocos 的简称,Cocos 引擎的主要命名空间,引擎代码中所有的类,函数,属性和常量都在这个命名空间中定义。而 Class() 就是 cc 模块下的一个方法,这个方法用于声明 Cocos Creator 中的类,为了方便区分,我们把使用 cc.Class 声明的类叫做 CCClass。Class() 方法的参数是一个原型对象,在原型对象中以键值对的形式设定所需的类型参数,就能创建出所需要的类。 


例如:



以上代码用 cc.Class() 方法创建了一个类型,并且赋给了 Sprite 变量。同时还将类名设为  “sprite”,类名用于序列化,一般可以省略。 


对于 cc.Class 的详细学习可以参考:http://docs.cocos.com/creator/manual/zh/scripting/class.html


现在我们回到脚本编辑器看回之前的代码,这些代码就是编写一个组件(脚本)所需的结构。具有这样结构的脚本就是 Cocos Creator 中的组件(Component),他们能够挂载到场景中的节点上,提供控制节点的各种功能。我们先来设置一些属性,然后看看怎样在场景中调整他们。



Cocos Creator 规定一个节点具有的属性都需要写在 properties 代码块中,这些属性将规定主角的移动方式,在代码中我们不需要关心这些数值是多少,因为我们之后会直接在属性检查器中设置这些数值。 以后在游戏制作过程中,我们将需要能够随时调整的属性都可以放在 properties 中。


现在我们可以把 Player 组件添加到主角节点上。在层级编辑器中选中 Player 节点,然后在属性检查器中点击添加组件按钮,选择 添加用户脚本组件->Player,为主角节点添加 Player 组件。 

现在我们可以在属性检查器中(需要选中 Player 节点)看到刚添加的 Player 组件了,按照下图将主角跳跃和移动的相关属性设置好: 
 
这些数值除了 jumpDuration 的单位是秒之外,其他的数值都是以像素为单位的,根据我们现在对 Player 组件的设置:我们的主角将能够跳跃 200 像素的高度,起跳到最高点所需的时间是 0.3 秒,最大水平方向移动速度是 400 像素每秒,水平加速度是 350 像素每秒。


这些数值都是建议,一会等游戏运行起来,您完全可以按照自己的喜好随时在属性检查器中修改这些数值,不需要改动任何代码,很方便吧!


编写跳跃和移动代码


下面我们添加一个方法,来让主角跳跃起来,在 properties: {…}, 代码块的下面,添加叫做 setJumpAction 的方法:



这里就需要了解一下 Cocos Creator 的动作(Action)系统了。由于动作系统比较复杂,这里就简单和初学者形容一下,若形容不当欢迎指正。


在 Cocos Creator 中,动作简单来说就是节点的位移,缩放和旋转。


例如在上面的代码中,moveBy() 方法的作用是在规定的时间内移动指定的一段距离,第一个参数就是我们之前定义主角属性中的跳跃时间,第二个参数是一个Vec2(表示 2D 向量和坐标)类型的对象,为了更好的理解,我们可以看看官方给的函数官方说明:



可以看到,方法 moveBy 一共可以传入三个参数,前两个参数我们已经知道,第三个参数是 Number 类型的 Y 坐标,具体作用我自己也还没有搞清楚,我大致的猜测是这样的,我们可以发现第二个参数是可以传入两种类型的,第一种是 Number 类型,第二种才是 Vec2 类型,如果我们在这里传入的是 Number 类型,那么默认这个参数就是 X 坐标,此时就要填第三个参数,为 Y 坐标。上面的例子中 cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)) 第二个参数传入的是使用 cc.p 方法构建的 Vec2 类型对象,这个类型表示的是一个坐标,即有 X 坐标也有 Y 坐标,因为不需要再传入第三个参数,这是我个人的理解,如果有错的话希望大佬指出!同时注意官方的一段话 x and y are relative to the position of the object. ,这句话的意思是传入的 X、Y 坐标都是相对于节点当前的坐标位置,而不是整个坐标系的绝对坐标。


了解了参数的含义之后,我们再来关注 moveBy() 方法的返回值,看官方说明可以知道,这个方法返回的是一个 ActionInterval 类型的对象,ActionInterval 在 Cocos 中是一个表示时间间隔动作的类, 这种动作在已定时间内完成。到这里我们就能理解代码 cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut()) 前一部分的意思了,它的意思就是构造一个 ActionInterval 类型的对象,这个对象表示在 jumpDuration 的时间内,移动到相对于当前节点的(0,this.jumpHeight)的坐标位置,简单来说,就是一个向上跳跃的动作。 


那么后半部分
easing(cc.easeCubicActionOut()) 的作用是什么呢?easing 是 ActionInterval 类下的一个方法,这个方法可以让时间间隔动作呈现为一种缓动运动,传入的参数是一个缓动对象,返回一个 ActionInterval 类型对象,这里传入的是使用 easeCubicActionInOut 方法构建的缓动对象,EaseCubicInOut 是按三次函数缓动进入并退出的动作,具体曲线可参考下图: 

如果还有不懂的可以查看官方 API 及文档:http://docs.cocos.com/creator/api/zh/modules/cc.html?h=easecubicactionout()


接下来看代码的最后一句 return cc.repeatForever(cc.sequence(jumpUp, jumpDown));,repeatForever 非常好理解,就如其字面意思:永远地重复一个动作(返回ActionInterval),在这里就是一直重复的跳起来,落下去,这个方法需要传入一个FiniteTimeAction类型的参数,这里传入的参数是使用cc.sequence()方法返回一个ActionInterval类型的对象,sequence()方法的作用是根据传入的Action对象顺序执行动作,创建的动作将按顺序依次运行,所以 cc.sequence(jumpUp, jumpDown) 就是一个先起跳再下降的动作。


接下来回到游戏制作过程,在 onLoad 方法里调用刚添加的 setJumpAction 方法,然后执行 runAction 来开始动作:



onLoad 方法会在场景加载后立刻执行,所以我们会把初始化相关的操作和逻辑都放在这里面。我们首先将循环跳跃的动作传给了 jumpAction 变量,之后调用这个组件挂载的节点下的 runAction 方法,传入循环跳跃的 Action 从而让节点(主角)一直跳跃。


保存脚本,然后我们就可以开始第一次运行游戏了! 


点击 Cocos Creator 编辑器上方正中的预览游戏按钮
,Cocos Creator 会自动打开您的默认浏览器并开始在里面运行游戏,现在应该可以看到我们的主角——紫色小怪兽在场景中间活泼的蹦个不停了。


移动控制


只能在原地傻蹦的主角可没前途,让我们为主角添加键盘输入,用 A 和 D 来控制他的跳跃方向。 


在 setJumpAction 方法给下面添加 setInputControl 方法:



有 Android 开发经验的同学比较好理解,这里的监听器实质上就和 Android 里的 OnClickListener 差不多,在 cc 中通过 eventManager 来管理事件监听器注册和派发系统事件。原始设计中,它支持鼠标,触摸,键盘,陀螺仪和自定义事件。 在 Creator 设计中,鼠标,触摸和自定义事件的监听和派发请参考:http://cocos.com/docs/creator/scripting/events.html


总之这里通过向 eventManager 注册了一个监听器,这个监听器用来监听键盘输入,通过 switch 判断键盘上的 A 和 D 是否被按下或松开,若按下就执行对应的操作,由于事件管理器和监听器比较复杂,这里不过多赘述,想了解的同学麻烦查看官方 API及文档。


然后修改 onLoad 方法,在其中加入向左和向右加速的开关,以及主角当前在水平方向的速度,最后再调用我们刚添加的 setInputControl 方法,在场景加载后就开始监听键盘输入:



最后修改 update 方法的内容,添加加速度、速度和主角当前位置的设置:



update 在场景加载后就会每帧调用一次,传回的参数 dt 是每帧调用的时间,我们一般把需要经常计算或及时更新的逻辑内容放在这里。在我们的游戏中,根据键盘输入获得加速度方向后,就需要每帧在 update 中计算主角的速度和位置,this.node.x 就是当前组件挂载的节点的 x 坐标。


保存脚本后,下面就可以去泡杯茶,点击预览游戏来看看我们最新的成果。在浏览器打开预览后,用鼠标点击一下游戏画面(这是浏览器的限制,要点击游戏画面才能接受键盘输入),然后就可以按A和D键来控制主角左右移动了!


感觉移动起来有点迟缓?主角跳的不够高?希望跳跃时间长一些?没问题,这些都可以随时调整。只要为 Player 组件设置不同的属性值,就可以按照您的想法调整游戏。这里有一组设置可供参考:



这组属性设置会让主角变得灵活无比,至于如何选择,就看你想做一个什么风格的游戏了。


制作星星


主角现在可以跳来跳去了,我们要给玩家一个目标,也就是会不断出现在场景中的星星,玩家需要引导小怪兽碰触星星来收集分数。被主角碰到的星星会消失,然后马上在随机位置重新生成一个。


制作 Prefab

对于需要重复生成的节点,我们可以将他保存成 Prefab(预制) 资源,作为我们动态生成节点时使用的模板。关于 Prefab 的更多信息,请阅读预制资源。


首先从资源管理器中拖拽 assets/textures/star 图片到场景,位置随意,我们只是需要借助场景作为我们制作 Prefab 的工作台,制作完成后会我们把这个节点从场景中删除。


我们不需要修改星星的位置或渲染属性,但要让星星能够被主角碰触后消失,我们需要为星星也添加一个专门的组件。按照和添加 Player 脚本相同的方法,添加名叫 Star 的 JavaScript 脚本到 assets/scripts/ 中。 
 
接下来双击这个脚本开始编辑,星星组件只需要一个属性用来规定主角距离星星多近时就可以完成收集,修改 properties,加入以下内容:



保存脚本后,将这个脚本添加到刚创建的 star 节点上。然后在属性检查器中把 Pick Radius 属性值设为 60: 

Star Prefab 需要的设置就完成了。现在从层级管理器中将 star 节点拖拽到资源管理器中的 assets 文件夹下,就生成了名叫 star 的 Prefab 资源。 
 
现在可以从场景中删除 star 节点了,后续可以直接双击这个 star Prefab 资源进行编辑。

接下去我们会在脚本中动态使用星星的 Prefab 资源生成星星。


添加游戏控制脚本

星星的生成是游戏主逻辑的一部分,所以我们要添加一个叫做 Game 的脚本作为游戏主逻辑脚本,这个脚本之后还会添加计分、游戏失败和重新开始的相关逻辑。


添加 Game 脚本到 assets/scripts 文件夹下,双击打开脚本。首先添加生成星星需要的属性:



这里初学者可能会疑惑,为什么像 starPrefab 这样的属性会用中括号括起来,括号里面还有新的“属性”呢?其实这是属性的一种完整声明,之前我们的属性声明都是不完整的,有些情况下,我们需要为属性声明添加参数,这些参数控制了属性在属性检查器中的显示方式,以及属性在场景序列化过程中的行为。例如:



以上代码为 score 属性设置了三个参数 default, displayName 和 tooltip。这几个参数分别指定了 score 的默认值(default)为 0,在 属性检查器 里,其属性名(displayName)将显示为:“Score (player)”,并且当鼠标移到参数上时,显示对应的 Tooltip。


下面是常用参数:

default: 设置属性的默认值,这个默认值仅在组件第一次添加到节点上时才会用到 
type: 限定属性的数据类型,详见 CCClass 进阶参考:type 参数 
visible: 设为 false 则不在 属性检查器 面板中显示该属性 
serializable: 设为 false 则不序列化(保存)该属性 
displayName: 在 属性检查器 面板中显示成指定名字 
tooltip: 在 属性检查器 面板中添加属性的 Tooltip


所以上面的代码



就可以理解了。首先在 Game 组件下声明了 starPrefab 属性,这个属性默认值为 null,能传入的类型必须是 Prefab 预制资源类型。这样之后的 ground、player 属性也可以理解了。


保存脚本后将 Game 组件添加到层级编辑器中的 Canvas 节点上(选中 Canvas 节点后,拖拽脚本到属性检查器上,或点击属性检查器的添加组件按钮,并从用户自定义脚本中选择 Game,接下来从 资源管理器 中拖拽star Prefab 资源到Game组件的Star Prefab属性中。这是我们第一次为属性设置引用,只有在属性声明时规定 type 为引用类型时(比如我们这里写的 cc.Prefab 类型),才能够将资源或节点拖拽到该属性上。


接下来从层级编辑器中拖拽 ground 和 Player  节点到组件中相同名字的属性上,完成节点引用。


然后设置 Min Star Duration 和 Max Star Duration 属性的值为 3 和 5,之后我们生成星星时,会在这两个之间随机取值,就是星星消失前经过的时间。


在随机位置生成星星

接下来我们继续修改 Game 脚本,在 onLoad 方法后面添加生成星星的逻辑:



这里需要注意几个问题: 
1、节点下的 y 属性对应的是锚点所在的 y 坐标,因为锚点默认在节点的中心,所以需要加上地面高度的一半才是地面的 y 坐标
2、instantiate 方法的作用是:克隆指定的任意类型的对象,或者从 Prefab 实例化出新节点,返回值为 Node 或者 Object 
3、Node 下的 addChild 方法结果是将新节点建立在该节点的下一级,所以新节点的显示效果在该节点之上
4、Node 下的 setPosition 方法作用是:设置节点在父节点坐标系中的位置。可以通过两种方式设置坐标点:1、传入 2 个数值 x 和 y。2、传入 cc.v2(x, y) 类型为 cc.Vec2 的对象。 
5、通过 Node 下的 getComponent 方法可以得到该节点上挂载的组件引用。


保存脚本以后点击预览游戏按钮,在浏览器中可以看到,游戏开始后动态生成了一颗星星!用同样的方法,您可以在游戏中动态生成任何预先设置好的以 Prefab 为模板的节点。 

添加主角碰触收集星星的行为

现在要添加主角收集星星的行为逻辑了,这里的重点在于,星星要随时可以获得主角节点的位置,才能判断他们之间的距离是否小于可收集距离,如何获得主角节点的引用呢?别忘了我们前面做过的两件事:

1、Game 组件中有个名叫 player 的属性,保存了主角节点的引用

2、每个星星都是在 Game 脚本中动态生成的


所以我们只要在 Game 脚本生成 Star 节点实例时,将 Game 组件的实例传入星星并保存起来就好了。之后我们可以在星星组件里随时通过 game.player 来访问到主角节点,从而获取到主角节点的位置。让我们打开 Game 脚本,在 spawnNewStar 方法最后面添加这样一句:



保存后打开 Star 脚本,现在我们可以利用 Game 组件中引用的 player 节点来判断距离了,在 onLoad 方法后面添加名为 getPlayerDistance 和 onPicked 的方法:



Node 下的 getPosition() 方法返回的是节点的在父节点坐标系中的位置(x, y),即一个 Vec2 类型对象。cc 下的 pDistance 方法很简单,这里不多述,同时注意调用 Node 下的 destroy() 方法就可以销毁节点。


然后在 update 方法中添加每帧判断距离,如果距离小于 pickRadius 属性规定的收集距离,就执行收集行为:



保存脚本,然后再次预览测试,可以看到控制主角靠近星星时,星星就会消失掉,然后在随机位置生成了新的星星!


添加得分


小怪兽辛辛苦苦的收集星星,没有奖励怎么行,我们现在就在收集星星时添加得分奖励的逻辑和显示。


添加分数文字(Label)

游戏开始时得分从 0 开始,每收集一个星星分数就会加 1。要显示得分,首先要创建一个 Label 节点。在层级管理器中选中 Canvas 节点,右键点击并选择菜单中的创建新节点->创建渲染节点->Label(文字),一个新的 Label 节点会被创建在 Canvas 下面,而且顺序在最下面。接下来我们要用如下的步骤配置这个 Label 节点:

  1. 1、将该节点名字改为 score

  2. 2、将 score 节点的位置(position 属性)设为 (0, 180)。

  3. 3、选中该节点,编辑 Label 组件的 string 属性,填入 Score: 0 的文字。

  4. 4、将 Label 组件的 Font Size 属性设为 50。

  5. 5、从资源管理器中拖拽 assets/mikado_outline_shadow 位图字体资源(注意图标是 bmfont)到 Label 组件的 Font 属性中,将文字的字体替换成我们项目资源中的位图字体。

这里注意 Label组件的 String 属性加了字体后,无法识别中文的冒号,所以建议打英文的冒号。


完成后效果如下图所示: 

在 Game 脚本中添加得分逻辑

我们将会把计分和更新分数显示的逻辑放在 Game 脚本里,打开 Game 脚本开始编辑,首先在 properties 区块的最后添加分数显示 Label 的引用属性:



接下来在 onLoad 方法里添加计分用的变量的初始化:



然后在 update 方法后面添加名叫 gainScore 的新方法:



这里的 toString() 方法是将分数 score 转换为能 String 字符串类型便于输出到屏幕。


保存 Game 脚本后,回到层级管理器,选中 Canvas 节点,然后把前面添加好的 score 节点拖拽到属性检查器里 Game 组件的 Score Display 属性中。


在 Star 脚本中调用 Game 中的得分逻辑

下面打开 Star 脚本,在 onPicked 方法中加入 gainScore 的调用:



保存后预览,可以看到现在收集星星时屏幕正上方显示的分数会增加了! 

失败判定和重新开始


现在我们的游戏已经初具规模,但得分再多,不可能失败的游戏也不会给人成就感。现在让我们加入星星定时消失的行为,而且让星星消失时就判定为游戏失败。也就是说,玩家需要在每颗星星消失之前完成收集,并不断重复这个过程完成玩法的循环。


为星星加入计时消失的逻辑

打开 Game 脚本,在 onLoad 方法的 spawnNewStar 调用之前加入计时需要的变量声明:



然后在 spawnNewStar 方法最后加入重置计时器的逻辑,其中 this.minStarDuration 和 this.maxStarDuration 是我们一开始声明的 Game 组件属性,用来规定星星消失时间的随机范围:



在 update 方法中加入计时器更新和判断超过时限的逻辑:



最后加入 GameOver 方法,游戏失败时重新加载场景



这里需要初学者了解的是,cc.director 是一个管理你的游戏的逻辑流程的单例对象。由于 cc.director 是一个单例,你不需要调用任何构造函数或创建函数,使用它的标准方法是通过调用 cc.director.methodName(),例如这里的cc.director.loadScene('game') 就是重新加载游戏场景 game,也就是游戏重新开始。


而节点下的 stopAllActions 方法就显而易见了,这个方法会让节点上的所有 Action 都失效。


对 Game 脚本的修改就完成了,保存脚本,然后打开 Star 脚本,我们需要为即将消失的星星加入简单的视觉提示效果,在 update 方法最后加入以下代码:


这串代码比较简单,就是为星星节点设置一个透明度,来提示玩家生成的星星何时会消失。


保存 Star 脚本,我们的游戏玩法逻辑就全部完成了!现在点击预览游戏按钮,我们在浏览器看到的就是一个有核心玩法、激励机制、失败机制的合格游戏了。


加入音效


尽管很多人玩手游的时候会无视声音,我们为了教程展示的工作流程尽量完整,还是要补全加入音效的任务。


跳跃音效

首先加入跳跃音效,打开 Player 脚本,添加引用声音文件资源的 jumpAudio 属性:



然后改写 setJumpAction 方法,插入播放音效的回调,并通过添加 playJumpSound 方法来播放声音:



这里需要强调的是回调函数的作用,我们首先来看官方对 callFunc() 方法的定义:



我们可以看到 callFunc 方法可以传入三个参数,第一个参数是方法的 selector,我们可以理解为方法名,第二个参数是 Object 类型,一般填入 this,第三个参数为带回的数据,可以是所有数据类型,可以不填。我们再注意到这个方法的返回值——ActionInstant,这是一个瞬间执行的动作类,到这里我们就可以理解了,使用 callFunc 调用回调函数可以让函数转变为 cc 中的 Action(动作)!这一用法在 cc 的动作系统里非常好用!例如在上面我们将播放声音的函数传入 callFunc 赋值给 callBack,让 callBack 成为了一个播放声音的动作 Action,那么我们之后就能通过 cc.sequence 将跳跃和播放声音的动作组合起来,实现每跳一次就能播放音效的功能!


得分音效

保存 Player 脚本以后打开 Game 脚本,来添加得分音效,首先仍然是在 properties 中添加一个属性来引用声音文件资源:



然后在 gainScore 方法里插入播放声音的代码:



保存脚本,回到 层级编辑器 ,选中 Player 节点,然后从资源管理器里拖拽 assets/audio/jump 资源到 Player 组件的 Jump Audio 属性上。


然后选中 Canvas 节点,把 assets/audio/score 资源拖拽到 Game 组件的 Score Audio 属性上。


这样就大功告成了!完成形态的场景层级和各个关键组件的属性如下: 
  现在我们可以尽情享受刚制作完成的游戏了,你能打到多少分呢?别忘了你还可以随时修改 Player 和 Game 组件里的移动控制和星星持续时间等游戏参数,来快速调节游戏的难度。修改组件属性之后需要保存场景,修改后的数值才会被记录下来。


脚本编辑器的选择


官方提供了大量对 Visual Studio Code(VS Code)的支持,所以推荐使用 VS Code。

VS Code下载地址:https://code.visualstudio.com


安装 Cocos Creator API 适配插件

下载之后在 Cocos Creator 中打开项目,然后选择主菜单里的开发者/安装 VS Code 扩展插件。


该操作会将 Cocos Creator API 适配插件安装到 VS Code 全局的插件文件夹中,一般在用户 Home 文件夹中的 .vscode/extensions 目录下。这个操作只需要执行一次,如果 API 适配插件更新了,则需要再次运行来更新插件。


安装成功后在控制台会显示绿色的提示:VS Code extension installed to …。这个插件的主要功能是为 VS Code 编辑状态下注入符合 Cocos Creator 组件脚本使用习惯的语法提示。 

在项目中生成智能提示数据

如果希望在代码编写过程中自动提示 Cocos Creator 引擎 API,需要通过菜单生成 API 智能提示数据并自动放进项目路径下。


选择主菜单的 开发者/更新 VS Code 智能提示数据。该操作会将根据引擎 API 生成的 creator.d.ts 数据文件复制到项目根目录下(注意是在 assets 目录外面),操作成功时会在 控制台 显示绿色提示:API data generated and copied to …。


对于每个不同的项目都需要运行一次这个命令,如果 Cocos Creator 版本更新了,也需要打开您的项目重新运行一次这个命令,来同步最新引擎的 API 数据。


注意 从 VS Code 0.10.11 版开始,需要在项目根目录中添加 jsconfig.json 设置文件才能正确的使用包括智能提示在内的 JavaScript 语言功能,在执行上面的命令时,预设的 jsconfig.json 文件会和 creator.d.ts 一起拷贝到您的项目根目录中。 

使用 VS Code 打开和编辑项目

现在可以运行我们之前下载安装好的 VS Code 了,启动后选择主菜单的 File/Open…,在弹出的对话框中选择您的项目根目录,也就是 assets, project.json 所在的路径。


新建一个脚本,或者打开原有的脚本编辑时,就可以享受智能语法提示的功能了。注意 creator.d.ts 文件必须放在 VS Code 打开的项目路径下,才能使用智能提示功能。

如有不明白的地方可以查看官方文档的解释:http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html


听说春节期间 Cocos Creator 后台涌入了大批新用户,那么今天这篇手把手教你制作第一个 Creator 小游戏一定要收藏起来慢慢学习。有什么技术问题,欢迎底下留言反馈。

 
COCOS 更多文章 Cocos 水友自创微信小游戏 - 元宵灯笼连连看 Cocos Store 插件升级,支持联网功能扩展和微信小游戏适配 Cocos Creator 开源游戏、插件、教程、视频汇总 国内顶级游戏公司招聘 Cocos 人才第二弹! Part I:「幼麟麻将」全套源码讲解
猜您喜欢 理解linux内核的软中断(上) jdk1.8的HashMap和ConcurrentHashMap iOS培训丨iOS开发快速入门学习方法汇总出来啦~ 今日面试题:括号匹配;及找数字续分析 不要忽视C语言