长方形图片,变成拱形,怎么做。

1e739dfd9ec64e90170e097d36475e24 项目中有很多,这种长方形图片,想要改成拱形的。有哪些思路。

用三角函数的来调整一下y轴的高度

之前我用三角函数将一个直线的闪电拉成圆形过,所以拱形应该也可以

最简单的办法是用shader,在顶点里处理一下

多少钱?可以有偿解决 :stuck_out_tongue_winking_eye:

局部截取_20250902_130851

试着写了个 shader, 显示不出来

73c5d61e-8d57-4266-a565-3bd9264a0cf1CCEffect %{
techniques:
- name: “sin_effect”
passes:
- vert: vs:vert
frag: fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
depthStencilState:
depthTest: false
depthWrite: false

}%

CCProgram vs %{
precision highp float;
#include

in vec3 a_position;
in vec2 a_texCoord;
in vec2 a_color;

out vec2 uv;

vec4 vert(){
uv = a_texCoord;
vec4 pos = vec4(a_position, 1.0);
pos = cc_matViewProj * pos;

return pos;

}

}%

CCProgram fs %{
precision highp float;
#include

in vec2 uv;

vec4 frag(){

// 对 uv.y 做正弦扰动
float offset = sin(uv.x * 3.0 ) * 0.5;
vec2 wavedUV = vec2(uv.x, uv.y + offset);


 vec4 color = texture(cc_spriteTexture, wavedUV);
return color;

}

}%

2赞

a_position 是图片的四个顶点。 原理应该是,所有的像素点的y值,按一个曲线 偏移。不知道怎样写,,

大佬牛,能贴下关键代码嘛~

哈哈,主要是想学习下shader,项目是自己下载的开源项目

是用的 shader 嘛?我还有个想法: 把图片分成N份,然后曲线排列。 同样,,也不知道该怎么写,哈哈

现实点,这种需求 直接美术去改.这种东西就像是,美术出的图千奇百怪,我们程序是能调.但决不能调,如果说公司非让你来干,直接换一家.不是说你能干就干的问题.做项目就要有章程,有规范.

拆成 bmfont,把每个字母用函数拼成弧形,这样不止弧形,各种形状都可以

你这个不显示的问题,你把图片的wrapMode改成Repeat试试看

是显示不到原图片大小外层来的,看下有没有大佬知道怎么做。

用assembler添加顶点,根据圆心位置重新计算每个顶点位置

1赞

干脆自定义顶点数据,自己算坐标就好了。

  • 方案1.可以图片顶部补足够空白。
  • 方案2.
    关键代码
  vec4 vert () {
    ...
    pos.y = pos.y * scale;

    uv0 = a_texCoord;
    uv0.y = uv0.y * scale - scale * 0.5;
    ...
  }

  vec4 frag () {
      ...
      float offsetY = sin(uv0.x * 3.1415) * scale * 0.5;
      vec2 uvNew = vec2(uv0.x, (uv0.y + offsetY));
      ...
  }

顶点着色器中pos.y = pos.y * scale; 让图片显示范围突破原本高度。 目前这样做会带来问题,有很大的偏移,根据图片y不同有不同的偏移…
效果图:


EffTest1.zip (42.5 KB)

对啊
这种东西美术出图就行了

如果是想学习shader,那当我没说