cocos creator 创建第一个helloworld项目

cocos creator 游戏引擎包含引擎资源管理,场景编辑,游戏预览和发布等游戏开发所需要的全套功能,并且将所用的功能和工具链都整合到一个应用程序里,

一:Cocos Creator的安装:这里是windows环境下的安装

Cocos Creator可以在官网上进行下载:点击打开链接

从 v1.3.0 开始,Windows 版 Cocos Creator 将不提供 32 位操作系统支持。

Windows 版的安装程序是一个 .exe 可执行文件,通常命名会是 CocosCreator_vX.X.X_20XXXXXX_setup.exe,其中 vX.X.X 是 Cocos Creator 的版本号,如 v1.2.2,后面的一串数字是版本日期编号。

注意 日期编号在使用内测版时会更新的比较频繁,注意如果当前 PC 上已安装的版本号和安装包的版本号相同时,无法自动覆盖安装注意相同版本号的安装包,需要先卸载之前的版本才能继续安装。

应用的安装路径默认选择了 C:\CocosCreator,可以在安装过程中进行指定。

Cocos Creator 将会占据系统盘中大约 1.25 GB 的空间,请在安装前整理您的系统盘空间。

注意:如果出现安装失败,请尝试通过命令行执行安装程序:

CocosCreator_v1.2.0_2016080301_setup.exe /exelog "exe_log.txt" /L*V "msi_log.txt"

用以下命令执行,或为安装程序创建一个快捷方式,并将该命令行参数填入快捷方式的 目标 属性中。然后将生成的安装日志(exe_log.txt 和 msi_log.txt)提交给开发团队寻求帮助。

下载完成之后双击解压后文件及中的CocosCreator.exe,即可启动Cocos Creator

二:禁用GPU加速

对于部分 windows 操作系统和显卡型号,可能会遇到

This browser does not support WebGL...

的报错信息,是显卡驱动对编辑器 WebGL 渲染模式的支持不正确导致的,如果出现这种情况,可以尝试使用命令行运行 CocosCreator.exe 并加上 --disable-gpu 运行参数,来禁用 GPU 加速功能,可以绕开部分显卡驱动的问题。

三:使用Cocos开发者账号登录

如果您不需要发布游戏到原生平台,以上的两步简单操作就能为您准备好使用 Cocos Creator 制作游戏的一切开发环境。

Cocos Creator 启动后,会进入 Cocos 开发者帐号的登录界面。登录之后就可以享受我们为开发者提供的各种在线服务、产品更新通知和各种开发者福利。

如果之前没有 Cocos 开发者帐号,您可以使用登录界面中的 注册 按钮前往 Cocos 开发者中心进行注册。或直接使用下面的链接:

https://passport.cocos.com/auth/signup

注册完成后就可以回到 Cocos Creator 登录界面完成登录了!验证身份后,我们就会进入 Dashboard 界面。除了手动登出或登录信息过期,其他情况下都会用本地 session 保存的信息自动登录。

四:使用Dashboard

启动 Cocos Creator 并使用 Cocos 开发者帐号登录以后,就会打开 Dashboard 界面,在这里你可以新建项目、打开已有项目或获得帮助信息。

界面总览

dashboard overview

上图所示的就是 Cocos Creator 的 Dashboard 界面,包括以下几种选项卡:

  • 最近打开项目: 列出最近打开项目,第一次运行 Cocos Creator 时,这个列表是空的,会提示新建项目的按钮。
  • 新建项目: 选择这个选项卡,会进入到 Cocos Creator 新项目创建的指引界面。
  • 打开其他项目: 如果你的项目没有在最近打开的列表里,你也可以点击这个按钮来浏览和选择你要打开的项目。
  • 帮助: 帮助信息,一个包括各种新手指引信息和文档的静态页面。

下面我们来依次介绍这些分页面。

最近打开项目

你可以通过 最近打开项目 选项卡快速访问近期打开过的项目。第一次运行 Cocos Creator 时,这个列表是空的,在界面上会显示 新建项目 的按钮。你可以在创建 了一些项目后回来,并看到你新建的项目出现在列表里。

recent project hovering

当你的鼠标悬停在一个最近打开项目的条目上时,会显示出可以对该项目进行操作的行为:

  • 点击 打开 在 Cocos Creator 编辑器中打开该项目
  • 点击 关闭 将该项目从最近打开项目列表中移除,这个操作不会删除实际的项目文件夹。

此外,当鼠标点击选中或悬停在项目上时,你能够在 Dashboard 下方的状态栏看到该项目所在路径。

status bar

新建项目

你可以在 新建项目 选项卡里创建新的 Cocos Creator 项目。

在 新建项目 页面,我们首先需要选择一个项目模板,项目模板会包括各种不同类型的游戏基本架构,以及学习用的范例资源和脚本,来帮助你更快进入到创造性的工作当中。

注意: 早期的 Cocos Creator 版本中还没有很多可选择的项目模板,我们会随着 Cocos Creator 功能逐渐完整持续添加更多模板为用户提供方便。

点击选择一个模板,你可以在页面下方看到该模板的描述。

choose template

在页面下方你可以看到项目名称和将会保存到的地址。你可以在项目路径输入框手动输入项目所在路径和项目名称,路径的最后一节就是项目名称。

你也可以点击 浏览 按钮,打开浏览路径对话框,在你的本地文件系统中选择一个位置来存放新建项目。

一切都设置好后,点击 新建项目 按钮来完成项目的创建。Dashboard 界面会被关闭,然后新创建的项目会在 Cocos Creator 编辑器主窗口中打开。

打开其他项目

如果你在 最近打开项目 页面找不到你的项目,或者刚刚从网上下载了一个从未打开过的项目时,你可以通过 打开其他项目 选项卡按钮在本地文件系统浏览并打开项目。

点击 打开其他项目 后,会弹出本地文件系统的选择对话框,在这个对话框中选中你的项目文件夹,并选择打开就可以打开项目。

注意:Cocos Creator 使用特定结构的文件夹来作为合法项目标识,而不是使用工程文件。选择项目时只要选中项目文件夹即可。

Hello World

了解 Dashboard 以后,我们现在看看如何创建和打开一个 Hello World 项目。

创建项目

在 Dashboard 中,打开 新建项目 选项卡,选中 Hello World 项目模板。

new project

然后在下面的项目路径栏中指定一个新项目即将被创建的位置,路径的最后一部分就是项目文件夹。

填好路径后点击右下角的 新建项目 按钮,就会自动以 Hello World 项目模板创建项目并打开。

打开场景,开始工作

Cocos Creator 的工作流程是以数据驱动和场景为核心的,初次打开一个项目时,默认不会打开任何场景,要看到 Hello World 模板中的内容,我们需要先打开场景资源文件。

open scene

在 资源管理器 中双击箭头所指的 helloworld 场景文件。Cocos Creator 中所有场景文件都以 scene 作为图标。

Hello World 项目分解

打开 helloworld 场景后,我们就可以看到这个模板项目中的全部内容了。

breakdown

场景中的内容会按照工作流分别呈现在 资源管理器、层级管理器、场景编辑器、属性检查器 四个核心面板中,关于编辑器界面和主要面板的介绍我们会在后面的 编辑器界面介绍 部分详细介绍。

预览场景

要预览游戏场景,点击编辑器窗口正上方的 预览游戏 按钮。

preview button

Cocos Creator 会使用您的默认浏览器运行当前游戏场景,效果如图所示:

preview

点击预览窗口左上角的下拉菜单,可以选择不同设备屏幕的预览效果。

修改欢迎文字

Cocos Creator 以数据驱动为核心的最初体现,就在于当我们需要改变 Hello World 的问候文字时,不需要再编辑脚本代码,而是直接修改场景中保存的文字属性。

首先在 层级管理器 中选中 Canvas 节点,我们的 HelloWorld 组件脚本就挂在这个节点上。

接下来在 属性检查器 面板下方找到 HelloWorld 组件属性,然后将 Text 属性里的文本改成 你好,世界!

change text

再次运行预览,可以看到欢迎文字已经更新了:

update preview

小结

这一节的内容,让我们认识了如何从场景开始 Cocos Creator 的工作流程,并且通过修改欢迎文字小小展示了数据驱动的工作方式。接下去我们会用逐步讲解的方式引导大家完成一个较为完整的休闲游戏。相信之后您对 Cocos Creator 的工作流会有更完整的认识。


  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值