图片尺寸为奇数时，浏览器显示效果模糊

Creator 3.x
#1

  • Creator 版本： 3.5.1

  • 目标平台： Edge浏览器

  • 重现方式：图片资源的尺寸，宽或高如果是奇数，显示效果就模糊。均改为偶数，就很清晰。

image

#2

图片方便给下测试吗？找了几张图看不出来那么明显的效果

image
image818×306 24.7 KB

#3

CocosDemo.zip (52.3 KB)

image

#4

这个和显示屏像素有关吧，显示屏的点距越大，这种情况越明显，在手机上运行看看肯定两个清晰度区别不大，因为手机屏幕点距小。

#5

所以这个问题没下文了吗？ :roll_eyes:

#6

下载需要时间吧 :rofl:

1赞
#7

@jare 这个我了解到的是渲染取样导致的，在实际应用中，有没有什么好的方法，让显示内容边缘清晰一些

1赞
#8

抱歉这么久才回复，测试了些电脑都没复现。。 :cold_sweat:

#9

image
image841×276 31.5 KB

win10 cocos 3.5.1 chrome浏览器，双屏显示器，两个显示测试结果 确实奇数会模糊很多。

#10

你用mac测的？还是win10测的

#11

我是win10系统

#12

win10 ,显示器多大啊？

#13

插个眼，，

#14

戴尔P2319H
屏幕尺寸：23英寸
最佳分辨率：1920x1080

#15

品牌：惠普
型号：24M
尺寸：23.8英寸
屏幕比例：16:9
分辨率：1920×1080

#16

自定义材质，effect 选择 sprite, 勾选上 USE_PIXEL_ALIGNMENT 试试？

image
image721×797 22.8 KB

#17

已测试，没有效果。

#18

image
image1121×724 49.9 KB

我这里采用 USE_PIXEL_ALIGNMENT 的方式之后，效果还是挺明显的

#19

在Cocos Creator 3.6.3 中也遇到了图片有点模糊的问题，按照上面 上面 的方法设置还是没有解决。后来是通过如下方法解决的。在资源管理器中选中图片，在最右边显示图片的属性中，按如下图在 texture 中设置 Filter Mode 为： Nearest(None) 。
Snipaste_2023-08-30_16-13-34

#20

解决了，注意 WrapMode要设置成 Clamp