Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » OpenGL Screen Transition Effects

This thread is locked; no one can reply to it. rss feed Print
OpenGL Screen Transition Effects
An Ly
Member #185
April 2000
avatar

Hello!

I am currently using OpenGL to write a game which has mulitple levels. I have seen really funky screen transitions (iw jumping from one screen to another) used in other games but have no idea how to do them.

Even a simple fade to black and back baffles me.

I have seen effects where the screen "shatters" like glass and fades away too! How can this be done with OpenGL? As fas as my OpenGL knowledge goes, everything is a textured poly so how can you break it up in this way?

Any other effects which are interesting and cool would be appreciated also.

Thanks in advance!

Jonatan Hedborg
Member #4,886
July 2004
avatar

Not that i've ever done anything like this...

Well. A shatter effect could be done by, when the shatter effect is "playing", render the scene to a texture and map that texture onto some polygons which have made to look like shards (just simple surfaces should do it, no volume) and move them around acording to some basic physics.

Elverion
Member #6,239
September 2005
avatar

In theory, if you take a "screenshot" of the buffer (just copy it into a new bitmap), then randomise a few triangles to fill the screen (which will need a glLoadIdentity() before rendering), then you should be able to use that new bitmap as a texture for the polygons, and just have them fall away randomly. I'm not really sure how to go about applying the texture to all triangles as a whole instead of each individual triangle, which would look really, really weird.

--
SolarStrike Software - MicroMacro home - Automation software.

An Ly
Member #185
April 2000
avatar

Geez sounds heaps complicated. If you want an idea of what I'm looking for, check out

http://www.pompomgames.com/spacetripper.htm#stdownloaddemo

http://www.garagegames.com/pg/product/view.php?id=18

Not only is it a cool game, it has some nice graphics.

Any ideas how to do those trippy backgrounds too?

gillius
Member #119
April 2000

Depending on how your rendering is done, you might be able to do the fade to black with a lighting trick. If you don't do lighting in HW and this is a 2D game, then you might be fine here. During the game, turn off lighting so that everything is full brightness (like normal 2D rendering). Then when you want to fade, turn on lighting and make the only light have a full white ambient component, then scale that light down to zero with time. I think it can work...

Gillius
Gillius's Programming -- https://gillius.org/

kentl
Member #2,905
November 2002

I don't know OpenGL or any 3D graphics library at all. But couldn't you just have a black quad right in front of the "camera" within the game. It begins as 100% translucent and gradually shifts to 0% translucency (i.e. everything goes black). Then you do the opposite to fade back..... Or?

gillius
Member #119
April 2000

You could do that, but then your rendering time is cut effectively in half because you would do all of the work of rendering and then you would write over the entire screen again.

On modern hardware, though, that should still be blazingly fast. If one has a 3D accelerator and is using OpenGL, I'd be surprised if one could reasonably find a 2D application that would overtax the card.

Although, then again, integrated graphics cards have horrible support for OpenGL such that I never would think of playing 3D games on them, but they are probably sufficient for the simple support needed for 2D OGL games, and in this case, especially since they are so bandwidth limited, redrawing the whole screen could be a performance killer.

Gillius
Gillius's Programming -- https://gillius.org/

Jakub Wasilewski
Member #3,653
June 2003
avatar

I usually do fades transitions by putting a screenshot to a texture, and then playing with it in any way I please.

For example, a fade to black effect can be done with a single quad (textured with the screenshot) and glColor3f. A fade to white can be achieved by using the same quad accompanied by OpenGL fog. Multiple fun effects can be done by scaling/rotating the quad and blending it with the previous contents of the screen (this can result in a radial blur, a swirl blur, the screen floating away along the Z axis, or something I call "light blur" achieved with additive blending, and changing the screen dimensions).

Shattering the screen with that method would be as easy as randomly dividing the screen quad into polygon shaped shards.

This technique has only one drawback - the screenshot texture doesn't change during the transition, which can look awkward for long-lasting effects (say, over a second). If your effect is short enough, nobody will notice a thing.

Of course, that problem can be remedied by rendering to the screenshot texture each frame, and then rendering the transformed quad textured with it, but that can be troublesome.

---------------------------
[ ChristmasHack! | My games ] :::: One CSS to style them all, One Javascript to script them, / One HTML to bring them all and in the browser bind them / In the Land of Fantasy where Standards mean something.

Elverion
Member #6,239
September 2005
avatar

Jakub Wasilewski, might I see your code on this? I'm mostly interested in how to take that "screenshot" and copy it into a bitmap or texture. If you don't want to show your source, could you at least show your method for getting the texture, then blitting it to the polygons as a whole, as opposed to each individual polygon getting a copy of the texture?

--
SolarStrike Software - MicroMacro home - Automation software.

Jakub Wasilewski
Member #3,653
June 2003
avatar

Just call me Jakub, and I have no problems sharing my sources - but in my projects the code responsible for screen grabbing and transitions is custom tailored to my engine and interspersed in several places (separate logic + rendering), and probably wouldn't be of much use.

There are multiple ways to render to texture, but if you already have everything on the screen (i.e. you want a screenshot texture), you can use this:

  glBindTexture(GL_TEXTURE_2D, textureID);
  glCopyTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, 0, 0, SCREEN_W, SCREEN_H);

TextureID must be a GLuint pointing to a texture that can hold at least SCREEN_W x SCREEN_H pixels, and is in some format that can hold the framebuffer contents (which usually means that you want GL_RGB).

[EDIT:] Forgot to mention - you don't have to have the picture on screen - it can safely be grabbed from the backbuffer, and you can clear the backbuffer afterwards. But that's just a sidenote [/EDIT]

As for each polygon getting part of the texture - OpenGL allows you to use any fractional number as the UV (texture) coordinates of a vertex. Please look at the attached picture, where I tried to demonstrate splitting a screen quad into 4 "shards", and added UV coords to each vertex.

The coordinate system has the V axis increasing downwards, that is different in OpenGL, but the idea is the same - you take each of those shards, store X and Y positions of each vertex, then store U and V texture coords along with them. Then you just use an appropriate combination of glVertex* and glTexCoord* to render your shards, along with some rotates, translates and scales if you want to have a basic shattering glass effect.

---------------------------
[ ChristmasHack! | My games ] :::: One CSS to style them all, One Javascript to script them, / One HTML to bring them all and in the browser bind them / In the Land of Fantasy where Standards mean something.

Krzysztof Kluczek
Member #4,191
January 2004
avatar

Quote:

Of course, that problem can be remedied by rendering to the screenshot texture each frame, and then rendering the transformed quad textured with it, but that can be troublesome.

This should be quite simple to implement. glCopyTexImage2D works quite fast, so all you have to do is render the scene as usual, copy image to texture, clear the screen and draw transition. :)

Go to: