It is currently Tue Sep 22, 2020 2:49 pm

All times are UTC + 1 hour




Post new topic Reply to topic  [ 9 posts ] 
Author Message
 Post subject: Transparent Layers
PostPosted: Fri May 18, 2018 11:34 pm 
Offline
User
User
User avatar

Joined: Mon Dec 11, 2017 8:44 am
Posts: 11
Location: Australia
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:
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



Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sat May 19, 2018 8:52 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Sun Sep 11, 2016 2:17 pm
Posts: 725
I tried:
Code:
CreateImage(#PB_Any,Width,Height,32,#PB_2DDrawing_Transparent)


After that i set everything to black (with '0' Alpha):
Code:
 Box(0,0,Width,Height,$00000000)


Now i thought i would have a transparent image!

And after drawing something 'visible' on it:
Quote:
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sat May 19, 2018 9:43 pm 
Offline
Addict
Addict

Joined: Sat Mar 02, 2013 9:17 am
Posts: 930
Hi, Canvas has no Alpha support

It works only with tricks and detours

_________________
http://www.nachtoptik.de


Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sat May 19, 2018 9:57 pm 
Offline
Enthusiast
Enthusiast
User avatar

Joined: Sun Sep 11, 2016 2:17 pm
Posts: 725
walbus wrote:
Hi, Canvas has no Alpha support

It works only with tricks and detours


Ok - too bad.


Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sat May 19, 2018 11:37 pm 
Offline
User
User
User avatar

Joined: Mon Dec 11, 2017 8:44 am
Posts: 11
Location: Australia
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.


Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sun May 20, 2018 12:02 am 
Offline
Addict
Addict

Joined: Sat Mar 02, 2013 9:17 am
Posts: 930
It works
This is the fastest method

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

_________________
http://www.nachtoptik.de


Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sun May 20, 2018 12:41 am 
Offline
User
User
User avatar

Joined: Mon Dec 11, 2017 8:44 am
Posts: 11
Location: Australia
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:
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



Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sun May 20, 2018 6:12 am 
Offline
User
User

Joined: Sat Jun 22, 2013 4:06 pm
Posts: 20
Location: Coutances FRANCE
Thank you for sharing


Top
 Profile  
Reply with quote  
 Post subject: Re: Transparent Layers
PostPosted: Sun May 20, 2018 9:55 am 
Offline
Addict
Addict

Joined: Sat Mar 02, 2013 9:17 am
Posts: 930
A little simpler and smaller
Code:
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

_________________
http://www.nachtoptik.de


Top
 Profile  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC + 1 hour


Who is online

Users browsing this forum: No registered users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  

 


Powered by phpBB © 2008 phpBB Group
subSilver+ theme by Canver Software, sponsor Sanal Modifiye