Small Project – Video Selection Interface

I’m working with a design student at the Cornish College of the Arts on some projects. When I work solo on projects, I usually work directionless and want to move on to a new project constantly. Working with someone who gives me a concrete design to build towards works much better for me, and I actually make meaningful progress. My default solution for anything is “build it in Unity” so all of my help ends up along that path. Unity is a great choice for small projects because it can export to browser as well as export to an Android device super easy.

The project I was helping her with today was a theoretical video selection interface for a service like Netflix. Most of the project was her work, wireframes, concept art, and mockups. However, she had one piece of complexity in her project she was struggling to show off in 2D form. She wanted the movie selection to take place on a sphere, with rows of movies along the outside of the sphere. I offered to throw something together really quick in Unity to help prove out her idea.

I’m going to start with the demo of the project, and then work through what I did to achieve it. Use W A S D keys to rotate the sphere.

https://dl.dropboxusercontent.com/u/39582011/HeatherNetlixBuild/HeatherNetlixBuild.html

Image

First, I created a sphere with 16 subdivisions in Blender. Next, I deleted all faces except for one slice of the sphere. Finally, I setup UVs by selecting the topmost quad and used “follow active quads”. I don’t know if this was the best way to setup UVs, I’m not an artist, but it accomplished what I needed it to, each quad was effectively the full square texture. For the texture, I opened an image editing tool and loosely pasted in five movie posters next to each other. I did this twice to get enough visual variety to show the basic idea.

Image

After creating a sphere slice, I then constructed a sphere of these slices in Unity. The slice itself was quick to setup with a material, I just had to set the texture to tile along the X axis at 0.2, which stretches out the texture 5 times along the X axis, getting the movie posters to the desired size on the sphere. I copied my sphere slice game object 16 times, rotating it 22.5 degrees on the Y axis each time. This gave me a complete sphere. I included the Y angle of the slice in its name, so I could look these up in code later. Next, I created two parents for these slices. The grandparent I was able to use to physically position the sphere relative to the camera. The parent is used to really easily apply a local rotation along the Y axis.

The final step for creating this demo was to write a couple lines of code to simulate the movie selection process. The Y axis was really easy, I just rotated the parent object’s Y axis based on Y axis input. The X axis was just a little more complicated. During the Start of this script, I had cached the slices with this code:

for(int i = 0; i < totalSlices; i++)
{
    string sliceName = string.Format(“SphereSlice{0:F1}”,i*sliceSize);
    slices[i] = GameObject.Find(sliceName);
}

To figure out which row to rotate, I need to figure out the active slice of the sphere. This is accomplished by taking the Y rotation of the parent, dividing by the slice size, and converting to an integer to get a number value between 0 and 15. I then offset this by a few slices to line up to where I had placed the character visually. I was then able to use this to look up the slice in the cached list, and adjust the renderer’s material’s main texture offset for the slice based on the horizontal axis input.

Once this was all complete, I was able to export this demo: https://dl.dropboxusercontent.com/u/39582011/HeatherNetlixBuild/HeatherNetlixBuild.html

The designer was happy with the progress, and I’ll make any final adjustments necessary. I imagine she might want some some text hovering over each row describing that row’s genre.

 

 

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 Uncategorized

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: