Page 1 of 1
Drawing Question
Posted: Wed Dec 09, 2009 9:07 am
by 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
Re: Drawing Question
Posted: Wed Dec 09, 2009 9:41 am
by 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.
Re: Drawing Question
Posted: Wed Dec 09, 2009 9:24 pm
by Tony_G
Thanks Kaeru,
With your help, I have got it working.......
All the best
Tony
Re: Drawing Question
Posted: Thu Dec 10, 2009 12:04 am
by 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?
Re: Drawing Question
Posted: Thu Dec 10, 2009 10:38 pm
by 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
Re: Drawing Question
Posted: Fri Dec 11, 2009 12:25 am
by 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.
Re: Drawing Question
Posted: Sat Dec 12, 2009 3:53 am
by 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
).
Re: Drawing Question
Posted: Sat Dec 12, 2009 2:59 pm
by Kaeru Gaman
Tony_G wrote: 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