GAME JOBS
Contents
Tutorial: Simple, High-Performance Particles for Mobile
 
 
Printer-Friendly VersionPrinter-Friendly Version
 
Latest Jobs
spacer View All     Post a Job     RSS spacer
 
June 6, 2013
 
Red Storm Entertainment, a Ubisoft Studio
Assistant/Associate Producer
 
Wargaming.net
Build Engineer
 
Gameloft - New York
Programmer
 
Wargaming.net
Build Engineer
 
Virdyne Technologies
Unity Programmer
 
Wargaming.net
Dev-Ops Engineer
spacer
Latest Blogs
spacer View All     Post     RSS spacer
 
June 6, 2013
 
Free to Play: A Call for Games Lacking Challenge
 
Cracking the Touchscreen Code [1]
 
10 Business Law and Tax Law Steps to Improve the Chance of Crowdfunding Success
 
Deep Plaid Games, one year later
 
The Competition of Sportsmanship in Online Games
spacer
About
spacer Editor-In-Chief:
Kris Graft
Blog Director:
Christian Nutt
Senior Contributing Editor:
Brandon Sheffield
News Editors:
Mike Rose, Kris Ligman
Editors-At-Large:
Leigh Alexander, Chris Morris
Advertising:
Jennifer Sulik
Recruitment:
Gina Gross
Education:
Gillian Crowley
 
Contact Gamasutra
 
Report a Problem
 
Submit News
 
Comment Guidelines
 
Blogging Guidelines
Sponsor
Features
  Tutorial: Simple, High-Performance Particles for Mobile
by Itay Duvdevani [Production, Interview, Console/PC]
4 comments Share on Twitter Share on Facebook RSS
 
 
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
 
Top Stories

image
Keeping the simulation dream alive
image
Q&A: With Neverwinter inbound, Cryptic founds Seattle studio
image
A 15-year-old critique of the game industry that's still relevant today
image
Advanced audio streaming in Unity
Comments

Nick Ralabate
profile image
What exactly do you mean by each particle's ADD mask? I stared at the example image for a minute, and the edges look about the same softness to me.

Itay Duvdevani
profile image
This can be confusion - I'll try to explain better.

What I meant is that in the ignition stage we've softened the edged of the RGB channel not because we've premultiplied it with the alpha channel (which is all black) - but because we don't want our addition mask to be "sharp".

If we were to set the addition mask (RGB channel) to a single color, we would get a sharp transition on the flame's edge, instead of a soft one - this is different than the third (smoke) particle, which is premultiplied - in the ignition we want to "add less and less" around the edges while in the smoke we want normal occlusion blending.

Tom Hughes
profile image
Super interesting tutorial! I'm going to try it out as soon as I get home from work

Romain Guy
profile image
Just a quick note about Android: the behavior you ran into with premultiplied textures is because all bitmaps are always loaded premultiplied by the platform. It is definitely a problem for games, and not only for the reasons you mentioned here (if you use the 4 ARGB channels and need the RGB data to remain intact – say if you're storing normals for instance –). It's something I would like to fix at some point though. In the meantime, sorry about the inconvenience :)


none
 
Comment:
 




UBM Tech