Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Gamasutra: The Art & Business of Making Gamesspacer
Tutorial: Simple, High-Performance Particles for Mobile
View All     RSS
July 29, 2021
arrowPress Releases
July 29, 2021
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

Square Enix Co., Ltd.
Square Enix Co., Ltd. — Tokyo, Japan

Experienced Game Developer
Fred Rogers Productions
Fred Rogers Productions — Pittsburgh, Pennsylvania, United States

Digital Production Coordinator
Playco — Remote, Remote, Remote

Director of Product
Aardman Animations Ltd
Aardman Animations Ltd — Bristol , England, United Kingdom

Technical Animator (Games)

Loading Comments

loader image