Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(Mini project)
Download as PPTX, PDF1 like157 views
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.
![[Android] Introduction to Android Programming](https://cdn.slidesharecdn.com/ss_thumbnails/trainingandroidlesson1-130304082558-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(Mini project) (20)
Recently uploaded (20)
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(Mini project)
- 1. Multi-platform compatibility/portability of HTML5 apps USING PHASER, PHONEGAP AND INTEL XDK
- 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 devices 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
- 9. Animations Animations were made using Adobe Flash Professional CC
- 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.
- 11. The code
- 12. The game
- 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.
- 16. THANK YOU