[PB5.72x64 ]Why can't I see the text on transparent image ??

[marc_256]

Hello,

After a lot of problems with my 2D drawings, AND STILL HAVE THEM ...
viewtopic.php?f=4&t=75865
I started my new CNC - MACH4 look alike program,
and I have had this problem ...
I like to create a transparent Image with only text on it ...
I see the RoundBox(), Box (), Line (), but I do not see the text ??
I used OPENGL and DIRECTX11 with the same result ...

This is what I want as result (created with PC drawing program)



This is created with WIN10 Home x64 - PB5.73B2 x64 and x32

Code: Select all

	EnableExplicit

	UsePNGImageDecoder ()
	UsePNGImageEncoder ()

	InitSprite ()
	InitKeyboard ()
	InitMouse ()

	Global Event_i.i

;- LOAD FONTS
	LoadFont (10, "Courier New", 8, #PB_Font_HighQuality)
	LoadFont (11, "Courier New", 24, #PB_Font_Bold | #PB_Font_HighQuality)

;- CREATE IMAGE 1
	CreateImage (1, 800, 400, 32, #PB_Image_Transparent)
		StartDrawing ( ImageOutput (1))
			DrawingMode (#PB_2DDrawing_AllChannels)
				Box (0, 0, 800, 400, $00000000)
		StopDrawing ()

;- CREATE IMAGE 2
	CreateImage (2, 300, 125, 32, $FF808080)			;#PB_Image_Transparent)
		StartDrawing ( ImageOutput (2))
			DrawingMode (#PB_2DDrawing_Outlined | #PB_2DDrawing_AllChannels)
				RoundBox (0, 0, 300, 125, 3, 3, $FFE0E0E0)
			DrawingFont ( FontID (11))										;<--- TEXT FONT
			DrawingMode (#PB_2DDrawing_Transparent)								;<--- DRAW NO BACKGROUND
				DrawText (10, 25, "123456.789", $FFE0E0E0, $FF000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
		StopDrawing ()

;- CREATE IMAGE 3
	CreateImage (3, 600, 250, 32)		;, #PB_Image_Transparent)
		StartDrawing ( ImageOutput (3))

			DrawingMode (#PB_2DDrawing_AllChannels)
				Box (0, 0, 300, 250, $00000000)

			DrawingMode (#PB_2DDrawing_Outlined | #PB_2DDrawing_AllChannels)
				RoundBox (0, 0, 300, 250, 3, 3, $FFE0E0E0)

			DrawingFont ( FontID (11))										;<--- TEXT FONT
			DrawingMode (#PB_2DDrawing_AllChannels)
				DrawText (10, 100, "CAD/CAM/CNC", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
				DrawText (20, 115, "Computer Aided 3D Design", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
			DrawingMode (#PB_2DDrawing_Transparent)								;<--- DRAW NO BACKGROUND
				DrawText (30, 145, "Computer Aided Manufacture", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
				DrawText (40, 160, "Computer Numeric Control", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0

			DrawingMode (#PB_2DDrawing_Outlined | #PB_2DDrawing_AllChannels)
				Circle (50, 50, 50, $FFE0E0E0)
				Box (0, 0, 100, 100, $FFE0E0E0)
				Box (100, 50, 50, 50, $FFE0E0E0)
				LineXY (0, 0, 150, 150, $FFE0E0E0)

		StopDrawing ()

;- CREATE WINDOW ZONE
	OpenWindow (0, 0, 0, 800, 600, "TestZone", #PB_Window_BorderLess)
		OpenWindowedScreen ( WindowID (0), 0, 0, 800, 600)		;1024, 800)
			ClearScreen ($A00000)

;- DO LOOP

Repeat

	ClearScreen ($A00000)

Repeat
	Event_i = WindowEvent ()
		Select Event_i

		EndSelect

Until Not Event_i

	ExamineKeyboard ()

	ExamineMouse ()

	StartDrawing ( ScreenOutput ())
		DrawingMode (#PB_2DDrawing_AlphaClip)
			DrawImage ( ImageID (3), 100, 50)

	StopDrawing ()

	FlipBuffers ()

	Delay (10)

Until Event_i = #PB_Event_CloseWindow Or KeyboardPushed(#PB_Key_Escape)

	End

[Mesa]

For information, everything works fine with directX but not with opengl, Windows XP 32b + pb573b2x86, the same with Win7x64+pb573b2x64.

M.

[#NULL]

I think the transparent flag is older than the alpha channel support. And you don't really need it, especially if you specify a background color anyway. You can use the AllChannels flag and use a transparent background color.

Code: Select all

         DrawingMode (#PB_2DDrawing_AllChannels); | #PB_2DDrawing_Transparent)
         DrawText (10, 25, "123456.789", $FFE0E0E0, $00000000)

BTW your event handling is wrong. You should process all events per frame, not just one event per frame.

Code: Select all

  ...
  ClearScreen ($A00000)
  
  Repeat
    Event_i = WindowEvent ()
    Select Event_i
        
    EndSelect
  Until Not Event_i
  ExamineKeyboard ()
  ...

[marc_256]

Hello Mesa,
thanks,
So I think this must be a bug in the x64 versions ??

Hi #NULL
thanks,
I did what you advised, but if I put a text on top of another, the background is not transparent for the text on the background ...
see image 2 in first post

marc,

[#NULL]

Maybe with AlphaBlend like this?

Code: Select all

    CreateImage (3, 300, 125, 32, #PB_Image_Transparent)
    StartDrawing ( ImageOutput (3))
      DrawingMode (#PB_2DDrawing_AllChannels)
      Box (0, 0, 300, 125, $00000000)
      Box (150, 0, 300, 125, $ff000000)
      DrawingMode (#PB_2DDrawing_Outlined | #PB_2DDrawing_AllChannels)
      RoundBox (0, 0, 300, 125, 3, 3, $FFE0E0E0)
      DrawingFont ( FontID (11))
      DrawingMode (#PB_2DDrawing_AlphaBlend)
      DrawText (10, 10, "123456.789", $FFE0E0E0, $00000000)
      DrawingMode (#PB_2DDrawing_AlphaBlend)
      DrawText (25, 25, "123456.789", $FFE0E0E0, $00000000)
      DrawingMode (#PB_2DDrawing_AlphaBlend)
      DrawText (40, 40, "123456.789", $FFE0E0E0, $00000000)
    StopDrawing ()

[marc_256]

Hi #NULL,

Not so good result with "DrawingMode (#PB_2DDrawing_AlphaBlend)"
See text outside the BackImage at the right of the image on transparent zone (text is not of a high quality)



So I was do all kind of tests with a mix of settings,
and the best result was using
first => DrawingMode (#PB_2DDrawing_AlphaChannel | #PB_2DDrawing_Transparent)
and then => DrawingMode (#PB_2DDrawing_Transparent)

Code: Select all

			DrawingMode (#PB_2DDrawing_AlphaBlend)
				DrawText (10, 100, "CAD/CAM/CNC", $FFE0E0E0, $00000000)						;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
				DrawText (20, 115, "Computer Aided 3D Design", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
				DrawText (30, 145, "Computer Aided Manufacture", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0

			DrawingMode (#PB_2DDrawing_AlphaChannel | #PB_2DDrawing_Transparent)
				DrawText (40, 160, "Computer Numeric Control", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
			DrawingMode (#PB_2DDrawing_Transparent)
				DrawText (40, 160, "Computer Numeric Control", $FFE0E0E0, $00000000)				;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0

[#NULL]

I once had a similar problem, not sure if it's the same though or if it helps in any way. It looks like I had a solution, but with sprites:
Drawtext / Font Antialiasing Artefacts
I wonder why you are using images instead of sprites if you are already using a screen.

[Demivec]

I'm confused by the title of this thread but I did use the images you supplied to determine what you wanted.

The solution below works for me with OpenGL and DirectX (version?) under Windows 10 x86 and x64 with PB v 5.72 LTS.

It makes a composite image that is drawn to the screen as a final result. This is due to their not being an alpha channel for the screen display. For the text with a transparent background, instead of DrawingMode (#PB_2DDrawing_Transparent) I used DrawingMode(#PB_2DDrawing_AlphaBlend) and a background color is specified that has full transparency.

I removed the code for the two unnecessary images from your original sample code.

Code: Select all

EnableExplicit

   UsePNGImageDecoder ()
   UsePNGImageEncoder ()

   InitSprite ()
   InitKeyboard ()
   InitMouse ()

   Global Event_i.i

;- LOAD FONTS
   LoadFont (10, "Courier New", 8, #PB_Font_HighQuality)
   LoadFont (11, "Courier New", 24, #PB_Font_Bold | #PB_Font_HighQuality)

#screenWidth = 800 ;1024
#screenHeight = 600  ;800
      
;- CREATE IMAGE 1, screen drawing output work image  (same size as screen)          
   CreateImage (1, #screenWidth, #screenHeight, 32)      ;, #PB_Image_Transparent)   
   
;- CREATE IMAGE 3
   CreateImage (3, 600, 250, 32)      ;, #PB_Image_Transparent)
      StartDrawing ( ImageOutput (3))

         DrawingMode (#PB_2DDrawing_AllChannels)
            Box (0, 0, 300, 250, $00000000)

         DrawingMode (#PB_2DDrawing_Outlined | #PB_2DDrawing_AllChannels)
            RoundBox (0, 0, 300, 250, 3, 3, $FFE0E0E0)

         DrawingFont ( FontID (11))                              ;<--- TEXT FONT
         DrawingMode (#PB_2DDrawing_AlphaBlend)
            DrawText (10, 100, "CAD/CAM/CNC", $FFE0E0E0, $00000000)            ;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
            DrawText (20, 115, "Computer Aided 3D Design", $FFE0E0E0, $00000000)            ;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
         ;DrawingMode (#PB_2DDrawing_Transparent)                        ;<--- DRAW NO BACKGROUND
            DrawText (30, 145, "Computer Aided Manufacture", $FFE0E0E0, $00000000)            ;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0
            DrawText (40, 160, "Computer Numeric Control", $FFE0E0E0, $00000000)            ;<--- DRAW TEXT ON IMAGE WITH COLOR $FFE0E0E0

         DrawingMode (#PB_2DDrawing_Outlined | #PB_2DDrawing_AlphaBlend)
            Circle (50, 50, 50, $FFE0E0E0)
            Box (0, 0, 100, 100, $FFE0E0E0)
            Box (100, 50, 50, 50, $FFE0E0E0)
            LineXY (0, 0, 150, 150, $FFE0E0E0)

      StopDrawing ()
      
  
;- CREATE WINDOW ZONE
   OpenWindow (0, 0, 0, #screenWidth, #screenHeight, "TestZone", #PB_Window_BorderLess)
      OpenWindowedScreen ( WindowID (0), 0, 0, #screenWidth, #screenHeight)
         ClearScreen ($A00000)

;- DO LOOP
         
;compose screen image using alphablend to produce final image for display         
   StartDrawing ( ImageOutput (1))
   
      Box(0, 0, OutputWidth(), OutputHeight(), $A00000) ;clear screen background
      DrawingMode (#PB_2DDrawing_AlphaBlend)
      DrawImage ( ImageID (3), 100, 50)

   StopDrawing () 
      
Repeat

   ClearScreen ($A00000)

Repeat
   Event_i = WindowEvent ()
      Select Event_i

      EndSelect

Until Not Event_i

   ExamineKeyboard ()

   ExamineMouse ()

   StartDrawing ( ScreenOutput ())
      DrawingMode (#PB_2DDrawing_AlphaClip)
         DrawImage ( ImageID (1), 100, 50)

   StopDrawing ()

   FlipBuffers ()

   Delay (10)

Until Event_i = #PB_Event_CloseWindow Or KeyboardPushed(#PB_Key_Escape)

   End