Last week at the Windows Phone Mango event, Microsoft showed off a fantastic virtual check-in demo we helped develop for Microsoft and British Airways. The demo couples a traditional UI for ticket confirmation / flight details with an interactive 3D world for seat selection.

The app was demoed live by Derek Snyder (senior product manager in Microsoft’s Windows Phone division), and has been featured on a number of media sites.

The 3D world is of course powered by the SunBurn Game Engine, and features its beautiful lighting and rendering as well as full Silverlight integration, collision detection for seat selection, and more. More importantly, using SunBurn allowed us to develop the entire 3D demo from scratch in only two days.

The demo also takes advantage of the Windows Phone’s built-in gestures like flicking, tapping, and dragging, which (along with SunBurn) meant we did not have to worry about input handling.

Overall working on the demo was amazing, and a lot of fun. As a bonus the demo is a huge success – it’s catching a lot of media attention, and it sounds like Microsoft will be using it even more in the future.

“We are impressed with Synapse Gaming’s demo, rendered with all their superb lighting skill and know-how. It looks *amazing.*” – PAUL FOSTER, Developer Evangelist, Windows Phone at Microsoft

Creating the Demo

So how did we create the demo? The demo was surprisingly easy to build thanks to the SunBurn Game Engine and also Microsoft’s project ideas which were well defined and easy to conceptualize.

Microsoft’s core goals:

• Run the demo on Mango with full integration of the Silverlight UI
• Provide an interactive top-down 3D view of the plane for initial seat selection
• Provide a 1st person flythrough to the selected seat
• Allow selecting a different seat while in the 1st person perspective

Not bad, but we only had two days to build the entire 3D demo from the ground up.

Silverlight Integration

We were surprised how easy Silverlight integration was. While conceptually Silverlight’s 3D rendering and game management is very different than XNA, its design is exactly like the standard xaml page layout.

After checking out a lot of examples that showed how to modify a game to match the new Silverlight design, we instead opted to connect Silverlight to the existing XNA Game class, allowing both the new and old designs to work together.

We started with the default Silverlight Windows Phone 3D Graphics Application project template, added the default SunBurn Starter Kit Game.cs to the project, and wired up Silverlight to XNA with the following code (from the GamePage.xaml.cs):

public partial class GamePage : PhoneApplicationPage
{
    GameTimer timer;
    ContentManager content;

   // Demo classes.
   AbstractedGame abstractedGame;

   ...

   protected override void OnNavigatedTo(NavigationEventArgs e)
   {
       IGraphicsDeviceService graphics = SharedGraphicsDeviceManager.Current;
       graphics.GraphicsDevice.SetSharingMode(true);

       GameServiceContainer services = new GameServiceContainer();
       services.AddService(typeof(IGraphicsDeviceService), graphics);

       // Demo class.
       abstractedGame = new AbstractedGame(graphics, services, content);
       abstractedGame.LoadContent();

       timer.Start();

       base.OnNavigatedTo(e);
   }

   protected override void OnNavigatedFrom(NavigationEventArgs e)
   {
       timer.Stop();

       abstractedGame.UnloadContent();

       SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(false);

       base.OnNavigatedFrom(e);
   }

   private void OnUpdate(object sender, GameTimerEventArgs e)
   {
       GameTime gametime = new GameTime(e.TotalTime, e.ElapsedTime, e.IsRunningSlowly);
       abstractedGame.Update(gametime);
   }

   private void OnDraw(object sender, GameTimerEventArgs e)
   {
       GameTime gametime = new GameTime(e.TotalTime, e.ElapsedTime, e.IsRunningSlowly);
       abstractedGame.Draw(gametime);
    }
}

So why use this method? In addition to integrating Silverlight and XNA it has the added benefit of:

• Simpler integration – allows you to maintain the game’s existing XNA design
• Compatibility – allows you to run the same game on Windows, Xbox, and WP7 (pre-Mango)

Why is this helpful? We were able to run full Silverlight integration on the Mango developer tools – yet still test 3D performance on existing non-Mango phone hardware. It also allowed us to run the SunBurn editor on Windows for editing – and would have made an Xbox build easy. And all without any duplicate code.

Interactive Flythroughs

Because the airplane cabin was longer than the screen height we implemented a path system for the top-down camera to scroll along based on user interaction. The same system was also used for the 1st person flythrough, where the camera travels down the aisle to the selected seat.

For each path we added an scene group, which contained waypoints (scene entities) with sequential names (“waypoint_1”, “waypoint_2”, ...).

The paths were extracted on load and assigned to the camera object when the camera should follow the path (based on events like selection that occur during the demo).

When in the top-down view or after finishing the 1st person flythrough the user is given control of the camera and can use gestures to move around the cabin using:

• Flick – fly quickly through the cabin with smooth momentum
• Drag – move small distances with accuracy
• Tap – stop moving or select a seat

Seat Selection and Highlighting

Seat selection and highlighting was actually the easiest part of the project. While many of the seats were joined into a single object (to reduce draw calls during rendering), the open / selectable seats were kept separate to allow interacting with them individually.

To perform selection the demo simply casts a ray from the users touch location into the scene to determine which, if any, seats are hit. If a seat is hit it becomes the selected seat and the camera follows the 1st person path to the seat location.

For highlighting, the open and selected seats are rendered with an additional pass that tints the seat color. The effect we were looking for was achieved with a single BasicEffect with no texture assigned, the selection color in the DiffuseColor property, and using additive blending.

Optimization

The performance of the final demo was very smooth, however we did hit a few performance issues along the way – oddly all of them related to the number of vertices in the cabin model.

Unlike a more traditional gpu, phone hardware operates on very, very ,very little power, and unfortunately has similarly low performance. This makes minor issues like overdraw and vertex count much more noticeable than on Windows / Xbox.

After some heavy testing we determined a cabin model around 30K-40K polygons (~32K vertices) would keep the scene running smooth even at full resolution and with some overdraw (from the overlapping seats).

However the model still needed a second uniquely mapped uv channel for light mapping, and this would split vertices at the edge of light map uv islands, increasing the vertex count (and reducing performance).

As a test we tried SunBurn’s built-in unwrapper, which was surprisingly efficient considering the complexity of the model. While it only inflated the vertex count to around ~39K it was still more than we could allow in the scene.

Instead we manually unwrapped the second channel and were able add light mapping without affecting the vertex count and performance very much.

Polish

For some final polish we included a fade transition between the top-down and 1st person flythrough cameras.

The transition uses SunBurn’s post processing system and performs a simple transparency blend between views rendered to texture from the two cameras.

Get SunBurn!

If you’re a SunBurn developer make sure to check out the latest release (SunBurn 2.0.15) for new features like automatic unwrap, the audio system, and more.

And if you’re not get started today!

Let us know if you have any questions or comments!

-John Kabus

 

Other SunBurn 2.0 Blogs:

1. Announcing the SunBurn 2.0 Game Engine - free upgrade, new editions, and updated features
2. SunBurn 2.0 Collisions, Scenegraph, and Components - new collision system, components, and more
3. SunBurn 2.0 upgrade for our Torque customers - upgrade path for all of our previous TLK technology customers
4. SunBurn 2.0 goes Mobile on Windows Phone 7! - full Windows Phone 7 support, light mapping, and more
5. Holiday, Components, and more! - read about the new components and more
6. SunBurn 2.0: components, perfabs, and more! - more details about SunBurn's new component system
7. Festive SunBurn 2.0 Starter Kits, yum, yum! - first release of the new SunBurn Starter kit
8. SunBurn 2.0.10 update available - streamlined user experience and integrated starter kits
9. SunBurn Dev Journal: Scenegraph Optimizations - faster scenegraph and City Demo with 10,000 buildings
10. SunBurn 2.0.12 Update Now Available! - edit components and custom scene object types in editor
11. SunBurn Update: Windows Redistributable - ship Windows games using only the XNA Redistributable
12. SunBurn Dev Journal: Workflow Enhancements - background importing, shared materials, Visual Studio templates, and more
13. SunBurn 2.0.13 Update: Get it Now! - the latest goodies are now available
14. SunBurn 2.0.14 Update Available! - extended materials and sprite rendering on Windows Phone 7
15. SunBurn Dev Journal: Reflections and Clipping Planes - the return of the Reflection / Refraction example
16. SunBurn Game Engine: Audio System, Drag-Drop, and More! - announcing the new SunBurn audio system!
17. SunBurn 2.0.15 Released - Audio System, Reflections, and Auto-Unwrap! - check out new the audio system and more

 

 

 

 

---

Posted 05-31-2011 11:55 PM by JohnK "bobthecbuilder"