Always using it first and better just any pngquant app like ImageOptim or Pngyu.
So what is a difference (size, quality) between WebP and png 8bits for your game resources?
WebP 6.6Mb
png 8 bits ?
When I checked last time my game resources png 8bits was the best.
Oh, I mean using tinypng like compression for my source png files, which later I’m using for packing to
WebP or PVR. I never used png for sprite sheets. But I can test this.
Note, yesterday I’ve changed some images resources, so tested again for both formats.
WebP
RGBA8888
Lossless
5.5 MB
PNG-8(indexed)
RGBA8888
Png Opt Level 1(writes indexed 8bit files if possible)
5.1 MB
Thats interesting After this test I’ve decided also do test with ALPHA_INTENSITY
because my source graphics in grayscale, so it’s perfectly fits my needs.
Results:
WebP
ALPHA_INTENSITY
Lossless
7.1Mb
PNG-8(indexed)
ALPHA_INTENSITY
Png Opt Level 1(writes indexed 8bit files if possible)
5.1 MB
Now, I’m rethinking of using format of textures for my game
I will help you :
- Use whenever possible png-8.
- If image quality is not good enough use something else (for me the only exception is so far: big image e.g. background image with gradients or photos of e.g. blue sky)
Advantages of png-8:
- small
- fast
- works everywhere Android/iOS/Mac/Win/Linux
Thats nice solution for the topic lol, but it is. I like it.
Upd. I forgot to test RAM usage… Will update it soon.
And so, summing of all information of RAM and file size:
- Format - RAM - Filesize:
- WebP (RGBA8888), 126.5Mb, 5.4Mb
- WebP (RGBA4444), 79.1Mb, 12.6Mb
- WebP (ALPHA_INTENSITY, only gray scale, not for other games), 79.6Mb, 7.1Mb
- PNG-8 (RGBA8888), 126.5Mb, 5.1Mb
- PNG-8 (ALPHA_INTENSITY), 82.2Mb, 5.1Mb
- PVR (RGBA8888) , 126.5Mb, 10.8Mb
- PVR (RGBA4444) , 79.2Mb, 15.6Mb
- PVR (ALPHA_INTENSITY) , 79.8Mb, 9.3Mb
I never used png before, but as I remember since cocos2d 0.9x there was some problems, that why I decided not to use it. And as you see, PNG-8 (RGBA8888) using same and maximum RAM as any 8888, but one of the idea is have a format which uses less RAM… This I’m talking about usual game graphics, because in my case, I can use PNG-8 with ALPHA_INTENSITY, because my graphics are grayscale.
@CrazyHappyGame: TexturePacker already uses pngquant + pngopt. Might be that you can win 1 or 2% with some other compressor… but it’s a question if it’s worth the effort.
I really wonder why you are so surprised about PNG-8… it’s what I’ve told you 2 days ago… just scroll up in this thread…
106.972 RGBA8888 png (8 bit)
185.908 RGBA8888 webp (lossless)
Use Texture2d::setDefaultAlphaPixelFormat](Texture2D::PixelFormat)
with Texture2D::PixelFormat::RGBA4444 before loading the sprite sheet. See Documentation.
This discards the lower bits of the color pixels and loads your sprite sheets as RGBA4444 - saving you 50% of RAM.
Make sure to also set RGBA4444 in TexturePacker’s pixel format. Also enable dithering. If you don’t use dithering you’ll get banding artifacts in gradients.
RGBA4444 + PNG-8 combined might work - but not in all cases. The problem is that these are 2 completely different concepts: PNG-8 selects 256 colors out of 32bit. It’s completely free in the color choice. E.g. it might even pick a color that’s not one of your images colors. RGBA4444 selects a fixed set of colors out of the color space. It’s not free in choosing which colors…
My surprise is about filesize. I don’t understand that table you provided, RAM use or filesize, Mb or Kb etc.
From what I know, PNG will use same RAM as any 8888 and thats results in my tests.
This is what I never used and know about it. So, I can set PNG-8(RGBA8888) and using this command - get same usage of RAM as with 4444 without losing any quality(in cocos2d-x) ?
We are talking now about PNG-8? So it’s can be only 8888…
Ok, now about. So, for the most games thats impossible I think, quality will be awful. And thats why we back to 8888 and so back to statement - PNG-8(bit) using same RAM as 8888. Am I right?
Interesting, probably @zhangxm can answer, can in cocos2d-x be added new format, to use PNG-8 colors? Or any other of the engine developers.
Short overview over the limitation of the image formats:
Gradient with RGBA8888:
Gradient in RGB4444 without dithering (banding artifacts):
Gradient in RGB4444 with dithering:
Gradient in PNG-8 (perfect, since only 256 colors are used) - RGBA8888
Gradients in RGBA8888:
Limits of PNG-8 (too many different colors in 1 image: banding)
RGBA4444 with dithering:
Maybe it’s indeed an option to use indexed mode in OpenGL? GL_PALETTE8_RGBA8_OES is at least defined in the OpenGL specification… @zhangxm ?
RGBA8 this would be cool.
Currently there are some A8, //! 8-bit intensity texture
it’s not that as I understand?
/** @typedef Texture2D::PixelFormat
Possible texture pixel formats
*/
enum class PixelFormat
{
//! auto detect the type
AUTO,
//! 32-bit texture: BGRA8888
BGRA8888,
//! 32-bit texture: RGBA8888
RGBA8888,
//! 24-bit texture: RGBA888
RGB888,
//! 16-bit texture without Alpha channel
RGB565,
//! 8-bit textures used as masks
A8,
//! 8-bit intensity texture
I8,
//! 16-bit textures used as masks
AI88,
//! 16-bit textures: RGBA4444
RGBA4444,
//! 16-bit textures: RGB5A1
RGB5A1,
//! 4-bit PVRTC-compressed texture: PVRTC4
PVRTC4,
//! 4-bit PVRTC-compressed texture: PVRTC4 (has alpha channel)
PVRTC4A,
//! 2-bit PVRTC-compressed texture: PVRTC2
PVRTC2,
//! 2-bit PVRTC-compressed texture: PVRTC2 (has alpha channel)
PVRTC2A,
//! 4-bit PVRTCII-compressed texture: PVRTCII4 (has alpha channel)
PVRTCII4,
//! 2-bit PVRTCII-compressed texture: PVRTCII2 (has alpha channel)
PVRTCII2,
//! ETC-compressed texture: ETC
ETC,
//! ETC2-compressed texture: ETC_RGB
ETC2_RGB,
//! ETC2-compressed texture: ETC_RGBA
ETC2_RGBA,
//! ETC2-compressed texture: ETC_RGBA1
ETC2_RGBA1,
//! S3TC-compressed texture: S3TC_Dxt1
S3TC_DXT1,
//! S3TC-compressed texture: S3TC_Dxt3
S3TC_DXT3,
//! S3TC-compressed texture: S3TC_Dxt5
S3TC_DXT5,
//! ATITC-compressed texture: ATC_RGB
ATC_RGB,
//! ATITC-compressed texture: ATC_EXPLICIT_ALPHA
ATC_EXPLICIT_ALPHA,
//! ATITC-compressed texture: ATC_INTERPOLATED_ALPHA
ATC_INTERPOLATED_ALPHA,
//! Default texture format: AUTO
DEFAULT = AUTO,
NONE = -1
};
AI8 is a grayscale image (color intensity) + alpha. You can only display grays with it.
Palette is different. It means that the 8 bit value is interpreted as index in a color table. You can use it to display different colors.
Anyone ? ? ?