lflare.htm

关于windows游戏编程的一些文章还有相关图形

<center>
<table border="0" cellspacing="0" cellpadding="10" bgcolor="#EEEEEE" width="400">
<tr><td>
<font face="courier" size="-1">

<br>
Dest_r = alut [source1_r + source2_r];<br>
Dest_g = alut [source1_g + source2_g];<br>
Dest_b = alut [source1_b + source2_b];<br>
<br>

</font>
</td></tr>
</table>
</center>
<br><br><br>

If anybody finds a more reduced implentation of additive blending, please let me know.
<br><br>
I have left out some rather vital information for putting the destination pixel back 
together, but this can be commonly found in most alpha blending tutorials for various 
pixel formats.<br><br><br>


<font size="+1"><u>Parts of a Flare</u></font><br><br>

1.  <b>Main Flare</b> - The main flare is the most prominent portion of a lens flare.  It is what 
should typically come to mind when you think of lens flares.  See below for several 
examples<br><br><br>

<center><img src="mainfl.jpg" width=355 height=232 border=0 alt="Main Flares"></center>

<br><br><br>


The main flare can be broken down into four distinct parts :<br><br>

<table border="1" cellspacing="1" cellpadding="10">
<tr>
<td><b>Description</b></td><td><b>What it looks like</b></td><td><b>How it can be done manually</b></td>
</tr>

<tr>
<td><b>Glow</b></td>
<td bgcolor="#000000"><center><img src="part_glow.jpg" width=100 height=100 border=0 alt=""></center></td>
<td>
The glow portion of the main flare is simply a gradient from a bright color to a darker color.  Use the following code to calculate a good intensity falloff for the glow if you plan on doing it by "hand":
For (int i = 0; i &lt; max_radius; i++) {<br>
 Intensity = exp(-i*i*0.006)*0.50 + exp(-i*0.03)*(1-0.50);<br>
}<br><br>
</td>
</tr>

<tr>
<td><b>Ring</b></td>
<td bgcolor="#000000"><center><img src="part_ring.jpg" width=100 height=100 border=0 alt=""></center></td>
<td>
The ring is simply an antialiased circle of some dark color.  Here is where you can get creative by using gradients of color for the ring.  See the above examples of main flares for some rings illustrating this concept.  The variable portion of this ring is it's radius and color
</td>
</tr>

<tr>
<td><b>Streaks</b></td>
<td bgcolor="#000000"><center><img src="part_streak.jpg" width=100 height=100 border=0 alt=""></center></td>
<td>
Not the best example of a streak, but it is basically the primary 
"streak" of light that radiates out from the center of the flare.  Note 
that all streaks are evenly spaced out.  So, for example, 4 streaks are 
spread apart at angles of 90 degrees.  Bright white colors usually 
work best.

</td>
</tr>

<tr>
<td><b>Rays</b></td>
<td bgcolor="#000000"><center><img src="part_rays.jpg" width=100 height=100 border=0 alt=""></center></td>
<td>
The rays are also antialiased.  They are simply lines of random length that radiate out from the center of the flare.
</td>
</tr>

<tr>
<td><b>Composite</b></td>
<td bgcolor="#000000"><center><img src="part_total.jpg" width=100 height=100 border=0 alt=""></center></td>
<td>
Just a crude flare I made with a composite of the quickly (and I do
mean quickly) drawn flare illustrations in the columns above.  Not 
bad.  But what is important is that you can see how the components 
interact with each other.  Note that additive blending is used to 
combine the components.

</td>
</tr>

</table>
<br><br><br>


2.  <b>Secondary Parts</b><br><br>

The rest of the flare varies widely between flares.  These parts usually appear as small, very translucent, circles.  
<br><br><br>

<center><img src="secfl.jpg" width=280 height=215 border=0 alt="Secondary Flares"></center>
<br><br><br>

Here, we don't really see too much variation in relation to how the circles are created.  
The diagram below gives you a basic insight as to how they are created.  Generally, you 
create a ring of any color, and smoothly transition to another color using smaller and 
smaller rings until your final ring has a radius of 0.  Note that you'll need to utilize a blur 
filter to make it look the most correct.
<br><br>

Figure 11.<br>
<center><img src="secdemo.jpg" width=262 height=115 border=0 alt="Sec. Demonstration"></center>
<br><br><br>

The optimal way to create the secondary rings is to create a function which takes at least 
a radius, an outer ring color, and an inner ring color.   You then interpolate the R, G, B 
values starting from the outer ring color and continuing until you reach the final inner 
ring color.   Looking at figure 11, we could say that the outer ring's color is some shade 
of purple, while the inner ring color is pure black.
<br><br><br>


<font size="+1"><u>Breaking the Screen Down : Cartesian Coordinates</u></font><br><br>


In order to easily draw lens flares, we'll need to take notice of a property that they all  share.
<br><br>
Examine the flare below, and see if you can determine a trend in the positions of the primary flare in relation to the secondary parts of the flare.
<br><br><br>

<center>
<table border="1" cellspacing="1" cellpadding="0">
<tr>
<td><img src="flare1.jpg" width=200 height=200 border=0 alt=""></td>
<td><img src="flare2.jpg" width=200 height=200 border=0 alt=""></td>
<td><img src="flare3.jpg" width=200 height=200 border=0 alt=""></td>
</tr>
</table>
</center>
<br><br><br>

If you haven't noticed yet, all parts of the flare pivot around the center of the image.  So 
as such, we will utilize a coordinate system that is conducive to this sort of pivoting.  The 
cartesian coordinate system, as demonstrated in figure 10, is perfect for the creation of 
lens flares because all points are centered around the middle of the graph.  
<br><br><br>

Figure 10.
<center><img src="graph.gif" width=253 height=253 border=0 alt=""></center>
<br><br><br>


In order to utilize a cartesian coordinate system on-screen, we simply set our origin to 
(X = SCREEN_WIDTH / 2, Y = SCREEN_HEIGHT / 2).  We then plot all points on screen in cartesian coordinates, with the x-extents being +/-(SCREEN_WIDTH / 2) and the y-extents being +/-(SCREEN_HEIGHT / 2).
<br><br>
Converting back to screen coordinates is also easy.  We simply add our (X, Y) values for the origin to each (X, Y) pair in cartesian coordinates.
<br><br>

<font size="+1"><u>The lens Flare Vector</u></font><br><br>

The lens flare we create will have parts that all lie on a straight line.  The method that I 
like to utilize when positioning parts of the lens flare is to set position coordinates only 
for the <b><i>main</i></b> flare using a standard (h, k) center, plotted in cartesian coordinates.  <b><i>All </i></b>
other secondary portions are inverted and/or scaled (h, k) coordinates.  While you may 
use a 2d vector, or a 3d vector if you want the flare to have capabilities of being hidden 
by geometry (such as a sun behind a star), I find this to be the easiest.
<br><br><br>

Figure 11.
<center><img src="flarevect.gif" width=200 height=200 border=0 alt=""></center>
<br><br><br>

Remember, (h, k) are simply points in the cartesian coordinate system you set up.  They 
more specifically represent the CENTER of the main flare.  The other coordinates are 
simply scaled and/or inverted h, k coordinates.  Note that you can pick out virtually any 
number to scale the coordinates, and invert any coordinate set as you wish.  
<br><br>
What happens when you invert the h, k coordinates is that if your main flare is in the top 
right corner, the new coordinates would be in the bottom left corner of the screen.
<br><br>

<center>
<table border="1" cellspacing="0" cellpadding="5" width="60%">
<tr>
<td>Main Flare</td>
<td>h</td>
<td>k</td>
</tr>

<tr>
<td>Secondary Flare</td>
<td>-h</td>
<td>-k</td>
</tr>

<tr>
<td>Secondary Flare</td>
<td>-h / 2</td>
<td>-k / 2</td>
</tr>

<tr>
<td>Secondary Flare</td>
<td>-h / 1.2</td>
<td>-k / 1.2</td>
</tr>

<tr>
<td>Secondary Flare</td>
<td>h / 3.2</td>
<td>k / 3.2</td>
</tr>

</table>
</center>
<br><br><br>

Converting the (h, k) coordinates to screen coordinates is exactly as stated before.  You 
simply add :
<br><br>
Screen_coord_x = h + SCREEN_W / 2;<br>
Screen_coord_y = k + SCREEN_H / 2;<br>
<br>
Where SCREEN_W is the screen width and SCREEN_H is the screen height.<br><br>

When blitting the flare portions to the screen using additive blending, don't forget to blit 
with the new screen coordinates being in the absolute center of the 
sprite, rather than the top right corner like most blitting functions work.
<br><br><br>


<font size="+1"><u>Using Graphics Programs to Create Flares</u></font><br><br>


Well, we just spent a considerable amount of time talking about how you can graphically 
generate your very own lens flares.  Well, it may not be very practical for most 
programmers to spend the time writing routines to generate lens flares.  So what you 
need to do is grab a good graphics program like Photoshop and create your own using 
filters!  <br><br>

Simply render them to a black background and use a crop tool to pick out only the parts 
you want.<br><br>

But, for those of you who can't afford an expensive graphics program like photoshop, I've 
taken the liberty of creating a few flares for you.<br><br>

Just click on the flare you like.  They are stored in 32-bit TARGA files.<br><br>
<center>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><a href="flpak1.zip"><img src="flpak1.jpg" width=128 height=128 border=0 alt=""></a></td>
<td><a href="flpak2.zip"><img src="flpak2.jpg" width=128 height=128 border=0 alt=""></a></td>
</tr>

<tr>
<td><a href="flpak3.zip"><img src="flpak3.jpg" width=128 height=128 border=0 alt=""></a></td>
<td><a href="flpak4.zip"><img src="flpak4.jpg" width=128 height=128 border=0 alt=""></a></td>
</tr>
</table>
</center>

<br><br>

<h3>Good Luck!</h3>

<font size="-1">
<i>(C) Copyright 1999, Michael Tanczos.  This document may be freely reproduced only
 if the name "Michael Tanczos", the URL to "http://www.gamedev.net", and this copyright
notice remain intact.</i>
</font>

</font>

</td></tr>
</table>

</center>

</BODY>
</HTML>