Page 1 of 1

I want to start creating windowed screens and moving sprites

Posted: Sun Jun 14, 2020 12:46 am
by ricardo
Hi,

I want to start creating windowed screens and moving sprites... is there any guide about it for PB? For an absolutely begginer.

Im interested on creating alpha (transparecncy) sprites and moving it on the screen, Also in being able to change the sizes, opacities of sprites, also drawing some texts on some sprites.

Im not really interested on creating games.

Any help is welcome, Even examples of this kind of things.

Best Regards

Re: I want to start creating windowed screens and moving spr

Posted: Sun Jun 14, 2020 1:22 pm
by ricardo
Any example of creating a windowed screen, loading 2 or 3 pngs with transparency, changing the heighr and with and moving it on the screen?

Best Regards

Re: I want to start creating windowed screens and moving spr

Posted: Sun Jun 14, 2020 8:07 pm
by Olli
Hello Ricardo,

Welcome in the programing game section where, as you say, you do not really make a game !!

:D

Before loading a PNG what it is not really hard, I suggest you to test any small drawing tests. Just to recall about colors and alpha transparency.

It is important too to know firstly what you cannot on screen :

1) You cannot open any screen : just one.

2) All the usual OS GUI objects (popups, menus, etc... ) are not advised, this to prevent the program to create OS conflicts.

3) You can have classical OS GUI objects only on windowed screen, and their use is limited.

On the side of the performances, screen and sprites are quicker than the classical OS GUI. Quicker again when use the full screen.

But, be careful : the sprites on PureBasic are not the quickest. The Ogre library is more powerful than sprites.

It depends if you want to deal your final project with or without an external DLL : the programs using the Ogre library require to embed the Engine3D.DLL file. The final executable file is lightly bigger too, when you use Ogre.


To conclude : you have 3 display speeds from the slowest one to the fastest one.

1) OS GUI interface
2) Sprites
2+) Full screen sprites
3) Ogre

And the Sprites library allows the compiler to produce the lightest final files size.

To start, what about a white circle drawn in a blue windowed screen ?

(in the same time, you maybe could find PNG loading examples in the documentation !)

Re: I want to start creating windowed screens and moving spr

Posted: Mon Jun 15, 2020 5:16 am
by Olli
Here, a sprite is drawn and saved as a PNG.
If you change CreateAndSave variable to zero,
Sprite is not created anymore, but it is just loaded from the PNG file.

Independantly, there is an other sprite to display the text.

Code: Select all

;*************************************************************************************************************************
;- begin
CreateAndSave = 1
a$ = "PureBasic windowed screen"
filename.S = "bull.png"

factice = CreateImage(#PB_Any, 1, 1, 32)
UsePNGImageEncoder()
UsePNGImageDecoder()

InitSprite()
ExamineDesktops()
w0 = DesktopWidth(0)
h0 = DesktopHeight(0)
w1 = w0 * 3 / 4
h1 = h0 * 3 / 4
wnd = OpenWindow(#PB_Any, 0, 0, w1, h1, "Windowed screen", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(wnd), 0, 0, w1, h1)

;- create bull
If CreateAndSave
       spr1 = CreateSprite(#PB_Any, w1, h1, #PB_Sprite_AlphaBlending)
       If StartDrawing(SpriteOutput(spr1) )
              DrawingMode(#PB_2DDrawing_AllChannels)
              Box(0, 0, w1, h1, RGBA(0, 0, 0, 0) )
              For i = h1 / 3 To 1 Step -1
                     J = 255 * Pow(I * 3 / h1, 7 / 2)
                     Circle(w1 / 2, h1 / 2, I, RGBA(J, J, J, J) )
              Next
       EndIf
       StopDrawing()
       SaveSprite(spr1, filename, #PB_ImagePlugin_PNG)
Else
       spr1 = LoadSprite(#PB_Any, filename, #PB_Sprite_AlphaBlending)
EndIf

;- create text
If StartDrawing(ImageOutput(factice) )
       wt = TextWidth(a$)
       ht = TextHeight(a$)       
EndIf
StopDrawing()
spr2 = CreateSprite(#PB_Any, wt, ht, #PB_Sprite_AlphaBlending)
If StartDrawing(SpriteOutput(spr2) )
       DrawingMode(#PB_2DDrawing_AllChannels)
       DrawText(0, 0, a$, RGBA(255, 32, 16, 255), RGBA(0, 0, 0, 0) )
EndIf
StopDrawing()

;- display in the main loop
Repeat
       Delay(8)
       ev = WindowEvent()
       ClearScreen(RGB(16, 32, 64) )
       t = ElapsedMilliseconds()
       u.D = t * #PI / 2000
       r.D = h1 / 5
       SpriteQuality(#PB_Sprite_NoFiltering)
       DisplayTransparentSprite(spr1, 0, 0)
       DisplayTransparentSprite(spr1, Cos(u) * r, Sin(u) * r)
       SpriteQuality(#PB_Sprite_BilinearFiltering)
       DisplayTransparentSprite(spr2, 0, 0)
       TransformSprite(spr2, 0, 2 * h1 / 3, w1, 2 * h1 / 3, w1, h1, 0, h1)
       FlipBuffers()       
Until ev = #PB_Event_CloseWindow

Re: I want to start creating windowed screens and moving spr

Posted: Tue Jun 16, 2020 1:04 am
by ricardo
Olli wrote:Here, a sprite is drawn and saved as a PNG.
If you change CreateAndSave variable to zero,
Sprite is not created anymore, but it is just loaded from the PNG file.

Independantly, there is an other sprite to display the text.

Code: Select all

;*************************************************************************************************************************
;- begin
CreateAndSave = 1
a$ = "PureBasic windowed screen"
filename.S = "bull.png"

factice = CreateImage(#PB_Any, 1, 1, 32)
UsePNGImageEncoder()
UsePNGImageDecoder()

InitSprite()
ExamineDesktops()
w0 = DesktopWidth(0)
h0 = DesktopHeight(0)
w1 = w0 * 3 / 4
h1 = h0 * 3 / 4
wnd = OpenWindow(#PB_Any, 0, 0, w1, h1, "Windowed screen", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(wnd), 0, 0, w1, h1)

;- create bull
If CreateAndSave
       spr1 = CreateSprite(#PB_Any, w1, h1, #PB_Sprite_AlphaBlending)
       If StartDrawing(SpriteOutput(spr1) )
              DrawingMode(#PB_2DDrawing_AllChannels)
              Box(0, 0, w1, h1, RGBA(0, 0, 0, 0) )
              For i = h1 / 3 To 1 Step -1
                     J = 255 * Pow(I * 3 / h1, 7 / 2)
                     Circle(w1 / 2, h1 / 2, I, RGBA(J, J, J, J) )
              Next
       EndIf
       StopDrawing()
       SaveSprite(spr1, filename, #PB_ImagePlugin_PNG)
Else
       spr1 = LoadSprite(#PB_Any, filename, #PB_Sprite_AlphaBlending)
EndIf

;- create text
If StartDrawing(ImageOutput(factice) )
       wt = TextWidth(a$)
       ht = TextHeight(a$)       
EndIf
StopDrawing()
spr2 = CreateSprite(#PB_Any, wt, ht, #PB_Sprite_AlphaBlending)
If StartDrawing(SpriteOutput(spr2) )
       DrawingMode(#PB_2DDrawing_AllChannels)
       DrawText(0, 0, a$, RGBA(255, 32, 16, 255), RGBA(0, 0, 0, 0) )
EndIf
StopDrawing()

;- display in the main loop
Repeat
       Delay(8)
       ev = WindowEvent()
       ClearScreen(RGB(16, 32, 64) )
       t = ElapsedMilliseconds()
       u.D = t * #PI / 2000
       r.D = h1 / 5
       SpriteQuality(#PB_Sprite_NoFiltering)
       DisplayTransparentSprite(spr1, 0, 0)
       DisplayTransparentSprite(spr1, Cos(u) * r, Sin(u) * r)
       SpriteQuality(#PB_Sprite_BilinearFiltering)
       DisplayTransparentSprite(spr2, 0, 0)
       TransformSprite(spr2, 0, 2 * h1 / 3, w1, 2 * h1 / 3, w1, h1, 0, h1)
       FlipBuffers()       
Until ev = #PB_Event_CloseWindow

Great!! I finally understand and im going somewhere.

Im loading, playing, resizing, etc my pngs!!

One question:

If i want to apply a font:

LoadFont(1, "Arial", 24,#PB_Font_HighQuality)

Before getting the TextWidth(a$) and height... how to achieve that?

Really thanks mate!! In your example i finally really understand and discover how to do somethings with this.

Best Regards

Re: I want to start creating windowed screens and moving spr

Posted: Tue Jun 16, 2020 5:10 am
by Olli
In the way of a wished font, you have right : we have the same function than the native standard font loading :

Code: Select all

LoadFont(1, "Arial", 24,#PB_Font_HighQuality)
And we have to insert

Code: Select all

DrawingFont(FontId(1) )
on the two places :

1) in the place where the text size is getting, like you described;

2) in the place where the text is pre-drawn, just before 'DrawText(0, 0, A$, RGBA(255, 32, 16, 255), RGBA(0, 0, 0, 0) ).

Note that, whatever the font quality, the displaying speed stays actually near the same !