HTML5 Being Used to Develop Games

Question: How is HTML5 Being Used to Develop Games? Answer: Introduction HyperText Markup Language (HTML) is used to mark up pages on the World Wide Web (WWW). WWW has long outgrown its text-only origins (Peter, 2004), and the users of Internet and WWW demand more media-rich and interactive experiences. This advancement shows in the latest version of HTML, the HTML5 with its focus to allow for easier and efficient web applications development without third-party plugins (Sarris, 2013) in addition to supporting the existing markup ("HTML Design Principles", 2007). The new Application Programming Interface (API) launched with HTML5 allow for manipulating media and for functionalities in the native browser itself. The APIs introduced in HTML include Canvas, Full Screen, Web Audio API, WebGL, Geolocation, Indexed Database, File, and others (Patel, n.d.). The new technologies available in HTML5 allow for the creation of applications which mimic the standard applications which are installed on a device like Android (apps) or Windows (applications). Such capabil ities include video games also. A video game is an interactive game played using specialised equipment ("the definition of video game", n.d.). The attraction of Web technologies is that they do not discriminate or have favourites (Beckerle, 2016). Web technologies like Cascading Style Sheets (CSS), HTML, XML (eXtensible Markup Language), and JavaScript are standard. These technologies behave the same across platforms (like Android, iOS, Linux and other operating systems) and devices (computers, mobiles, televisions, game consoles and other devices which support Web browsing). This universal approach has the huge benefit of developing the product (website, web application, or a game) once and have it work across so many platforms and devices. The cost and time savings in developing video games in HTML5 (Chong, 2017) is one of the reasons why the businesses and developer community is taking an interest in developing games in HTML5. This paper explores how HTML5 is being used to develop games. Background Video games are a lucrative business (Cox, 2014). The recent addition of new platforms in the way of mobile devices has not cut into the domains of consoles or computers (Needleman, 2016) but has created a new market of smaller and quick-to-complete-levels video games. The mobile devices have brought new demographics like children, housewives and the elderly to the video gaming industry. As discussed earlier, the number of platforms and operating systems pose a business decision as to which combinations of platform/operating system to support and budget/time. Web technologies allow bypassing this dilemma by being equally accessible on all of the financially important platforms and operating systems. This combination of business opportunity, efficiency in developing a game, and a universal technology brings us to the topic of this paper - how is HTML5 being used to develop video games and this will be answered in the next section. Answers to the Research Questions Games are developed using HTML5 by utilising the APIs released in this version of HTML. These APIs enable the various aspects of a game like the display of graphics, interaction with user input, audio. Specifically, a game developer wishing to develop games in HTML5 would be interested in the Full Screen, Gamepad, Typed Arrays, HTML audio, WebGL, Indexed Database, WebRTC, WebSockets, Web Workers, Pointer Lock, AJAX, File, SVG and the core HTML, CSS and JavaScript technologies. As per the drawing of graphics, a developer has the option to choose among Canvas, SVG (Scalable Vector Graphics), or a combination of both. Either option is suited for a particular scenario (Rousset, n.d.). A canvas element is like a bitmap image in that once the picture is drawn in the Web browser, the result is unintelligible to the browser and cannot allow for detailed control of the various parts that made the original image. Canvas will have issues when zoomed in or displayed on higher resolution displays than the one for which it was originally designed. The SVG is infinitely scalable and thus does not have any issues like pixelation. An SVG element gets attached to the Document Object Model (DOM) and thus allows for fine-tuning using CSS as well as JavaScript. Canvas only supports JavaScript. However, the canvas is fast, and SVG is slow. For developing a game, a combination of both - having the best of both worlds - is recommended (Dengler, 2011). Regarding audio, due to the considerations for mobile devices, certain roadblocks are present in the current implementations of Web browsers ("Audio for Web games", 2015). These issues are not problems per se and think about the user first, which is a good thing e.g. mobile browsers disallow preloading a video to help avoid any unwanted mobile data usage. Audio sprites, Audio API and AJAX, are used to manage the audio for the game. Animations are a core feature of even the simple games. Web technologies provide ways for efficient manipulation at a higher level than the native controls using libraries. These libraries are open-source and thus free and have the benefit of knowledge of programmers all over the world. Some of these libraries include Animator JS (Lord, n.d.) and Phaser. Even the craziest ideas in a game must be reliable i.e. every time the player initiates an identical set of actions the response must be identical to the previous time. For this, the game also requires reliable physics engine. Physics is essential for detecting collisions as well as managing projectiles (like in Angry Birds game). Popular engines of game development include Ninja Physics, Arcade Physics, P2. All of these are free-and-open-source. These are bundled in the Phaser library mentioned above. To enable the game to work without Internet connection, and to save game state locally, Indexed Database API is used. This API is designed for high-performance, can handle arbitrarily large amounts of data and uses indexes for fast searches ("IndexedDB API", 2016). All this data is stored on the user's device and is managed by the Web browser. Indexed Database is a transactional database system like the ones used by server-side technologies like MySQL. WebSockets technology is used to manage communication between the local copy of the game on player's device and the game server, possibly in real-time (as in online multiplayer games). What WebSockets does is open a live two-way communication line between the client and server, where the client can receive new responses without having to poll the server ("WebSockets", 2017). HTML and CSS are used to create the interface of the game and JavaScript is used to develop the functionality of the game. Existing games can also be ported to Web-based games using JavaScript libraries like Emscripten or Asm.js ("Introduction to game development for the Web", 2015). References Audio for Web games. (2015). Mozilla Developer Network. Retrieved 28 January 2017, from https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games Beckerle, M. (2016). Cross-Platform Desktop Apps Development Using Web Technologies | Making Sense Blog. Making Sense. Retrieved 28 January 2017, from https://blog.makingsense.com/2016/09/cross-platform-desktop-apps-development-using-web-technologies/ Patel, V. A 5 minute overview of all new JavaScript APIs in HTML5. Htmlgoodies.com. Retrieved 28 January 2017, from https://www.htmlgoodies.com/html5/javascript/a-5-minute-overview-of-all-new-javascript-apis-in-html5.html Chong, B. (2017). Would a brand spend $20,000 to acquire 10,000 users? - MarketJS Blog. Marketjs.com. Retrieved 28 January 2017, from https://www.marketjs.com/blog/would-a-brand-spend-$20000-to-acquire-10000-users Cox, K. (2014). Its Time To Start Treating Video Game Industry Like The $21 Billion Business It Is. Consumerist. Retrieved 28 January 2017, from https://consumerist.com/2014/06/09/its-time-to-start-treating-video-game-industry-like-the-21-billion-business-it-is/ Dengler, P. (2011). Thoughts on when to use Canvas and SVG. IEBlog. Retrieved 28 January 2017, from https://blogs.msdn.microsoft.com/ie/2011/04/22/thoughts-on-when-to-use-canvas-and-svg/ HTML Design Principles. (2007). W3.org. Retrieved 28 January 2017, from https://www.w3.org/TR/html-design-principles/#conformance IndexedDB API. (2016). Mozilla Developer Network. Retrieved 28 January 2017, from https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API Lord, C. Files master Chris Lord / Animator Js. GitLab. Retrieved 28 January 2017, from https://gitlab.com/Cwiiis/animator-js/tree/master Introduction to game development for the Web. (2015). Mozilla Developer Network. Retrieved 28 January 2017, from https://developer.mozilla.org/en-US/docs/Games/Introduction Needleman, S. (2016). Mobile-Game Revenue to Surpass Console and PC, Study Says. WSJ. Retrieved 28 January 2017, from https://www.wsj.com/articles/mobile-game-revenue-to-surpass-console-and-pc-study-says-1461265949 Peter, I. (2004). History of the world wide web. Nethistory.info. Retrieved 28 January 2017, from https://www.nethistory.info/History%20of%20the%20Internet/web.html Rousset, D. The Complete Guide to Building HTML5 games with Canvas SVG. Htmlgoodies.com. Retrieved 28 January 2017, from https://www.htmlgoodies.com/html5/client/the-complete-guide-to-building-html5-games-with-canvas-svg.html#fbid=UrnTyicA88C Sarris, S. (2013). Important Concepts for HTML5 | The Goals of HTML5 | InformIT. Informit.com. Retrieved 28 January 2017, from https://www.informit.com/articles/article.aspx?p=2090300 the definition of video game. Dictionary.com. Retrieved 28 January 2017, from https://www.dictionary.com/browse/video-game WebSockets. (2017). Mozilla Developer Network. Retrieved 28 January 2017, from https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API