Microsoft Surface Animation - The making of “Infinite Possibilities”

Posted on November 21, 2007
Filed Under Animation, Team Members, Uncategorized | 2 Comments


We thought we’d give a glimpse behind the scenes of the making of the Surface video. The video serves as a showcase piece for the Silverlight video players we post and this spot introduces you to the gurus who create the magic.

Client: Internal
Title:  “Infinite Possibilities”
Artists:
Aaron Mustamaa
    Concept / Storyboarding / Direction / Compositing / SFX
John Einselen
    3D Environment Animation Pipeline / Matte Painting / Compositing
Anthony Denha
    Additional Animation / Production Assistance
Victor Fohrme
    3D Character Animation Pipeline

Creative Direction:  “It’s all about placement.”

We knew ahead of time that the virtual environment we chose to create for Infinite Possibilities would have to fully acknowledge the places where the Microsoft Surface would be positioned in the real world.  Since the Surface computer is all about the next generation of a user’s interaction with the environment, we began by researching the Surface computer’s interaction in culture.    From our observations, the places where you might see an actual surface computer in action tended to be bars, restaurants, hotel lobbies, casinos, and the like, which are all places that are usually very loud and chaotic.  When it came time to choosing an environment, we decided to produce a concept that would be a departure from the chaotic nightlife and entertainment realm, into a pure organic environment: one that was quiet, serene, and even Zen.   We felt this would provide a foil to the typical user experience, and expand the possibilities of the Surface’s commercial placement and application development.   The simple water ripple application that comes installed on the surface computer led us to the idea of a waterfall, then the natural environment, and finally, to the overall narrative and direction.  It was kind of like reverse-engineering.   Ironically, somewhere along in production, we realized that the Surface’s logo happened to contain the infinity symbol, so we used this concept to develop the title, Infinite Possibilities, as well as the final logo animation.  In the end, our creative goal was to visually demonstrate that this is only the beginning of the Surface’s infinite possibilities and power.
Aaron Mustamaa
Motion Graphics Designer, Vectorform

Silverlight Viewports

Posted on November 14, 2007
Filed Under 1.1 Alpha, Components, Games, User Interface | Leave a Comment

One thing you usually recognize about web-based games is that they generally have a fixed view. With a fixed view, your game world matches the web control 1:1. What if you want the game to take place in a larger space, like an entire world, or a galaxy. In the game world, you’d create a viewport or a camera that only displays a portion of the world. Unfortunately, Silverlight doesn’t have native support for viewports into a larger space. We decided to make it.

CanvasViewport Class Diagram 

Source: CanvasViewport C# class 

The CanvasViewport is a simple plugin class that can be used to create a viewport on any Canvas (it doesn’t have to be the main page). It works by manipulating the Canvas’ RenderTransform in response to programmed parameters.

Usage:
// Create a viewport on this canvas.
CanvasViewport _Viewport = new CanvasViewport(this);

// Create a viewport that is 320x240 in logical (original canvas) units
_Viewport.Size = new Size(320, 240);

// Set the center of this viewport to 500, 800 on the canvas
_Viewport.Center = new Point(500, 800);

// In a game, you can have the viewport track a player like this:
void Update()
{
  _Player.Update();
  _Viewport.Center = _Player.Position;
}
An added advantage to using viewports in XAML is that since XAML graphics are all vector based, zooming in and out dosen’t have all of the pixelation problems that working with raster graphics has. Here’s the orignal game without the viewport.
 Shooter without viewport 

Here’s the game with a smaller viewport into the original world. (Notice that the UI and the Reticle doesn’t change size).
Zoomed in view of the shooter

Have fun with your viewports.

Breakout - Silverlight Style

Posted on November 8, 2007
Filed Under 1.1 Alpha, Games, Uncategorized | 1 Comment

A full breakout clone with source. The demo features 9 levels loaded from embedded XML. There is also an “attract” mode which makes for a nice screen saver.

We also wrote a level editor in WPF because it was so similar to Silverlight. The editor can be released upon request.

Silverlight 1.1 - C#

Example, Source

Silverlight Pong - 1.1 C#

Posted on November 1, 2007
Filed Under 1.1 Alpha, Games | 2 Comments


We wanted to start exploring some game development with Silverlight so we started where one should start… good ol’ Pong! Then with the functionality in place we couldn’t help but skin it with some nice imagery of a beat-up ping pong table. Enjoy!

Example, Source

This is our first 1.1 example and we plan on doing more as time allows so check back often.

and for the Javscript folks, here’s the 1.0 version…

Example, Source

Recently


Categories


Archives