Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]

How to show an image with transparent background in Corona
Started by its.ananto Sep 15 2018 08:24 PM

1 reply to this topic
image transparent background lua corona
This topic has been archived. This means that you cannot reply to this topic.
[TOPIC: post.html]


[GLOBAL: userInfoPane.html]
  • Observer

  • 1 posts
  • Corona SDK

To load an image in corona i am using following code:

local nebula = display.newImage( "download.png" )
nebula.x, nebula.y = display.contentCenterX, display.contentCenterY 

However if the image has a transparent background it shows something like following:




If there any way to show just the cloud part? Shouldn't images with transparent background do that automatically?

Thanks in advance.

[TOPIC: post.html]

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,042 posts
  • Enterprise

It's very likely your image, while being a PNG file, does not have an alpha channel. This is what indicates what part of the image should be transparent.


Normally digital images are made up of three color channels (Red, Green and Blue or RGB) and each channel's pixels are 8 bits each. In PNG lingo this would be a 24-bit image. But 3 channel images don't have any way to say "this pixel should be transparent". This requires a 4th channel called the "alpha" channel. It's also 8 bits per pixel so now in PNG lingo this would be a 32-bit image.  Some formats like JPEG are not permitted to have an alpha channel. 


You should check your image in an image editor like Photoshop and when saving it, make sure it's saved with an alpha channel.


On a side note, unless you have a specific reason to use display.newImage() (like not knowing the width and height of the image), you should be using display.newImageRect() instead.