LensFlare Studio

How a 2D game engine came to power a professional photo editor

LensFlare Studio is a brand new photo editor for adding optical effects on your Mac. With over 100 effects, you can choose from anamorphic lens flares, lighting effects, sci-fi flares, sunlight glare, and more.  The heart of LensFlare Studio is the Optics Engine running on cocos2d, the powerful animation framework based on OpenGL.

Lens flares have really become an important part of the visual language for design, adding glares and imperfections to overly perfect shots and computer animation. Lens flares add a sense of depth and brightness to an otherwise flat looking image. I’ll be the first to admit that they are often overused and can over-power an image. Nevertheless, having a powerful tool for creating optical effects is a must for any designer or photographer.

LensFlare Studio is great for:

• Graphics Design
• Logos and Titles
• Anamorphic Flares
• Special Effects

Isn’t cocos2d a Game Engine?

Who would have thought the leading game framework would be used for a photo editor? When I started the original app, LensFlare for iOS, I knew I needed a fast and easy framework that could handle full animation. For my photo app idea, I wasn’t interested in making static overlays and filters, but a fully interactive app where you can move, rotate, and scale optical elements effortlessly. This app would also need to render numerous image layers without any slowdown. Effective lens flares are composed of many light components that move, rotate, and scale independently relative to the light source.

It turns out, cocos2d is the perfect framework for this. It was super easy to get started with, yet has proven to be capable of high quality effects and rendering.

 

Optics Engine

The heart of my apps is the Optics Engine. This handles all of the display and rendering duties to realize the optical effects. Each lens flare effect is a collection of images contained in classes derived from the CCSprite base image class. Cocos2d framework handles large numbers of on screen images very efficiently through the use of texture caching. My custom CCSprite image classes handle the different types of optical effects and model the physical characteristics of light and glass interaction. For example, the EdgeFlare class only shows itself when the light source is near the edge of the screen, thus modeling light hitting the edge of a physical camera lens and glaring across the the frame.

 

LensFlare for iOS

I first developed the Optics Engine as the foundation of LensFlare for iOS.
Over the past 2 years I’ve expanded this into two more apps; LensLight and AlienSky, which add more content and features while using the same Optics Engine.

These are iOS apps designed for adding optical effects to your iPhone photos. They have minimal UI and are mostly gesture based. After placing an effect on your photo, you can move, rotate, and scale it by touch. These apps are universal and work on iPads as well. Making them universal was very easy to do with the cocos2d framework which elegantly handles screen resolution internally.

 

LensFlare Studio for Mac

When it came time to consider making a Mac app, I realized this would need a much richer user interface. My solution was to simply treat my cocos2d Optics Engine as a view surrounded by an AppKit UI. I was essentially dropping my iOS LensFlare app into an OpenGL view on the screen and building a Mac interface around that. I’m reusing the entire Optics Engine in the Mac app. The Mac and iOS apps share many of the same effects using the same code. The cocos2d framework has had no problems scaling up to the much higher requirements of a Mac app. It efficiently handles the huge image assets and artwork I use for the Mac version.

Here’s a screenshot of my Xcode environment. The big OpenGL view completely encapsulates the Optics Engine, which is controlled by the surrounding interface. The Optics Engine nicely scales up to any Mac screen size, whereas the surrounding UI stays the same. This is another example of how powerful the cocos2d framework is. From the ground up, it’s designed to be scalable for any screen size or pixel density.



Mac Process Threading

One thing to be aware of when moving from iOS to Mac is threading. When accessing the OpenGL view and cocos2d code, you have to make sure you’re on the same thread as the CCDirector instance. Some of the built in functions like document open run on different threads, so I had to make sure the calls from the document open code use the right thread to access the Optics Engine.

Conclusion

I hope this overview of LensFlare Studio helps sparks some ideas of your own. It’s relatively easy to take a pure cocos2d iOS app and drop it into a view for a more feature rich Mac app.

 

Cocos2d is a powerful framework and the cocos2d community is an important part of the equation. I want to thank Riq and the cocos2d community for this awesome site!

I’d love to answer any questions and hear your comments. Thanks for reading!
- James Grote

WEBSITE
http://LensFlareStudioApp.com

FACEBOOK
You can find me on Facebook. I post updates and previews of new effects I’m working on.
https://www.facebook.com/LensFlareStudio

VIDEO