Troubles with creation and use of transparent images.

Demivec · **Posted:** Sat Jun 02, 2012 2:53 pm

I tried creating a short example where an image that should be transparent except for a line drawn on it, is drawn over another image that has a red background. It didn't work though. What did I do wrong?

Code:

Enumeration
  ;windows
  #windowMain = 0
  
  ;gadgets
  #results_img = 0
  
  ;images
  #transparentImage = 0
  #compositeImage
EndEnumeration

#screenWidth = 500
#screenHeight = 500

OpenWindow(#windowMain, 0, 0, #screenWidth, #screenHeight, "Test", #PB_Window_SystemMenu)

CreateImage(#transparentImage, #screenWidth, #screenHeight, 32 | #PB_Image_Transparent)
StartDrawing(ImageOutput(#transparentImage))
  LineXY(OutputWidth(), 0, 0, OutputHeight(), #Yellow)
StopDrawing()

CreateImage(#compositeImage, #screenWidth, #screenHeight, 32)
StartDrawing(ImageOutput(#compositeImage))
  Box(0, 0, OutputWidth(), OutputHeight(), #Red)
  
  ;this image should be transparent except for the line
  DrawImage(ImageID(#transparentImage), 0, 0) ;seems to replace the red background instead of overlaying it
  LineXY(0, 0, OutputWidth(), OutputHeight(), #Green)
StopDrawing()

ImageGadget(#results_img, 0, 0, #screenWidth, #screenHeight, ImageID(#compositeImage))

Repeat: Until WaitWindowEvent() = #PB_Event_CloseWindow

STARGÅTE · **Posted:** Sat Jun 02, 2012 2:57 pm

If you want use alpha-blend, you have to set the drawing mode:
and you must use 32-Bit colors:

Code:

OpenWindow(0, 0, 0, 500, 500, "Test", #PB_Window_SystemMenu)

CreateImage(0, 500, 500, 32)
CreateImage(1, 500, 500, 32 | #PB_Image_Transparent)
StartDrawing(ImageOutput(1))
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  LineXY(500, 0, 0, 500, $FF00FFFF)
StopDrawing()

StartDrawing(ImageOutput(0))
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  Box(0, 0, 500, 500, $FF0000FF)
  DrawImage(ImageID(1), 0, 0)
  LineXY(0, 0, 500, 500, $FF00FF00)
StopDrawing()

ImageGadget(0, 0, 0, 500, 500, ImageID(0))

Repeat: Until WaitWindowEvent() = #PB_Event_CloseWindow 

Demivec · **Posted:** Sat Jun 02, 2012 3:23 pm

@STARGÅTE: Thanks for your help. For some reason I became confused about the default drawing option (that doesn't modify the alpha channel). It was actually necessary to modify the alpha channel and set my drawing colors by including the alpha values. I forgot that the default alpha value of zero is actually transparent.

I incorporated your tips into the previous code with comments

Code:

Enumeration
  ;windows
  #windowMain = 0
  
  ;gadgets
  #results_img = 0
  
  ;images
  #transparentImage = 0
  #compositeImage
EndEnumeration

#screenWidth = 500
#screenHeight = 500

OpenWindow(#windowMain, 0, 0, #screenWidth, #screenHeight, "Test", #PB_Window_SystemMenu)

CreateImage(#transparentImage, #screenWidth, #screenHeight, 32 | #PB_Image_Transparent)
StartDrawing(ImageOutput(#transparentImage))
  ;draw by combining alpha layer and color layer based on RGBA value
  DrawingMode(#PB_2DDrawing_AlphaBlend) 
  LineXY(OutputWidth(), 0, 0, OutputHeight(), RGBA($FF,$FF, 0, $FF)) ;yellow with no transparency
StopDrawing()

CreateImage(#compositeImage, #screenWidth, #screenHeight, 32)
StartDrawing(ImageOutput(#compositeImage))
  ;draw by combining alpha layer and color layer based on RGBA value
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  Box(0, 0, OutputWidth(), OutputHeight(), RGBA($FF, 0, 0, $FF)) ;red with no transparency
  
  ;overlay image
  DrawImage(ImageID(#transparentImage), 0, 0)
  LineXY(0, 0, OutputWidth(), OutputHeight(), RGBA(0, $FF, 0, $FF)) ;green with no transparency
StopDrawing()

ImageGadget(#results_img, 0, 0, #screenWidth, #screenHeight, ImageID(#compositeImage))

Repeat: Until WaitWindowEvent() = #PB_Event_CloseWindow

netmaestro · **Joined:** Wed Jul 06, 2005 5:42 am **Posts:** 6465

Note that the target image needn't be 32bit depth for the alphablending, 24 is fine:

Code:

Enumeration
  ;windows
  #windowMain = 0
  
  ;gadgets
  #results_img = 0
  
  ;images
  #transparentImage = 0
  #compositeImage
EndEnumeration

#screenWidth = 500
#screenHeight = 500

OpenWindow(#windowMain, 0, 0, #screenWidth, #screenHeight, "Test", #PB_Window_SystemMenu)

CreateImage(#transparentImage, #screenWidth, #screenHeight, 32 | #PB_Image_Transparent)
StartDrawing(ImageOutput(#transparentImage))
  ;draw by combining alpha layer and color layer based on RGBA value
  DrawingMode(#PB_2DDrawing_AlphaBlend) 
  LineXY(OutputWidth(), 0, 0, OutputHeight(), RGBA($FF,$FF, 0, $FF)) ;yellow with no transparency
StopDrawing()

CreateImage(#compositeImage, #screenWidth, #screenHeight, 24)
StartDrawing(ImageOutput(#compositeImage))
  ;draw by combining alpha layer and color layer based on RGBA value
  Box(0, 0, OutputWidth(), OutputHeight(), #Red) ;red with no transparency
  
  ;overlay image
  DrawAlphaImage(ImageID(#transparentImage), 0, 0)
  LineXY(0, 0, OutputWidth(), OutputHeight(), #Green ) ;green with no transparency
  DrawingMode(#PB_2DDrawing_AlphaBlend)
  Circle(100,100,40,RGBA(0,0,255,128)) ;blue circle half transparent
StopDrawing()

ImageGadget(#results_img, 0, 0, #screenWidth, #screenHeight, ImageID(#compositeImage))

Repeat: Until WaitWindowEvent() = #PB_Event_CloseWindow

PureBasic Forum

Troubles with creation and use of transparent images.

Who is online