Text Only | Text with Attachments

QB64.org Forum

Active Forums => Programs => Topic started by: TempodiBasic on September 05, 2021, 07:51:43 pm

Title: OpenGl Pong: a step by step tutorial to do 2D graphic using OpenGl
Post by: TempodiBasic on September 05, 2021, 07:51:43 pm
Hi guys and gals of QB64 community

after some feedbacks from you, my dear friends,
I try to do an OpenGl Tutorial for 2D graphic so all people interested can introduce themselves to programming OpenGl in QB64.

the goal is to produce a simple basic game with 2D graphic: PONG

Now I post the first step that consists of showing the settings of Opengl graphic.

As you can see watching at my code, there is NO loop in the main in this first demo.
Each line of code has its own comment, moreover there is a descriptive scheme of comparison between standard SCREEN and OpenGl SCREEN.

The help message for user has been made by standard PRINT output, because in OpenGl Text is another image to draw on the screen and this is not a basic step.

The only user's gameplay is press a key to quit the application.

Here attached the first demo.
 
Title: Re: OpenGl Pong: a step by step tutorial to do 2D graphic using OpenGl
Post by: bplus on September 05, 2021, 08:49:13 pm
@TempodiBasic nice start!
Title: Re: OpenGl Pong: a step by step tutorial to do 2D graphic using OpenGl
Post by: TempodiBasic on September 09, 2021, 05:20:18 pm
Hi Bplus
Thanks for appreciating
Here a second step in the field of 2D OpenGl.
In this code we see how
1. to set ViewPort for OpenGl graphic and how to avoid that it was forced to the whole window of program.
http://qb64.org/wiki/GlViewport (http://qb64.org/wiki/GlViewport)
Quote
When a GL context is first attached to a window, width and height are set to the dimensions of that window.

2. Moreover we start to build our game engine, managing input of keyboard by INKEY$ of QB
3. drawing simple graphic routine using the right sequence of statement in opengl.

Code: QB64: [Select]
  1.     ' 1 defining color
  2.     ' 2 _glBEGIN primitives name
  3.     ' 3 _glvertex2f needed from graphic primitives
  4.     ' 4 _glEND

4. meet the graphic primitives avaiable

all these news in the file code attached.  [ This attachment cannot be displayed inline in 'Print Page' view ]  
Title: Re: OpenGl Pong: a step by step tutorial to do 2D graphic using OpenGl
Post by: TempodiBasic on September 18, 2021, 09:20:07 am
Hi boys and girls of QB64 interesting to Opengl 2D

in this post I attach three different ways to let work together SCREEN dimensions and OpenGl system's dimensions:
1. translations of dimensions by scratch using an own function to do this work
2. using WINDOW and PMAP (dimension, function of translation) to put on the same unit of dimensions
3. using _glScale and _glTranslate and the matrix of OpenGl rappresenting the video memory

Why must you waste your time going along 3 parallel paths? Because more you know more you can do and more you can choose how to do something.

Please pay attention that you must translate also the colors from _RGB32 to _GlColor4f and for this I'm using a translations of value between 2 different ranges or 2 metrics.

the next post will bring up one of these 3 methods going to get a first aspect of PONG 2D game.

Welcome feedbacks about demos posted.
Thanks
Title: Re: OpenGl Pong: a step by step tutorial to do 2D graphic using OpenGl
Post by: TempodiBasic on September 22, 2021, 10:05:08 am
Hi Guys and Gals of QB64
here the STEP 4 that bring us to the point asked by Bplus.
A demo of bouncing ball in Opengl...

I have promised to develope only one of the 3 method to manage cohordinates and correlations between SCREEN scale and Opengl scale.
So here you can download the 3 file of code .BAS with the 3 methods to get a bouncing ball!....

Be aware ! As you have seen in the previouse steps there is no primitive graphic routine for circles and ellipses in Opengl...
so you must use your imagination and some tricks.
For now I have showed 2 raw tricks: using a magnified _gl_POINTS   or use a Polygon (here I use a square)

Welcome feedbacks

PS More advanced method to get a circle in Opengl in coming.

Title: Re: OpenGl Pong: a step by step tutorial to do 2D graphic using OpenGl
Post by: TempodiBasic on September 26, 2021, 03:47:35 pm

Hi QB64 coders
here the last theoric demo... just to show a code that uses for the most part the _Gl_Keywords without using own functions built from scratch.

Both Circle, both Arch and  Ellipse are not primitive graphic functions in OpenGl, the same is for text that is done lefting to the knowledge of the coder...
the filled circle has been made with _GL_TRIANGLE_FAN while we can do circumference (void circle) using _GL_LINE_LOOP.

For now in this set of demo the text has been made overprinting text made by CPU with PRINT Qbasic statement.
A first solution is to draw point by point the text on the screen using this function https://www.qb64.org/forum/index.php?topic=3254.msg125337#msg125337 (https://www.qb64.org/forum/index.php?topic=3254.msg125337#msg125337)

Code: QB64: [Select]
  1. ' this Demo5  uses all _GlMethods without own functions built from scratch
  2. ' using _Gl_Triangle_Fan we draw a circle
  3. ' method 1 is  on fly building
  4. ' method 2 is  matrix precalculation
  9. Const True = -1, False = Not True
  11.  
  12. Dim Shared iGlInit
  13. Dim lMyScreen, iMaxScreenX, iMaxScreenY, iMinScreenX, iMinScreenY ' variables for managing screen visible
  14. Dim Shared iBallState, sMyBallX, sMyBallY, sMyBallSpeedX, sMyBallSpeedY 'variables for managing ball
  15. Dim lColor, iRed, iGreen, iBlue, iAlpha, sRed, sGreen, sBlue, sAlpha ' variables for managing colors
  16. Dim iKey, icircles(0 To 60, 0 To 1)
  17.  
  18. ' initialization
  19. iMaxScreenX = 799
  20. iMaxScreenY = 599
  21. iMinScreenX = 0
  22. iMinScreenY = 0
  23. lColor = _RGBA32(255, 0, 0, 255) 'color is RED
  24. iRed = _Red32(lColor)
  25. iBlue = _Blue32(lColor)
  26. iGreen = _Green32(lColor)
  27. iAlpha = _Alpha32(lColor)
  28. iBallState = True
  29. iGlInit = True
  30.  
  31. lMyScreen = _NewImage(iMaxScreenX + 1, iMaxScreenY + 1, 32) ' it creates a graphic surface of 800x600 pixels (0-799,0-599)
  32. If lMyScreen < -1 Then Screen lMyScreen Else Print "Error creating screen" 'it gives feedback if there is a graphic error
  33.  
  34.  
  35. _Title "OpenGl 2D demo: step 5  Bouncing Ball and transformation cohordinates: ScaleF method"
  36. Locate 2, 1: Print "press Enter key to quit, Spacebar to change shape of ball"
  37.  
  38.  
  39. While 1 ' main loop to manage the flow of application
  40.     'area input
  41.     iKey = _KeyHit
  42.     If iKey = 13 Then Exit While
  43.     If iKey = 32 Then iBallState = Not iBallState
  44.     'area calculation
  45.     If sMyBallX >= iMaxScreenX Or sMyBallX <= iMinScreenX Then
  46.         sMyBallSpeedX = -sMyBallSpeedX
  47.         sMyBallSpeedX = sMyBallSpeedX + (Rnd * 2)
  48.         If sMyBallSpeedX > 12 Then sMyBallSpeedX = 6
  49.         If sMyBallSpeedX < -12 Then sMyBallSpeedX = -6
  50.         If sMyBallX < iMinScreenX Then sMyBallX = iMinScreenX + 1 Else sMyBallX = iMaxScreenX - 1
  51.     End If
  52.     sMyBallX = sMyBallX + sMyBallSpeedX
  53.  
  54.     If sMyBallY >= iMaxScreenY Or sMyBallY <= iMinScreenY Then
  55.         sMyBallSpeedY = -sMyBallSpeedY
  56.         sMyBallSpeedY = sMyBallSpeedY + (Rnd * 2)
  57.         If sMyBallSpeedY > 12 Then sMyBallSpeedY = 6
  58.         If sMyBallSpeedY < -12 Then sMyBallSpeedY = -6
  59.  
  60.         If sMyBallY < iMinScreenY Then sMyBallY = iMinScreenY + 1 Else sMyBallY = iMaxScreenY - 1
  61.     End If
  62.     sMyBallY = sMyBallY + sMyBallSpeedY
  63.  
  64.     ' to see OpenGl results you must wait at least the first second after window of program has been displayed
  65.     _Limit 15 ' it is useful to limit the activity of CPU while we use the GPU (openGl)
  68.  
  69. 'OpenGl area-----------------------------
  70. Sub _GL ()
  71.     Shared iMaxScreenX, iMaxScreenY, iMinScreenX, iMinScreenY ' variables for managing screen visible
  72.     Shared iRed, iGreen, iBlue, iAlpha, icircles()
  73.     Dim e As Integer
  74.     ' every time _GL runs it must set values for screen
  75.     _glMatrixMode _GL_MODELVIEW
  76.     _glTranslatef -1, 1, 0
  77.     _glScalef (1 / 400), (-1 / 300), 1
  78.  
  79.     ' 2D graphic primitives area-----------------------
  80.  
  81.     If iGlInit Then GlInit ' only if we need initialization these instructions (in the sub GlInit) will be executed
  82.     _glClear (_GL_COLOR_BUFFER_BIT) ' it clears buffer of color
  83.  
  84.     If iBallState Then
  85.         '          Red, Green, Blue
  86.         _glColor4ub iRed, iGreen, iBlue, iAlpha ' here it defines the color to use for drawing like in _RGB32 with value from 0 to 255
  87.  
  88.         _glBegin _GL_TRIANGLE_FAN
  89.         For e = 1 To (_Pi(2)) Step (2 * _Pi / 10) ' <-- increasing the number we get a more suitable ball
  90.             _glVertex2f sMyBallX + (7 * Cos(e)), sMyBallY + (7 * Sin(e))
  91.         Next e
  92.         _glEnd
  93.  
  94.  
  95.     Else
  96.         _glColor3ub 127, 10, 227
  97.         _glBegin _GL_TRIANGLE_FAN
  98.         For e = 0 To 60
  99.             _glVertex2i icircles(e, 0) + sMyBallX, icircles(e, 1) + sMyBallY
  100.         Next
  101.         _glEnd
  102.         _glPopMatrix
  103.     End If
  105.  
  106. Sub GlInit ()
  107.  
  108.     Shared sRed, sBlue, sGreen, sAlpha, icircles(), iKey
  109.     Shared iMaxScreenX, iMaxScreenY, iMinScreenX, iMinScreenY
  110.     _glViewport iMinScreenX, iMinScreenY, iMaxScreenX + 1, iMaxScreenY + 1
  111.     _glClearColor 0, 0, 0, 1 ' it set color for CLS,color  and color is defined in RGBA mode 0-1
  113.  
  114.     sMyBallX = 400
  115.     sMyBallY = 300
  116.     sMyBallSpeedX = 5
  117.     sMyBallSpeedY = 5
  118.     ' precalculation matrix values for circle
  119.     ' we use temporary iKey, sRed, SGreen
  120.     sRed = 4.1445 * 2.0 / 60.0
  121.     sGreen = 0.0
  122.     For iKey = 1 To 60
  123.         icircles(iKey, 0) = Cos(sGreen) * 7
  124.         icircles(iKey, 1) = Sin(sGreen) * 7
  125.         sGreen = sGreen + sRed
  126.     Next
  127.     sRed = 0: sGreen = 0: iKey = 0 ' we restore these variable to 0
  129.     iGlInit = False
  131.  
  132.  

The next step'll be the paddles for two player and the score to complete a basic multiplayer game in OpenGl: mythic Pong!
Thanks for taking a look at it
Text Only | Text with Attachments