Drawing Question

[Tony_G]

Hi All,

I wonder if somebody could help me, I'm new to purebasic, and I have a question regarding drawing....

Q.) What is the best way to draw a 400 x 150 PNG image with transparancy onto either a screen or window, Then overlay a text string that needs to be updated every 100ms, without screen flicker. I have looked at the examples but can't see one similar to needs.

Does anybody have a simple example of how to use OpenScreen or OpenWindowedScreen for loading images and drawing text & lines etc on to the screen, flipping the buffers to stop screen flicker ?

Thanks for any help in advance.

Tony

[Kaeru Gaman]

Screen does not flicker by default, unless you do something wrong.

to draw a 400 x 150 PNG image with transparancy onto either a screen or window

when you draw an image to an empty back, there is no need for any transparency.

just load the picture as a sprite once, before the mainloop.
within the manloop, display the sprite without transparency to the screen, then StartDrawing(ScreenOutput()), DrawText(), StopDrawing.
flip the buffers, make sure to wait until 100ms full, then repeat.

[Tony_G]

Thanks Kaeru,

With your help, I have got it working.......

All the best

Tony

[Kaeru Gaman]

ok and where was the problem?

did you reload the picture every cicle?
or did you not wait properly and rushed thru?
or did you mess up the drawing?
or did you display with transparency and saw old information from the last frames?

[Tony_G]

Hi Kaeru,

I was going it about it all the wrong way,

At first I had bog standard window, I was then adding a ImageGadget which I had loaded the png into.
After this, I was drawing with drawtext onto the window on top of the image,

In the main repeat loop, I was checking the elapsedtime for a difference of 100ms, Then drawing the text again.
It worked but had screen flicker when it was updating.

I followed your advice and created a WindowedScreen, Loaded the Image as Sprite, and then just calll the text drawing and displaysprite in the 100ms loop.

Works with no screen flicker. The Background image PNG i'm loading as a sprite, has a drop shadow as part of the image. This is not displayed properly doing it this way, the drop shadow shows up as a solid, and not a 50% Transparent shadow.

Any Ideas ?, On the normal window as a image in a image gadget, it displays the drop shadow correctly.

Cheers

Tony

[Kaeru Gaman]

oh, you can use an Image for such an animation, especially when the framerate is that low.
take a look at this (old) example:
http://www.purebasic.fr/german/viewtopic.php?t=19394

mind that the new Version 4.40 has Timer commands, preferably use those.

[DoubleDutch]

Hi Tony,

Here is a demo that uses a Timer event to help animate a tickertape scroller and a bouncing ball without flicker...

Code: Select all

; windows
Enumeration
	#MainWindow

EndEnumeration

; images
Enumeration
	#DrawingImage

EndEnumeration

; gadgets
Enumeration
	#DisplayImage

EndEnumeration

; timers
Enumeration
	#AnimationTimer

EndEnumeration

; fonts
Enumeration
	#NiceFont
EndEnumeration

Procedure UpdateImage(image)
	Static circlex=50,circley=100,dirx=1,diry=1,textx=450
	If IsImage(image)
		w=ImageWidth(image)
		h=ImageHeight(image)
	  If StartDrawing(ImageOutput(image))
	  	Box(0,0,w,h,GetSysColor_(#COLOR_3DFACE))	; erase all in standard window background colour
	  	
	    Circle(circlex,circley,50,RGB(0,0,255))  ; a nice blue circle...
	
	    Box(150,20,20,20, RGB(0,255,0))  ; and a green box
	    
	    DrawingMode(#PB_2DDrawing_Transparent)
	    DrawingFont(FontID(#NiceFont)) 
	    BackColor(RGB(0,155,155)) ; Change the text back and front colour
	    FrontColor(RGB(150,50,255)) 
	    endoftext=DrawText(textx,50,"Hello, this is a test")
	    
	    FrontColor(RGB(255,0,0)) ; Finally, red lines..
	    For k=0 To 20
	      LineXY(10,10+k*8,200, 0)
	    Next
	    
	    StopDrawing()
	  EndIf
	  
	  circlex+dirx
	  circley+diry
	  
	  If circlex>w
	  	circlex=w
	  	dirx*-1
	  ElseIf circlex<0
	  	circlex=0
	  	dirx*-1
	  EndIf
	  
	  If circley>h
	  	circley=h
	  	diry*-1
	  ElseIf circley<0
	  	circley=0
	  	diry*-1
	  EndIf
	  
	  textx-1
	  If endoftext<0
	  	textx=w
	  EndIf	  
  EndIf
EndProcedure

If OpenWindow(#MainWindow,0,0,600,400,"2D Drawing Test",#PB_Window_ScreenCentered|#PB_Window_SystemMenu)

	; load nice font
	LoadFont(#NiceFont,"MS Serif",100,#PB_Font_Bold|#PB_Font_HighQuality)

  ; Create an offscreen image, with a green circle in it.
  ; It will be displayed later
  If CreateImage(#DrawingImage,400,200)
		UpdateImage(#DrawingImage)
  EndIf

  ; Create a gadget to display our nice image
  ImageGadget(#DisplayImage,100,50,0,0,ImageID(#DrawingImage))
  
  ;
  ; This is the 'event loop'. All the user actions are processed here.
  ; It's very easy to understand: when an action occurs, the EventID
  ; isn't 0 and we just have to see what have happened...
  
  AddWindowTimer(#MainWindow,#AnimationTimer,10) ; 10ms timer
  
  Quit=#False
  Repeat
    EventID = WaitWindowEvent() ; *** put a number in here (like 1) if you want it to exit after a certain amount of time ***
    
    If EventID
    	Select EventID
    		Case	#PB_Event_CloseWindow
    			Quit=#True
    			
    		Case	#PB_Event_Timer
    			UpdateImage(#DrawingImage)
 			    SetGadgetState(#DisplayImage,ImageID(#DrawingImage))
 			    
    	EndSelect
    EndIf
    
  Until Quit  ; If the user has pressed on the window close button
  
EndIf

End   ; All the opened windows are closed automatically by PureBasic

If you post a link to the transparent image then I'll update the demo...

(or don't bother loading the image as a sprite, just draw it as an image on the other image in the updateimage routine [using DrawImage] - you can resize on the fly and use transparent images ).

[Kaeru Gaman]

The Background image PNG i'm loading as a sprite, has a drop shadow as part of the image. This is not displayed properly doing it this way, the drop shadow shows up as a solid, and not a 50% Transparent shadow.

load the sprite with #PB_Sprite_AlphaBlending