在这篇文章中,我们将会为Cocos Creator配置默认的脚本编辑器与预览浏览器,并在配置好的编辑器中实施Cocos Creator脚本编程工作。通过这篇文章,您将会掌握基础的脚本开发知识,同时会对Cocos Creator脚本编程有初步的认知。
配置外部工具
准备好合适的工具,使用好的工具可以让我们事半功倍。
Cocos Creator的脚本编辑器和预览浏览器是支持自定义配置的,我们可以配置为自己喜欢的外部工具。本节将会以配置VSCode编辑器和Chrome浏览器为例,介绍如何给Cocos Creator配置相关的外部工具。
浏览器
Chrome是谷歌公司开发的一款高性能浏览器,具备强大的JavaScript V8引擎,所以成为很多开发者的首选浏览器。正因如此,Chrome浏览器也是Cocos Creator官方推荐使用的预览浏览器。
咱们可以通过搜索引擎搜索Chrome的官方网站来获取最新版本的安装包,并在获取安装包后进行安装:
Chrome浏览器安装https://www.google.cn/chrome/
VS Code编辑器
VS Code的全称是Visual Studio Code,是微软公司开发的一款跨平台代码编辑器。
VS Code不仅功能强大、易上手,而且对TypeScript非常友好。
正因如此,**VS Code还是Cocos Creator官方推荐使用的脚本编辑器。**我们可以通过搜索引擎搜索VS Code的官方网站来获取与操作系统对应的安装包,并在获取安装包后进行安装,如下所示:
Visual Studio Codehttps://code.visualstudio.com/
(根据大家的使用习惯,可以通过在应用商城安装Chinese中文应用插件的方式把语音改为中文。)
配置默认外部程序
接下来,就可以将它们配置为Cocos Creator的默认外部程序了。在Cocos Creator编辑器主菜单中选择【Cocos Creator】→【偏好设置】选项,打开编辑器的偏好设置面板,如下图所示:
在偏好设置面板中点击【外部程序】选项卡,可以在当前面板下看到Cocos Creator编辑器中的各外部程序的路径配置。由于我们先前并未填写任何外部程序的路径,因此相应的程序路径均为空。我们可以点击【放大镜】图标,将Chrome和VSCode的安装路径填入相应的配置项,即可完成配置,如下图所示:
小伙伴们把各自的路径填入其中即可。
创建和使用游戏脚本
脚本在游戏中具有重要的作用。它们可以用于控制游戏中的角色行为、NPC行为,处理游戏逻辑和事件,创建交互和对话系统,实现特效和动画效果等。
脚本通常由程序员编写,使用特定的脚本语言如TS、C#、Lua、Python等。它们与游戏引擎的核心代码交互,可以访问游戏对象、场景和资源,并通过调用预定义的函数或方法来实现所需的功能。
脚本在游戏中的作用可以具体如下:
- 控制角色行为:通过脚本可以实现玩家角色的移动、跳跃、攻击等动作,以及NPC角色的巡逻、追击、攻击等行为。
- 处理游戏逻辑和事件:脚本可以检测和响应游戏中的各种事件,如玩家输入、碰撞、触发器等,从而触发相应的逻辑操作和事件处理。
- 创建交互和对话系统:通过脚本可以实现玩家与NPC之间的交互和对话,包括触发对话、显示对话框、选择对话选项等。
- 实现特效和动画效果:脚本可以用于控制特效的播放、粒子效果的生成、动画的播放和控制等,以增强游戏的画面效果。
- 完善游戏功能:脚本可以扩展游戏功能,如创建任务系统、技能系统、商店系统等,使游戏更加丰富和有趣。
- 优化游戏性能:脚本可以用于优化游戏性能,如实现资源管理、内存管理、碰撞检测等,以提高游戏运行的效率和流畅度。
总之,脚本在游戏中扮演着非常重要的角色,通过编写和调用脚本,开发者可以快速实现游戏中的各种功能和效果,使游戏更加丰富和具有交互性。
脚本的创建
在Cocos Creator中,脚本也是资源的一部分。在资源管理器中创建的脚本,默认是一个NewComponent组件,称为脚本组件。在资源管理器中右击,并在弹出的快捷菜单中选择【创建】→【脚本(TypeScript)】命令,即可创建一个新的脚本,如下图所示:
可以看到下面的Game脚本:
在Game脚本创建完成后,我们可以在资源管理器中选中它,此时在属性检查器中,就可以看到脚本对应的内容了。这些代码是编辑器在脚本创建时自动生成的预设内容,如下所示:
代码如下:
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
/**
* Predefined variables
* Name = Game
* DateTime = Sat Feb 24 2024 13:05:43 GMT+0800 (中国标准时间)
* Author = zachsnowden
* FileBasename = Game.ts
* FileBasenameNoExtension = Game
* URL = db://assets/Game.ts
* ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/
*
*/
@ccclass('Game')
export class Game extends Component {
// [1]
// dummy = '';
// [2]
// @property
// serializableDummy = 0;
start () {
// [3]
}
// update (deltaTime: number) {
// // [4]
// }
}
/**
* [1] Class member could be defined like this.
* [2] Use `property` decorator if your want the member to be serializable.
* [3] Your initialization goes here.
* [4] Your update function goes here.
*
* Learn more about scripting: https://docs.cocos.com/creator/3.4/manual/zh/scripting/
* Learn more about CCClass: https://docs.cocos.com/creator/3.4/manual/zh/scripting/decorator.html
* Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.4/manual/zh/scripting/life-cycle-callbacks.html
*/
编辑脚本
此时如果我们尝试对代码进行编辑就会发现,在属性检查器中看到的代码是没有办法直接进行编辑的。
如果我们需要编辑对应的脚本文件,则可以在资源管理器中双击需要编辑的脚本 。此时Cocos Creator会使用外部编辑器打开对应的脚本文件,我们直接在外部编辑器中对代码进行编辑即可。
接下来我们直接在VS Code中对代码进行修改,在start函数中添加一行hello world的输出语句,如下所示:
start () {
// [3]
console.log('hello world');
}
保存一下代码。
在代码修改完成之后返回Cocos Creator,再次通过属性检查器查看Game脚本,此时可以发现在VS Code界面中编辑的内容已经同步过来了,与此同时Cocos Creator也会自动检测脚本的改动并迅速编译,开发者无须在Cocos Creator中进行多余的刷新操作。
绑定脚本
在通常情况下,没有被加载的游戏脚本是不会自动运行的,为了方便后续测试脚本,我们可以将其绑定到场景节点中,让其在加载节点时被触发执行。因此在脚本编写完成之后,我们还需要对脚本进行绑定操作。
在Cocos Creator中,脚本可以作为节点的组件存在,因此我们可以通过给节点添加组件来绑定脚本。
编辑器提供了两种方式来添加组件:
一种是拖动式添加 ,另一种是通过点击【添加组件】按钮添加。下面我们采用后者来对脚本进行绑定操作。
下面我们采用后者来对脚本进行绑定操作。
在场景中创建一个空节点,并让其作为脚本组件的载体。右击层级管理器内的空白区域,在弹出的快捷菜单中选择【创建】→【空节点】命令,并将其重命名为Node,如下图所示:
为Node节点添加Game脚本组件(属性检查器中):
经过刚才的操作,Game脚本将会以组件的形式绑定到对应的节点下,如图2-11所示。
如果想要删除节点下的组件,则可以点击组件右上方的【齿轮】图标,并在弹出的菜单中选择【删除组件】命令,即可删除组件,如下图所示:
hello游戏脚本
为了让脚本能够被触发执行,我们将其绑定到了场景节点上。
当加载场景时,场景下的所有子节点都会被加载;
当加载到Node节点时,该节点上绑定的组件也会被同时加载,此时,Game脚本将会以组件的方式运行。
因此,当我们在预览运行Game场景时,脚本中添加的调试输出语句【hello world】也将会被触发。
为了测试调试输出语句,接下来我们将通过Chrome浏览器的开发者工具来查看相关的调试输出。如果你已经配置了Chrome浏览器为默认预览浏览器,在点击Cocos Creator编辑器的预览按钮时,Game场景就会以浏览器预览方式在Chrome浏览器中打开。
我们可以使用快捷键F12,或者点击Chrome浏览器右上角的三个点的按钮,选择【更多工具】→【开发者工具】命令,打开浏览器的开发者工具,如下图所示:
(Chrome控制台中打印的 hello world)
至此,您已经熟悉了如何配置Cocos Creator的工作环境,并运行脚本程序。