Today is a play and learn day. Last month at Build 2015, Microsoft Edge was introduced using a new web app/game that reimagined the age old Flight Simulator in a web world.
What's great is that not only can you play the game, but you can learn how it was built...
Then and Now
The first version of Flight Simulator shipped in 1980 for the Apple II and, amazingly, it was in 3D! That was a remarkable achievement. It’s even more amazing when you consider that all of the 3D was done by hand, the result of meticulous calculations and low-level pixel commands. When Bruce Atwick tackled the early versions of Flight Simulator, not only were there no 3D frameworks, but there were no frameworks at all! Those versions of the game were mostly written in assembly, just a single step away from ones and zeroes that flow through a CPU.
When we set out to reimagine Flight Simulator for the web, we couldn’t help but think about the contrast of creating 3D then and now. Modern coding seems almost luxurious as we sculpt 3D worlds in WebGL with great frameworks like Babylon.js. It lets us focus on very high level problems. In this article, we’ll share our approach to one of these fun challenges: a simple way to create realistic looking large scale terrain.
Modeling and 3D Terrain
Most 3D objects are created with modeling tools and for good reason. Creating complex objects (like an airplane or even a building) is hard to do in code. Modeling tools almost always make sense, but there are exceptions! One of those might be cases like the rolling hills of the Flight Arcade island. We ended up using a technique that we found to be simpler and possibly even more intuitive: a heightmap.
A heightmap is a way to use a regular two-dimensional image to describe the elevation relief of a surface like an island or other terrain. It’s a pretty common way to work with elevation data, not only in games but also in geographic information systems (GIS) used by cartographers and geologists.
To help you get an idea for how this works, check out the interactive heightmap below. Try drawing in the image editor and then check out the resulting terrain.
Audio vs. Audio
Before there was the Web Audio API, HTML5 gave us the
<audio>element. It might seem hard to remember now, but prior to the
<audio>element, our best option for sound in a browser was a plugin! The
<audio>element was, indeed, exciting but it had a pretty singular focus. It was essentially a video player without the video, good for long audio like music or a podcast, but ill-suited for the demands of gaming. We put up with (or found work arounds for): looping issues, concurrent sound limits, glitches and total lack of access to the sound data itself.
Fortunately, our patience has paid off. Where the
<audio>element may have been lacking, the Web Audio API delivers. It's gives us unprecedented control over sound and it's perfect for everything from gaming to sophisticated sound editing. All this with a tidy API that's really fun to use and well supported.
Let's be a little more specific: Web Audio gives you access to the raw waveform data of a sound and lets you manipulate, anaylyze, distort or otherwise modify it. It is to audio what the canvas API is to pixels. You have deep and mostly unfettered access to the sound data. It's really powerful!
Even the earliest versions of Flight Simulator made efforts to recreate the feeling of flight using sound and one of the most important sounds is the dynamic pitch of the engine which changes pitch with the throttle. We knew that, as we reimagined the game for the web, a static engine noise would really seem flat, so the dynamic pitch of the engine noise was an obvious candidate for Web Audio.
Try it out here:...
So how was this done?
Today at //BUILD Day 2, Microsoft made a number of announcements regarding some tools and games they are working on for the web. Microsoft also announced that new name for our latest browser, Edge, after the new rendering engine, EdgeHTML. I liked that Spartan logo, too.
- Flight Simulator Arcade (http://flightarcade.com) – Inspired by the original Microsoft Flight Simulator, Flight Arcade is a new web experience that will have you flying in seconds. With the latest web standard technologies – WebGL, WebAudio, GamePad API and more – it shows what’s possible on the new Microsoft Edge, the browser for doing. Yet all the code works great across browsers and devices. Learn how we made Flight Arcade at http://www.flightarcade.com/learn/. Here is a technical tear-down and video on Flight Arcade: http://flightarcade.com/learn
- ManifoldJS (http://manifoldjs.com) – The simplest way to create hosted apps across platforms and devices. manifoldJS helps you reach more users than ever by packaging your web experience as native apps across Android, iOS, and Windows. Jeff Burtoft, one of the authors behind Manifold, has a far more detailed blog post here. I also put together an in-depth tutorial on creating a Famo.us web app and converting it to mobile with ManifoldJS.
Hosted Web Apps and Web Platform Innovations from //BUILD
I have a video on how to set it up right here:
I just walked offstage after another amazing build keynote. There is so much new technology that can help you build great next-generation applications. But there’s just too much to drill into in one blog post. So we take a look at each major coding demo in a series of posts – starting with this one.
Today developers who want to reach a lot of customers are faced with supporting many different devices, with different size screens, input modes and so on. Developers try to tackle these challenges using a lot of different techniques – and the choice really depends on what code you already have and what kind of app you have created. In the past couple of years at build, Guggs and I have shown using Unity, Xamarin and of course there are a number of solutions that leverage the web including Cordova, React, and the new hosted web apps we just introduced with Windows 10.
As you know, we’ve been talking about the value of Hosted Web Apps for some time now. Hosted Web Apps allow you to use your web content as the base of your Windows Store app, allowing you to keep the same workflow, content and deployment model that you use today. We’ve heard from a lot of developers that use Hosted Apps that, like the web, makes more sense when they are cross platform.
To help developers really accelerate the delivery of apps using web technologies, today I announced ManifoldJS - a new open source framework that that can take a website and create an application for Windows, iOS, Android, Chrome, and Firefox – that really simplifies creating hosted apps across platforms.
Yep - imagine being able to easily use any browser to debug your web site or web app running anywhere.
What we demonstrated at Build went a little further. In the keynote, I used manifold.js (see my last post for more on that) to turn a responsive web site into mobile applications. In less than a minute, I converted the web site into mobile apps for iOS, Android, Chrome, Firefox, Windows 8, and Windows 10. And on Windows 10 it is a universal Windows app that runs across Windows phone, desktop, tablet and Xbox. Doing that is very easy – and a pretty cool way to quickly create both a web site and all of the mobile apps for the most widely used platforms.
Now with Vorlon, you can debug the web site and any of these mobile apps – all remotely.
We’re keeping the coding going with this third post in the series of technical articles following the Build 2015 conference. This post shows you how it is so much easier now to develop apps that have fantastic, responsive audio. The next one will focus on video.
Having great audio and video is a big deal to many developers who focus on have a cool, highly interactive user experience for their apps.
A great example of this is Muzik Official Bluetooth-connected drum sticks. This is a super cool app where you do some air drumming… those Bluetooth drum sticks, and the related C#/XAML app, were only possible because of the new Bluetooth and new low-latency audio APIs that were introduced in Windows 10.
The Build Drummer sample app that I showed uses this new AudioGraph API and its low-latency audio capabilities to show how a simple C#/XAML app can have great audio performance on Windows 10. It is available on Github here – and we know it works with Win 10 build 10074 and Visual Studio 2015 RC. Go grab it.
Vorlon.js itself is a small web server you can run from your local machine, or install on a server for your team to access, that serves the Vorlon.js dashboard (your command center) and communicates with the remote devices. Installing the Vorlon.js client in your web site or app is as easy as adding a single script tag. It’s also extensible where devs can write plug-ins that add features to both the client and the dashboard, for example: feature detection, logging, and exception tracking.
Vorlon.js is built on the idea of extensibility. We encourage you to contribute! And we’re already about how we might integrate vorlon.js into browser dev tools as well as Web Audio debugging.