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

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.beta<0)

x--; // decrement ball horizontal position

if(e.beta>0)

x++; // increment ball horizontal position

if(e.gamma<0)

y--; // decrement ball vertical position

if(e.gamma>0)

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.beta<0)

x--; // decrement ball horizontal position

if(e.beta>0)

x++; // increment ball horizontal position

if(e.gamma<0)

y--; // decrement ball vertical position

if(e.gamma>0)

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.