[SOLVED]WebP images with transparency (alpha) render (cocos2d-x 3.3 rc0)

cocos2d-x C++
#1

Hi everyone.

Due to app size reduction, have tried to use webP format instead of png images. cwebp by google was used for converting images from png to wepb.

It was working correct when cocos2d-x 3.0alpha0-pre was used.
But in cocos2d-x 3.3 rc0 WebP images have strange artifacts, even when same images are using.

Here is an example:

c838e7697a5e96c2.PNG790×392

left sprite loads png file, right one - webp image. Some images are displayed with less artifacts, some with more. Problem images have transparency (alpha-chanel). Sprites wasn’t resized or etc. Just create and display.

This problem appears in project on windows (win7), macos 10.10 and on ios simulator (unfortunately is not possible to test it on ios or android devices).

Thanks for reading. All thoughts and suggestions about such problem are welcome.

#2

Here is some more investigation about this problem:
first of all we’ve tried to change images – got simple firefox icon 128x128 (you can get it here http://findicons.com/icon/102069/mozilla_firefox). This image was converted using libwebp-0.4.2-windows-x86 with different params and using online webP converter (cloudconvert.org)

Here is code for testing:
left one is PNG and right one is WebP

    // background image
    auto sprite = Sprite::create("HelloWorld.png");
    sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
    //this->addChild(sprite, 0);

    // original png image
    auto png = Sprite::create("mf_x128.png");
    png->setPosition(Vec2(320, 320));
    this->addChild(png, 1);
    
    /// webp images, converted from png
    // online converter cloudconvert.org
    //auto webp = Sprite::create("mf_x128_cloud.webp"); // artifacts

    /// convertion using cwebp.exe (libwebp-0.4.2-windows-x86)
    // simple convertion -q 80
    //auto webp = Sprite::create("mf_x128.webp"); // artifacts
        
    // -alpha_cleanup
    //auto webp = Sprite::create("mf_x128_C.webp"); // artifacts
    
    // -lossless
    //auto webp = Sprite::create("mf_x128_L.webp"); // artifacts

    // -lossless -alpha_cleanup
    auto webp = Sprite::create("mf_x128_LC.webp"); // artifacts
<img src="/uploads/default/8135/2c1a7264f76c44fa.PNG" width="513" height="137"> 
    webp->setPosition(Vec2(630, 320));
    this->addChild(webp, 1);

Please don’t pay attention about background image shifting, it’s just because different device sizes and orientations.

and results WITH artifacts
cocos2d-x v3.3rc0 win32

cocos2d-x v3.3rc0 Mac

cocos2d-x v3.3rc0 iOS sim

results WITHOUT artifacts
cocos2d-x v3.0 alpha0-pre Mac

cocos2d-x v3.0 alpha0-pre iOS sim

So… something was definitely changed from cocos2d-x v3.0 alpha0-pre to cocos2d-x v3.3rc0
Unfortunately our skills isn’t good enough to compare Texture2D or Image manually to see where the problem is (on decoding, on rendering or etc.)

On github we have find issue, that can be related to this problem https://github.com/cocos2d/cocos2d-x/issues/8375

If someone can try to reproduce this issue on real devices - we will be very grateful.

#3

@Seal
You could simply call
sprite->setBlendFunc(BlendFunc::ALPHA_NON_PREMULTIPLIED);
to resolve this issue.

But a better way would be modify the engine code, I will send a PR later and paste the link here.

Thanks.

1 Like
#4

https://github.com/cocos2d/cocos2d-x/pull/9533

#5

@owen , thanks a lot!
It will reduce our project’s size may be triple :smile:

How to add [SOLVED] marker to the topic name? Can find rename function in profile.

#6

@Seal
You are welcome:)
I have changed the title for you.