Gamasutra: The Art & Business of Making Gamesspacer
Tutorial: Simple, High-Performance Particles for Mobile
View All     RSS
March 23, 2019
arrowPress Releases
March 23, 2019
Games Press
View All     RSS







If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 

Tutorial: Simple, High-Performance Particles for Mobile


May 20, 2013 Article Start Previous Page 3 of 4 Next
 

In the popular editing programs premultiplying a texture is not straightforward. For example, this is what you'd have to do to convert a non-multiplied image to premultiplied image in The GIMP:

  • Open the image you wish to pre-multiply (make sure it is flattened)
  • Right-click drawing layer -> Add Layer Mask…
  • Choose: Transfer layer's alpha channel
  • Click the layer mask
  • Select all and copy
  • Choose the drawing layer and paste
  • Click the New Layer button to make the floating layer a new layer. You should now see the alpha channel on top of the drawing
  • Change the alpha layer mode to Multiply
  • Merge the alpha layer into the drawing layer (Right-click -> Merge down)
  • You now have a pre-multiplied image. Export and use

At this stage, it is important to note two issues we've encountered specifically on Android:

  • BitmapFactory.decodeBitmap does not handle PNG transparency well enough for our needs. Transparent pixel's RGB is overridden with black, and low alpha values aren't perfectly loaded. To utilize to the full extent the method suggested here, you will have to use a better decoder (a few are available in appropriate licensing and quality)
  • As I've mentioned before, graphic editing application do not usually premultiply alpha. I assume that for that reason the implementers of GLUtils.texImage2D have chosen to premultiply all textures loaded using this function before passing it to OpenGL. Just remember that if your texture is already premultiplied, you need to use glTexImage2D directly. This is unfortunate, as combining this behavior with the one recommended by the OpenGL docs causes double-alpha multiplication, which is characterized by ugly dark halos around objects.

Let's combine everything for an effect. We will create a very basic, simple and quick fire-burst effect, like the one you'll expect to see in the rocket's exhaust or an oil rig. Our fire will have three stages: Ignition, flame and smoke. The ignition happens at the base of the fire, and it's very bright -- it illuminates its surrounding and it's almost white in color. The flame is the fire after it's detached from the fuel, and is yellow-orange in color. It still provides some illumination, but not like the ignition. The last part is the smoke and soot -- It is grey or black and blocks what's behind it until it disappears.

Here are the three stages in our particle's lifecycle: (zoom set to 300%).

(Please note that for demonstration purpose I only listed the key frames in our particle's animation. These key frames should be interpolated to create smoother particle animation.) 


Article Start Previous Page 3 of 4 Next

Related Jobs

Remedy Entertainment
Remedy Entertainment — Espoo, Finland
[03.22.19]

Technical Producer
Embodied Inc.
Embodied Inc. — Pasadena, California, United States
[03.21.19]

Lead Quality Assurance Tester
DMG Entertainment
DMG Entertainment — Beverly Hills, California, United States
[03.21.19]

Technical Manager
Game Mechanic Studios
Game Mechanic Studios — North Hollywood, California, United States
[03.21.19]

Community Manager





Loading Comments

loader image