Page 60 - MSDN Magazine, October 2017

The Devil in the Details
There’s much more work in this game than appears at first glance. I haven’t touched on camera movement tracking the car, differences in input between mobile devices and desktops (in mobile devices car movement is controlled by tilting the device), and topics like matchmaking and debugging. All these topics are outside the scope of this article. However, it’s important to mention that some of these entail significant road bumps in Web gaming. For example, a Web game can run on a desktop or on a tablet or on a mobile device— so sometimes a GPU is available and sometimes it’s not, while the likelihood of low networking bandwidth increases.
Yetanotherchallengeistheworkflowrequiredforgeneratingcom- patible 3D models from existing standards. The game development toolsets for Web platforms aren’t as mature as their counterparts on other platforms. Last, Web games don’t have local storage in the same sense that other platforms provide. So care must be taken to load assets frugally. An impressive achievement in this area is the online game “Urban Galaxy” (bit.ly/2uf3iWB).
These issues present new challenges to game developers on the Web platform. However, there are some distinct advantages to the Web platform that must be mentioned. The debugging environ- ment on browsers is very advanced. The dynamic nature of Web
Web Technologies for Game Development
Figure 7 Simplified Client-Side Prediction Pseudocode
applySync(lastSync):
// Step 1: sync to all server objects in the broadcast for each obj in lastSync.objects
localObj = getLocalObj(obj.id) if localObj
localObj.rememberState()
localObj.syncTo(obj) else
addLocalObj(obj)
// Step 2: re-enactment using latest state information for step = lastSync.serverStep; step < clientStep; step++
processInputsForStep(step) gameEngine.step(reenactment=true)
// Step 3: record bending and revert for each obj in world.obects
obj.bendToCurrentState() obj.revertToRememberedState()
// Step 4: remove destroyed objects for each obj in world.obects
objSyncEvents = lastSync.getEvents(obj.id) for each event in objSyncEvents
if event.name == ‘objectDestroy’ gameEngine.removeObjectFromWorld(obj.id)
programming leads to very fast prototyping, and continuous deliv- ery of patches. The community of Web developers is much larger. Probably the most significant advantage for Web games is the way they’re started. A Web game can be accessed by simply clicking on a Web link and doesn’t require pre-downloading the entire set of game assets on the client device before it starts. By downloading assets only as they’re needed, the game play experience can start within seconds, instead of minutes, and where possible, offline
support can also be leveraged to improve subsequent game play. For example, visitors logging into the NBA Web site might find themselves playing a basketball game against players from all over
the world, right in the browser.
Wrapping Up
Building a multiplayer game for the Web platform is different. The Web is naturally directed at a wide array of devices and this pres- ents a significant challenge to game development. The absence of simple UDP networking in the browser impacts multiplayer response times. However, recent advances in Web technologies have made it possible to write a multiplayer physics demo in a relatively short time. Libraries and workflows used in this exer- cise are making fast progress and can already be used today. With additional resources and time, it’s possible to develop a quality gaming experience in a browser.
I want to thank the co-author of the game discussed in the arti- cle, Opher Vishnia, a co-founder of Lance and a multidisciplinary creator involved with game development, programming, design and music composition. n
Gary Weiss is a software architect and co-founder of Lance, the group that develops the open source project Lance.gg. Reach him at garyweiss74@gmail.com
Thanks to the following technical expert for reviewing this article: Raanan Weber
In the past couple of years, there has been significant progress in browser ability. The primary advance is the develop- ment of WebGL, which has brought direct access to GPU functionality in the browser. WebGL is a very low-level interface, so game developers typically rely on higher-level interfaces
from libraries like Babylon.js, three.js and A-Frame to build complex scenes.
Other recent Web technologies include WebAudio, which provides advanced audio capabilities; Media Source Extensions (MSE), which optimize video access and allow real-time video manipulation; and WebVR, which is relatively new and provides an interface to virtual reality (VR) hardware including VR head- sets and VR controllers. Using WebVR together with WebAudio, it’s possible to implement ambisonic 3D audio experiences in a Web-driven VR scene.
Even the JavaScript language has been updated in useful ways with the latest ECMA-262 6th Edition. The JavaScript ecosystem is wide, providing many frameworks for developers. In fact, there are so many frameworks and methodologies that the abundance sometimes leads to confusion.
On the network front, alongside the HTTP protocol, WebSockets and WebRTC are two standards that are available for applications. WebSockets are simple bi-directional data streams, while WebRTC provides a more complex mechanism for peer-to-peer communi- cation. For multiplayer game development, Lance.gg is an open source library that handles the networking and synchronization of game objects.
Another interesting technology is WebAssembly, which has recently reached cross-browser consensus, and has the potential to deliver a substantial performance advantage by running compiled binary format in a browser.
You can easily find more information about all of these technol- ogies on the Web.
56 msdn magazine
Game Development