As is known, HTML5 is not only the acronym of the fifth version of the markup language for hypertexts, but a set of technologies introduced in recent years for the development of Web applications. Technologies so powerful that they also allow you to create complex applications such as video games.
In this guide, expert online casino author Antonio Matias and his site CasinoReal will look at the many aspects of programming video games in HTML5 and begin with a broad definition of the basic elements we use to create them:
- HTML markup (static part), which provides the game container and in which we define which APIs to use and which libraries to link, if any.
- JavaScript code (dynamic part), is the code we use to exploit the APIs made available by the container and create our Game Engine.
At the container level we introduce the use of the canvas element , which brings with it the API to manage the rendering of images and primitives, to produce animated applications, effects and video games.
Thanks to the WebGL graphics library , integrated into recent browsers, you can finally exploit the OpenGL API to create 3D applications and games to run directly online, however in this guide, for simplicity’s sake, we will discuss the complete creation of a 2D game, in any case, there will be a section dedicated to WebGL, where the main features will be shown, the import of a model, movements in 3D space.
Why HTML5?
If we look at the Web panorama, the platform such as Flash sees its considerable user base eroding day after day and here HTML5 will have no rivals. Even on mobile, however, the prospects are certainly rosy, here is a very short list of advantages that those who work in HTML5 will increasingly enjoy:
- HTML5 does not require any plugin to work: all features are already included in browsers;
- the applications created will be executable on any browser supporting HTML5, 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 and Android mobile devices and Windows Phone quickly and easily.
- Video game creation software no longer exports for the Flash platform, while many are supporting or will support the export of HTML5 projects.
Supported browsers
The W3C has announced that the first version of the HTML5 standard will be ready by the end of 2014 and for a few years HTML5 has been supported on most browsers , which in recent versions have added all the functions that we will use throughout the guide.
The applications we will review in this guide have been tested and working 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 some programming background, preferably knowledge of the JavaScript language and to know how an HTML page is roughly composed (concept of tags, styles and scripts). We advise you to play at online casinos only with reliable payment providers such as multibanco casinos.
For a reference you can use the guides: JavaScript and HTML on HTML.it
The contents of the guide
The guide consists of four parts:
- Setting up a basic game engine : we will create a basic framework, which will allow us to load graphic and sound resources, manage rendering and events associated with game objects.
- Input and user interface : we will understand how to manage input from the mouse, keyboard and touchscreen, how to create graphical interfaces (GUI), draw text with a font of your choice.
- Creating a game : using the framework created in the previous chapters, we will finally proceed to create a simple megaman style platformer.
- Game optimizations and expansion : we will see how to optimize performance and improve our game by adding a social part, how to exploit more advanced technologies: Box2D for physics, WebGL for 3D and Node.js for networking.
Software and tools to use
To follow the examples proposed in the guide we will need a little basic software:
- A browser equipped with a console for debugging our code (I recommend Google Chrome )
- A text editor for writing code (among the best are Notepad++ , a free and open source editor, which can also be downloaded in a portable version (without installation), or SublimeText : a very valid editor, but for a fee, you can still download a trial version)
- For some parts of the guide, such as WebGL, an HTTP server will be required. You can upload the files to your website, or use a no-installation executable program like Mongoose , which will start a temporary local Webserver on your computer.