图片边缘裁剪问题(请把这个问题处置一下)

麻烦上传一下你这个圆的图片,我再用 Unity 验证一次

我还是那句话,边缘有硬边是正常的,不信你看 Unity…
解决办法就是不要 trim……

我来解释一下原理,WebGL 在贴图采样的时候,我们默认采用的是 linear 采样,所以半透明像素会和周围像素进行混合,达到一种比较自然的过渡。那么现在遇到的问题是,圆形贴图的大部分边缘区域都可以和周围的透明像素混合,就唯独上下左右顶到边缘的时候,WebGL 就无法混合了,因为边缘的外面已经没有像素了。所以才呈现出这种硬边的感觉

解决方法其实就是留几个像素的空白距离在四周,让贴图采样的时候可以达到自然的过渡。

4赞

我能不能选择不做任何采样,保持呈现一个最原始滴状态?

可以,texture.setAliasTexParameters();

1赞

无聊试了下,不放大还蛮圆的。。1.5.2:joy:

这样吗?。。

你得找到你需要设置采样的 texture,你这样写的话 onLoad 里面都没有定义 texture,怎么可能执行成功呢

能否给个案例?谢谢,怎样取到 texture 还不是很明白

http://cocos.com/docs/creator/api/classes/Node.html#method_getComponent
http://cocos.com/docs/creator/api/classes/Sprite.html#property_spriteFrame
http://cocos.com/docs/creator/api/classes/SpriteFrame.html#method_getTexture

这些看 API,看范例都可以学会

this.node.getComponent(cc.Sprite).spriteFrame.getTexture.setAliasTexParameters();

大佬,我这样为啥不行? 在x1.js onLoad里:

或者这两样也不行:

getTexture 是一个函数,不是一个属性,函数要加括号才能调用

textureURL 是一个 url,是字符串(string),string 要用 cc.loader.getRes 才能转换成 Texture2D 对象

谢谢大佬,OK了。

但是这样改了,直接爆炸。。

这是你的贴图本身的问题啊。。。你如果想要柔化的边缘,就要扩展一些透明像素。alias 采样模式就是会锯齿化。没办法什么都兼顾的,你得按照自己的需求来制作资源

我觉得应该把这个功能直接做进cc.Sprite组件的选项里面去,让开发者直接手动选择

之后会做成 texture 的选项

2赞

很抱歉,我刚刚发现,这个问题在原生平台并没有修复,所以上面说了那么多可能都白说了。
麻烦定制一下原生引擎,然后修改 ccConfig.h 中的 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1 改成 0 试试。
这个问题我们之后还会进一步完善!

你好jare,定制原生引擎能给一个入门教程吗?