BombPong: In-Space 3D UI

Creating a unique UI approach for a new user experiance

When we, my artist and I, started on the UI it was nothing more than a 2D old school buttons, labels with a space background. This was pretty good at the time due to adding some cool flash texture animations when selecting a button. I have a screenshot below of the first prototype we did.

After trying this UI out for a few days, my artist had an awesome idea to completely redo the damn thing and not just that, he wanted to take it a completely different direction. His idea was a fully 3D UI! It was awesome, the second I saw his rough 3ds max render I was hooked on the concept. I started planning the approach I needed to take to implement this new system, not only that, I had to have it be editable through the editor so that my artist doesn’t even have to touch any code to put everything together. I broke everything down into a hierarchy of MenuObjects each of which has a single Parent and any number of Children MenuObjects. I also made it so each MenuObject depends on the transforms of its Parent, by using position and rotation offsets. This allowed nice movement from parent to child. Next up was the ability to script the UI’s movement from State to State and for this I took a keyframe approach where each keyframe holds the position offset, the rotation offset, the duration to interpolate from current keyframe to this one and lastly the type of interpolation to use. Now we had MenuObjects tied with hierarchy dependency along with States, like Shown, Hidden, Over, …, with each state having as many keyframes as needed to express its movement within its State and lastly we have grouping which allows us to group MenuObjects by category for easy switching from group to group like when clicking Options, all the MenuObjects in the Main group switch to the Hidden state and all the MenuObjects in the Options group are put into the Shown state. All this is done with no code access what so ever.

The result of this can be seen in action right here, though it is a work-in-progress video (click to view the video):

Thank you everyone who fallow my blog, I really appreciate it and hope you keep doing so. Thank you and as always please comment if you have any questions or comments.

Leave a comment

Please login to leave a comment. Optional login below.

Twitter Feed

No tweets found.