Genius
The Cordova environment allows to create a mobile applications using html5 technology stack. However it is obvious that capabilities of the mobile device (smartphone, tablet) are not the same as the browser. In the Cordova all specific functionalities of the device are solved as plugins to the platform. For example in order to use camera functionality inside our game we have to add appropriate plugin to our project and then with additional js objects/methods we can control the camera build in the device. In this course we will cover how to use: camera, accelerometer/giroscope, gps. The information about actual plugins can be found in Cordova documentation https://cordova.apache.org/plugins/.
As was mentioned in order to use a build in camera we have to add appropriate plugin. This plugin add to the cordova environment appropriate objects/methods that allow control of the camera via javascript operations Cordova camera plugin. In order to add a plugin we have to invoke the following shell command inside the project folder
cordova plugin add cordova-plugin-camera
The camera will be visible as a special js object navigator.camera, this object will be initiated just before 'deviceready' event is fired. Suppose, we would like just to take a picture and show it on the screen of the phone.
Our html file will be very simple:
The js file have the form:
The js file needs a little of explanation. The object camera_options (line 11) defines the properties of the camera, for details see plugin documentation. In order to take a photo one has to use method getPicture of navigator.camera (line 18) with appropriate callback functions for success and failure events.
In the method onSuccess one can notice the strange value of image.src, this value is just a jpeg image encoded to base64 string representation. (line 24).
In many of contextual games a player is required to prove his achievement or position in external game context. This operation can be fulfilled via gps coordinates, or scanning nfc tag, qrcode. As we know how to take a picture, we can now use camera for scanning QRCode. There are many solutions that can help us decode QRCode into text, in this course we will use https://github.com/LazarSoft/jsqrcode. This is a pure javascript library and works even in offline mode. In order to use Javascript QRCode scanner we need to download .js files from repository and include them to our project. For sake of readability we store them in the folder www/js/qrdecoder/ of our Cordova project and add lines below into index.html.
<script type="text/javascript" src="js/qrdecoder/grid.js"></script> <script type="text/javascript" src="js/qrdecoder/version.js"></script> <script type="text/javascript" src="js/qrdecoder/detector.js"></script> <script type="text/javascript" src="js/qrdecoder/formatinf.js"></script> <script type="text/javascript" src="js/qrdecoder/errorlevel.js"></script> <script type="text/javascript" src="js/qrdecoder/bitmat.js"></script> <script type="text/javascript" src="js/qrdecoder/datablock.js"></script> <script type="text/javascript" src="js/qrdecoder/bmparser.js"></script> <script type="text/javascript" src="js/qrdecoder/datamask.js"></script> <script type="text/javascript" src="js/qrdecoder/rsdecoder.js"></script> <script type="text/javascript" src="js/qrdecoder/gf256poly.js"></script> <script type="text/javascript" src="js/qrdecoder/gf256.js"></script> <script type="text/javascript" src="js/qrdecoder/decoder.js"></script> <script type="text/javascript" src="js/qrdecoder/qrcode.js"></script> <script type="text/javascript" src="js/qrdecoder/findpat.js"></script> <script type="text/javascript" src="js/qrdecoder/alignpat.js"></script> <script type="text/javascript" src="js/qrdecoder/databr.js"></script>
After that we change onSuccess method in our index.js into:
onSuccess: function(imageData) {
var image = $("#taken_photo")[0];//document.getElementById("taken_photo");
image.src = "data:image/jpeg;base64," + imageData; qrcode.callback = function(decodedData) {
console.log(JSON.stringify(decodedData));
}
var _qr1 = qrcode.decode(image.src);
}
In the code we have only two new elements:
For testing purposes we need to create a QRCode with some information. There are many free solutions in the Internet, you need to find one using preferred search engine. For testing purposes we need to create a QRCode with some information. There are many free solutions in the Internet, you need to find one using preferred search engine.
In some of the games developers prefer to use accelerometer or gyroscope as control mechanism. In previous versions of Cordova one needs to install device-motion plugin. However, lately the general Device Motion and Orientation API has been implemented in all of the most important mobile platform and therefore, the Cordova plugin is depreciated. As is suggested we will use mentioned API.
As usual we will start from basic Cordova project and add accelerometer capabilities. In simple example, we will place the ball in the center of the screen and move it using Motion/Orientration capability.
The Motion and Orientation API provides two types of event deviceorientation and devicemotion, which of these two are available depend on the real device. In this example we will use only orientation - as this can be emulate in developer tools of chrome browser https://developers.google.com/web/tools/chrome-devtools/device-mode/#orientation. The starting .html file will have the form:
The html file is simple, the one extra element is the <img id="ball_img"> object for our moving ball. JavaScript code is divided into two parts, Ball.js, and index.js. The html file is simple, the one extra element is the <img id="ball_img"> object for our moving ball. JavaScript code is divided into two parts, Ball.js, and index.js.
The class Ball contains logic of moving ball. The ball needs position coordinates (x,y) and velocity vector (vx,vy). As the ball will move inside closed area the values of maxX and maxY are needed. Additionally, the movement of this virtual ball need to be connected to the movement of ball image on the screen. The ball_img represents DOM img object. All this information will be provided via constructor (lines 4-12). Method startAnimation will start infinite loop of our scene animation. During an animation frame we update position using velocity (lines 19, 20), set the new position to bal_img object (lines 21, 22) and bouncing the ball from imaginary borders (lines 23, 24). The class Ball contains logic of moving ball. The ball needs position coordinates (x,y) and velocity vector (vx,vy). As the ball will move inside closed area the values of maxX and maxY are needed. Additionally, the movement of this virtual ball need to be connected to the movement of ball image on the screen. The ball_img represents DOM img object. All this information will be provided via constructor (lines 4-12). Method startAnimation will start infinite loop of our scene animation. During an animation frame we update position using velocity (lines 19, 20), set the new position to bal_img object (lines 21, 22) and bouncing the ball from imaginary borders (lines 23, 24).
In the main .js file we initiate listeners for Orientation and Motion events (lines 11 and 12) and create Ball object with appropriate parameter values. At the end of onDeviceReady method we start ball animation (line 15).
Whenever the device change orientation the handleOrientation method is invoked, inside we change ball velocity vx, vy according to the orientation parameters alpha, beta (lines 23, 24). If the device support Motion API the method handleMotion will be invoked with device movement. Whenever the device change orientation the handleOrientation method is invoked, inside we change ball velocity vx, vy according to the orientation parameters alpha, beta (lines 23, 24). If the device support Motion API the method handleMotion will be invoked with device movement.
Please use the example maze game created in here and add the orientation style of control to the game. and add the orientation style of control to the game.
As usual in order to have geolocation functionality we have to add appropriate plugin by running in the project folder the shell command:
cordova plugin add cordova-plugin-geolocation
This plugin adds to our Cordova environment three methods: getCurrentPosition, watchPosition, clearWatch of the navigator.geolocation object (see documentation). The first method is used for one time check of the location of the device. The second one can be use to start semi-continuous watching, the watching invoke an event whenever the position changes. The last method stops the watching activity.
As usual let us start with basic Cordova project with simple html:
The .html is very simple and no explanations are needed. In the .js file we should notice the object that contains options for position detection location_options. In line 13 the one time location query is invoked, later in lines 15-17 the position watching is starting (with 1 second timeout). Watching activity should stop after 60 seconds (lines 18-22). Whenever the location is obtained onPositionSuccess method is invoked. Here we obtain position and show it to the user. The .html is very simple and no explanations are needed. In the .js file we should notice the object that contains options for position detection location_options. In line 13 the one time location query is invoked, later in lines 15-17 the position watching is starting (with 1 second timeout). Watching activity should stop after 60 seconds (lines 18-22). Whenever the location is obtained onPositionSuccess method is invoked. Here we obtain position and show it to the user.
In the Cordova documentation of Geolocation reader can find a few examples of its usage (Weather forecast, Google Maps with location, find poi or pictures nearby. Please try them yourself. In the Cordova documentation of Geolocation reader can find a few examples of its usage (Weather forecast, Google Maps with location, find poi or pictures nearby. Please try them yourself.
Copyright Genius.