SETTRANSPARENCY with JPG

Previous topic - Next topic

Alex_R

Hi!

As you know if you save a texture in PNG you get more size than JPG. Sometimes if your game has a lot of textures and graphics is better save all of them in JPG. Today I have converted all my graphics to JPG but I have a problem with the transparency. It appears that the command SETTRANSPARENCY only works with .bmp files. Is that correct or I am doing something wrong?

Of course I know JPG has not alpha channel, but the transparent background is set to RGB(255,0,128) in all my graphics.

Thank you for your responses!!

MrPlow

I think that is the case becuase I tried to use .pngs before and transparency did not work with them either.

Comp:
Speccy-48k, Speccy-128k, Amigas, PCs

fuzzy70

I don't think it works with jpg's because of the artifacts created by the compression, zoom into one to see the mess it makes of a picture. The higher the compression the less chance of getting a solid block of colour that you could use for transparency. As a test save your jpg as a bmp & load it with the SETTRANSPARENCY set to the colour you want transparent to see what I mean.

As far as using the command with PNG's is concerned it's pretty pointless when the file format supports alpha/transparency already  =D

Lee
"Why don't you just make ten louder and make ten be the top number and make that a little louder?"
- "These go to eleven."

This Is Spinal Tap (1984)

Alex_R

QuoteThe higher the compression the less chance of getting a solid block of colour that you could use for transparency.

Yes, you are rigth. That could be the reason.

Thank you!!

fuzzy70

No problem, I done a similar thing years ago in 3d apps & wondered why I was getting odd artifacts in some of my renders with transparency  :whistle:

By all means use jpg's for backgrounds or anything else that doesn't require transparency

Lee
"Why don't you just make ten louder and make ten be the top number and make that a little louder?"
- "These go to eleven."

This Is Spinal Tap (1984)

spacefractal

#5
You can't do that due Jpg compression artifacts. Instead you might do a separate alpha png image and join them using array under loading. Howover it's might take some memory.

Png contain alpha and should been using that directly.
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

matchy

If you want to ship your media as jpg, for size or whatever, then in run-time you can load it, then save it as a temp bmp, set the transparency, load it, delete the temp.


fuzzy70

#7
A lot of it has to do with the content so a good idea is save it in both PNG & Jpeg then compare the file sizes as well as what the Jpeg compression has done to the image.

The attached pics show what a mess Jpg can make to sprite sheets & also you may be surprised by the file sizes. Like I said the content plays a big part in the file size results & Jpeg compression.

The full sprite sheet as a 24bit PNG = 46.5kb

The zoomed crop is in the following order:

  • Top is Jpg saved at Medium quality setting in Photoshop, Tile sheet filesize = 123kb
  • 2nd is Jpg saved at High quality setting in Photoshop, Tile sheet filesize = 185kb
  • 3rd is Jpg saved at Maximum quality setting in Photoshop, Tile sheet filesize = 427kb
  • Bottom is original for reference

Lee

P.s Don't forget Jpeg was mainly designed for use in photos and is not really a common format used in games other than backgrounds & such

[attachment deleted by admin]
"Why don't you just make ten louder and make ten be the top number and make that a little louder?"
- "These go to eleven."

This Is Spinal Tap (1984)

spacefractal

#8
Jpg with spritesheet is a quite bad idea and its would been to much blurry and for many artifacts, which give a badder graphics quality. Its highly recommered never to use jpg due that, because you would clearly see them on today mobilscreens now today. iPhone example have a very clean screen and artifacs would been shown much more than you would excepted.

So actuelly never use jpg with pixel graphics, but instead use png and/or bmp (sometimes bmp compress better after zip). This size is bigger, but png also have much cleaner quality and is not a lossy compression. You might could convert to 16/8bit png to save size, but here you have better control over colorloss.

Its same with Greedy Mouse: I actuelly only used the floor in jpg (which did not require transparency and artifacts did not showable here, but rest is using pngs.

Also PVR could been great if that format was supported, its a compression format, so its also have some artifacts, but sometimes it cant been avoid, since PVR format save very much bandwidth (here on iOS).
Genius.Greedy Mouse - Karma Miwa - Spot Race - CatchOut - PowerUp Elevation - The beagle Jam - Cave Heroes 2023 - https://spacefractal.itch.io/

MrPlow

I was using .bmp with a settran colour but can I use a png (with trans background) by default??

The settran colour did not work for me using a .png
Comp:
Speccy-48k, Speccy-128k, Amigas, PCs

fuzzy70

Quote from: MrPlow on 2012-Aug-29
I was using .bmp with a settran colour but can I use a png (with trans background) by default??

The settran colour did not work for me using a .png

As long as the PNG has a transparent background there is no need to use the SETTRANSPARENCY command (if it even works with PNG's as never tried it). The attached is the same one I posted earlier but I removed the pink background into a transparent one in Fireworks. Load it up as a sprite then just draw it over some random background like the following.
Code (glbasic) Select

FOR loop=0 TO 10000
DRAWRECT RND(700),RND(500),RND(125),RND(125),RGB(RND(255),RND(255),RND(255))
NEXT


To be honest I can't say that I have ever used the SETTRANSPARENCY command due to 99% of the time using PNG's.

Lee



[attachment deleted by admin]
"Why don't you just make ten louder and make ten be the top number and make that a little louder?"
- "These go to eleven."

This Is Spinal Tap (1984)

Moru

By using the alpha-channel in PNG:s you can do everything from 0-100% transparent, different on each pixel. This way you can do nice effects with shadows, the glow around light-sources and so on.