Porting Photoshop blend modes to cocos2d

Published on 5/06/2012

It’s fairly common for game developers to work with graphical artists who make use of Photoshop for mockups and artwork. Occasionally it’s necessary to mimic one or more of Photoshop’s blend modes to accomplish a visual effect. Thankfully, as part of cocos2d’s CCBlendProtocol we can accomplish this using the setBlendFunc method.

The setBlendFunc acts as a wrapper around OpenGL ES’ glBlendFunc and accepts two GLenum’s as parameters, like so:

GLenum src = GL_ONE;
GLenum dst = GL_ONE;
[sprite setBlendFunc:(ccBlendFunc){src, dst}];

There are already a number of great resources available for experimenting with OpenGL blend modes, but for ease of reference I’ve included a table of the most commonly used Photoshop blend modes and their setBlendFunc equivalents:

Photoshop Blendmode SRC DST
Blend GL_SRC_ALPHA GL_ONE_MINUS_SRC_ALPHA
Multiply GL_DST_COLOR GL_ONE_MINUS_SRC_ALPHA
Screen GL_ONE_MINUS_DST_COLOR GL_ONE
Linear Dodge GL_ONE GL_ONE

If you’ve experimented with other Photoshop blend modes using cocos2d’s setBlendFunc and have corrections or additions you’d like to make to the above table, please get in touch on Twitter @nialgiacomelli