CocosCreator
码之有道
公众号《码之有道》,一起聊游戏全栈开发!
展开
-
CocosCreator之JSON资源导入
JSON 资源Creator 从 1.10 开始正式支持了 JSON 文件。项目 assets 文件夹下的所有.json文件,都会导入为cc.JsonAsset。你可以直接为组件关联一个 JSON: // 声明 npcList: { default: null, type: cc.JsonAsset, }, // 读取 var json = this.npcList.json; loadNpc(json);...原创 2020-09-16 22:53:44 · 2436 阅读 · 1 评论 -
CocosCreator之瓦片图资源(TiledMap)导入
瓦片图资源(TiledMap)瓦片图资源是由 TiledMap 所导出的数据格式。导入地图资源地图所需资源有:.tmx 地图数据 .png 图集纹理 .tsx tileset 数据配置文件(部分 tmx 文件需要)创建瓦片图资源第一种方式:从资源管理器里将地图资源拖动到层级管理器中:第二种方式:从资源管理器里将地图资源拖动到场景中:第三种方式:从资源管理器里将地图资源拖动到已创建 TiledMap 组件的 Tmx File 属性中:在项目中的...原创 2020-09-16 22:51:42 · 1991 阅读 · 0 评论 -
CocosCreator之骨骼动画资源导入
骨骼动画资源(DragonBones)DragonBones 骨骼动画资源是由DragonBones 编辑器导出的数据格式。导入 DragonBones 骨骼动画资源DragonBones 骨骼动画资源包括:.json/.dbbin 骨骼数据 .json 图集数据 .png 图集纹理 创建骨骼动画资源在场景中使用 DragonBones 骨骼动画资源需要两个步骤: 创建节点并添加 DragonBones 组件,可以通过以下三种方式实现: 从资源管理器..原创 2020-09-16 22:50:05 · 1116 阅读 · 0 评论 -
CocosCreator之骨骼动画资源导入
骨骼动画资源(Spine)骨骼动画资源是由 Spine动画编辑器所导出的数据格式。导入骨骼动画资源骨骼动画所需资源有:.json/.skel骨骼数据 .png图集纹理 .txt/.atlas图集数据 创建骨骼动画创建骨骼动画资源有以下三种方式: 从资源管理器中将骨骼动画资源拖动到层级管理器: 从资源管理器中将骨骼动画资源拖动到场景编辑器: 从资源管理器中将骨骼动画资源拖动到属性检查器Spine 组件的 S...原创 2020-09-16 22:48:22 · 1024 阅读 · 0 评论 -
CocosCreator之声音资源导入
声音资源声音资源就是简单的音频文件。引擎通过各个平台提供的基础接口,播放不同的声音资源来实现游戏内的背景音乐和音效。关于声音的加载模式在资源管理器内选中一个 audio,属性检查器内会有加载模式的选项。这个选项只对 Web 平台有效Web Audio通过 Web Audio 方式加载的声音资源,在引擎内是以一个 buffer 的形式缓存的。这种方式的优点是兼容性好,问题比较少。缺点是占用的内存资源过多。DOM Audio通过生成一个标准的 audio 元素来播放声原创 2020-09-16 22:45:19 · 1714 阅读 · 0 评论 -
CocosCreator之粒子导入
粒子资源(ParticleSystem)导入粒子资源将 Cocos2d 支持的粒子.plist文件直接放到工程资源目录下。在场景中添加粒子系统方法一,从资源管理器里将粒子资源直接拖到层级管理器:方法二,从资源管理器里将粒子资源直接拖到场景编辑器:方法三,在已有节点上添加一个粒子系统(ParticleSystem)组件,从资源管理器里将粒子资源直接赋给组件的File属性:注意:不支持.plist文件中的 sourcePosition ...原创 2020-09-16 22:44:05 · 1139 阅读 · 0 评论 -
CocosCreator之字体资源
字体资源使用 Cocos Creator 制作的游戏中可以使用三类字体资源:系统字体,动态字体和位图字体。其中系统字体是通过调用游戏运行平台自带的系统字体来渲染文字,不需要用户在项目中添加任何相关资源。要使用系统字体,请使用Label组件中的Use System Font属性。导入字体资源动态字体目前 Cocos Creator 支持TTF格式的动态字体。只要将扩展名为TTF的字体文件拖拽到资源管理器中,即可完成字体资源的导入。位图字体位图字体由fnt格式...原创 2020-09-12 14:35:55 · 3631 阅读 · 0 评论 -
CocosCreator之图像资源的自动剪裁
图像资源的自动剪裁导入图像资源后生成的 SpriteFrame 会进行自动剪裁,去除原始图片周围的透明像素区域。这样我们在使用 SpriteFrame 渲染 Sprite 时,将会获得有效图像更精确的大小。Sprite 组件剪裁相关设置详解和图片裁剪相关的Sprite组件设置有以下两个:Trim勾选后将在渲染 Sprite 图像时去除图像周围的透明像素,我们将看到刚好能把图像包裹住的约束框。取消勾选,Sprite 节点的约束框会包括透明像素的部分。只在 Type 设置为 Simpl...原创 2020-09-12 14:33:18 · 3276 阅读 · 0 评论 -
CocosCreator之资源导入导出工作流程
资源导入导出工作流程Cocos Creator 是专注于内容创作的游戏开发工具,在游戏开发过程中,对于每个项目该项目专用的程序架构和功能以外,我们还会生产大量的场景、角色、动画和 UI 控件等相对独立的元素。对于一个开发团队来说,很多情况下这些内容元素都是可以在一定程度上重复利用的。在以场景和 Prefab 为内容组织核心的模式下,1.5版本的 Cocos Creator 内置了场景(.fire) 和预制 (.prefab) 资源的导出和导入工具。资源导出在主菜单选择文件 -> 资源.原创 2020-09-12 14:31:42 · 3437 阅读 · 0 评论 -
CocosCreator之艺术数字资源 (LabelAtlas)
艺术数字资源 (LabelAtlas)艺术数字资源是一种用户自定义的资源,它可以用来配置艺术数字字体的属性。创建艺术数字资源在资源管理器的文件夹中点击右键或者点击左上方的加号按钮,然后选择新建 -> 艺术数字配置,将会新建一个LabelAtlas.labelatlas的资源。艺术数字资源在使用之前需要进行一些配置,比如关联事先绘制好的包含所需字体样式的图片,如下图所示:配置艺术数字资源在资源管理器中选中一个艺术数字资源后,属性检查器面板将会显示...原创 2020-09-12 14:29:54 · 1536 阅读 · 0 评论 -
CocosCreator之压缩纹理
压缩纹理Cocos Creator 可以直接在编辑器中设置纹理需要的压缩方式,然后在项目发布时自动对纹理进行压缩。针对 Web 平台,支持同时导出多种图片格式,引擎将根据不同的浏览器自动下载合适的格式。配置压缩纹理Cocos Creator 支持导入多种格式的图片(具体见下表),但是在实际游戏运行中,我们不建议使用原始图片作为资源来加载。比如在手机平台上可能只需要原图 80% 或者更少的画质,又或者是没有使用到透明通道的 .png 可以将其转换成 .jpg,这样可以减少很大一部分图片的存储空间。原创 2020-09-12 14:28:26 · 1362 阅读 · 0 评论 -
CocosCreator之自动图集资源 (Auto Atlas)
自动图集资源 (Auto Atlas)自动图集资源作为 Cocos Creator 自带的合图功能,可以将指定的一系列碎图打包成一张大图,具体作用和 Texture Packer 的功能很相近。创建自动图集资源在资源管理器中右键,可以在如下菜单中找到新建 -> 自动图集配置的子菜单,点击菜单将会新建一个类似AutoAtlas.pac的资源。自动图集资源将会以当前文件夹下的所有SpriteFrame作为碎图资源,以后会增加其他的选择碎图资源的方式。 如果碎图资源...原创 2020-09-12 14:25:49 · 7172 阅读 · 0 评论 -
CocosCreator之图集资源(Atlas)
图集资源(Atlas)图集(Atlas)也称作 Sprite Sheet,是游戏开发中常见的一种美术资源。图集是通过专门的工具将多张图片合并成一张大图,并通过plist等格式的文件索引的资源。可供 Cocos Creator 使用的图集资源由plist和png文件组成。下面就是一张图集使用的图片文件:为什么要使用图集资源在游戏中使用多张图片合成的图集作为美术资源,有以下优势:合成图集时会去除每张图片周围的空白区域,加上可以在整体上实施各种优化算法,合成图集后可以大大减少游戏包...原创 2020-09-12 14:24:36 · 3695 阅读 · 0 评论 -
CocosCreator之预制资源(Prefab)
预制资源(Prefab)预制资源(Prefab)是预先配置好的游戏对象.创建预制在场景中编辑好节点后,直接将节点从层级管理器拖到资源管理器:即可创建出一个预制:保存预制在场景中修改了预制实例后,在属性检查器中直接点击保存,即可保存对应的预制资源:还原预制在场景中修改了预制实例后,在属性检查器中直接点击回退,即可将预制对象还原为资源中的状态:自动同步和手动同步每个场景中的预制实例都可以选择要自动同步和还是手动同步。设为手动同步时,...原创 2020-09-12 14:22:36 · 3917 阅读 · 0 评论 -
CocosCreator之贴图资源texture性能优化
图像资源(Texture)图像资源又经常被称作贴图、图片,是游戏中绝大部分图像渲染的数据源。图像资源一般由图像处理软件(比如 Photoshop,Windows 上自带的画图)制作而成并输出成 Cocos Creator 可以使用的文件格式,目前包括JPG和PNG两种。导入图像资源使用默认的资源导入方式就可以将图像资源导入到项目中,之后我们就可以在资源管理器中看到如下图所示的图像资源。图像资源在资源管理器中会以自身图片的缩略图作为图标。在资源管理器中选中图像资源...原创 2020-09-12 14:20:57 · 3494 阅读 · 0 评论 -
CocosCreator之创建和管理场景
创建场景方法一:选择主菜单文件 -> 新建场景方法二:在资源管理器中点击创建菜单,创建新场景。保存场景方法一:使用快捷键Ctrl + S(Windows) 或Command + S(Mac)方法二:选择主菜单文件 -> 保存场景切换场景在资源管理器中,双击需要打开的场景。修改场景资源自动释放策略如果项目中的场景很多,随着新场景的切换,内存占用就会不断上升。除了使用cc.assetManager.releaseAsset等 A...原创 2020-09-11 23:58:33 · 1449 阅读 · 0 评论 -
CocosCreator之典型误区
1. 典型误区对于刚刚接触 Cocos Creator 的用户来说,可能会遇到下面几个典型的误区:希望配合 Cocos2d-x 来使用 Cocos Creator:Cocos Creator 内部已经包含完整的 JavaScript 引擎和 cocos2d-x 原生引擎,不需要额外安装任何 cocos2d-x 引擎或 Cocos Framework。 先搭建整体代码框架,再堆游戏内容:Cocos Creator 的工作流是内容创作为导向的,所以对原型创作是非常友好的,编辑器中直接进行场景搭建和逻辑原创 2020-09-11 23:55:58 · 554 阅读 · 0 评论 -
CocosCreator配置代码编辑环境
在快速上手教程中,我们介绍了在资源管理器中双击脚本文件打开代码编辑器快速编辑代码的方法。但编辑器内置的代码编辑器功能并不完善,只适合快速浏览和做少量编辑的需要。对程序员来说,我们需要更成熟完善的代码编辑环境。Visual Studio CodeVisual Studio Code(以下简称 VS Code)是微软新推出的轻量化跨平台 IDE,支持 Windows、Mac、Linux 平台,安装和配置非常简单。通过下面介绍的设置方法,使用 VS Code 管理和编辑项目脚本代码,可以轻松实现语法...原创 2020-09-11 23:50:23 · 1955 阅读 · 1 评论 -
CocosCreator之预览和构建
在使用主要编辑器面板进行资源导入、场景搭建、组件配置、属性调整之后,我们接下来就可以通过预览和构建来看到游戏在 Web 或原生平台运行的效果了。选择预览平台在游戏开发过程中我们可以随时点击编辑器窗口正上方的预览按钮,来看到游戏运行的实际情况。从预览按钮左边的下拉菜单我们可以从模拟器和浏览器中选择预览平台。注意:必须双击打开场景才能预览游戏内容,在没有打开任何场景,或者新建了一个空场景的情况下预览是看不到任何内容的。模拟器选择模拟器后运行预览,将会使用 Cocos ...原创 2020-09-11 23:48:21 · 1333 阅读 · 1 评论 -
CocosCreator之工具栏介绍
工具栏工具栏位于编辑器主窗口的正上方,包含了五组控制按钮或信息,用来为特定面板提供编辑功能或方便我们实施工作流。选择变换工具为场景编辑器提供编辑节点变换属性(移动、旋转、缩放、尺寸)的功能。变换工具显示模式使用以下两组按钮控制场景编辑器中变换工具的显示模式。位置模式:锚点:变换工具将显示在节点锚点(Anchor)所在位置。 中心点:变换工具将显示在节点中心点所在位置(受约束框大小影响)。旋转模式:本地:变换工具的旋转(手柄方向)将和节点的...原创 2020-09-11 23:46:28 · 348 阅读 · 0 评论 -
CocosCreator之项目设置
项目设置面板通过主菜单的项目->项目设置...菜单打开,这里包括所有特定项目相关的设置。这些设置会保存在项目的settings/project.json文件里。如果需要在不同开发者之间同步项目设置,请将settings目录加入到版本控制。分组管理目前项目设置中的分组管理主要为 碰撞体系统 提供分组支持。模块设置这里的设置是针对发布 Web 版游戏时引擎中使用的模块进行裁剪,达到减小发布版引擎包体的效果。在列表中选中的模块在打包时将被引擎包括,未选中的模块会被裁剪掉...原创 2020-09-11 23:44:47 · 972 阅读 · 0 评论 -
CocosCreator之设置
设置面板中提供各种编辑器个性化的全局设置,要打开设置窗口,请选择主菜单的CocosCreator -> 设置。设置部分由几个不同的分页组成,将各种设置分为以下几类。修改设置之后点击保存按钮。常规 编辑器语言:可以选择中文或英文,修改语言设置后要重新启动 Cocos Creator 才能生效。 默认层级管理器节点折叠状态:切换层级管理器节点树所有子节点的默认状态,有全部展开、全部折叠和记住上一次状态三种选项。 选择本机 IP 地址:用户可以在本...原创 2020-09-11 23:43:01 · 1415 阅读 · 0 评论 -
CocosCreator之控制台
控制台会显示报错、警告或其他 Cocos Creator 编辑器和引擎生成的日志信息。不同重要级别的信息会以不同颜色显示:日志等级日志(Log):灰色文字,通常用来显示正在进行的操作。 提示(Info):蓝色文字,用来显示重要提示信息。 成功(Success):绿色文字,表示当前执行的操作已成功完成。 警告(Warn):黄色文字,用来提示用户最好进行处理的异常情况,但不处理也不会影响运行。 报错(Error):红色文字,表示出现了严重错误,必须解决才能进行下一步操作或运行游戏。Cons..原创 2020-09-11 23:40:51 · 1157 阅读 · 0 评论 -
CocosCreator之控件库
控件库是一个非常简单直接的可视化控件仓库,您可以将这里列出的控件拖拽到场景编辑器或层级管理器中,快速完成预设控件的创建。使用默认窗口布局时,控件库会默认显示在编辑器中,如果您之前使用的编辑器布局中没有包括控件库,您可以通过主菜单的面板->控件库来打开控件库,并拖拽它到编辑器中你希望的任意位置。目前控件库包括两个类别,由两个分页栏表示:内置控件如上图所示,这里列出了所有编辑器内置的预设节点,通过拖拽这些控件到场景中,您可以快速生成包括默认资源的精灵(Sprite)、...原创 2020-09-11 23:39:19 · 1067 阅读 · 0 评论 -
CocosCreator之属性检查器
属性检查器是我们查看并编辑当前选中节点、节点组件和资源的工作区域。在场景编辑器、层级管理器中选中节点或者在资源管理器中选中资源,就会在属性检查器中显示它们的属性,可供查询和编辑。节点名称和激活开关左上角的复选框表示节点的激活状态,使用节点处于非激活状态时,节点上所有图像渲染相关的组件都会被关闭,整个节点包括子节点就会被有效的隐藏。节点激活开关右边显示的是节点的名称,和层级管理器中的节点显示名称一致。节点属性属性检查器接下来会显示节点的属性,节点的属性排列在Nod...原创 2020-09-10 23:15:55 · 1537 阅读 · 0 评论 -
CocosCreator之层级管理器
层级管理器层级管理器中包括当前打开场景中的所有节点,不管节点是否包括可见的图像。你可以在这里选择、创建和删除节点,也可以通过拖拽一个节点到另一个上面来建立节点父子关系。点击来选中节点,被选中的节点会以蓝底色高亮显示。当前选中的节点会在场景编辑器中显示蓝色边框,并更新属性检查器中的内容。左上角的按钮是创建按钮,用来创建节点。 搜索按钮用来过滤搜索的类型,分为节点、组件和引用 UUID 的节点三种类型。 上方的搜索栏可以根据搜索类型来搜索所需的节点或者组件等: 当在...原创 2020-09-09 23:44:08 · 2826 阅读 · 0 评论 -
CocosCreator之场景编辑器介绍
Scene 场景编辑器场景编辑器是内容创作的核心工作区域,您将使用它选择和摆放场景图像、角色、特效、UI 等各类游戏元素。在这个工作区域里,您可以选中并通过变换工具修改节点的位置、旋转、缩放、尺寸等属性,并可以获得所见即所得的场景效果预览。视图介绍导航您可以通过以下的操作,来移动和定位场景编辑器的视图:鼠标右键拖拽:平移视图。 鼠标滚轮:以当前鼠标悬停位置为中心缩放视图。坐标系和网格场景视图的背景会显示一组标尺和网格,表示世界坐标系中各个点的位置信息。读数为...原创 2020-09-09 23:42:22 · 1521 阅读 · 0 评论 -
CocosCreator之资源管理器介绍
资源管理器(Assets)资源管理器是我们用来访问和管理项目资源的工作区域。在开始制作游戏时,添加资源到这里通常是必须的步骤。可以使用HelloWorld模板新建一个项目,就可以看到资源管理器中包含了一些基本资源类型。界面介绍资源管理器将项目资源文件夹中的内容以树状结构展示出来,注意只有放在项目文件夹的assets目录下的资源才会显示在这里。下面我们介绍各个界面元素:左上角的按钮是创建按钮,用来创建新资源。 右上的文本输入框可以用来搜索过滤文件名包含特定文本的资源。...原创 2020-09-09 23:39:51 · 1048 阅读 · 0 评论 -
CocosCreator项目结构剖析
项目文件夹结构初次创建并打开一个 Cocos Creator 项目后,开发者的项目文件夹将会包括以下结构:ProjectName(项目文件夹)├──assets├──library├──local├──packages├──settings├──temp└──project.json下面我们将会介绍每个文件夹的功能。资源文件夹(assets)assets将会用来放置游戏中所有的本地资源、脚本和第三方库文件。只有在assets目录下的内容才能显示在资源管理器中。...原创 2020-09-09 23:36:20 · 477 阅读 · 0 评论 -
CocosCreator系列教程(四) HelloWorld
学习新技术的惯例,首先要做的当然是展示“HelloWorld”!创建项目在 Dashboard 中,打开新建项目选项卡,选中Hello World项目模板。然后在下面的项目路径栏中指定一个新项目存放路径,路径的最后一部分就是项目文件夹名称。填好路径后点击右下角的新建项目按钮,就会自动以 Hello World 项目模板创建项目并打开。打开场景,开始工作Cocos Creator 的工作流程是以数据驱动和场景为核心的,初次打开一个项目时,默认不会打开任何场景,要看到 H...原创 2020-09-09 23:31:27 · 1000 阅读 · 0 评论 -
CocosCreator系列教程(三) 创建项目
启动 Cocos Creator 并使用 Cocos 开发者帐号登录以后,就会打开 Dashboard 界面,在这里你可以新建项目、打开已有项目或者获得帮助信息。界面总览上图所示的就是 Cocos Creator 的 Dashboard 界面,包括以下几种选项卡:最近打开项目: 列出最近打开项目,第一次运行 Cocos Creator 时,这个列表是空的,会提示新建项目的按钮。 新建项目: 选择这个选项卡,会进入到 Cocos Creator 新项目创建的指引界面。 打开其他项目: ..原创 2020-08-23 00:47:02 · 1146 阅读 · 0 评论 -
CocosCreator系列教程(二) 安装与启动
下载 Cocos Creator请点击此处,跳转至官网下载Cocos Creator安装包。安装包版本可自行选择,建议安装最新版本。点击上图红色标注的按钮进行下载,下载完成后双击安装包。Windows 安装说明Windows 版的安装程序是一个.exe可执行文件,通常命名会是CocosCreator_vX.X.X_20XXXXXX_setup.exe,其中vX.X.X是 Cocos Creator 的版本号,如v1.2.2,后面的一串数字是版本日期编号。注意: 日期...原创 2020-08-23 00:38:18 · 1948 阅读 · 0 评论 -
CocosCreator系列教程(一) 源码架构剖析
关于 Cocos CreatorCocosCreator是一个完整的游戏开发解决方案,包含了轻量高效的跨平台游戏引擎,以及能让你更快速开发游戏所需要的各种图形界面工具。它完全为引擎定制打造,包含从设计、开发、预览、调试到发布的整个工作流所需的全功能一体化编辑器。Cocos Creator 编辑器提供面向设计和开发的两种工作流,提供简单顺畅的分工合作方式。Cocos Creator 目前支持发布游戏到 Web、iOS、Android、各类"小游戏"、PC 客户端等平台,真正实现一次开发,全平台运行。产原创 2020-08-23 00:04:26 · 1867 阅读 · 0 评论