政安晨【示例演绎虚拟世界开发】(二):Cocos Creator 配置工作环境并运行脚本

在这篇文章中,我们将会为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等。它们与游戏引擎的核心代码交互,可以访问游戏对象、场景和资源,并通过调用预定义的函数或方法来实现所需的功能。

脚本在游戏中的作用可以具体如下:

  1. 控制角色行为:通过脚本可以实现玩家角色的移动、跳跃、攻击等动作,以及NPC角色的巡逻、追击、攻击等行为。
  2. 处理游戏逻辑和事件:脚本可以检测和响应游戏中的各种事件,如玩家输入、碰撞、触发器等,从而触发相应的逻辑操作和事件处理。
  3. 创建交互和对话系统:通过脚本可以实现玩家与NPC之间的交互和对话,包括触发对话、显示对话框、选择对话选项等。
  4. 实现特效和动画效果:脚本可以用于控制特效的播放、粒子效果的生成、动画的播放和控制等,以增强游戏的画面效果。
  5. 完善游戏功能:脚本可以扩展游戏功能,如创建任务系统、技能系统、商店系统等,使游戏更加丰富和有趣。
  6. 优化游戏性能:脚本可以用于优化游戏性能,如实现资源管理、内存管理、碰撞检测等,以提高游戏运行的效率和流畅度。

总之,脚本在游戏中扮演着非常重要的角色,通过编写和调用脚本,开发者可以快速实现游戏中的各种功能和效果,使游戏更加丰富和具有交互性。

脚本的创建

在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的工作环境,并运行脚本程序。

相关推荐
PandaQue5 小时前
《怪物猎人:荒野》游戏可以键鼠直连吗
游戏
白狐欧莱雅9 小时前
使用python中的pygame简单实现飞机大战游戏
经验分享·python·游戏·pygame
豆本-豆豆奶10 小时前
用 Python 写了一个天天酷跑(附源码)
开发语言·python·游戏·pygame·零基础教程
Leoysq13 小时前
【UGUI】实现点击注册按钮跳转游戏场景
游戏·unity·游戏引擎·ugui
zsc_1181 天前
(C++回溯算法)微信小程序“开局托儿所”游戏
c++·算法·游戏
中云DDoS CC防护蔡蔡1 天前
棋牌游戏防ddos攻击,高防IP好用吗?
运维·服务器·游戏·网络安全·ddos
dangoxiba2 天前
[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集补充:制作空洞骑士独有的EventSystem和InputModule
游戏·unity·c#·游戏引擎·playmaker
ToDesk_Daas2 天前
为什么越来越多人开始用云电脑?网友道出了真相
科技·游戏·电脑
虞书欣的62 天前
Python小游戏22——吃豆豆小游戏
python·算法·游戏·编辑器·pygame
魔法自动机2 天前
Unity3D学习FPS游戏(9)武器音效添加、创建敌人模型和血条
android·学习·游戏