用 shader + mesh 立个 flag 吧! 文章底部获取完整代码! 效果预览 使用方法 创建一个空节点 添加用户脚本组件 mesh-texture-flag 添加图片 修改对应属性 实现原理 概括来说就是创建 mesh 网格模型,通过顶点着色器对顶点坐标不断的修改,达到飘动的效果.关于 mesh 的介绍,可以参考上一篇文章. 确定顶点坐标 为了让顶点着色器里有多个顶点可以改变位置,需要把一个形状分割成多个方形(三角形).分割数量越大,效果越精细,但需要消耗更多的性能消耗.下图是分割成两

首先将存放图片最外层文件夹命名为resources changeBj: function(){ var url = 'globalUI/video/gVideoPlayClick'; var _this = this; cc.loader.loadRes(url,cc.SpriteFrame,function(err,spriteFrame) { _this.isPlay.spriteFrame = spriteFrame; });   //加载网络图片 var url = "http://lo

前言 在游戏开发中,DrawCall 作为一个非常重要的性能指标,直接影响游戏的整体性能表现. 无论是 Cocos Creator.Unity.Unreal 还是其他游戏引擎,只要说到游戏性能优化,DrawCall 都是绝对少不了的一项. 本文将会介绍什么是 DrawCall,为什么要减少 DrawCall 以及在 Cocos Creator 项目中如何减少 DrawCall 来提升游戏性能. 正文 什么是 DrawCall? DrawCall 中文译为"绘制调用"或"绘图指

关注「编程小王子」公众号回复[头像生成器]获得源码! 下面我重点介绍一下Cocos Creator H5头像生成的实现方法: 获取手机相册图片 在 Cocos Creator 中加载相册图片 Cocos Creator 屏幕截图 使用HMTL显示截屏图片 保存图片到相册 获取相册图片 要获取手机相册图片,需要使用浏览器 input 标签提供的能力,在桌面浏览器上则是浏览文件目录选择图片. 使用 document 动态创建 input HTML标签,并设置属性为type 为 file,accept

我们在编辑器中看到的资源,在构建之后会进行一些转化,本章将揭开Creator对资源进行的处理. 资源处理的整体规则 首先我们将Creator的开发和运行划分为以下几个场景: 编辑器 当我们将资源放到编辑器中时,Creator会为每个资源生成唯一的uuid以及meta文件,并在项目的library目录下生成对应的json文件来描述这个资源的信息,而uuid与资源的映射关系被放在library目录下的uuid-to-mtime.json文件中.由于资源的引用关系是靠uuid来维系的,所以我们可以在C

极致的数学之美! 什么是分形? "一个粗糙或零碎的几何形状,可以分成数个部分,且每一部分都(至少近似地)是整体缩小后的形状" 简单来说,分形(fractal)就像这个doge表情包一样,放大一部分后和原来的图近似. 用分形着色器实现的效果如下,在编辑器内放大其中的一部分,会发现与整体非常相似! 如何实现这么优雅的图片?一切起源于简单的公式(julia set) . f(n) = f(n-1) * f(n-1) + c 通过迭代 n 次后可以实现分形效果. 起始值 f(0) 如何确定?

Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有完善的解决方案才对.我在网上搜了一些文章,虽然也有讨论的帖子,但是方案都不尽人意.因此只能再次自己动手丰衣足食了,在此我总结一下我的思路和策略,分享给大家,希望后来的人少走弯路,另外这里的方案只针对H5游戏发布,其他平台可以借鉴思路自己实现. 首页加载的loading界面,官网的文档并没有提及,我是通过构建发

Cocos Creator是一个优秀的游戏引擎开发工具,很多地方都针对H5游戏做了专门的优化,这是我比较喜欢Cocos Creator的一点原因. 其中一个优化点是首页的加载速度,开发组为了加快首页的渲染速度,减少白屏时间,把逻辑代码和首页加载代码做了彻底分离.首次页面加载的只是一个相当于加载器的初始化文件,文件体积特别小,不像某些引擎,一开始就需要加载主逻辑js文件,一开始就给我来个上百kb的文件加载,然后才能显示loading条,白屏时间当然会延长不少. 说到这里,不得不吐槽一下Cocos的

Cocos Creator 是Cocos最新一代的游戏开发者工具,基于 Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.Cocos Creator的开发思路已经逐步跟Unity 3D靠拢,写起来也更方便快捷,开发效率更高. 但既然是新东西,免不了各种坑.其中在发布Web Mobile平台上,就有各种小问题,例如给资源加上md5版本号,Cocos Creator就不支持.从16年底开发组就说要支持MD5 Cache,等了大半年,新的1.6内测版本终于增加了MD5 Cache的功能,但效果

前面的话 Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界面工具.Cocos Creator 的编辑器完全为引擎定制打造,包含从设计.开发.预览.调试到发布的整个工作流所需的全功能,该编辑器提供面向设计和开发的两种工作流,提供简单顺畅的分工合作方式.Cocos Creator 目前支持发布游戏到 Web.Android 和 iOS,真正实现一次开发,全平台运行.Cocos Creator

Cocos Creator编辑器界面主要窗口包含如下: * 资源管理器窗口 * 场景编辑器窗口 * 层级管理器窗口 * 属性检查器窗口 * 上方功能按钮 * 偏好设置 * 串口输出 * 预览和构建 1.资源管理器窗口 资源管理器是Cocos Creator编辑器访问和管理项目资源的窗口.在游戏制作中,场景.图片.声音.视频.脚本(代码)和动画等都是资源,均在这里进行展示与操作.资源管理器中的成员与项目asset文件夹下的文件和文件夹逐一对应. 界面预览 界面主要分为创建按钮(或在资源管理器窗口内

1月19日,由Cocos创始人王哲亲手撰写的一篇Cocos Creator新品发布稿件在朋友圈被行业人士疯狂转载,短短数小时阅读量突破五位数.Cocos Creator被誉为“注定将揭开Cocos开发世界中全新的一页”,究竟它有什么魅力?下面让我们来细细阅读这篇文章. 以下为全文: 上周我在厦门的「哎哟,2016」酒会上,宣布了今年会发布一款新的编辑器.是的,今天我来了: Cocos Creator在经历了一年多的低调研发之后,今天终于发布了第一个正式对外的公测版,大家可以从 cocos.com

使用cocos creator v2.2.2 实现流体效果 ! 图文+视频讲解! 效果预览 实现原理 整体思路是参考论坛中的一个帖子 这款游戏中水的粘连效果在Construct3中利用图层很容易实现,就是每个水滴都是挂了两个圆形图片素材,其中一个是水滴本来的蓝色,另一个是其他颜色且素材边缘是半透明的.当几个水滴靠近时让半透明素材边缘相互重叠,这时原本半透明的边缘透明度变低.通过在当前图层中使用Shader,并设定Alpha阈值--小于Alpha阈值部分按全透明处理,大于Alpha阈值部分则按不透

虽然目前网上具有切割合图功能的工具不少,但大部分都是自动切割或者根据plist之类的合图文件切割的, 这种切割往往不可自己微调或者很难维调,导致效果不理想. 今天逛贴吧发现了一位网友写的切割合图插件很不错,就分享下, 利用的是Unity自带的合图切割功能,原生的切割功能虽然很方便而且很容易微调,但无法导出,这个网友将它们导出了, 来自:百度Unity3D贴吧的13471713164 链接:http://tieba.baidu.com/p/3217039693 using UnityEngine;

studio里使用合图感觉和spriteBatchNode差不多,但有不同,合图只起到在加载资源时减少IO的作用,起不到批渲染的作用.其实想想,studio本来就是用来拼UI界面的,一个上点规模的UI界面里都有N个层.layout.各种widget,树状关系,不在一个层里,是没办法批渲染的. 1.把资源图片加到studio里,新建一个合图文件,然后把需要合并的小图拖到合图文件里.在studio项目里,被拖到合图文件里的小图的左上角会有个黄点. 2.合图文件的属性设置里,间隙设置大于0,避免有时候

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 配置compass项目 $ compass init 会生成相应的目录和配置文件.在images目录下建立logo目录存放需合并的图标.项目目录结构如下: - sass |-- icons.scss |-- scre

这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践>,对于其他团队可能并不是. 之所以写这篇文章,一是我刚开始接触Cocos Creator的时候,发现构建部署方面的一些问题,针对性写了3篇优化的方案,随着对Cocos Creator了解的深入,我发现了一些更好的替代方法,二是因为我们团队随着业务发展,又到了缺人的时候,出来刷刷脸,发点招聘广告:Cocos

这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运行时 场景切换流程 前面4章节介绍了完整的资源加载流程以及资源管理,以及如何自定义这个加载流程(有时候我们需要加载一些特殊类型的资源)."从编辑器到运行时"介绍了我们在编辑器中编辑的场景.Prefab等资源是如何序列化到磁盘,打包发布之后又是如何被加载到游戏中. 准备工作 在开始之前我们需

不管是游戏App,还是H5,又或者是微信小游戏.但凡接入了微信登录的应用,都可能需要显示微信头像. 在Cocos Creator中,我们常见的显示方法像下面这样 var headimg = 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132'; cc.loader.load({url:he

1.目的:学习加载图片资源.使用图片资源创建对象以及释放图片资源. 2.注意事项以及主要函数: ①注意事项:使用loadRes函数,资源必须放置在assets下的resources文件夹下(默认没有resources文件夹,需要自己创建:不只是图片,所有的资源都应该放置在resources文件夹或者子文件夹下). ②加载资源函数:cc.loader.loadRes(无后缀文件路径,文件类型,回调函数).需要注意的是,该函数为异步加载函数. ③释放资源函数:cc.loader.releaseRes