HTML5 is a great choice for cross-platform mobile game development because games have to run and perform the same across all mobile platforms. Game development using HTML5 will reduce development time for multiple platform and will makes the gaming experience consistent across different mobile platforms like Apple iOS*, Android* and Microsoft Windows*.
HTML5 Game Engines
HTML5 also has abundant resources available in terms of open source game engine frameworks, game assets and resources. The link below lists popular HTML5/JavaScript game engine frameworks used by the HTML5 game development community:
- html5gameengine.com
Intel XDK for HTML5 Game Development
Intel® XDK is a Cross-platform Development Environment that helps you to take the easy path to game Development and fast path to App Stores.
- Integrated development workflow from design to app stores
- Built-in design, debug, and build tools, plus 100's of Cordova APIs
- Popular game engine support Construct2*, Coco2D*, Phaser*, Pixi*, CreateJS*, and PlayCanvas*
- Make immersive single or multiplayer games for Android*, iOS*, and Windows*
- Deploy faster to more app stores and various devices
The Intel XDK development environment simplifies using these game engine frameworks to develop, test and build games for various mobile platforms. It helps you to develop HTML5 hybrid apps and games for multiple platforms, as described in:
- Intel XDK documentation
- Getting started with game development using Intel XDK
Some of the HTML5 game engines have game creation tools and provide an option to export the game to HTML5 code. Some other HTML5 game engines are just available as an open source framework.
Construct 2* and PlayCanvas* are examples of HTML5 game engines that have a game editor tool to create game without programming.
Both provide an option to export the resulting game as HTML5 source code. You can import this code into Intel XDK so you can test game on various devices as well as build for multiple platforms and publish them to various App Stores.
Other popular HTML5 game engines are available as open source frameworks. Phaser*, Pixi*, Cocos2DJS* and EaselJS* are examples of 2D game engines, BabylonJS* and ThreeJS* are popular HTML5 3D game engines available today.
Below are some useful resources for developing games using popular HTML5 game engines using Intel XDK:
Construct 2
Construct 2 is an HTML5 based 2D game creation tool. It is targeted for non-programmers and provides a drag-and-drop visual editor to design and develop game logic.
The documentation and tool are available on the Construct 2 website. Below is a documentation link for exporting HTML5 code from Construct 2 and importing in to Intel XDK:
- Importing Construct 2 game into Intel XDK
PlayCanvas
PlayCanvas is an HTML5 based 3D game engine that has a cloud-based game creation tool to simulate and edit the game.
The documentation for game development is available on the PlayCanvas website. Below are documentation links for exporting HTML5 code from PlayCanvas and importing it into Intel XDK:
- Exporting HTML5 code from PlayCanvas
- Importing PlayCanvas HTML5 code in to Intel XDK
Phaser
Phaser is an open source HTML5 based 2D game engine. Phaser uses HTML5 Canvas and WebGL for rendering based on browser support.
The documentation for 2D game development using this framework is available on the Phaser website. Below is documentation link for developing cross-platform games for mobile using Phaser with Intel XDK
- Developing simple game using Phaser game engine
Cocos2D-JS
Cocos2d-JS is an open source HTML5 based 2D game engine. Cocos2d-JS uses HTML5 Canvas and WebGL for rendering based on browser support.
The documentation for 2D game development using this framework is available on the Cocos2d website. Below is documentation link for developing cross-platform games for mobile using Cocos2d with Intel XDK
- Step-by-step guide to develop a simple Snake game using Cocos2d-JS
BabylonJS
BabylonJS is an open source HTML5 based 3D game engine. BabylonJS framework includes lights, cameras, materials and meshes, collisions engine, physics engine, audio engine and more features for 3D game development.
The documentation for 3D game development using this framework is available on the BabylonJS website. Below is documentatio link n for getting started with game development using BabylonJS with Intel XDK:
- Getting started with 3D game development using BabylonJS game engine
HTML5 game performance on iOS and Android
Both iOS and Android apps can be optimized for better gaming performance by using a different WebView than the one that is available by default. Below are some game performance and optimization tips for iOS and Android.
iOS game performance optimization
Starting with iOS 8, the iOS WebView supports WebGL that significantly improves the HTML5 game performance. The iOS 8 has 95% market share among iOS devices, so the target version of iOS can be set as 8 for iOS build settings in Intel XDK. This will ensure that HTML5 games performs the best on iOS. iOS also supports a WebView based on a faster JavaScript engine called the WKWebView*. WKWebView uses the Nitro* JIT JavaScript engine which has significantly higher performance compared to the default UIWebView. Follow the link below to learn how to build iOS app with WKWebView using Intel XDK:
- Building Cordova iOS Apps with WKWebView
Android game performance optimization
Android version 5 WebView supports WebGL that significantly improves HTML5 game performance, however
as of today Android version 5+ market share is less than 30% among Android devices. Android 4.x has about 60% market share. The Crosswalk Project solves the Android fragmentation issue by providing an up-to-date WebView that can be used in Android 4.x devices.
Intel XDK makes it easy to build Android app with Crosswalk enabled, and this will ensure that the game performs well on all Android 4 and above devices. Follow the link below to learn how to build Android app with Crosswalk using Intel XDK:
- Why use Crosswalk?
- Building Cordova Android Apps with Crosswalk
Monetizing Games
Monetize the games you develop using Intel XDK by adding Cordova* plugins for AdMob*, In-App-Purchase integration and iOS Game Center/Google Play Services integration.
- In-App-Purchase integration
- Implementing AdMob* Ads in App
- Google Play Services and iOS Game Center integration
For more such intel resources and tools from Intel on Game, please visit the Intel® Game Developer Zone
Source: https://software.intel.com/en-us/xdk/articles/game-development-for-mobile-devices-using-html5
Follow Us
