PureBasic Forums - English

http://www.purebasic.com
https://www.purebasic.fr/english/

Transparent Layers

https://www.purebasic.fr/english/viewtopic.php?t=70722

Page 1 of 1

Transparent Layers

Posted: Fri May 18, 2018 11:34 pm
by FourthStone
Hi All,

I've tried searching around and experimenting with having 5 image layers that I want to be drawn with anything black being transparent.

Would anyone be able to show me how to do it or what I am doing wrong with the example below? :?

Code: Select all

Structure drawLayers
  IMG.l   ; image number
  VIS.l   ; visible flag
EndStructure

Global Dim l.drawLayers(4) ; layers array

Global Dim bp(15)       ; palette

If OpenWindow(0,0,0,640, 512, "Image Layers Demo",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ; define palette
  Restore paletteData
  For i=1 To 15
    Read.a r
    Read.a g
    Read.a b
    bp(i)=RGBA(r,g,b,255)
  Next
  bp(0) = RGBA(0,0,0,0)
  
  ; create drawing layers
  For i=0 To ArraySize(l())-1
    l(i)\IMG=CreateImage(#PB_Any,640,512,32,bp(0))
    If StartDrawing(ImageOutput(l(i)\IMG))
      Box(i*80,0,60,100,bp(i))
      StopDrawing()
    EndIf
  Next
  l(0)\VIS=1
  
  ; init screen gadget
  CanvasGadget(0,0,0,640,512)
  SetGadgetAttribute(0, #PB_Canvas_Cursor , #PB_Cursor_Cross)
  
  If StartDrawing(CanvasOutput(0))
    Box(0,0,640,512,bp(0))   ; clear canvas to black
    StopDrawing()
  EndIf
  
  ;
  ;-------- MainLoop --------
  ;
  
  Repeat
    Event = WaitWindowEvent()
    
    If Event
      If StartDrawing(CanvasOutput(0))
        
        ;BackColor(#Black)
        ;DrawingMode(#PB_2DDrawing_AlphaBlend)
        For i=0 To ArraySize(l())-1
          ;If l(i)\VIS
          DrawAlphaImage(ImageID(l(i)\IMG),0,0)
          ;EndIf
        Next
        ;DrawingMode(#PB_2DDrawing_Default)
        
        
        StopDrawing()    
      EndIf
    Else
      Delay(1)
    EndIf
    
  Until Event = #PB_Event_CloseWindow
Else
  MessageRequester(" Error","Cannot load graphics!")
EndIf

End


;-------- Data Section --------

DataSection
  
  ; palette Data
  paletteData:
  Data.a 255,000,000,000,255,000,255,255,000,000,000,255,255,000,255
  Data.a 000,255,255,255,255,255,128,128,128,192,000,000,000,192,000
  Data.a 192,192,000,000,000,192,192,000,192,000,192,192,192,192,192
  
EndDataSection

Re: Transparent Layers

Posted: Sat May 19, 2018 8:52 pm
by Mijikai
I tried:

Code: Select all

CreateImage(#PB_Any,Width,Height,32,#PB_2DDrawing_Transparent)
After that i set everything to black (with '0' Alpha):

Code: Select all

 Box(0,0,Width,Height,$00000000)
Now i thought i would have a transparent image!

And after drawing something 'visible' on it:
Circle(Width / 2,Height / 2,20,$FFFF0000)
I tried to render the image on a canvas using different DrawingModes()
but it never was transparent.

Mby someone else can shed a light on this.

Re: Transparent Layers

Posted: Sat May 19, 2018 9:43 pm
by walbus
Hi, Canvas has no Alpha support

It works only with tricks and detours

Re: Transparent Layers

Posted: Sat May 19, 2018 9:57 pm
by Mijikai
walbus wrote:Hi, Canvas has no Alpha support

It works only with tricks and detours
Ok - too bad.

Re: Transparent Layers

Posted: Sat May 19, 2018 11:37 pm
by FourthStone
Thanks for the tips, I'll try with a temp image and then blit that to the canvas, any idea's if that will work?

I'll have another play and report any progress.

Re: Transparent Layers

Posted: Sun May 20, 2018 12:02 am
by walbus
It works
This is the fastest method

Code: Select all

SetGadgetAttribute(canvas_ID, #PB_Canvas_Image, ImageID(image_ID))

Re: Transparent Layers

Posted: Sun May 20, 2018 12:41 am
by FourthStone
Ok after going back and playing with the 2dDrawingAlpha demo I have got my layers working now, here is the code I used if anyone else may find useful :)

Code: Select all

Structure drawLayers
  IMG.l   ; image number
  VIS.l   ; visible flag
EndStructure

Global Dim l.drawLayers(4) ; layers array
Global finalOut
Global Dim bp(15)       ; palette

If OpenWindow(0,0,0,640, 512, "Image Layers Demo",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ; define palette
  Restore paletteData
  For i=1 To 15
    Read.a r
    Read.a g
    Read.a b
    bp(i)=RGBA(r,g,b,255)
  Next
  bp(0) = RGBA(0,0,0,0)
  
  ; create drawing layers
  For i=0 To ArraySize(l())
    l(i)\IMG=CreateImage(#PB_Any,640,512,32)
    If StartDrawing(ImageOutput(l(i)\IMG))
      DrawingMode(#PB_2DDrawing_AlphaChannel) ; fill layer with transparent backgroup
      Box(0, 0, 640, 512, $00000000)
      DrawingMode(#PB_2DDrawing_AlphaBlend) ; alpha blend the drawing to appear solid
      Box(i*80+20,20,60,60,bp(i+1))
      DrawingMode(#PB_2DDrawing_Default)      
      StopDrawing()
    EndIf
  Next
  l(0)\VIS=1
  
  ; image to use for final output
  finalOut=CreateImage(#PB_Any,640,512,32)
  
  ; init screen gadget
  CanvasGadget(0,0,0,640,512)
  SetGadgetAttribute(0, #PB_Canvas_Cursor , #PB_Cursor_Cross)
  
  ;
  ;-------- MainLoop --------
  ;
  
  Repeat
    Event = WaitWindowEvent()
    
    If Event
      If StartDrawing(ImageOutput(finalOut))
        DrawingMode(#PB_2DDrawing_AlphaChannel) ; fill output layer with transparent backgroup
        Box(0,0,640,512,bp(0))
        
        DrawingMode(#PB_2DDrawing_AlphaBlend) ; alpha blend each layer to appear solid
        For i=0 To ArraySize(l())
          DrawImage(ImageID(l(i)\IMG),0,0)
        Next
        DrawingMode(#PB_2DDrawing_Default)
        StopDrawing()
        
      EndIf      
      
      If StartDrawing(CanvasOutput(0)) ; output final layer to canvas
        DrawImage(ImageID(finalOut),0,0)
        StopDrawing()    
      EndIf
    Else
      Delay(1)
    EndIf
    
  Until Event = #PB_Event_CloseWindow
Else
  MessageRequester(" Error","Cannot load graphics!")
EndIf

End


;-------- Data Section --------

DataSection
  
  ; palette Data
  paletteData:
  Data.a 255,000,000,000,255,000,255,255,000,000,000,255,255,000,255
  Data.a 000,255,255,255,255,255,128,128,128,192,000,000,000,192,000
  Data.a 192,192,000,000,000,192,192,000,192,000,192,192,192,192,192
  
EndDataSection

Re: Transparent Layers

Posted: Sun May 20, 2018 6:12 am
by Micoute
Thank you for sharing

Re: Transparent Layers

Posted: Sun May 20, 2018 9:55 am
by walbus
A little simpler and smaller

Code: Select all

Structure drawLayers
  IMG.l   ; image number
  VIS.l   ; visible flag
EndStructure

Global Dim l.drawLayers(4) ; layers array
Global finalOut
Global Dim bp(15) ; palette

If OpenWindow(0,0,0,640, 512, "Image Layers Demo",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  Restore paletteData ; define palette
  For i=1 To 15
    Read.a r
    Read.a g
    Read.a b
    bp(i)=RGBA(r,g,b,255)
  Next
  
  For i=0 To ArraySize(l()) ; create drawing layers
    l(i)\IMG=CreateImage(#PB_Any,640,512,32, #PB_Image_Transparent)
    If StartDrawing(ImageOutput(l(i)\IMG))
      DrawingMode(#PB_2DDrawing_AlphaBlend) ; alpha blend the drawing to appear solid
      Box(i*80+20,20,60,60,bp(i+1))   
      StopDrawing()
    EndIf
  Next
  
  finalOut=CreateImage(#PB_Any,640,512) ; image to use for final output
  
  CanvasGadget(0,0,0,640,512) ; init canvas
  SetGadgetAttribute(0, #PB_Canvas_Cursor , #PB_Cursor_Cross)
  
  ;-------- MainLoop --------
  Repeat
    Event = WaitWindowEvent()
    
    If Event
      If StartDrawing(ImageOutput(finalOut))
        DrawingMode(#PB_2DDrawing_AlphaBlend) ; alpha blend each layer to appear solid
        For i=0 To ArraySize(l())
          DrawImage(ImageID(l(i)\IMG),0,0)
        Next
        StopDrawing()
      EndIf      
      SetGadgetAttribute(0, #PB_Canvas_Image, ImageID(finalOut))
    EndIf
    
  Until Event = #PB_Event_CloseWindow
Else
  MessageRequester(" Error","Cannot load graphics!")
EndIf

DataSection
  
  paletteData:
  Data.a 255,000,000,000,255,000,255,255,000,000,000,255,255,000,255
  Data.a 000,255,255,255,255,255,128,128,128,192,000,000,000,192,000
  Data.a 192,192,000,000,000,192,192,000,192,000,192,192,192,192,192
  
EndDataSection
All times are UTC+01:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited