Vector to Sprite
Spellbroken – Sage Dragon LLC : Apple iPhone, iPad
Art Director, Sprite & UI Artist
Converting High-res Vectors to Pixel Sprites.
Challenges and tasks:
- Downscaling high resolution vector artwork
- Adding pixel perfect details resulting from downscale loss
- Adding depth with highlights and shadows
- Create crisp pixel perfect upscaled versions for retina displays
- Adding additional detail to retina versions
- Painting hexagonal tiles in both standard and retina display
- Creating a complete user interface
Upscaling for Retina
Click to enlarge.
Downscaling for Pixel Perfect
Sage Dragon LLC had hired a vector artist to create high resolution vector characters for their iPhone game. Unfortunately, when it came time to bring this artwork into the game, they discovered that a lot of detail gets lost using regular scaling techniques.
My task was to take these vector artworks, scale them down properly, and manually refine them to bring out lost detail. I also re-lit the characters bringing more depth into their sprite form.
Using the standard sprites on a retina display brought its own issues. The iPhone would resample the sprites to match the higher resolution, resulting in blurry sprites. Turning resampling off resulted in less than perfect upscaling. My secondary task was to create higher resolution sprites with addeded detail so that the sprites would look crisp and sharp on retina displays.
Making It Pretty
In addition to the pixel work, I also painted over the title screen.
I created depth through shading and lighting, while maintaining the overall style of the original. It was important that the original artwork’s shapes and lines were retained so that there would be a more consistent style.
The female goddess on the right needed to be completely redone, as the original didn’t look good.
I also redid the logo with some styling treatment and paint work.
UI Design
Spellbroken is a turn-based strategy game involving characters of various races, stats, and abilities.
The client wanted a design that made it look like a board game, with cards, tokens, and bevels.
I started by creating sketch mock-ups of what these design elements could potentially look like. These ranged from border art, to dialog boxes, icons and buttons.
Spellbroken Expansion Work
For Spellbroken's expansion content, I was tasked to create all new high resolution illustrations, and their sprite equivalents.
For this process, I started with some concept art based on the descriptions the client required. The challenge was to create unique and interesting characters while following the stylings of the original set of artwork.
From there, the art pipeline was the same - create sprites for standard resolution iPhone screens, and sprites for retina resolution iPhone screens.
In total, there were 18 additional characters for this expansion, almost a 50% addition to the base game.
Besides the added characters, an additional 11 terrain tiles were created. These were painted from higher resolution images, downscaled, and then touched up.
Concept Sketches (click to enlarge)
Standard and Retina sprites (click to enlarge)
Detailed Profile Images (click to enlarge)
Expansion character sprites and terrain tiles (click to enlarge)
Advertisements
One of the major advantages of hiring an artist who is well versed in multiple areas is the speed and familiarity of creating art in those areas.
The final task my client needed was different advertisement layouts for Spellbroken using various elements to highlight the game.
Since I was already familiar with the content and the source art files, and also have background with layouts, the turn-around time for these were fast and on-demand.
