【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡

【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡

开发背景

第一今天刚好有客户的东西我需要去二开一些内容给到我了，第二我卓伊凡本身在去年就说了今年我想做一款属于自己的游戏，想做款游戏自己上架《人的一生》，因此刚好借此契机来给大家实战演练并且分享。

实战开发

cocos是什么

Cocos 是一款知名的开源跨平台游戏开发框架，在游戏开发领域应用广泛，以下是关于它的详细介绍：

发展历程

• Cocos 最初由王哲于 2010 年开发，最早版本是 Cocos2D-iphone，主要针对 iOS 平台。
• 随着发展，逐渐推出了 Cocos2D-x，支持多平台，包括 iOS、Android、Windows 等。
• 后来又推出了 Cocos Creator，这是一款更易于使用、基于 JavaScript 和 TypeScript 的跨平台游戏开发工具，进一步降低了游戏开发的门槛，提高了开发效率。

功能特点

• 跨平台性：Cocos 最大的优势之一就是能够让开发者使用一套代码，轻松发布到多个平台，如 iOS、Android、Windows、Mac、Web 等。这大大节省了开发时间和成本，提高了游戏的市场覆盖面。
• 丰富的 2D 和 3D 功能：提供了强大的 2D 和 3D 图形渲染能力，支持各种复杂的动画效果、粒子系统、物理引擎等。开发者可以利用这些功能创建出极具视觉冲击力的游戏画面和流畅的游戏体验。
• 脚本语言支持：支持 JavaScript、TypeScript、C++ 等多种脚本语言，开发者可以根据自己的喜好和项目需求选择合适的语言进行开发。其中，JavaScript 和 TypeScript 由于其简洁性和广泛的社区支持，成为了 Cocos 开发中常用的语言。
• 插件化架构：具有插件化的架构，允许开发者根据项目需求轻松添加或删除各种功能模块。这使得 Cocos 非常灵活，能够满足不同类型游戏的开发需求，无论是简单的休闲游戏还是复杂的大型角色扮演游戏。
• 可视化编辑器：Cocos Creator 提供了直观的可视化编辑器，开发者可以通过拖拽、配置等方式快速创建游戏场景、界面元素、动画等，无需编写大量代码，大大提高了开发效率。同时，编辑器还支持实时预览和调试，方便开发者及时查看效果并进行调整。

cocos环境搭建·基础概念

Cocos是一个流行的开源游戏开发框架，支持跨平台开发，可用于创建2D和3D游戏、应用程序等。以下从环境搭建、基础概念、开发流程等方面为你介绍Cocos开发的相关内容：

环境搭建

1. 下载Cocos Creator

Cocos Creator是基于Cocos引擎的集成开发环境（IDE），可以从[Cocos官方网站]下载适合你操作系统的版本。安装过程按照提示进行即可。

有3 版本和2版本， 但是都是下载 cocosdahboard，于是我们下载，另外根据提供的项目源码技术给到 版本引擎版本Cocos Creator 2.4.13 因此我们安装2版本

安装面板

提示安装 vs code 2022 ，卓伊凡本机有vs 这里我略过

没有的可以单独安装

登录开发者 账户， 没有就注册一个

登录后安装cocos creator， 我严格按照前项目开发指定环境安装2.4.13

2. 安装依赖

在安装Cocos Creator后，可能需要安装一些必要的依赖，如Node.js等，因为Cocos Creator的部分功能依赖于Node.js环境。可以从[Node.js官方网站]下载并安装适合你操作系统的版本。

这里是否安装node

不安装 Node.js 也可使用基础功能

• Cocos Creator 本身是一个集成开发环境，即使不安装 Node.js，你仍然可以使用它的许多基础功能，比如创建项目、设计场景、添加节点和组件、设置动画等可视化操作。对于一些简单的 2D 游戏或应用开发，若不涉及需要依赖 Node.js 的特定功能，在没有安装 Node.js 的情况下也能完成基本的开发流程。

安装 Node.js 能解锁更多高级功能

• 插件系统：Cocos Creator 的插件系统依赖于 Node.js 环境。很多开发者会使用各种插件来扩展 Cocos Creator 的功能，例如代码格式化插件、资源管理插件等。如果要安装和使用这些插件，就需要 Node.js 的支持，因为插件的安装和管理通常是通过 npm（Node.js 的包管理工具）来完成的。
• 构建和发布：在将项目发布到某些平台时，尤其是 Web 平台，可能会用到一些基于 Node.js 的构建工具和脚本。比如在进行 Web 项目的构建时，可能会使用到一些自动化的构建流程，这些流程往往依赖于 Node.js 环境来执行。此外，一些自定义的构建配置和脚本也需要 Node.js 来运行。
• 脚本扩展：如果你希望使用一些基于 JavaScript 生态系统的工具和库来辅助开发，或者进行一些自定义的脚本编写和扩展，Node.js 提供了丰富的包和工具链，能够大大提高开发效率。

基础概念

1. 场景（Scene）

场景是游戏的一个独立单元，包含了游戏中的各种元素，如角色、道具、背景等。一个游戏可以由多个场景组成，例如主菜单场景、游戏关卡场景等。

2. 节点（Node）

节点是场景中的基本元素，它可以包含各种组件（Component），用于实现不同的功能。例如，一个精灵节点可以包含一个Sprite组件，用于显示图片。

3. 组件（Component）

组件是附加在节点上的功能模块，用于实现节点的特定行为。Cocos Creator提供了许多内置组件，如Sprite（精灵）、Label（标签）、Button（按钮）等，也可以自定义组件。

开发流程

1. 创建项目

打开Cocos Creator，点击“新建项目”，选择项目的保存路径和名称，然后选择合适的模板（如2D模板），点击“创建”即可。

我们可以选择新建hello word 模板的项目，可以清晰的看到基本内容，选上自己对应的路劲。

接下来就是完整的界面了

2. 设计场景

在场景编辑器中，可以添加各种节点和组件来设计游戏场景。例如，添加一个Sprite节点作为背景，添加一个Label节点显示分数等。

以下是一个简单的在代码中创建节点并添加Sprite组件的示例：

import { _decorator, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('GameScene')
export class GameScene extends Component {
    start() {
        // 创建一个新节点
        const spriteNode = new Node('SpriteNode');
        // 将节点添加到当前场景的根节点下
        this.node.addChild(spriteNode);

        // 添加Sprite组件
        const sprite = spriteNode.addComponent(Sprite);
        // 可以进一步设置Sprite的属性，如设置纹理等
    }
}

3. 实现交互逻辑

使用脚本语言（如TypeScript或JavaScript）编写代码来实现游戏的交互逻辑。例如，处理按钮点击事件、角色移动等。

以下是一个处理按钮点击事件的示例：

import { _decorator, Component, Node, Button } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ButtonHandler')
export class ButtonHandler extends Component {
    @property(Button)
    myButton: Button | null = null;

    start() {
        if (this.myButton) {
            this.myButton.node.on(Button.EventType.CLICK, this.onButtonClick, this);
        }
    }

    onButtonClick() {
        console.log('Button clicked!');
        // 在这里可以添加按钮点击后的具体逻辑
    }
}

4. 测试和调试

在Cocos Creator中，可以使用内置的预览功能来测试游戏。点击编辑器上方的“预览”按钮，选择合适的预览方式（如浏览器预览），即可在预览窗口中查看游戏效果。如果发现问题，可以使用调试工具进行调试。

5. 发布项目

当游戏开发完成并测试通过后，可以使用Cocos Creator的发布功能将项目发布到不同的平台，如Web、iOS、Android等。在发布时，需要根据不同平台的要求进行相应的配置。

本文我们就把基础介绍的这里，我们飞速进行下一篇直接开始修改我们的项目。