-
Touch and Tilt
Level 3 Extended Diploma
Unit 22
Developing Computer Games
-
Touch and Tilt
On devices there are method for handling Touch
and Tilt events.
Typically there are browser handlers for some of
these events.
This is new technology within the device browsers
and is currently still being developed. So some
caution is recommended.
-
Touch and Tilt
• The intel XDK is one method for handling tilt
events using the device accelerometer.
-
Intel XDK
-
Intel XDK
• You are now in a position to be able to
develop your own game code.
• Currently you have used Notepad++ for the
HTML/CSS/Code.
-
Intel XDK
The Intel® XDK provides a comprehensive cross-platform development
environment for building hybrid HTML5 apps for mobile phone and
tablet devices.
HTML5 apps are not limited to smart web pages viewed in a browser,
you can also package your HTML5 code and deploy it directly on a
mobile device as a locally installed hybrid mobile app.
This enables the use of the same distribution and monetization
channels as for native mobile apps, in addition to the same app
installation and launch experience.
http://software.intel.com/en-us/html5/xdkdocs
http://software.intel.com/en-us/html5/xdkdocshttp://software.intel.com/en-us/html5/xdkdocshttp://software.intel.com/en-us/html5/xdkdocs
-
Intel XDK
• There is online documentation on using and
developing hybrid apps using the reference
on the previous slide.
• You can install the Intel XDK on your home
PC, it is free.
• You will need to create an account with Intel
using when first using the software.
-
Intel XDK
• Intel XDK is installed on all the lab PC’s.
• Find and start the Intel XDK IDE. (copy shortcut from studshare to
your desktop)
• You can create an account if you wish using your college email and a
password (you need to remember this).
• Then try some of the sample apps provided.
-
Intel XDK - Accelerometer
• The accelerometer in a device provides feedback in your
code on the tilt position of the device.
• This can be emulated in the software.
• The values on the x axis is between -1 (Fully tilt left) to 1
(Fully tilt right) e.g. -0.5 half tilt to left or 0.5 half tilt to the
right)
• To use this feature we have to put a watch on the
accelerometer with an interval.
• This interval in effect replaces our setInterval in breakout.
-
Intel XDK - Accelerometer
function watchAccel()
{
var options = { frequency: 50, adjustForRotation: true };
// Update every half second
watchID = intel.xdk.accelerometer.watchAcceleration(suc, options);
}
Update every
half second
Javascript
function to call
-
Intel XDK - Accelerometer
function suc(a)
{
if ( a.x < 0)
if (paddlex - paddledx > 0 )
paddlex -= a.x*-10;
if ( a.x > 0)
if (paddlex + paddlew + paddledx < WIDTH)
paddlex += a.x*10;
draw();
}
Update the
paddle
Call draw here
Multiply by 10
to get pixel
values
-
Intel XDK - Accelerometer
function stopWatch()
{
if (watchID)
{
intel.xdk.accelerometer.clearWatch(watchID);
watchID = null;
}
}
Stop watching
This variable
replaces
intervalid
-
Intel XDK - Accelerometer
//game over, so stop the animation
// clearInterval(watchID);
stopWatch(); Stop watching
-
Intel XDK - Accelerometer
Now you can test using the emulator.
If it does not work you can debug by clicking on
this button.
Refresh Debug
Emulator settings
-
Intel XDK
If it works then you can continue to try and run it
on your chosen device.
Follow the instructions in intel XDK to accomplish
this.
-
Touch and Tilt
You can use a DOM event handler for device
orientation.
window.addEventListener("deviceorientation",Tilt,false);
-
Touch and Tilt
function Tilt(e)
{
if(e.beta0)
x++; // increment ball horizontal position
if(e.gamma0)
y++; // increment ball vertical position
}
-
Touch
For touch events we can add another handler. document.getElementById("canvas").addEventListener("touchstart",
Touch, false);
document.getElementById("canvas").addEventListener("mousemove",
Touch, false);
Here I am using the same function for the mouse control.
-
Touch
function Tilt(e)
{
if(e.beta0)
x++; // increment ball horizontal position
if(e.gamma0)
y++; // increment ball vertical position
}
Further refinement of this code will be needed.
-
Touch and Tilt
Demo on the Nexus 7
You can now decide the platform for the game
you develop for assignment 2.
-
Touch and Tilt
Next session we will learn the development
aspects of designing your game for assignment 2.