Exploited the multi-platform compatibility of HTML5 by developing a simple HTML5 based game using Phaser game development framework and Intel XDK multi-platform HTML5 application development IDE.
2. Introduction
This Project is envisioned for studying and demonstrating the latest trends in
multi-platform app development using a simple HTML 5 game build using Phaser
game framework and ported to various platforms using PhoneGap and INTEL XDK.
Developing for different platforms is very hard.
HTML5 comes for the rescue.
3. HTML5
HTML5 is the latest version of the mark-up language of the Internet.
Rich multimedia support.
Support for Offline Web Storage, GeoLocation API, Canvas Drawing, CSS3, 2D
animations, and many more.
HTML5 is becoming a preferred choice for developers.
4. Phaser
Phaser is a cross-platform game development framework for desktop and mobiles.
It is open source.
Lots of control over object.
Works in 2D.
5. PhoneGap
Allows to build mobile apps using JavaScript, HTML5 and CSS3.
Makes Hybrid Mobile Apps.
Includes plugins which allow access to device’s hardware.
Uses cloud compiler to generate apps for different platforms.
6. Intel XDK
Intel XDK HTML5 Cross-platform Development Tool provides a simplified
workflow to enable developers to easily design, debug, build and deploy
HTML5 web and hybrid apps across multiple app stores, and form factor
devices.
From coding to publishing, everything in one software.
Also uses cloud compiler to generate apps for different platforms.
7. Game Development Using Phaser
Phaser is a fast, free and fun open source game framework for making
desktop and mobile browser HTML5 games. It provides fast 2D Canvas and
WebGL rendering.
8. Images in the game
Images in the game are made using Adobe Photoshop CS6
10. Creating the Game
Phaser works within the canvas element of HTML5
It is integrated using JavaScript in the script tag
The Actual game renders inside a div tag
The game states are declared in the Index.html
The actual game states are defined in various .jsp files.
Phaser allows for various settings and configurations of the physics elements
of games like Movement, control, collisions and allows the user to either
manually define them or let Phaser take control.
13. Cross-Platform Porting
The game is ported to different platforms in two ways:
Using PhoneGap:
Upload the complete project in .zip format on build.phonegap.com
Provide the required info about the version to use to build the app.
PhoneGap will automatically run through the code and insert necessary codes and
information so that the application can run natively on the devices.
The cloud compiler will compile the app and generate the applications for all the
supported platforms like Android, iOS, Windows Phone, Symbian etc.
14. Using Intel XDK:
Install the Intel XDK tool and import your project.
Go to build and select target platform and upload your project for compilation on
the build server.
The build server will scan through the code adding necessary details to make the
app run native on the devices.
The code will then be compiled by the cloud compiler which will generate the
application for the preferred device.
After build is finished you will get your application.
15. Conclusion
HTML5 is a goldmine waiting to be discovered.
It has the ability to “build once and deploy to many”.
Developing in HTML5 is easier than developing in native.
There is faster implementation and deployment.
There are limitations in performance and stability.
But it is cost-effective and requires less maintenance than native.
Cross-Platform building tools makes porting easier than ever.
Should be a preferred choice for new developers in mobile application
development.