Transparent Layers

Advanced game related topics
User avatar
FourthStone
User
User
Posts: 26
Joined: Mon Dec 11, 2017 8:44 am
Location: Australia

Transparent Layers

Post 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

User avatar
Mijikai
Addict
Addict
Posts: 1360
Joined: Sun Sep 11, 2016 2:17 pm

Re: Transparent Layers

Post 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.
walbus
Addict
Addict
Posts: 929
Joined: Sat Mar 02, 2013 9:17 am

Re: Transparent Layers

Post by walbus »

Hi, Canvas has no Alpha support

It works only with tricks and detours
User avatar
Mijikai
Addict
Addict
Posts: 1360
Joined: Sun Sep 11, 2016 2:17 pm

Re: Transparent Layers

Post by Mijikai »

walbus wrote:Hi, Canvas has no Alpha support

It works only with tricks and detours
Ok - too bad.
User avatar
FourthStone
User
User
Posts: 26
Joined: Mon Dec 11, 2017 8:44 am
Location: Australia

Re: Transparent Layers

Post 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.
walbus
Addict
Addict
Posts: 929
Joined: Sat Mar 02, 2013 9:17 am

Re: Transparent Layers

Post by walbus »

It works
This is the fastest method

Code: Select all

SetGadgetAttribute(canvas_ID, #PB_Canvas_Image, ImageID(image_ID))
User avatar
FourthStone
User
User
Posts: 26
Joined: Mon Dec 11, 2017 8:44 am
Location: Australia

Re: Transparent Layers

Post 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

Micoute
User
User
Posts: 24
Joined: Sat Jun 22, 2013 4:06 pm
Location: La Mézière FRANCE

Re: Transparent Layers

Post by Micoute »

Thank you for sharing
walbus
Addict
Addict
Posts: 929
Joined: Sat Mar 02, 2013 9:17 am

Re: Transparent Layers

Post 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
Post Reply