cocoscreator⼊门
前⾯的话
Cocos Creator 是⼀个完整的游戏开发解决⽅案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界⾯⼯具。Cocos Creator 的编辑器完全为引擎定制打造,包含从设计、开发、预览、调试到发布的整个⼯作流所需的全功能,该编辑器提供⾯向设计和开发的两种⼯作流,提供简单顺畅的分⼯合作⽅式。Cocos Creator ⽬前⽀持发布游戏到 Web、Android 和 iOS,真正实现⼀次开发,全平台运⾏。Cocos Creator 是以内容创作为核⼼的游戏开发⼯具,在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点。本⽂将详细介绍cocos creator ⼊门知识
⼯作流程
cocos creator的流程如下所⽰
【创建或导⼊资源】
将图⽚、声⾳等资源拖拽到编辑器的资源管理器⾯板中,即可完成资源导⼊
此外,也可以在编辑器中直接创建场景、预制、动画、脚本、粒⼦等各类资源
【建造场景内容】
项⽬中有了⼀些基本资源后,就可以开始搭建场景了,场景是游戏内容最基本的组织⽅式,也是向玩家展⽰游戏的基本形态
通过场景编辑器将添加各类节点,负责展⽰游戏的美术⾳效资源,并作为后续交互功能的承载
【添加组件脚本,实现交互功能】
可以为场景中的节点挂载各种内置组件和⾃定义脚本组件,来实现游戏逻辑的运⾏和交互,包括从最基本的动画播放、按钮响应,到驱动整个游戏逻辑的主循环脚本和玩家⾓⾊的控制
⼏乎所有游戏逻辑功能都是通过挂载脚本到场景中的节点来实现的
【⼀键预览和发布】
搭建场景和开发功能的过程中,可以随时点击预览来查看当前场景的运⾏效果。使⽤⼿机扫描⼆维码,可以⽴即在⼿机上预览游戏
当开发告⼀段落时,通过构建发布⾯板可以⼀键发布游戏到包括桌⾯、⼿机、Web 等多个平台
安装和启动
【windows】
从 v1.3.0 开始,Windows 版 Cocos Creator 将不提供 32 位操作系统⽀持,Windows 所⽀持的最低版本是 Windows 7 64位
Windows 版的安装程序是⼀个 .exe 可执⾏⽂件,通常命名会是 CocosCreator_vX.X.X_,其中 vX.X.X 是 Cocos Creator 的版本号,如 v1.2.2,后⾯的⼀串数字是版本⽇期编号
注意:⽇期编号在使⽤内测版时会更新的⽐较频繁,如果当前 PC 上已安装的版本号和安装包的版本号相同时,⽆法⾃动覆盖安装注意相同版本号的安装包,需要先卸载之前的版本才能继续安装
Cocos Creator 将会占据系统盘中⼤约 1.25 GB 的空间,应⽤的安装路径默认选择了C:\CocosCreator,可以在安装过程中进⾏指定
对于部分 windows 操作系统和显卡型号,可能会遇到如下报错信息
This browser does not
这是显卡驱动对编辑器 WebGL 渲染模式的⽀持不正确导致的,如果出现这种情况,可以尝试使⽤命令⾏运⾏并加上--disable-gpu运⾏参数,来禁⽤ GPU 加速功能,可以绕开部分显卡驱动的问题
【mac】
Mac OS X 所⽀持的最低版本是 OS X 10.9
Mac 版 Cocos Creator 的安装程序是 DMG 镜像⽂件,双击 DMG ⽂件,然后将CocosCreator.app拖拽到应⽤程序⽂件夹快捷⽅式,或任意其他位置。然后双击复制出来的CocosCreator.app就可以开始使⽤了
注意:如果初次运⾏时出现下载的应⽤已损坏的提⽰,请前往并设置系统偏好设置->安全性与隐私->允许任何来源的应⽤,⾸次打开后可以马上恢复安全与隐私设置
【版本兼容】
Cocos Creator 版本升级时,新版本的编辑器可以打开旧版本的项⽬,但当项⽬开发到⼀半时升级新版本的 Cocos Creator 时也可能会遇到⼀些问题。因为在早期版本中引擎和编辑器的实现可能存在 bug 和其他不合理的问题,这些问题可以通过⽤户项⽬和脚本的特定使⽤⽅法来规避,但当后续版本中修复了
这些 bug 和问题时就可能会对现有项⽬造成影响
在发现这种版本升级造成的问题时,除了联系开发团队寻求解决办法,也可以卸载新版本的 Cocos Creator 并重新安装旧版本
安装旧版本过程中可能遇到的问题有:
1、在Windows下,可能会遇到安装旧版本时提⽰「已经有⼀个更新版本的应⽤程序已安装」,如果确定已经通过控制⾯板正确卸载了新版本的 Cocos Creator 还不能安装旧版本,可以访问微软官⽅解决⽆法安装或卸载程序的帮助页,按照提⽰下载⼩⼯具并修复损坏的安装信息,即可继续安装旧版本了
2、使⽤新版本 Cocos Creator 打开过的项⽬,在旧版本 Cocos Creator 中打开可能会遇到编辑器⾯板⽆法显⽰内容的问题,可以尝试选择主菜单中的「布局->恢复默认布局」来进⾏修复
⼊门⽰例
【创建项⽬】
在 Dashboard 中,打开新建项⽬选项卡,选中 Hello World 项⽬模板
然后在下⾯的项⽬路径栏中指定⼀个新项⽬即将被创建的位置,路径的最后⼀部分就是项⽬⽂件夹
填好路径后点击右下⾓的新建项⽬按钮,就会⾃动以 Hello World 项⽬模板创建项⽬并打开
【打开场景】
Cocos Creator 的⼯作流程是以数据驱动和场景为核⼼的,初次打开⼀个项⽬时,默认不会打开任何场景,要看到 Hello World 模板中的内容,需要先打开场景资源⽂件
在资源管理器中双击箭头所指的helloworld场景⽂件。Cocos Creator 中所有场景⽂件都以⽕焰图作为图标
【项⽬内容】
打开helloworld场景后,就可以看到这个模板项⽬中的全部内容了
场景中的内容会按照⼯作流分别呈现在资源管理器、层级管理器、场景编辑器、属性检查器四个核⼼⾯板中
【预览场景】
要预览游戏场景,点击编辑器窗⼝正上⽅的预览游戏按钮
Cocos Creator 会使⽤默认浏览器运⾏当前游戏场景,效果如图所⽰:
点击预览窗⼝左上⾓的下拉菜单,可以选择不同设备屏幕的预览效果
项⽬结构
初次创建并打开⼀个 Cocos Creator 项⽬后,项⽬⽂件夹将会包括以下结构:
ProjectName(项⽬⽂件夹)
├──assets
├──library
├──local
├──settings
├──temp
└──project.json
【assets】
assets 将会⽤来放置游戏中所有本地资源、脚本和第三⽅库⽂件。只有在 assets ⽬录下的内容才能显⽰在资源管理器中
assets 中的每个⽂件在导⼊项⽬后都会⽣成⼀个相同名字的 .meta ⽂件,⽤于存储该⽂件作为资源导⼊后的信息和与其他资源的关联
⼀些第三⽅⼯具⽣成的⼯程或设计原⽂件,如 TexturePacker 的 .tps ⽂件,或 Photoshop 的 .psd ⽂件,可以选择放在 assets 外⾯来管理
【library】
library 是将 assets 中的资源导⼊后⽣成的。在这⾥,⽂件的结构和资源的格式将被处理成最终游戏发布时需要的形式。如果使⽤版本控制系统管理项⽬,这个⽂件夹是不需要进⼊版本控制的。当 library 丢失或损坏的时候,只要删除整个 library ⽂件夹再打开项⽬,就会重新⽣成资源库
【local】
local ⽂件夹中包含该项⽬的本地设置,包括编辑器⾯板布局,窗⼝⼤⼩,位置等信息。不需要关⼼这
⾥的内容,只要按照习惯设置编辑器布局,这些就会⾃动保存在这个⽂件夹。⼀般 local 也不需要进⼊版本控制
【settings】
settings ⾥保存项⽬相关的设置,如构建发布菜单⾥的包名、场景和平台选择等。这些设置需要和项⽬⼀起进⾏版本控制
【Project.json】
project.json ⽂件和 assets ⽂件夹⼀起,作为验证 Cocos Creator 项⽬合法性的标志。只有包括了这两个内容的⽂件夹才能作为 Cocos Creator 项⽬打开。⽽ project.json 本⾝⽬前只⽤来规定当前使⽤的引擎类型和插件存储位置,不需要⽤户关⼼其内容。这个⽂件也应该纳⼊版本控制
【build】
在使⽤主菜单中的项⽬->构建发布... 使⽤默认发布路径发布项⽬后,编辑器会在项⽬路径下创建 build ⽬录,并存放所有⽬标平台的构建⼯程。由于每次发布项⽬后资源 id 可能会变化,⽽且构建原⽣⼯程时体积很⼤,所以此⽬录建议不进⼊版本控制
编辑器界⾯
Cocos Creator 编辑器由多个⾯板组成,⾯板可以⾃由移动、组合,以适应不同项⽬和开发者的需要
【资源编辑器(assets)】
资源管理器⾥显⽰了项⽬资源⽂件夹(assets)中的所有资源。这⾥会以树状结构显⽰⽂件夹并⾃动同步在操作系统中对项⽬资源⽂件夹内容的修改
可以将⽂件从项⽬外⾯直接拖拽进来,或使⽤菜单导⼊资源代码运行js特效
资源列表中可以包括任意⽂件夹结构,⽂件夹在资源管理器中会以蓝⾊⽂件夹图标显⽰,点击图标左边的箭头就可以展开/折叠该⽂件夹中的内容
除了⽂件夹之外列表中显⽰的都是资源⽂件,资源列表中的⽂件会隐藏扩展名,⽽以图标指⽰⽂件或资源的类型,⽐如HelloWorld模板创建出的项⽬中包括了三种核⼼资源:
1、image图⽚资源:⽬前包括 jpg, png 等图像⽂件,图标会显⽰为图⽚的缩略图
2、javascript脚本资源:程序员编写的 JavaScript 脚本⽂件,以js为⽂件扩展名。通过编辑这些脚本为添加组件功能和游戏逻辑
3、scene场景资源:双击可以打开的场景⽂件,打开了场景⽂件才能继续进⾏内容创作和⽣产
⽬前可以在资源管理器中创建的资源有以下⼏类:
1、⽂件夹
2、脚本⽂件
3、场景
4、动画剪辑
注意:删除资源是不可撤销的操作,⽆法从回收站(Windows)或废纸篓(Mac)回
【场景编辑器(scene)】
场景编辑器是内容创作的核⼼⼯作区域,使⽤它选择和摆放场景图像、⾓⾊、特效、UI 等各类游戏元素。在这个⼯作区域⾥,可以选中并通过变换⼯具修改节点的位置、旋转、缩放、尺⼨等属性,并可以获得所见即所得的场景效果预览
可以通过以下的操作来移动和定位场景编辑器的视图:
1、⿏标右键拖拽:平移视图
2、⿏标滚轮:以当前⿏标悬停位置为中⼼缩放视图
场景视图的背景会显⽰⼀组标尺和⽹格,表⽰世界坐标系中各个点的位置信息。读数为(0,0)的点为场景中世界坐标系的原点
视图中的紫⾊线框表⽰场景中默认会显⽰的内容区域,这块区域的⼤⼩由设计分辨率决定
⿏标悬浮到场景中的节点上时,节点的约束框将会以灰⾊单线显⽰出来。此时单击⿏标,就会选中该节点。选择节点是使⽤变换⼯具设置节点位置、旋转、缩放等操作的前提,选中的节点周围将会有蓝⾊的线框提⽰节点的约束框
⼯具栏中的变换⼯具从左到右分别是移动变换⼯具(W)、旋转变换⼯具(E)、缩放变换⼯具(E)、矩形变换⼯具(R)
【层级管理器】
层级管理器⽤树状列表的形式展⽰场景中的所有节点和他们的层级关系,所有在场景编辑器中看到的内容都可以在层级管理器中到对应的节点条⽬,在编辑场景时这两个⾯板的内容会同步显⽰,⼀般会同时使⽤这两个⾯板来搭建场景
层级管理器中包括当前打开场景中的所有节点,通过点击来选中节点,被选中的节点会以蓝底⾊⾼亮显⽰。当前选中的节点会在场景编辑器中显⽰蓝⾊边框,并更新属性检查器中的内容
节点在列表中的排序决定了节点在场景中的显⽰次序。在层级管理器中位置越靠下的节点,在场景中的渲染就会更晚,也就会覆盖列表中位置较为靠上的节点
【属性检查器】
属性检查器是查看并编辑当前选中节点和组件属性的⼯作区域。在场景编辑器或层级管理器中选中节点,就会在属性检查器中显⽰该节点的属性和节点上所有组件的属性以供查询和编辑
属性检查器⾯板从上到下依次是:
1、节点激活开关和节点名称
2、节点属性
3、组件属性
左上⾓的复选框表⽰节点的激活状态,节点处于⾮激活状态时,节点上所有图像渲染相关的组件都会
被关闭,整个节点包括⼦节点就会被有效的隐藏;节点激活开关右边显⽰的是节点的名称,和层级管理器中的节点显⽰名称⼀致
属性检查器接下来会显⽰节点的属性,节点的属性排列在Node标题的下⾯,点击Node可以将节点的属性折叠或展开
节点的属性除了位置(Position)、旋转(Rotation)、缩放(Scale)、尺⼨(Size)等变换属性以外,还包括锚点(Anchor)、颜⾊(Color)、不透明度(Opacity)。修改节点的属性通常可以⽴刻在场景编辑器中看到节点的外观或位置变化
节点属性下⾯,会列出节点上挂载的所有组件和组件的属性。⽤户通过脚本创建的组件,其属性是由脚本声明的。不同类型的属性在属性检查器中有不同的控件外观和编辑⽅式
属性是组件脚本中声明的公开并可被序列化存储在场景和动画数据中的变量,通常可以根据变量使⽤内存位置不同将属性分为值类型和引⽤类型两⼤类
1、值类型包括数值(Number)、向量(Vec2)、字符串(String)、布尔值(Boolean)、枚举(Enum)、颜⾊(Color)等简单的占⽤很少内存的变量类型
2、引⽤类型包括更复杂的对象,⽐如节点、组件或资源。和值类型各式各样的编辑⽅式不同,引⽤类
型通常只有⼀种编辑⽅式:拖拽节点或资源到属性栏中
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论