Android Web端,纹理、字体模糊

如题,而且关闭抗锯齿后,能看到文字有明显锯齿效果。
尝试过设置各种Fit Height 、Fit Width 、enableRetina 、 resizeWithBrowserSize 等等,均无效果。
我手机分辨率:1920*1080,项目设计分辨率也是一样的,放手机WEB上浏览器全屏查看也是有锯齿。

2赞

这有一张图,对比软键盘输入的文字的:


右上角的是项目字体,左下角的是软键盘输入的字体

有尝试过几种不同分辨率的手机和不同的浏览器吗?

目前试过两台:
1.红米Note2的 QQ浏览器 UC浏览器 内置系统浏览器 微信内置浏览器
2.华为荣耀6 QQ内置浏览器 微信内置浏览器

均出现模糊,效果一样,屏幕越大的感觉越模糊(可能是细节看的更清晰)
[整个过程都是跟软键盘输入的字体做比对的,把手机截屏发到电脑放大看]

浏览器的默认分辨率和 native ui 的分辨率是不同的,一般是 1/2 - 1/3,对应的,浏览器中有一个: window.devicePixelRatio,这个值一般是 1 - 3 之间,enableRetina 实际上就是按照 devicePixelRatio 来对页面进行缩放,来得到更清晰的显示效果。不过事与愿违的是,浏览器上提升分辨率会大大提升渲染损耗,所以我们做了一个折中,最大支持 devicePixelRatio 为 2,如果浏览器默认值是 3,也会被降级到 2。你可以检查一下你的浏览器上的 devicePixelRatio 是多少。

一般情况下,只要 enableRetina 下的效果都是可以接受的。

1赞

好的,我去试试

试了手机浏览器的,devicePixelRatio 为 3,项目的getDevicePixelRatio()得到2,怎么设为3呢

强烈不建议设置为 3,会严重影响性能,2 相当于原有分辨率的基础上 * 4,3 相当于 * 9,差别是非常大的。

而且,引擎里面好像设置死了,得改引擎源码才能够改成 > 2

好的,谢谢。

在发布生成的 cocos2d-js-min.js 里面,
搜索
Math.min(2,window.devicePixelRatio||1)
改为
window.devicePixelRatio||1
屏幕字体和纹理瞬间变得好清晰啊:stuck_out_tongue_winking_eye:

个人建议,还是提供个接口比较好,至少用户有个选择

mark ~~~~~

boss,我修改引擎代码设置到了3,ios上越来越卡,请问有没办法设置到2到3中间的值,相比native端,2的效果不太行啊,大老板都不满意。:tired_face: 或者下一版优化下性能

你可以直接在适配之前改 window.devicePixelRatio = 2.x

但是我还是建议不要太纠结 web 的表现一定和 native 一样,分辨率提升的代价是巨大的,性能优化不上去你老板还是得怪你不是。。。

1赞

mark一下,碰到这个问题了

大佬 请问下 creator 模拟器左下角的的字体大小怎么修改啊