SunBurn powers British Airways demo at Microsoft's WP7 Mango event

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"

Comments

Philippe Da Silva wrote re: SunBurn powers British Airways demo at Microsoft's WP7 Mango event
on 06-01-2011 3:38 AM

Congratulations to the team! It's great to see SunBurn being used in such context.

It demonstrates its power and recognizes the engine as a professional solution for 3d applications.

I spent my money in several engines but I never felt this money was worth it... Until I licensed SunBurn ;)

CJ Bailey wrote re: SunBurn powers British Airways demo at Microsoft's WP7 Mango event
on 06-01-2011 1:40 PM

Excellent work guys!  Nice to see Sunburn getting the attention it deserves.

Pérsio Flexa wrote re: SunBurn powers British Airways demo at Microsoft's WP7 Mango event
on 06-04-2011 3:48 PM

Show, congratulations team!! =D

I'm fan SunBurn , good luck!!

JohnK Blog wrote SunBurn Game Engine: Transparencies, Player Controller, and More!
on 08-17-2011 1:15 AM

Hello SunBurn community! If you follow my blogs you know we’re adding a number of unannounced features

JohnK Blog wrote GameFest Wrap-up and SunBurn Developer Gathering
on 08-31-2011 12:16 PM

Hello SunBurn community! We’re back in the office this week after a fantastic GameFest, and finally

JohnK Blog wrote SunBurn Launches Powerful new Community Plugin System
on 10-16-2011 3:16 PM

Hello SunBurn community! Last night we rolled out a development preview of the SunBurn Game Engine’s

JohnK Blog wrote New SunBurn Community Resources Portal!
on 11-01-2011 5:45 PM

Hello SunBurn community! Two weeks ago we rolled out a powerful new resource system for the SunBurn Game

JohnK Blog wrote SunBurn Game Engine: A Whole New Level of Flexibility!
on 11-16-2011 5:06 PM

Hello SunBurn community! Today we’re announcing the last couple of features in the upcoming SunBurn

JohnK Blog wrote Orbitron: Revolution blasts onto Xbox LIVE Marketplace!
on 12-05-2011 9:52 PM

Hello SunBurn community! Talk about an exciting weekend! The awesome team at Firebase Industries just

JohnK Blog wrote SunBurn 2.0.17 Released – Advanced Lighting, Transparencies, and tons of Enhancements!
on 12-09-2011 4:45 PM

Hello SunBurn community! It’s here! Today we released the SunBurn Game Engine 2.0.17 update –

JohnK Blog wrote New SunBurn Documentation and Silverlight WP7 Example!
on 12-12-2011 9:09 PM

Hello SunBurn community! We’ve just updated the SunBurn Getting Started documentation to ensure

JohnK Blog wrote Starting 2012 with style: SunBurn Game Engine 2.0.18 Preview!
on 01-27-2012 2:01 PM

Hello SunBurn community! We're kicking the year off with a huge new update to the SunBurn Game Engine

JohnK Blog wrote SunBurn Game Engine 2.0.18: Built-in Character Controller!
on 02-04-2012 4:50 PM

Hello SunBurn community! Last night we delivered a feature-complete preview of SunBurn Game Engine 2

JohnK Blog wrote SunBurn 2.0.18 Released - Physics, Char Controller, More!
on 02-14-2012 3:46 PM

Hello SunBurn community! This morning we launched the much anticipated SunBurn Game Engine 2.0.18! The

JohnK Blog wrote New sgMotion Plugin and the SunBurn 2.0.18 Refresh!
on 02-23-2012 4:50 PM

Hello SunBurn community! We just rolled out two exciting new updates for the SunBurn Game Engine ! The

fr334u wrote re: SunBurn powers British Airways demo at Microsoft's WP7 Mango event
on 06-01-2012 1:09 PM

May be I am bumping this article, but I got a doubt. I know you people used an SLXNA App with the SunBurn  default Starter Kit, and you used the correspondent functions on the correspondent events in the GamePage.xaml.cs, but my questions is how if those are protected and there's no access to the Game.cs class, even if public those those methods are protected, I changed them to public, but the original game class from XNA Framework started wining those weren't accessible in that way, because those are suppose to be protected... So how to access to those methods in Game.cs from GamePage.xaml.cs without modifying the SunBurn Game.cs class or altering too much?

Thanks, great demo, is exactly what I need it for a game I am making,  but I am kind of stuck in that doubt..

JohnK Blog wrote Latest SunBurn 2.0.18 Update Available!
on 06-06-2012 4:54 PM

Hello SunBurn Community! Today we launched the latest SunBurn Game Engine 2.0.18 refresh! Just in time

JohnK "bobthecbuilder" wrote re: SunBurn powers British Airways demo at Microsoft's WP7 Mango event
on 06-11-2012 3:29 PM

Hi fr334u,

You can download the SunBurn Silverlight WP7 example here:

www.synapsegaming.com/.../resource.aspx

It uses the same core code as our British Airways demo and shows how to integrate the same game into both XNA and Silverlight WP7.

JohnK Blog wrote New SunBurn Examples - Learn to Create Scenes in Code!
on 06-12-2012 3:39 PM

Hello SunBurn community! This afternoon we released two new examples for the SunBurn Game Engine - as

JohnK Blog wrote SunBurn 2.0 goes Gold! Framework Edition Ships Too!
on 06-29-2012 8:05 PM

Hello SunBurn community! We're very excited to announce we've shipped the official gold release

JohnK Blog wrote Awesome new SunBurn and Community Updates!
on 07-25-2012 6:54 PM

Hello SunBurn community! Today we posted two new updates! The first is to the community site, which makes



Please login to post comments.