Cordova Plugins for Hybrid Apps
A very well maintained directory of cordova plugins which developers should look at for various app related tasks. https://danielsogl.gitbook.io/awesome-cordova-plugins/
Category: Plugin
Steps to add Play Games Services to HTML5/Cordova App
If you have made an HTML5 game and have compiled the game to an APK using Cordova and now want to add Play Games Services to your app to use Leaderboard and Achievements from Play Games Services, you need to follow a set of steps to make it work. If you want to learn how to use cordova to compile HTML5 game to an APK and publish to the Google Play Store, follow the steps @ https://www.netexl.com/blog/use-cordova-to-compile-html5-games-to-android-app/ Assuming that we have installed all tools for cordova on our system and can compile the game to the APK, we will follow next steps for the Play Games Services integration. First we need to find a cordova plugin which integrates the Play Game Services API and add it to our project. Go to NPM and search for the latest plugin for the Play Game Services integration. If you have not already created[…]
How to add AdMob Reward Ads to Phaser 3 Game
We will be using corodva to compile a Phaser 3 Game to Android App. We are going to go over step by step description of how to implement Admob Reward Ads to our game. Let us start by creating a Phaser Game. For simplicity we will not have any game code in it but only a butoon to launch reward ads. Create the cordova project by using the following command in Node.js console. Refer to this blog to go over basic steps to compile an HTML5 game to Android app. We are going to use Admob Plus cordova plugin for implementing Admob ads in our game. Add plugin by using the command below. Make sure to replace App ID with your App ID in AdMob console. You need to create an App for your Android app and then create a Reward ad for that app which will be used here.[…]
Cordova Error: Android SDK not found. Make sure that it is installed
I recently tried to upgrade Cordova app which was last compiled almost an year back and got the following error Error: Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable. I turns out that I had updated Android SDK version on my PC during that time and all I needed to do was to update the platform version in the app as well. Using Node.js Command Prompt and cordova commands, check the installed platform in the app using the following command cordova platform version android Update the installed platform version in the app using the following command cordova platform update android While upgrading the app additional issues I faced were related to plugins not being compatible with the new platform version which were fixed by simply removing the plugins and re-adding it which in some cases[…]
Failed to remove a plugin from Intel XDK
In the latest Intel XDK version 3987 I was not able to remove the third-party plugins from HTML5 + Cordova app. Whenever I try to remove a plugin, it failed with the error message Uh oh! Path much be a string. Received undefined I found a workaround @ https://software.intel.com/en-us/forums/intel-xdk/topic/733620 Since Intel XDK is no more into development phase, I think this is the only way as long as this works. Steps are simple. Go to development tab and expand plugins folder there. Delete the third-party plugin and all dependent plugins. Also, delete fetch.json. Then go to Projects tab and delete the plugin from there under Plugin Management. Finally restart XDK.
Cordova Plugins: Review Unnecessary Permissions
If you went through the article on adding social sharing feature in HTML5 game using Intel XDK, it seemed like a simple plugin which should not require any permission but after adding the plugin and few more other plugins I found that WRITE_EXTERNAL_STORAGE permission was added in my android app so I checked all plugins one by one to see which plugin is adding what permissions and found out that WRITE_EXTERNAL_STORAGE permission was being added by social sharing plugin. When I checked developer notes (quoted below) I found that the permission was not required in my case, since I was not fetching any remote images for sharing. For sharing remote images (or other files) on Android, the file needs to be stored locally first, so add this permission to AndroidManifest.xml: <uses-permission android:name=“android.permission.WRITE_EXTERNAL_STORAGE“ /> In fact it was just a simple play store URL which I was sharing in my app so[…]
Add AdMob Ads to HTML5 Game using Intel XDK
The steps are as following Open your app in Intel XDK and go to CORDOVA HYBRID MOBILE APP SETTINGS section Click on “Add Plugins to this project” and search for the plugin “cordova-plugin-admob-free” in npm. Click “Add Plugin” which adds plugin to the project. Open your index.html and add following code <script> document.addEventListener(“deviceready”, onDeviceReady, false); function onDeviceReady() { initAd(); showBannerFunc(); } //initialize the goodies function initAd(){ admob.banner.config({ id: ‘ca-app-pub-3940256099942544/6300978111’, adSize: window.plugins.AdMob.AD_SIZE.BANNER }); admob.interstitial.config({ id: ‘ca-app-pub-3940256099942544/1033173712’, autoShow: false }); // Create banner admob.banner.prepare() } //display the banner function showBannerFunc(){ admob.banner.show(); } //prepare the interstitial function prepareInterstitialFunc(){ admob.interstitial.prepare(); } //display the interstitial function showInterstitialFunc(){ admob.interstitial.show(); } </script> Replace banner and interstitial ad code id with yours. The code in the example is given by Google to test the ads which displays placeholder ads for testing. This can be used during development and testing. Replace it with your ad codes for release. Another thing to note here[…]
Add Social Sharing Feature to HTML5 Game using Intel XDK
If you have gone through previous post in which we discussed about using Intel XDK to compile HTML5 games to Android apps, next steps are to add features which are quite necessary for every Android app such Social Sharing option. There are many open source plugins available to add Social Sharing feature to your app and it takes no more than a few minutes of effort to integrate this feature and get it working. The steps are as following Open your app in Intel XDK and go to CORDOVA HYBRID MOBILE APP SETTINGS section Click on “Add Plugins to this project” and search for the plugin “cordova-plugin-x-socialsharing” in npm. Click “Add Plugin” which adds plugin to the project. Open your index.html and add following code <script> function share(){ window.plugins.socialsharing.share(‘Sample’, null, null, ‘https://play.google.com/store/apps/details?id=com.html5games.sample’); } </script> Replace title and URL of the Android app in the code. And that is it. Now the share[…]
Transition from one state to another state in Phaser
If you followed previous articles I wrote on making of a responsive game in Phaser, one task was to implement smooth transition from one state to another in the game. Phaser states work by loading new state in the view and removing old state from the view which happens instantly and does not give a transition effect as if we are changing the state (or screen). In a polished game you would want to implement something which gives an impression of a transition from one screen to another. For example a sliding effect where player sees one screen sliding out of the view and another screen sliding in giving impression that something is changing in the game. Cristian Bote wrote a nice Phaser plugin State Transition Plugin for Phaser which gives many options to achieve this and good thing about it is that you don’t have to do much and can get away with changing a couple[…]