cocos creator通过Assember实现图片的形状修改

前言 昨天刚办完离职手续，今天闲来无事，就分享一篇关于cocos shader中的扭曲（水波纹）特效的实现吧，话不多说，直接步入正题。 效果 这个效果原理非常简单，就是对 texture 随机采样，当然，这个随机会有一定的约束，不能太随机，在当前uv坐标附近随机即可。也就是说对uv进行随机偏移。 在shader中没有内置的随机函数，要么自己写一个随机函数，要么通过采样噪声图拿到随机值。这里我们就采用第二种方法，简单而且性能也好。(在shader中严格说来应该叫噪声，有兴趣的可以自己去查阅相关的资料) 首先

cocos creator 2.4.4 因为需要这样一个功能，不知道图片的形状，但是要实现图片和其他物体碰撞 所以开始觉得没问题，因为cocos creator的PolygonCollider中在编辑器Regenerate Point可以实现生成图片的多边形碰撞点， 后来看到代码中获取不到Regenerate Point的方法，看了编辑器的底层代码，是只有在编辑器中才能使用 所以只能自己实现获取图片的轮廓点，把得到的点赋值给多边形的points数组就可以了 1,主要使用的代码就...

参考： 九宫格 九宫格是利用一张很小的图片来绘制大区域图片却不失真的技术。 绘制时会遵循下面的规则：   a. 保持4个角部分不变形 b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸） c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）   Cocos Studio

通常ui 资源都是图片，也是最占资源量的资源类型，游戏中的ui 资源还是人机交互的最重要的部分，因此质量要求都非常高，通常都是使用rgb32位真彩色，这就导致资源量比较大。通常ui资源在打包时，都会以图集的形式展现，在加载到内存的时候，是整块加载，如果ui 没优化好，则会增大内存的开销。将鼠标移动到分割线上，可以看到光标形状改变了，这时候就可以按下并拖拽鼠标来更改分割线的位置。我们可以看到，图像周围有一圈绿色的线条，表示当前九宫格分割线的位置。可以鼠标滚轮放大图片预览试图，便于精准调整边框位置。

操控顶点的大师——Assembler保姆级CocosCreator教程

问题：在cocosCreator中没找到对图片重置大小的按钮（在cocos2d-x中，图片可以通过重置大小来快速还原图片的原本大小） 所以在cocosCreator中替换资源的时候，图片资源和原来不同时，会出现变形。 解决办法：打开sprite手册 这里Size Mode 的三种模式介绍 要想使用图片原尺寸，就选择Trimmed或者Raw 有时候需要动态改变图片的大小或者形状...

感谢群内大佬honmono的分享，也欢迎同学们入群交流 QQ群：521643513 Mac 下cocos 引擎源码位于 CocosCreator.app/Contents/Resources/engine/cocos2d/ 以下使用 CocosEngine 代替该路径 //演示// 1效果预览 2单击线段添加顶点 3双击顶点删除 4反向遮罩 //实现// 1浅析 cc.Mask 打开 CCMask.js ...

使用OpenGLES实现UIImageView显示效果介绍本篇使用OpenGLES实现UIImageView的显示功能,代码已做详细注释。OpenGL相关文章参考前几篇。代码如下//// ViewController.m// OpenGLES//// Created by dowZhang on 2019/6/2.// Copyright © 2019 dowZhang. All rights r...

Assembler 的作用是根据渲染组件的属性和状态，生成渲染所需的绘制数据，并将其发送给渲染引擎进行绘制。不同类型的渲染组件可能需要不同的 Assembler 来实现特定的渲染效果。总体来说，渲染组件负责管理节点的渲染信息，而 Assembler 则根据渲染组件的信息生成绘制数据，实现节点的具体渲染效果。如果我们想要自定义一个渲染逻辑，就需要创建自己的渲染组件类来继承引擎的渲染组件的基类，如UIRender，并且需要创建一个渲染组件的 Assembler实现IAssembler接口。

在Coscos中，节点不光可以挂载组件，还可以挂载自定义脚本，自定义脚本主要使用到两个方法，第一个方法是start()方法，start 方法会在组件第一次激活时调用，所以start方法往往回写对节点的初始操作，比如设置起始点坐标、设置角色满血状态等，第二个方法是update(dt:number)，update方法在游戏的每一帧都会调用，所以update方法往往用来写对节点状态改变的方法，例如更新角色的最新血量、更新角色位置(如果操作者此时正在按着前进按钮)等。您这么想是没错的，这种操作和上面的效果等同。

我之前的做法是图片和图片放到一起，label和label放到一起，这样就能达到合批的目的，但是这样做的结果就是代码组织就变得很没有结构性，最好的办法是既能保持节点结构又能达到轻松合批的效果。register函数是初始化渲染组件的构造函数的__assembler__属性，以便后来的init函数赋值renderComp._assembler ,你可能会问Assembler的init函数在哪里执行的呢，不错这个init函数是在_resetAssembler函数里面执行的。那么接下来看看他们的作用，

第一节 制作俄罗斯方块的各种形状

【代码】cocosCreator任意图片加圆角。

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

更多笔记，请关注公众号： Cocos引擎源码位于CocosCreator.app/Contents/Resources/engine/cocos2d/(Mac版本), 以下使用CocosEngine代替路径 效果展示 1, 自定义渲染组件—TexturePlus 2, 实现自定义多边形渲染范围 =========== 3, 图片切割效果 =========== 4, 图片破碎效果 =========== 5, 碎片掉落效果 =========== 浅析Assember 源码路径位于 Coco

效果图如下： 实现方法： 1.将需要产生残影的物体单独设置为一个Group； 2.新建两个sprite，设置为和残影物体相同Group，一个用于显示当前帧的残影，一个保存上一帧的残影用于摄像机渲染，修改sprite的透明度用于产生渐隐效果； 3.新建一个摄像机，摄像机位置需要与两个sprite一致（至少在渲染残影的那个时刻保持一致）； 4.代码中新建两个RenderTexture，分...

原文链接: https://forum.cocos.org/t/demo/95087作者: GT排版整理: 白玉无冰背景自定义渲染可以实现很多酷炫的 shader 特效，目前常用的有两...

cocos2D 实现图形扭曲效果 源码下载博客地址： http://blog.sina.com.cn/s/blog_7bf10deb01010611.html 转载于:https://blog.51cto.com/663907402/722788...

最近在想虽然shader可以解决2d中的很多特效需求但是会存在一个问题就是drawcall会增加，这样会带来性能隐患，所以看了一下自定义渲染，整了一个正多边形图片的实现：效果如下图： 具体实现是创建一个渲染组件继承自cc.RenderComponent,并且需要一个自定义的assembler，集成的RenderComponent需要 重写updateRenaderData,updateUvs,updateVerts,updateWorldVerts,fillBuffers,其实可以参考 sprite.