May 22nd, 2013 by Aaron Artessa
User: “Something doesn’t look right, it’s just not working”.
Artist: “What’s bugging you?”
User: “ I don’t know, I can’t put my finger on it”.
Artist: Look calm like the pro you are but secretly swear on the inside at the clueless situation.
This conversation is pretty familiar amongst artists with producers, testers and creative directors. Sometimes you simply can’t put your finger on the problem, but like the Matrix, you know it’s there. This tends to be where the bottleneck in the art pipeline happens and proverbial dollar signs start ticking through the producer’s eyes.
On my third visit to GDC, Vicarious Vision gave a talk about their process on developing environments for Skylanders offering an interesting solution to this problem utilizing custom tools working directly in their engine.
If you haven’t played Skylanders before, I’ll tell you that the environments are gorgeous, jaw-dropping, hand-painted scenes inviting you into a colorful story begging to be explored. Even the production environments feel polished and ready to ship.
Even the most accomplished of artists still find themselves scratching their heads. During testing, the team at Vicarious Visions discovered that the audience didn’t know what to do in some puzzle areas. The conversation above ensued. The answer: Visual Debugging.
Having your puzzles tied into your environment is a tricky balance- on one hand you want to cue the user so that they that can intuitively interact with the puzzle elements. On the other hand, you don’t want the visual cue to be so overt that the puzzle feels out of place. To achieve this balance, Vicarious Visions has a series of tools integrated into their engine to help debug what people are seeing behind the scenes in real time.
On the basic level, they could utilize filters to display one of three things: Chromadepth, Edge lines and Contrast. Using a Chromadepth they were able to identify color variation and hot spots in the scene, helping them see where the eye was being drawn and if the focal points were being lost in a mass of detail. Contrast works in a similar fashion except without chroma variance.
Another option Vicarious Visions employs is The Edge line tool. If you are familiar with Photoshop, this tool gives an effect similar to the Glowing Edges filter, except in black and white. This helps the artist identify areas of visual clutter due to various elements creating hard edges either due to specular detailing, contrasty diffuse textures, or harsh lighting.
These tools aren’t exactly impossible to mimic. As I said before, the edges can easily be simulated, as can chromadepth. That said, having it a part of your engine and working in real time- the benefits to this type of workflow are incalculable.