在资源管理器窗口中点击鼠标右键，显示菜单中点击新建，选择新建的脚本类型，这里举例就选择菜单中的JavaScript，或者如下图点击创建按钮也可。...every frame, uncomment this function to activate update callback update: function (dt) { }, }); 自定义格式可以在...通过·双击脚本资源·可以直接打开内置的"Code Editor"编辑，如果用户需要使用外部工具，请到菜单"Cocos Creator"-->"偏好设置"中进行设置，如下图: image.png 类介绍...同时还将类名设为 "sprite"，类名用于序列化，一般可以省略。 上面是定义，接下来我们就可以创建对象了。...，我们可以将脚本组件中的字段可视化地展示在属性检查器 中，从而方便地在场景中调整属性值。
要将方形图片显示成圆形，你可以使用Cocos Creator和TypeScript来创建一个自定义的圆形遮罩（mask）。...以下是实现这个效果的步骤： 在Cocos Creator中创建一个新的Canvas节点，然后在Canvas节点下创建一个Sprite节点，将你的方形图片（或任何你想要显示成圆形的图片）添加到Sprite...在Canvas节点下创建一个新的Node节点，用于作为遮罩。你可以将这个节点命名为”Mask”。 将Mask节点的ContentSize设置为与你的图片相同的大小，以确保遮罩大小与图片大小相匹配。...Creator编辑器，在Mask节点的Inspector面板中，将MaskCircle组件的maskGraphics字段拖动到Graphics组件上，以便将它们关联起来。...通过这些步骤，你可以使用Cocos Creator和TypeScript将方形图片显示成圆形。请确保调整遮罩节点的大小以匹配你的图片大小，并根据需要自定义遮罩的颜色和形状。
Cocos Creator实现一个桌球小游戏，从而能够让大家更好的了解以及运用Creator的物理系统 由于游戏比较简单，同时代码量也极少，因此就集中在一篇文章里面了。...在Cocos Creator中物理系统是默认关闭的，我们可以通过下面的代码来开启物理系统 let physicsManager = cc.director.getPhysicsManager(); physicsManager.enabled...，通过鼠标的移动控制球杆的方向 监听鼠标左键的按下以及抬起事件，通过按下的时间控制球杆的力度 鼠标左键按下时，球杆做向后的移动，松开鼠标左键，球杆做向前击打白球的动作 球杆击打时，向白球发送自定义事件，...由于Cocos Creator目前的事件传递的机制是冒泡传递，因此会有一些情况下我们的事件不太好进行派发。而这样通过Canvas节点，我们就可以实现在场景中很方便的进行事件的监听处理以及派发。...希望通过这个小游戏的制作，可以帮助大家了解Creator以及了解Creator物理系统的应用
Cocos Creator使用了Typescript的装饰器来做注解式写法，注解式的开发方式在很多语言里被广泛应用。...1 一般节点属性 最常见的节点属性，例如cc.Node，cc.Label，cc.Sprite等，要点： 使用@property注解，括号内参数是其类型 backGround 和label 是变量名，可以自定义...为了在属性面板上更加直观地显示，在声明属性时可以为其定义一个显示名称displayName，这样可在属性面板上显示中文： // 声明一个Sprite属性 @property({ type: cc.Sprite...3 增加属性提示说明 属性显示中文名之后已经很直观了，但是如果有一些属性用了简称，或者特定名称也很难理解，这个时候可以再增加一个提示说明，将鼠标悬浮在名称上就会浮现提示文字，代码如下： @property...5 下拉列表 要在属性面板上定义下拉列表，需要先定义一个枚举类型，TS有枚举类型，为了在属性面板上使用中文字符选项，我们必须使用Creator的枚举 cc.Enum. let SexyType = cc.Enum
获取手机相册图片 在 Cocos Creator 中加载相册图片 Cocos Creator 屏幕截图 使用HMTL显示截屏图片 保存图片到相册 1....在 Cocos Creator 中加载相册图片 FileReader 的 onload 回调事件中，我们将图片放入 HTML 的 img 标签中 reader.onload = (e)=> {...保存图片到相册 Cocos Creator 引擎在浏览器上是不能写文件的，因此我们上面是将图片用HTML img 显示，而不是用Sprite显示。...我们在手机上长按 img 元素就可以调出浏览器的保存菜单了，在桌面浏览器上可以鼠标右键保存，也可以直接拖动到桌面上。...小结 使用 Cocos Creator 不仅可以开发游戏，也能制作有效的小应用，如果在头像上加载一些Shader特效是不是会更酷呢？
Cocos Creator v2.2 已于 10 月 18 日正式发布，该版本对原生平台进行了大幅性能优化，同时在引擎层面也做了不少改动，包括 3D 模型渲染合批、大幅增强 TiledMap 支持等等，...此外，Cocos Creator 2.2 版本基本同步了 Cocos Creator 3D 的材质系统，新版本的材质系统已趋于稳定，可以很方便地在编辑器中进行材质及 Effect 文件的创建及编写。...相比之前的版本，v2.2 在渲染组件层面也有不少的差异。 Cocos 引擎开发工程师刘航，将为各位开发者详细介绍如何基于 Creator 2.2 版本进行渲染组件及材质的自定义。 ?...自定义材质及 Effect Cocos Creator 2.2 版本的材质及 Effect 是作为资源存在，可以通过编辑器很方便快捷地进行新建操作，而不需要通过代码进行创建。 ?...以上就是今天带来的 Cocos Creator v2.2 材质系统介绍，在使用过程中，如有哪些问题和困惑，亦或者是有更有价值的使用方法，欢迎大家移步至 Cocos 中文社区与大家一起交流。
不解，把js-test用到require的相关js文件添加到jslist中 也出现 require undefined … 答：cocos2d-js项目可以使用webpack或browserify进行代码编译...用下面的方法可以 cc.director.setDisplayStats(false); 反馈：谢谢咯 8. cocos creator打开错误 问：有没有好心人能告诉我一下这个问题是什么。...给你两个方案： 你尝试下可以正常编译、预览游戏吗？如果可以，只是编辑器启动时报这个错，暂时不理会它。 换用1.6的版本试试，是否也有这个问题。 还有就是打开Creator的开发者工具： ? ?...你说的 new出来的sprite，那是cocos2d-x/js中的概念了，在Creator中Sprite不能直接new出来，是先有机甲，再有给机甲中添加一个Sprite let node = new cc.Node...这周遇到两位Creator道友，在工作中遇到了困难，他们在简书和Cocos论坛发现，我的文章中提到与他们问题相关的内容，随后联系上我，有幸我提供的方案对他们有所帮助。
之前写了个透明过渡动画实现是基于Cocos Creator 1.x的，鉴于现在大多数开发者都使用2.x了，并且2.x与1.x中shader的使用方式有很大的不同，这里就把这个效果移植到2.x中。...（cocos creator 1.x透明渐变效果实现） 效果图： ?...在Cocos Creator 2.1中首先要先创建两个文件，分别是Material(材质)和Effect(特效)文件，创建方法如下图： ? 创建完成效果就是这两个文件： ?...然后打开特效文件，我们shader的逻辑就是在这个文件里编写，打开文件，里面的内容不用删除，我们只修改frag shader部分就可以了，代码如下： // 注意：当前版本的格式是实验性的，之后还会进行修改...最后我们在编辑器中将它绑定到sprite上，选中要使用特效的sprite节点，将材质属性设置上我们刚刚新写的材质： ? 运行，效果就出来了: ?
start(sprite, material) { ... }, //update每帧回调，如果是动态效果，可以在此设置Shader参数 update(sprite, material...', //frag片元着色器 frag: `...` }; //将shader对象添加到自定义材质中 let CustomMaterial = require('CustomMaterial...shader); 最为基本的3个属性：name、vert、frag 如果要控制着色器中的参数变量需定义params字段 如果要控制define变量定义defines字段 如果要为param变量设置初始值可以在...CustomMaterial自定义材质系统 ---- ShaderHelper组件只是对Cocos论坛Colin提供的CustomMaterial的调用，CustomMaterial又是对Cocos Creator...Shawn也是在不断坚持的过程中结合Panda对Cocos Creator 2.x新渲染器的介绍，以及几次Colin热心的指导交流，后来又拜读了麒麟子大神的《Thinking in Unity3D：材质系统概览
Cocos Creator 的 SpriteFrame 是 UI 渲染基础图形的容器。其本身管理图像的裁剪和九宫格信息，默认持有一个与其同级的 Texture2D 资源引用。...导入精灵帧资源 使用默认的 资源导入 方式将图像资源导入到项目中，然后在 属性检查器 中将图像资源的类型设置为 sprite-frame，并点击右上角的绿色打钩按钮保存： Creator 便会自动在导入的图像资源下创建一个如下图所示的...Custom — 自定义裁剪3. None — 无裁剪，使用原图 Trim Threshold 透明度阈值，默认为 1，取值范围为 0~1，会将透明度在设定值以下的像素裁减掉。...SpriteFrame 通过管理 RenderTexture 可以轻松地将 3D 相机内容显示在 UI 上。...CUSTOM 自定义尺寸，用户在使用 矩形变换工具 拖拽改变节点的尺寸，或通过修改 Size 属性，或在脚本中修改 width 或 height 后，都会自动将 Size Mode 设为 CUSTOM。
最近，我将自己在 Cocos Store 上的一个 2D 项目《球球要回家》从 Creator 2.2.2 升级到 Creator 3.6.2，编程语言也从 JavaScript 全面升级至 TypeScript...看下图： 在资源管理器中，鼠标右键选中脚本文件，在菜单中点击找查使用可以找到资源使用过的场景和预制体。 不过问题又来了，场景那么多节点，组件脚本在那里呢？这个怎么找？...模块引入 在 Creator 3.x 中废弃了cc.Node、cc.Sprite 这种形式的 API 调用。...我们在 3.x 场景中添加一个2D精灵，你可以看到： opacity 属性移到cc.UIOpacity组件 color 属性移到cc.Sprite组件 size、anchor point 属性移到cc.UITransform...希望上面 2.x 升级 3.x 内容对你有所帮助，也感谢在双11期间支持《球球要回家》的老铁们，这将是 Cocos Store 上第二个同时支持 Creator 2.x 、3.x 的游戏源码资源。
所以 Cocos Creator 在 v2.0 中加入了 「动态合图」（Dynamic Atlas）的功能，它能在项目运行时动态的将贴图合并到一张大贴图中。...静态图集也可以参与动态合图 在动态合图的官方文档中有提到： 当渲染一张贴图的时候，动态合图系统会自动检测这张贴图是否已经被合并到了图集（图片集合）中，如果没有，并且此贴图又符合动态合图的条件，就会将此贴图合并到图集中...也可以在代码中禁用该选项： let sprite = this.node.getComponent(cc.Sprite); let texture = sprite.spriteFrame.getTexture...最后还需要注意 在 Cocos Creator 2.0.7 之前的版本中，改变节点的颜色或透明度、Sprite 组件使用九宫格（Sliced）都会打断渲染合批。...相关资料 「Cocos Creator 用户手册」https://docs.cocos.com/creator/manual/zh/
作者：Nomat 来源：Cocos官方论坛 原文：https://forum.cocos.org/t/topic/99268 lcc-render Cocos Creator 自定义渲染框架，更便捷，...安装 安装十分简单，只要把这个项目作为 Creator 插件放到插件目录就可以了,具体请查看 Creator 插件包(https://docs.cocos.com/creator/manual/zh/extension...* attribute 顶点数据的方式传递，在现在的 Creator 中我们不自定义渲染的类是办不到的。优势是可以合批渲染；缺点是现在 Creator 中不好实现，会消耗更多的内存。...但是特别是在需要大量渲染的地方，渲染合批是很重要的。所以框架使用了 自定义数据传递方式 ，我们可以在着色器组件中选择每个数据传递的方式。当然有些数据是应该用指定的方式传递的，这类数据不能切换方式。...Shape Type 形状的类型，可以直接使用节点的形状也可以自定义。 Trim 和Sprite组件一致，配合上面的形状可以实现Sprite中的 Simple 模式。
本文将会介绍什么是 DrawCall，为什么要减少 DrawCall 以及在 Cocos Creator 项目中如何减少 DrawCall 来提升游戏性能。 正文 什么是 DrawCall？...所以 Cocos Creator 在 v2.0 中加入了 「动态合图」（Dynamic Atlas）的功能，它能在项目运行时动态的将贴图合并到一张大贴图中。...静态图集也可以参与动态合图 在动态合图的官方文档中有提到： 当渲染一张贴图的时候，动态合图系统会自动检测这张贴图是否已经被合并到了图集（图片集合）中，如果没有，并且此贴图又符合动态合图的条件，就会将此贴图合并到图集中...也可以在代码中禁用该选项： let sprite = this.node.getComponent(cc.Sprite); let texture = sprite.spriteFrame.getTexture...最后还需要注意 在 Cocos Creator 2.0.7 之前的版本中，改变节点的颜色或透明度、Sprite 组件使用九宫格（Sliced）都会打断渲染合批。
(2)、使用project-creator.py脚本创建Cocos2d-win32 Application项目 在Cocos2d-x官网上Setting up Development Environments...从上图可以看出，在C:\Python27路径下有python.exe命令解释器,project-creator.py脚本正是通过它来解释执行的。 ...在Win7下，右键单击桌面上的【计算机】->【属性】，在打开的【控制面板\所有控制面板项\系统】对话框中，如下图所示： ? 鼠标左键单击上图左侧最下面的【高级系统设置】，如下图所示： ? ...，使用create_project.py脚本创建HelloWorld项目后，Box2d、chipmunk物理引擎、cocos2d库、CocosDenshion音频库、扩展的库Extensions自动被添加到...它具有很多的功能，比如sprite(精灵)扶持，非常酷的图形效果，动画效果，物理库，音频引擎等等。
项目基于 Cocos Cocos Creator 2.4.3，不过大部分优化思路在 v3.x 依旧适用。限于篇幅，本文仅呈现部分核心代码，完整代码及测试项目源码下载见文末。...这里可以改成区域加载，一开始只解析当前屏幕中的图块，随后在移动的时候，再动态解析行动方向上的图块——当然这个方案也有缺点，就是我们需要额外的内存空间保存对应的坐标是否已经解析过。...在里面，我们将默认的 Sprite 组件改成我们自定义的组件，并赋予对应的去除颜色的材质即可。...多图集渲染合批是一个类似于打包图集的方案，我们在渲染的时候，一次传递多张图集，把原本的判断图片是否来自于同一张图集，转换为判断图片是否来自于同一批图集。...论坛专贴地址 裁剪区域共享（Share Culling）： https://forum.cocos.org/t/topic/134525 Sprite 颜色数据去除： https://forum.cocos.org
Python3在Python2的基础之上做了非常多的改进，比如字符串编码，在Python3中默认字符使用的是unicode编码，可以涵盖这个地球上所有的字符，当然了，优势不仅仅只有这一点。...今天我们要用到的这个cocos2d，是Python版本的，python版本的cocos2d相对于C++的版本来讲，开发效率更高，没有那么多野指针和内存泄漏的问题，并且同样也支持跨平台，开发出来的游戏不需要更改一行代码就可以在...在cocos2d中，如果想要加载一张图片，则必须使用到精灵（Sprite），以后我们游戏中将会使用的鱼、炮筒、网，都是通过精灵来实现的。...撒网： 在旋转炮筒后，要把网撒出去，撒到鼠标点击的地方，并且网在撒出去的时候要从小变大（网图片素材搜裙：526929231），代码如下： ?...检测是否发生碰撞： ?
当堆积的水果超过顶部红线时则游戏结束 整理出需要实现的核心逻辑 生成水果 水果下落与碰撞 水果消除动画效果及升级逻辑 预备工作 cocos creator基本概念 整个项目使用cocos creator...v2.4.3实现，建议初次了解的同学可以先过一下官方文档:https://docs.cocos.com/creator/2.3/manual/zh/，本文不会过多介绍creator的使用（主要是我也不太熟练...选择game场景，在左上角的层级管理器中可以看见场景的Canvas画布根节点，cocos默认画布是横屏的960*640，可以选择根节点然后再右侧属性检查器中调整宽高为640*960 接下来创建背景层，我们在...物理系统：自由落体与刚体碰撞 上面处理了水果创建的逻辑，在整个游戏中，水果是可以产生下落及弹性碰撞等物理效果的，利用cocos内置的物理引擎，可以很方便的实现 对cocos引擎不熟悉的同学可以先看看这个官方...，我们通过事件通知Game.js，这样可以在初始化水果的时候注册sameContact自定义事件的处理方法 // Game.js createOneFruit(num) { let fruit
Cocos Creator 制作第一个游戏 您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程，但如果您想快速上手体验使用 Cocos Creator...我们首先启动 Cocos Creator，然后选择打开其他项目 在弹出的文件夹选择对话框中，选中我们刚下载并解压完成的 start_project，点击打开按钮 Cocos Creator 编辑器主窗口会打开...之后就可以将这些资源拖拽到场景或组件属性中去使用了。 创建游戏场景 在 Cocos Creator 中，游戏场景（Scene）是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。...保存脚本，然后我们就可以开始第一次运行游戏了！ 点击 Cocos Creator 编辑器上方正中的预览游戏按钮 ?...总结 恭喜您完成了用 Cocos Creator 制作的第一个游戏！希望这篇快速入门教程能帮助您了解 Cocos Creator 游戏开发流程中的基本概念和工作流程。
可供 Cocos Creator 使用的图集资源由 plist 和 png 文件组成。...下面就是一张图集使用的图片文件： 为什么要使用图集资源 在游戏中使用多张图片合成的图集作为美术资源，有以下优势： 合成图集时会去除每张图片周围的空白区域，加上可以在整体上实施各种优化算法，合成图集后可以大大减少游戏包体和内存占用...多个 Sprite 如果渲染的是来自同一张图集的图片时，这些 Sprite 可以使用同一个渲染批次来处理，大大减少 CPU 的运算时间，提高运行效率。...更形象生动的解释可以观看来自 CodeAndWeb 的教学视频 What is a Sprite Sheet（什么是图集），需要使用 VPN 打开视频。...注意：Cocos Creator 3.x 不支持 TexturePacker 4.x 以下的图集格式，否则导入时会出现报错。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
