blender www.blender.nl
this document is online at http://www.blender.nl/showitem.php?id=132
ALT
 We've got lasers! Intermediate  Transparent light and texture effects
2001 01 17 
  Morgon Dickerson  id132 
Introduction
In this tutorial, you'll find out how to create great looking lasers, explosions and other transparent light and texture effects in GameBlender 2.04. Since Blender does not yet support the particle system in it's game engine, in order to get laser, magic and fire effects you have to use special texturing methods to create the illusion of particles of light. This simply consists of painting or rendering targa images of what you want your light effect to look like, and then applying that texture to objects in your game environment. We use Targa images because Blender can recognize the Alpha, or transparency, layer in the Targa image. Jpeg images do not have this alpha layer. Here is an example file that demonstrates the transparent-mapped textures on a projectile:

Download:
 example1.zip
Fig. 1 It's actually easy to make cool laser weapon effects for your games
Fig. 1 It's actually easy to make cool laser weapon effects for your games
Setting up the Image
First off, we have to create the Targa textures. For this we will use the Gimp in this tutorial, which is a really powerful free painting program available on many platforms, but the same techniques can be used in Photoshop, Paint Shop Pro, and other painting programs. You can download the Gimp here: http://www.gimp.org

Fig. 2 - Change the dimensions to 512x512 pixels
Fig. 2 - Change the dimensions to 512x512 pixels
Start up the Gimp, set the background color to black, and go to the File menu and select 'New...'. In the dialog box that pops up, titled 'New Image', we need to set the dimensions of the image. Keep in mind that in order to texture objects for game play in Blender (using the UV texture coordinates editor), your textures size must be a power of 2. Commonly used sizes are 64x64, 128x128, and 256x256. Most graphics cards will not recognize textures above 256x256. We are going to make our texture 512x512, so we can work in finer detail, and then scale it down to 128x128 when we are done.

Before you click 'OK', change the fill type to 'background' so it will begin with a totally black image. Blender interprets all the black area of a targa image as transparent. Now click 'OK'.

It is always a good idea to work with layers. This way, if we mess up or change our mind about our image, we can take out the messed up layer, and not have to trash the whole image. Plus, we are able to get some really neat effects by combining layers with different opacity settings. If the 'Layers, Channels and Paths' dialog box is not already open on your screen, then click on your image, select 'Layers', and 'Layers, Channels and Paths'. Now create a new layer, and name it something like 'Flare', or 'Laser'.

Fig. 3 - The 'Create New Layer' icon
Fig. 3 - The 'Create New Layer' icon
Now as I said above, Blender will render all the black area of the texture as transparent, so what we want to do is to make a gradient from a bright color to the black. We'll do this using the Gradient tool. (Surprise!) Choose the gradient tool, and then double-click the tool's icon to bring up the 'Tool Options' dialog.

Fig. 4 - Choose the Gradient tool
Fig. 4 - Choose the Gradient tool
Fig. 5 - Select the 'Radial' type gradient
Fig. 5 - Select the 'Radial' type gradient
Under the Tool Options dialog, make sure that the type of Gradient is set to 'Radial'. This produces a circular gradient that starts at the point where we begin it and emanates outward in all directions.

Painting the Texture
Finally! We are ready to paint! (Bet you thought it was never coming, eh?) We need to choose a good color. It needs to be a light color, as it will represent the very center of our projectile, and thus the hottest. I chose a light purple for this Tutorial. Make sure that the color we selected is in the foreground box, and the background box is just black. Next, we need to find the center of our image. As the image is 512x512, half of that would be 256x256. But to be perfect, we have to put the cursor at 255x255. This is because the Gimp sees the first pixel not as #1, but rather as #0. Now we make sure that the 'Laser' layer is selected, and then draw our gradient from the center of the image almost all the way to the edge. We should end up with a circular gradient, like Fig. 6.

Fig. 6 - Our gradient
Fig. 6 - Our gradient
Fig. 7 - The Airbrush tool
Fig. 7 - The Airbrush tool
Now, choose a really big brush with soft edges (I chose a 83x83 soft edged brush), and choose the Airbrush tool. (Fig. 7)

Then, select a lighter shade of our primary color, and paint a star shape in the middle of the gradient, to give the effect of rays of light shooting from a light source. Then select a lighter shade, and airbrush even lighter in the center, to make it really bright. I ended up with Fig. 8.



Now, we have to downsize our image to 128x128 pixels. To do this, we on our image, and select 'Image', and then 'Scale Image'. In the 'Scale image dialog box, set the 'New Width' and 'Height' to 128. (Fig. 9). Then click 'OK'.

Fig. 8 - The star shape
Fig. 8 - The star shape
Fig. 9 - Resizing the image to 128x128
Fig. 9 - Resizing the image to 128x128
Now we need to save our image. Targa files can not hold the layer information that we are working with, so we must flatten (combine the layers) our image first. on the image, and select 'Image’ on the 'Background' thumbnail, and select 'Flatten image' from the menu that pops up. This combines all the layers together into one, and deletes any layers that are not visible.

Now lets save this thing! on our image, and select 'File', and then 'Save'. (You could also use the hotkey +} Now we choose the directory that we want to save the image in. Then we click on the 'Determine File Type:' button, and select 'TGA' for a Targa file. Finally, type a filename of your choice in the filename field at the bottom, and click 'OK'. When a 'Targa Options' dialog box pops up, click 'OK'. Now your file is saved, and we can go to the next step! Yay!

Creating the Projectile in Blender
Okay, lets fire up Blender! Before we make our projectile, we need to set up a game environment really quick. Switch to top view, and delete the default plane. Now add a Cube. Hit to get to the Realtime Buttons, and click the 'Sector' button to make our cube a sector. While still in EditMode, let's scale the cube up about 20 times it's size, then press ++ to recalculate the normals inside, and confirm the query box that pops up. This is so that the walls of the sector will register collisions (So the game characters can collide with them and bounce off them). Exit EditMode.

Fig. 10 - Change the Cube to a 'Sector'
Fig. 10 - Change the Cube to a 'Sector'
Fig 11. - The Game-player setup
Fig 11. - The Game-player setup
Now add a Camera in front view, and make it the active camera by pressing +. Rename the camera 'Player'. Now we switch back to top view and add an Empty in the same location as the Camera. Rename this Empty to 'Life'. Now we place the 3d cursor two grid units to the right of the center (Where the 'Life' Empty is), and add an Empty. Rename this Empty 'RightGun'. Now we'll place the 3d cursor two grid units to the left of the camera, and add another Empty, and rename this one to 'LeftGun'. These are the guns that we will use to fire our projectile. Parent the 'Gun' Empties and the 'Player' Camera to the 'Life' Empty. We should end up with fig. 11. We need to set the Camera and all the Empties as 'Actors' in the Realtime buttons window () We will put the rest of the game parameters for these objects in later.

Now, let's finally make our projectile! (You're probably thinking that it's about time, eh?) To create our projectile, we need to think of something important: what we are trying to simulate is a light particle effect. Particles are 3-dimensional, but our texture we have painted is only 2d. We need to figure out a way to display this texture as a 3d object. In this case, we are going to create an object with 6 faces, so that no matter which direction we see it from, we will see a face with the texture mapped on it. Check out Fig. 12 to see an example. Feel free to experiment with other shapes, but keep in mind what the effect is that you want to create. This effect is a ball or star of light, so we are keeping it the same dimensions all around.

Fig. 12 - The projectiles shape
Fig. 12 - The projectiles shape
Okay, let's place the 3d cursor outside the sector somewhere, and add a Plane in top view. Let's exit EditMode now, and then switch to front view. Duplicate the plane, hit , and rotate the new plane 90 degrees. Lets switch to top view again, and duplicate that plane, and rotate the new one 90 degrees also. We should end up with an object that looks like Fig. 12. The reason that we added three separate planes instead of editing the mesh of the first plane in EditMode, is that I've found it to be much easier to apply textures with the UV Tex editor to the separate planes, and then join them later.

Texturing the Projectile
Okay, now to make this thing look good! I have my Blender set up with several different types of windows, including a UVTex Editor window. If you don't have a similar setup, then you need to split the main 3d window, and make one side an image window (hit +), and leave the other side as a 3d window. Change the buttons window to Vertex Paint buttons by clicking the button.

Now, let's select the first plane we added. We hit , and in the image window, click the 'Load' button to load our image. Let's find our Targa texture image in the file select window, and click the filename to open it. If we go into texture mode (or potato mode as I've heard it called), we should see our texture on that plane like in Fig. 13.

Fig 13 - The initial textured plane
Fig 13 - The initial textured plane
Now if we move our view around with , we can plainly see that the texture is only showing up on the top of the plane. We have to make the face two sided. In the Paint buttons, click the twoside button. That will take care of that problem. But we also have to do a couple of other things. Make sure that the 'Light' button is unclicked. This button makes the selected face(s) receive realtime lighting. But this projectile is light, so we don't want that to happen. One last thing, and this is where the Blender magic kicks in, click the 'Add' button. This makes Blender show all the black area in Targa images as transparent. Now in the Paint buttons, your 'Face Select' buttons should be like Fig. 14.

Fig. 14 - The Face Select buttons need to look like this
Fig. 14 - The Face Select buttons need to look like this
As we can see, the plane is partly transparent, with a visible star in the center! Pretty neat, eh? But there seems to be one problem: The texture is not showing up as bright on the plane as the original image is. This is because of vertex colors are effecting the output colors of your texture. We need to set the Vertex Color RGB sliders all the way to white, and then press in the 3d window to enter Vertex Paint mode. Then press + to fill the face with the selected color, and press again to exit Vertex Paint mode.

Fig. 15 - The Vertex Color sliders need to be set to white
Fig. 15 - The Vertex Color sliders need to be set to white
Fig. 16 - Our textured projectile
Fig. 16 - Our textured projectile
Now our textured face should be considerably brighter, and look like we want it to. Now we need to duplicate the texturing steps for the other two planes (One difference; we can press the browse button beside the 'Load' button in the image window and select our texture from the pull down list), and when they are all textured, we must select them all, and then press + to join them into one mesh. Rename this object 'Fireball'.

Setting up the our Game
Fig. 17 - The 'Fireball' Realtime settings
Fig. 17 - The 'Fireball' Realtime settings
We need to set up our projectile for game play, which means we need to give it a constant velocity, so that when the 'Guns' use an 'Add-Object' actuator to add the fireball into the game environment, the fireball will fly forward like a bullet. Let's go to the Realtime buttons (), and select the projectile ('Fireball'). Now let's make it an 'Actor', and 'Dynamic', and then we'll add a sensor controller and Actuator group (a SCAG ;) and leave the Sensor at 'Always', and the Controller at 'And'. In the actuator we'll set the Y-Force at 6.0 so it travels forward, and give it a Y-Torque of .60 to give it a little spin. Add another sensor Controller and actuator and set the Sensor type to 'Collision', and the Actuator type to 'Edit Object'. Click the button that says 'Add Object', and select 'End Object' from the drop-down menu. This will make the fireball disappear when it collides with something. Your 'Fireball' setup should look like Fig. 17.

Now we select the 'RightGun' Empty, and in the Realtime buttons add a sensor Controller and Actuator. We set the Sensor type to 'Keyboard', and click in the 'Key' field and press to make this Sensor detect a key press from the key. Change the Actuator type to 'Edit Object' and leave the setting to 'Add Object'. Type in the name of our projectile ('Fireball') in the 'OB:' field, and set the 'Time' field (the life of the added object) to 200.
Add another sensor and link it to the same Controller as the first Sensor. To the left of the blue button that says 'f:0' (this stands for Frequency), there is a small blue button like in Fig. 18. When you activate this pulse button, it controls how often something is checked. So linking it to the first Controller makes it check to see if the key has been pressed over and over again, in the frequency that you specify (In 1/50ths of a second). This makes the gun work like a automatic weapon, firing rapidly.

Fig. 18 - The Pulse and Pulse Frequency buttons
Fig. 18 - The Pulse and Pulse Frequency buttons
Fig. 19 - The 'RightGun' Empty realtime settings
Fig. 19 - The 'RightGun' Empty realtime settings
Only a couple of more things to be done: Let's go to the WorldButtons, , and add a new world. Set the 'Gravity' slider to '0', and click the 'Mist' button to turn fog on. Under the 'Mist' button, set the NumButton that says 'Di:0.00' to 70.00. This controls how far away the fog is (visibility).

Now if we switch to Camera view and hit to Play the game, you'll probably notice that everything looks PINK! Awww, rats! Not to worry, folks! We can either assign a texture to the sector cube, or, thanks to tHe IcemAn's great tutorial (located here:http://members.yourlink.net/gruff) on getting rid of the PINK!, we can color it. Once that is done, play the game and press the key to shoot our fireballs. Looks pretty cool, eh?
To finish up....
Now, I know that the game we have made is pretty lame; I mean, all you can do is shoot our cool fireballs. But now the rest is up to you. If you want to move around, add an array of sensors controllers and Actuators to the 'Life' Empty for the movements. All that I've done is given you the ability to pretty much do any kind of magic, laser, fire and light effect you can dream up. You just have to use your imagination. Why not do animated textures on your projectiles? tHe IcemAn also has a tutorial on animated textures here: http://members.yourlink.net/gruff Using his method, you can make renderings of a particle animation, and use them for torch, fireballs, explosions, etc. Or how about using rotating spheres with a semi-transparent smoke texture to simulate smoke? Just use your imagination! I've also included an example file in the archive below called FlareCreator.blend that is a setup to make Targa images of flares. Just tweak the material settings and render! This is how I made some of the targa textures.

Download:
 examples.zip
The finished product!
The finished product!
And as a bonus, below is a set of different Targa textures that I have made for use in games. I hope that you enjoyed this tutorial!

Download:
 textures.zip