The game is playable and fits in different screens. We are now ready to make the game public.
YUI from Yahoo is a commonly used compressor. It can be installed and used locally as a standalone program. We can also use preprocessor tools such as the ones we mentioned in Project 6, Space Defenders, which come with the YUI-compressing option inside the tools. However, in this task, we make it simple by using an online compressor.
Let's work on the following steps to deploy our game on the Internet:
- We concatenate and compress the logic and the styling of files using a compressor. In this task, we use an online tool. The http://gpbmike.github.io/refresh-sf/ URL contains the Online JavaScript/CSS Compressor tool.
- Select all the JavaScript files and drag them onto the text field of the compressor website.
- Click on the Compress JavaScript button and the tool generates the compressed code into the text area of the result.
- Then, we can get the file and put it into the project by clicking on the Save button.
- Make sure we update the
index.htmlfile to include the compressed code instead of the development code. - We will repeat the same steps for the CSS file. Let's upload the CSS file; choose CSS as the file type and compress the code. We save the compressed CSS code and update the
index.htmlfile to link to the minified CSS file. - We are ready to upload the game to the server. We use a simple way that uses an online static file-hosting service. Go to the http://getforge.com URL of the Forge online service and create a free account of the service, which allows one static public site.
- Compress the website and upload the website to the Forge service by dragging the ZIP file directly to the browser. The following screenshot shows the service with our HTML5 game uploaded:
- After uploading the game, we can choose a URL that links to the website. For example, the URL I chose was http://html5-games.getforge.io/
We have completed the steps that convert the code from the development stage into the production-ready stage. We also uploaded the game online so that we can send it to others to play.
At the development stage, we separate the logic code into small chunks. This divides the code into different parts for different purposes. During production, we trim all the unnecessary characters such as spaces, newline characters, and comments. YUI is one of these compressors. You can check out their official page at http://yui.github.io/yuicompressor/ for detailed usage.
The following essay from Yahoo Developer Network provides an insight on why we need to minify our code: https://developer.yahoo.com/blogs/ydnfiveblog/high-performance-sites-rule-10-minify-javascript-7208.html
We can host static files in several ways. The traditional way is to host the files from a hosting service. This type of service provides us with access to the web server, for example, Apache.
Static files are different for files with server-side logic, such as PHP or Ruby on Rails. A server-side language requires a server to execute the logic before sending back data to a client-side web browser. Serving static files from the server only requires the server to get the file and send the content directly back to the client.
Therefore, there are different approaches besides using a traditional hosting service. We can use Dropbox to serve static files. We can use Amazon Simple Storage Service, also known as S3, to serve the files. We can even use a Platfrom as a service (PaaS) offering, such as Heroku, for quick deployment of HTML5 games. There are even some web services that provide easy static file hosting, such as the one we used in this task.
We used the service called GetForge. I used it as a demo because it is one of the easiest ways to publish files online without going through a long setup process. As mentioned, we have plenty of options, and you can use the most comfortable one.
There are other distribution channels available to publish the game. An HTML5 game can run anywhere where a modern web browser is installed. In the Mac and iOS development kits, there is a web browser component called WebView. We have a similar web view component for Android and Windows platform too. These native components allow us to run HTML5 games inside a native application.
For example, we can package the game into a Mac app by using Xcode, Apple's development tool, with WebView. Alternatively, we can use a project called Node-Webkit that embeds a chromium browser engine into an executable application.
For mobile distribution, we can use the native SDK or a service called Adobe PhoneGap Build (https://build.phonegap.com/). The service builds your HTML5 game into several mobile platforms, including iOS and Android.