dex_multiplatform
Dex – the road to multiplatform
02/21/2017
lebkoun
Another day at the office
04/25/2017
Show all

Art and visual development in Dex

artstyledex

Dex combines an RPG system with action combat in the style of arcade beat’em up games from the 80s. But what grabs eyes most of all is its unique artstyle, which was brought to the project by lead artist Prokop Smetana.

Dex_conceptA significant chunk of inspiration for the game came from the book Neuromancer by William Gibson, a founding work for many archetypes of the genre. Our game characters were created in a Pixel-art style, hand-drawn and animated frame-by-frame so that they could breathe life into the vast and detailed environments of the cyberpunk city. The character portraits appearing in the dialogue windows also helped to augment both personality and authenticity. The game’s cut-scenes, brought to the game by the incredibly talented Bogna Gawrońska, went a step further in representing the mood of the main story built around the main character Dex.

When designing early drafts of Dex as a character, we had the goal of creating a strong and highly-recognizable character with a clear link to cyberpunk. The most distinctive elements of Dex are her blue hair, neck plate and long noir-style coat. Her hair was the biggest challenge because we wanted to keep its natural appearance despite the unusual color.

special_suitsThe next step was Dex’s special suits, which began life as concept art in the very early stages of game development. However, these did not come into actual existence until the first “Extra suits” DLC was released. These prototypes of suits from big army corporations bestow on Dex special abilities such as invisibility or the power to deflect enemies’ bullets. For this reason, it needed to be immediately clear from the suits’ design which ability each of them conferred.

The animations of our lead character were created in Photoshop, where the drawings were cut into basic body parts and then assembled frame-by-frame until the final movement was created. Those frames were then cleaned up and drawn over where necessary to cover all the visible connection lines. This process was lengthy but it enabled beautiful and clean animations in the intended quality. From an initial 8 frames per second, we expanded into 16-18 FPS during development.

For the creation of the other characters from the world of Dex, we tried to achieve the best contrast and variety we could. You can meet a member of the gentry, a beggar soliciting credits or a soldier who will throw away his last credits for one more implant. The limited size of each animation frame prevented us from creating too many details – it was necessary to focus on the shapes of silhouettes. Not all characters in the game allowed for interaction – but all the characters with a role in the story, as well as merchants, were given their own well-drawn portrait. Every one of these character portraits was prepped for lip animation which had to be synchronized with dialogues.

19c65c97419919757899e6f30e53e091_originalOne of the most interesting part of the art development process was creating augmented reality and cyberspace. Here we could go full throttle with our use of neons and the result was everything just shining in contrast with the subtly drawn backgrounds. It was possible to let our imagination run riot and experiment with shapes, color and elements in cyberspace. But we had to keep everything recognizable despite the quick movements of the player sprite and the viruses attacking it. To be honest, the final form turned out better than original concepts suggested, and that shifted the overall gameplay up a notch in terms of experience.

The user interface underwent many iterations before it became precision-functional and matched the game’s mood. This means there are neon elements in the GUI combined with simple icons and shapes which together enhance the cyberpunk atmosphere. The most important of all was to keep a clear arrangement and consistency that would work simultaneously on various screen resolutions and aspect ratios. With the release of the game at the beginning of October 2015, we presented a completely reworked GUI which, for one thing, was necessary to adapt the game’s control on consoles but, for another, also heavily enhanced the intuitiveness of controls.

citylightThe main setting of the game, the city Harbor Prime, is divided into rich and luxurious districts – a dirty centre and poor slums freely fade into an industrial zone or collapse into a trash dump. At first glance, an ordinary avenue can hide an old contaminated factory below or the secret hideout of a street gang. The neon streets around the city centre are blinking with adverts that constantly vie for your attention and demonstrate just how ubiquitous the corporations are that drive the course of the entire system. On the flipside is the graffiti on the walls; expressions of ordinary inhabitants in the form of street art or shouts for some social or political cause. Also of interest are the two pieces of art from some of our Kickstarter backers, who chose a corresponding tier and had their art placed on the walls in the game.

sceneriesThe individual game environments were created as entire finished art pieces. Each wide-stretching background was sketched out from a concept which captured the mood of that particular location. The level design was also created alongside the environment itself – first there was a sketch drawn out and put to work into the engine and, once the scene was shown to work well, it was then filled up with graphics in greater detail. A so-called “lightmap” was also created above the scene – this is a layer which added lighting and atmosphere to take care of the complete impression you get from the environment. The scenes were put together using only a small amount of repeated assets so every part of the game is graphically unique.

scrapyard_planAll the visual elements of the game were primarily created in Photoshop and everything had to be exported and converted into the game engine. In the case of scenes it was necessary to upload every layer individually one by one, to add the physics and collision detection, to place in generic objects like door, buttons and automats and to add dynamic effects for fire and smoke. Only then was a finished scene ready for implementation of game content which completes the scene in the form you know it.