Multi-platform compatibility/portability of HTML5 appsUSING PHASER, PHONEGAP AND INTEL XDK

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.

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.

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.

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.

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.

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.

Images in the game Images in the game are made using Adobe Photoshop CS6

Animations Animations were made using Adobe Flash Professional CC

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.

The code

The game

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.

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.

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.

THANK YOU