As we know, HTML5 is not just the acronym for the fifth version of the hypertext markup language, but also a set of technologies that allow us to create real applications, including video games, directly in the browser.
In this guide, we will examine many aspects of programming a video game with HTML5 and start by defining the basic elements that make up an HTML5 game:
- HTML markup (static part), which provides the game container and in which we define the API to use and the libraries to link.
- JavaScript code (dynamic part) is the code we use to leverage the API provided by the container and to create our game engine.
At the container level, we introduce the use of the canvas element, which brings with it APIs for managing the rendering of images and geometric primitives in 2D.
Thanks to the WebGL graphics library, integrated into modern browsers, you can finally take advantage of OpenGL APIs to create 3D applications and games directly in the browser.
Why HTML5?
If we look at the Web, the Flash platform is being used less and less, which is why HTML5 will have no rivals. Even on mobile, HTML5 is now the standard for creating interactive experiences.
- HTML5 doesn't need plugins to work: all features are already included in browsers;
- The applications created will be executable on any HTML5-compatible browser, regardless of the operating system (Windows, Mac, Linux, Android, etc.)
- There are frameworks like Apache Cordova (PhoneGap) or Titanium to convert our games into native applications for iOS, Android, and Windows Phone mobile devices in a simple and fast way.
- Video game creation software no longer exports to the Flash platform, while many support or endorse exporting projects to HTML5.
Supported browsers
The W3C announced that the first HTML5 standard version was ready in 2014 and that, for several years now, HTML5 has been supported by most browsers which, in their latest versions, have implemented most of its features.
The applications we will examine in this guide have been tested and work on Chrome, Firefox, Internet Explorer 10, Safari, and Opera.
Prerequisites and knowledge
To fully understand the concepts explained in this series of articles, it is necessary to have the basics of programming, preferably knowledge of the JavaScript language. Knowledge of HTML5 and CSS3 is also recommended.
Guide contents
The guide consists of four parts:
- Setting up a basic game engine: we will create a basic framework that will allow us to load graphic and sound resources, manage rendering and events related to game objects.
- Input and user interface: we will understand how to handle input from the mouse, keyboard, and touchscreen, how to create graphical user interfaces (GUI), and draw text with a font of your choice.
- Creating a game: using the framework created in previous chapters, we will finally create a simple Mega Man-style platform game.
- Optimization and game expansion: we will see how to optimize performance and improve our game by adding a social component, how to leverage more advanced technologies: Box2D for physics, WebGL for 3D, and Node.js for networking.
Software and tools to use
To follow the examples in this guide, we will need just a few basic software tools:
- A browser equipped with a console to debug our code
- A text editor to write code (among the best: Visual Studio Code, Sublime Text, or Atom)
- For certain parts of the guide, such as the WebGL section, a local web server to serve our files
➡️ Create HTML5 games, the guide
0 Comments