During Microsoft’s //build conference day 2 keynote, we demonstrated some of the advancements in Microsoft Edge’s platform features with a new demo from Pixel Lab, Flight Arcade. Today I’d like to highlight some of the new Web technologies behind Flight Arcade and show developers how the demo came together behind the scenes.
Flight Simulator as Inspiration
A flight demo seemed a natural fit to showcase the new platform features, bringing together 3D graphics, audio modulation and using a game pad to control the plane. Flight Simulator had a huge impact on the PC hardware ecosystem starting 30+ years ago, pushing the boundaries of early personal computers like the Apple II and Commodore 64 and demonstrating how the PC could be used for more than just spreadsheets.
When our team began development on Flight Arcade, they originally hoped to recreate as much of the Flight Simulator experience as possible, even going to the effort of accessing the original code and 3D assets. It’s fair to say that ambition far outstripped the time and resources we had to bring the demo together in time, as we realized the complexity of the original simulator code base. The original goal of complete simulation included modelling complex factors like wind simulation, voltage drop across on-board circuits, weight and many other aspects that impact real-world flight.
After evaluating the scope of the simulation problem, we decided instead to hone our focus to exhibit three major new features of the platform, and simplify gameplay to demonstrate those features more effectively.
Web Platform Features Highlighted
WebGL
The team used the popular 3D framework Babylon.JS to build the visual components of Flight Arcade. Some of the challenges they faced included how to lay out terrain, build in heightmaps for relief, and lay down textures on top of the terrain map to make it look as realistic as possible while still working well in the browser. You can learn more about this process on the Flight Arcade detail page.
WebAudio API
Prior to the WebAudio API, developers and content authors were limited to using HTML audio tags to embed a sound file for playback within their page and then layout around the control.
The HTML5 WebAudio API takes audio on the web to another level, with powerful and easy to use APIs providing a broad spectrum of audio manipulation techniques.
Check out the team’s detailed breakdown of how the team used the WebAudio API to modulate engine sound and distort the flight instructors voice, with code samples so you can try out WebAudio for yourself.
GamePad API
To add more fidelity to the Arcade flying experience and showcase another web platform feature, the team used the GamePad API and wrote a helper class for other developers to use that maps the button and axis indices to the more familiar names as labeled on the Xbox controller. You can grab the open-sourced code and get a full breakdown of how we used the API with FlightArcade here.
More to Come
We’ll be bringing more tech demos to the web on the new Microsoft Edge Dev Test Drive site over the coming months as we continue to add more web platform features to Microsoft Edge. You can keep in touch on Twitter to find out about new projects, and check out our community projects on the Microsoft Edge Dev Site where we’re working to build a better, more interoperable web.
– Jason McConnell, Microsoft Edge Developer Relations