OpenGl Pong: a step by step tutorial to do 2D graphic using OpenGl

[TempodiBasic]

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.
 

[bplus]

@TempodiBasic nice start!

[TempodiBasic]

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

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.

OpenGl 2D Demo2.bas

[TempodiBasic]

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

[TempodiBasic]

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.

[TempodiBasic]

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

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
5. Option _Explicit
6. DefInt I
7. DefSng S
8. DefLng L
9. Const True = -1, False = Not True
10. Randomize Timer
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)
66. Wend
67. System
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
104. End Sub
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
112.     _GLRender _Behind
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
128.     _glPushMatrix
129.     iGlInit = False
130. End Sub
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