Iteration and Polish

A common saying in creative work is “the last 10% takes 90% of the time.” This holds especially true when building something in Unity. I’m collaborating with a student at Cornish College of the Arts to build her an alternative interface for a video browsing service like Netflix. Her goal in designing this is to build something that would feel at home on the Wii U: use Miis (or a cartoony model from the asset store) to help guide selection, and put the selection into a 3D space to match being on a gaming platform. The interactive part that I have been building in Netflix is a small part of the overall project, and exists as a proof of concept for a particular point in her design flow.

The following four screenshots shows some iteration on this project over the last week or so. I spent more time on this between the first screenshot and the last here, than I had done with all of the work leading up to the first screenshot. All of this change was also directly driven by the designer. As the engineer, I could have easily been “done” with the first one here. However, the designer had a very clear vision of what she wanted, and worked with me to get to the current state of the project. We still have a few more things to do with this, but this is how the project stands now.

Image

This is a “good enough” moment for me as the engineer. It technically does what it is supposed to. However the designer rightly pointed out a bunch of polish that needed to be done. She didn’t like the orthographic view of the 3D content, she didn’t like the spacing of the movies, and she didn’t like how the genres look.

Image

I spent some time tweaking camera settings and angles. I changed the scene to use two cameras: an orthographic for the 2D UI in the background, and a perspective camera for the 3D content. The movie genres were accidentally disabled for this build. The designer’s feedback was that this was on the right track, but it needed more work. The movies were packed in too tight together. She wanted the genres to be on the sphere, between each row. The character was way too big. The sphere needed more segments: it was either still 16 rows here, or I might have bumped it up to 24, but it needed to be at 36.

Image

 

The sphere now has much wider spacing between each row. The genre titles are back. The camera angle has been adjusted a bit. The feedback here was: The sphere was showing too many rows at once, making it hard to parse. The character’s texture was distracting and out of place. We were using it because it was a free cartoony looking character from the asset store, the closest looking thing we could get to a Mii. The kerning on the font for the genres was very poor. The selected row, and selected movie pop up too high.

Image

I switched the font to a font the designer sent to me. I switched from using Unity’s built in text renderer to 2D Toolkit’s text renderer. I greatly changed the camera angle, to reduce the number of rows shown. The character was given a black and white cel shaded look to make it less distracting. A very slight fog was applied, to make the backs of the movies become a slightly darker red, to give the sphere a better feeling of depth. The height the rows and genres lift up when the player is standing on them was greatly reduced.

This is where we have stopped for now. There is still some more polish to be done, but the designer wants to get some feedback from 3rd parties, such as her teachers, next.

 

Advertisements
About

Joseph Stankowicz is a software engineer who has worked in the video games industry for over eight years. The last two years have had a heavy focus on Unity development, where he helped ship over eleven titles to iOS and Android platforms. He also is really excited about 3D printing, and keeps his Solidoodle 3 printing out stuff as often as possible. You can view his LinkedIn profile here http://www.linkedin.com/pub/joseph-stankowicz/60/294/420

Tagged with:
Posted in Unity3D

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: