Nerd Business

26
Jul
2011

Create visually stunning UI with Scaleform. For desktop applications?

Autodesk Scaleform logo

I've always been a gamer. Yet my career path has led me not to games - but rather, to retail & enterprise software.

My vision is to create software to help individuals and teams save, grow and interact with their ideas, knowledge, and digital assets.
For game developers or any creative professional.

I have designed a slick looking interface for an unreleased/undeveloped software program that helps to fulfill this vision.

Now, as I transition from design to development, I face the challenge; the dilemma of how to approach programming the UI.

Cross platform GUI development has always been a challenging area. To date, there is no 'silver bullet' GUI toolkit. The latest trend seems to be a merger of traditional desktop development and a web app approach for the UI (HTML/CSS/JavaScript).

Yet I've noticed another trend in whereby game UI and desktop software UI programming approaches are merging. Scaleform (and Flash) is the current epitome of this trend.

What Scaleform does

Scaleform, recently acquired by Autodesk, helps game developers include visually impressive, smooth animated interfaces in their games. Chances are you've already played a game that uses a Scaleform powered interface. StarCraft, Crysis, Mass Effect - the list goes on and on.

 

Scaleform is basically a hardware accelerated Adobe Flash render engine. The engine converts Flash content to 3D geometry, so it can be rendered with hardware.

Scaleform itself is middleware - so all of the creative work is done using traditional art tools like Photoshop, Illustrator, or even After Effects and Final Cut Pro. When you have it designed, everything is brought together in Adobe Flash Professional - where you add interactivity. When complete - the Flash is exported to your project (the game engine integrated with Scaleform) where you can test the results in your game.

Hacking Scaleform to do desktop applications

Yet there is still a way to go. Scaleform was designed for games (and most recently, mobile apps). I have yet to see a desktop retail software program leverage Scaleform and OpenGL to render its interface. Though the idea seems practical. To ditch the platform specific GUI methodology in traditional desktop software development - and instead - focus on creating visually pleasing, smoothly animated UI with tools like Flash and OpenGL.

So my big question: is it possible to initialize and ‘unlock' OpenGL and a Scaleform powered interface in a lightweight container window? One that would perform similar to a traditional desktop application; and run seamlessly alongside other desktop apps like the web browser or text editor?

While there is no example today of this exact configuration, there are examples of desktop programs that use real time OpenGL. In a 3D graphics editor, such as in Maya or 3D Studio Max, you have a typical desktop application window. Uses a standard GUI for all of the program's functions. And a live OpenGL workspace for manipulating the graphics in 3D space.

So why not the other way around? Why not initialize a 100% OpenGL window and run the GUI inside that? Effectively unlocking the ability to create a sexy UI with Flash and have it rendered and run beautifully with the help of Scaleform. Without having to agonize over the limitations and arduous process of developing native GUI for Windows, Mac, and Linux.

Imagine, having something as polished and interactive as the StarCraft 2 Battle.net UI - for your own desktop application!

I contacted (Tweeted) Scaleform to see if they would confirm if it's possible.

Scaleform discussion

So there you have it. Scaleform says it is possible. Though I won't be convinced until I see it in practice. While I don't doubt you could create an impressive Scaleform powered interface for your 'hybrid OpenGL desktop app' - it may be a significant challenge to get it behaving like a native desktop application. A challenge worthy of experiment ;)