如何使图片扭曲呢

Creator 2.x
#7

shader简单点吧，你是说网格mesh么，建模软件里搞成想要的扭曲效果，然后uv展贴图

#8

刚改了下，可以用image
CCEffect %{
techniques:

  • passes:
    • vert: vs
      frag: fs
      blendState:
      targets:
      • blend: true
        rasterizerState:
        cullMode: none
        properties:
        texture: { value: white }
        time: { value: 0.0 }
        }%

CCProgram vs %{
precision highp float;

#include
#include
#include

in vec4 a_position;
in vec2 a_uv0;
out vec2 v_uv;
void main() {
gl_Position = cc_matViewProj * a_position;
v_uv = a_uv0;
}
}%

CCProgram fs %{
precision highp float;
#include
#include
in vec2 v_uv;
uniform sampler2D texture;
uniform c{
float time; // 用于控制扭曲的时间
};

void main() {
vec2 p = v_uv - 0.5; // 将坐标原点移到纹理中心
float distanceToCenter = length§;

// 计算偏移角度，与距离成正比
float offsetAngle = distanceToCenter * time;

// 计算偏移后的坐标
vec2 offsetCoord = vec2(
    p.x * cos(offsetAngle) - p.y * sin(offsetAngle),
    p.x * sin(offsetAngle) + p.y * cos(offsetAngle)
);

// 归一化坐标
vec2 normalizedCoord = offsetCoord + 0.5;

// 输出颜色
gl_FragColor = texture2D(texture, normalizedCoord);

}
}%

#9

能用Assembler解决就别用Shader，Shader会打断合批。
Assembler操作图片的顶点，Shader操作图片每个像素点

#10

应该是吧 就是把图片分成n个格子 调整其中一个或者多个点

#11

视频效果


大概知道怎么实现的了

#12

通过修改mesh实现的 实现代码 这是c++的 不是cocos引擎的
https://game-test-1251227798.cos.ap-nanjing.myqcloud.com/hge_tut05.cpp

#13

合批都会打断 理论上提交不同的数据都会打断

#14

用mesh的话 需要很多个顶点 不然扭曲会不自然，shader可以逐个像素处理，会更自然

#15

Assembler操作顶点，不会打断合批，我之前写的拖尾组件就是操作顶点画拖尾
【包教包会】对CocosCreator拖尾组件MotionStreak做了全面优化

#16

视频里的是16x16的顶点数 512的图片大小

#17

晚点学习 谢谢大佬 理论上如果全局公用一个fbo 那么updatedata都会打断 不知道cocos是不是每个精灵都单独一个fbo 计算dc的方式不一样

#18

其实我就想实现类似live2d或者spine的简单飘动而已 顶点应该比shader好控制

#19

Assembler 按理说应该是不会打断的，Buffer数据每一帧计算放到model中，着色器程序、texture、渲染技术（模板测试、深度测试、透明测试、混合等等）都相同，可以合批的。使用shader 是百分百会打断的，因为着色器程序变了，无法跟普通的共用。

#20

提交不同的buffer其实也算打断了 只是每个引擎计算dc的方式不一样 如果共用一个fbo 优化才是最好的

#21

不是的，一个合批model的Buffer， 它包含了多个渲染组件的RenderData数据，当然它有一个最大值限制，超过了最大值就会使用(flush)新的model。而你这个可以跟其他的渲染组件一起放入到一个Buffer中，一起给到GPU。只要渲染状态共用，同时不超过最大值条件，那么就可以一次渲染了。

#22

这拖尾可以，官方那个拖尾太丑了

#23

其实可以共用一个 每次提交pos就好 大部分精灵的颜色和uv是一致的

#24

嗯 做出来了可以分享分享 :clap: :clap:

#25

xxx
抄了一个shader,有点抽象
uv.x += sin(uv.y20.0+cc_time.x10.) / 50.0;

#26

Assembler提交buffer只是顶点数据，不会影响图片合批