2D graphics in OpenGL?

[fuzzy70]

Has anybody come across any good sites etc with regards to using OpenGL from a 2D aspect & not 3D.

The main type of thing I would like to learn is vector graphics based games like Asteroids,GeometryWars etc as there is something I find aesthetically pleasing about that style. That and the fact that my pixeling skills are about as good as a 2 year old with crayons  .

The math side of things is not a problem as I know a fair bit & there is plenty of resources on that subject, but all my searches with regards to "2D" "Vector" & "OpenGL" just throw back 3D basics or just the maths & not using OpenGL for efficient 2D work.

This example uses OpenGL http://xout.blackened-interactive.com/Gravitron2/Gravitron2.html as you can also download the source but the C++ code just confuses me  .

Lee

[Slydog]

I have collected a few OpenGL links over the past few years.
Mostly focusing on the 3D side however.

Check out these guys 'Legacy Tutorials' on the right of the page, specifically lesson 21 which focuses on lines.
http://nehe.gamedev.net/

Check out the 'Blending' tutorial (#19) - it looks like you could apply this technique to your lines to make them glow:
http://www.zeuscmd.com/tutorials/opengles/index2.php


Unrelated to your question, I just thought this guide was cool, but it's for OpenGL ES 2.0:
OpenGL ES 2.0 API Quick Reference Card

Google gave me this one:
Chapter 21. Real-Time Glow

Plus this one:
Radial Blur & Rendering To A Texture

Not sure what this one is:
http://openglbook.com/

[fuzzy70]

Thanks Slydog, I will give them a look .

I know OPENGL can be used for 2d vector work & have seen plenty of games using it, but getting the info nowadays is getting more difficult thanks to the main focus being 3d related.

The maths are pretty straight forward & collision detection is obviously more awkward than a sprite based game but still doable. It's just the most efficient and/or fastest way to plot points & lines I am looking for. Nearly everything I have found has had the attitude of "This is a point, this is a line. Enough of the 2D let's get stuck in with the juicy & cool 3d stuff".

Don't get me wrong as I do love 3d but it is not the be all & end all that a lot of people preach about.

It may end up being a case of doing 2d in 3d & keeping the Z coord the same for everything that's plotted, I will see.

Lee

Sent from my GT-I5700 using Tapatalk 2

[Slydog]

You could probably just draw a regular quad and texture it with a png with transparency fading towards the edges, and solid down the middle.  Any quad drawn with this png would appear to be glowing on a dark background.

To figure out how to draw a line quad, check out this code I did a year or so ago (forum link was broken?).
It is a quick demo that bounces two connected polyvector lines around the screen.
You would just need to texture them properly to make them glow.
I'm not sure if this is the best method, but it would work if converted to OpenGL I think.

Code (glbasic) Select Expand

TYPE TPoint
x%
y%

FUNCTION Set: x%, y%
self.x = x
self.y = y
ENDFUNCTION
ENDTYPE

TYPE TLine
p1 AS TPoint
p2 AS TPoint
width# = -1
colour% = -1

p1a AS TPoint
p1b AS TPoint
p2a AS TPoint
p2b AS TPoint

FUNCTION Set: x1,y1, x2,y2, width#=-1, colour%=-1
self.p1.Set(x1, y1)
self.p2.Set(x2, y2)
IF width <0  THEN width = self.width
IF width <=0 THEN width = 4
IF colour=-1 THEN colour = self.colour
IF colour=-1 THEN colour = RGB(255,255,255)
self.width = width
self.colour = colour
self.Update()
ENDFUNCTION

FUNCTION Update:
LOCAL angle#
LOCAL width#
LOCAL dx, dy

dx = self.p2.x - self.p1.x
dy = self.p2.y - self.p1.y
width = self.width / 2.0
angle = 90 - ATAN(dy, dx)

self.p1a.Set(self.p1.x - COS(angle) * width,   self.p1.y + SIN(angle) * width)
self.p1b.Set(self.p1.x + COS(angle) * width,   self.p1.y - SIN(angle) * width)

self.p2a.Set(self.p2.x - COS(angle) * width,   self.p2.y + SIN(angle) * width)
self.p2b.Set(self.p2.x + COS(angle) * width,   self.p2.y - SIN(angle) * width)
ENDFUNCTION

FUNCTION Draw:
STARTPOLY 0
POLYVECTOR self.p1a.x, self.p1a.y, 0, 0, self.colour
POLYVECTOR self.p1b.x, self.p1b.y, 0, 0, self.colour
POLYVECTOR self.p2b.x, self.p2b.y, 0, 0, self.colour
POLYVECTOR self.p2a.x, self.p2a.y, 0, 0, self.colour
ENDPOLY

// Uncomment to show original line in white
//DRAWLINE self.p1.x, self.p1.y, self.p2.x, self.p2.y, RGB(255,255,255)
ENDFUNCTION

ENDTYPE



ALLOWESCAPE TRUE

LOCAL p1 AS TPoint
LOCAL p2 AS TPoint
LOCAL p3 AS TPoint

LOCAL d1 AS TPoint
LOCAL d2 AS TPoint
LOCAL d3 AS TPoint

LOCAL width% = 12
LOCAL screen AS TPoint
LOCAL line1 AS TLine
LOCAL line2 AS TLine

GETSCREENSIZE screen.x, screen.y

p1.Set( 30, 40)  // point 1 x,y
p2.Set(333,222)  // point 2 x,y
p3.Set(221,113)  // point 3 x,y

d1.Set( -3, -2)  // point 1 bounce x,y speed
d3.Set(  1,  1)  // point 2 bounce x,y speed
d2.Set(  3,  5)  // point 2 bounce x,y speed

line1.Set(p1.x,p1.y, p2.x,p2.y, width, RGB(250,75,0))
line2.Set(p2.x,p2.y, p3.x,p3.y, width, RGB(250,75,0))

REPEAT
INC p1.x, d1.x; IF (p1.x > screen.x) OR (p1.x<1) THEN d1.x = -d1.x
INC p1.y, d1.y; IF (p1.y > screen.y) OR (p1.y<1) THEN d1.y = -d1.y

INC p2.x, d2.x; IF (p2.x > screen.x) OR (p2.x<1) THEN d2.x = -d2.x
INC p2.y, d2.y; IF (p2.y > screen.y) OR (p2.y<1) THEN d2.y = -d2.y

INC p3.x, d3.x; IF (p3.x > screen.x) OR (p3.x<1) THEN d3.x = -d3.x
INC p3.y, d3.y; IF (p3.y > screen.y) OR (p3.y<1) THEN d3.y = -d3.y

line1.Set(p1.x,p1.y, p2.x,p2.y)
line2.Set(p2.x,p2.y, p3.x,p3.y)

line2.Draw()
line1.Draw()

SHOWSCREEN
UNTIL FALSE

[Slydog]

For the png glow texture, see this posting:
http://www.glbasic.com/forum/index.php?topic=6716.msg54159#msg54159

I didn't use my line drawing command here, but the glowing button lines are what I'm referring to, just mimic that effect, nothing fancy.

[EDIT] Dang!  I gotta finish that game!  I'm soooo close, haven't worked on it in months.

[EDIT2] I think if you set ALPHATESTING to 0 (or 1) it will improve the glow effect.  The default setting cuts off the alpha value too soon, leaving a distinct visible edge.  I haven't tried it yet on my game, since I've been away from it too long.

[fuzzy70]

Thanks again Slydog, especially for the code as that gives me something to play around with 

Lee

[Moru]

Im not on the pc now but in the samples folder there is a game using only vector line-graphics. Cant remember the name though. Sidescroller shooter. Only image is a glowing dot that is used as brush sort of

[fuzzy70]

Thanks Moru, will have a search in the samples folder & see if I can find it 

Lee

[Moru]

Found it, It's called Scrable and is in the _Projects_ folder

[fuzzy70]

Thanks again Moru, Will have a look at that as may have some useful code with regards to the collision detection as well 

I am also pretty certain I saw a post here once with regards to using AC3D to make the vectors then import into GLB, think it came with an example as well. However I cannot find the post or the code at the moment which is a pain, either that or it was all a dream 

Lee

[Moru]

Yes, that one was in the showroom:
http://www.glbasic.com/showroom.php?site=games&game=AC3DPoly
(I also searched for it on the forums a few years ago when I needed something similar so I remember where to find it) :-)

[fuzzy70]

Yes, that one was in the showroom:
http://www.glbasic.com/showroom.php?site=games&game=AC3DPoly
(I also searched for it on the forums a few years ago when I needed something similar so I remember where to find it) :-)

Thanks again. Have download & will see what I can get up to with it

Lee