Mar 032014
 

A tutorial and sample code demonstrating how to easily use timed long touches and double taps in javascript for use with the Platino Game Engine

One of our developers emailed me asking for some help handling long touches and double taps while working with the Platino Game Engine – and jet lagged as I am after my return from Mobile World Congress in Barcelona, (blog to come soon,) I thought this was a fantastic idea for a tutorial and didn’t want to put it off.

There’s no need to download anything, just copy the code below and paste it into a new app.js file within your Platino application and it will run.

Long TouchDouble Tap

 

 

 

 

 

 

 

 

 

 

 

 

 

 

My commenting may look a little “off”, but I wanted to clearly break up the sections so any of you can easily copy and paste just the part you need for your game.

You will notice that the long touch alert fires after the touch has been held for three seconds regardless or whether or not the user releases it, but this is easily changed by switching the longTouch function to fire on touchend rather than touchStart, just swap the logic around.

  1. ///////////////////////////////////////////////////////////////
  2. // Regular initial set up code
  3. ///////////////////////////////////////////////////////////////
  4.  
  5. // require Platino
  6. var platino = require("co.lanica.platino");
  7.  
  8. // Create a new window
  9. var gameWindow = Ti.UI.createWindow();
  10.  
  11. // Create game view
  12. var game = platino.createGameView();
  13.  
  14. // Create a game scene
  15. var scene = platino.createScene();
  16.  
  17. // Add your scene to game view
  18. game.pushScene(scene);
  19.  
  20. // Make the scene background red rather than boring black
  21. scene.color(0.8,0,0);
  22.  
  23. ///////////////////////////////////////////////////////////////
  24. // Double Taps in Platino
  25. ///////////////////////////////////////////////////////////////
  26. // A variable for the timer to time taps, another to count taps
  27. var tapTimer;
  28. var taps = 0;
  29.  
  30. // Function for when a double tap occurs
  31. var doubleTap = function(e){
  32. alert("Double tapped");
  33. };
  34.  
  35. // Function to track whether or not two taps happen within 2 seconds and react accordingly
  36. var trackTaps = function(e){
  37. taps = taps + 1;
  38. if (taps < 2){
  39. tapTimer = setTimeout(function() {taps=0}, 2000);
  40. }
  41. else if(taps===2){
  42. clearTimeout(tapTimer);
  43. doubleTap();
  44. taps = 0;
  45. }
  46. };
  47.  
  48. // The event listener for double taps
  49. game.addEventListener("touchend", trackTaps);
  50.  
  51. ///////////////////////////////////////////////////////////////
  52. // Long touches in Platino
  53. ///////////////////////////////////////////////////////////////
  54. // A variable for tracking the length of the touch, another to count the time in seconds
  55. var touchTimer;
  56. var touchLength = 0;
  57.  
  58. // Function for when a long touch is detected
  59. var longTouch = function(e){
  60. if(touchLength>=3){
  61. clearInterval(touchTimer);
  62. touchLength = 0;
  63. alert("Touch held for 3 seconds")
  64. }
  65. };
  66.  
  67. // Function to monitor the long touch when touch is started
  68. var startLongTouch = function(e){
  69. touchTimer = setInterval(function() {touchLength=touchLength+1, longTouch()}, 1000);
  70. };
  71. // Event listener for starting the long touch
  72. game.addEventListener("touchstart", startLongTouch);
  73.  
  74. // Function to clear the accumulated time if touch is released early
  75. var endLongTouch = function(e){
  76. clearInterval(touchTimer);
  77. touchLength = 0;
  78. };
  79. // Event listener for ending the long touch
  80. game.addEventListener("touchend", endLongTouch);
  81.  
  82. ///////////////////////////////////////////////////////////////
  83. // Regular closing set up code
  84. ///////////////////////////////////////////////////////////////
  85. // Onload function
  86. game.addEventListener("onload", function(e) {
  87. // Set target screen size
  88. game.TARGET_SCREEN = {width:320, height:480};
  89. // set screen size for your game (TARGET_SCREEN size)
  90. var screenScale = game.size.width / game.TARGET_SCREEN.width;
  91. game.screen = {width:game.size.width / screenScale, height:game.size.height / screenScale};
  92. game.touchScaleX = game.screen.width / game.size.width;
  93. game.touchScaleY = game.screen.height / game.size.height;
  94. // Start the game
  95. game.start();
  96. });
  97.  
  98. // Add game and open game window
  99. gameWindow.add(game);
  100. gameWindow.open({fullscreen:true, navBarHidden:true});

 

I hope you’ll find this useful and please stay tuned for some more new Platino tutorials and samples coming very soon, including Ego for Platino (my popular saving/loading library), Platino for Newbies part 2 and a very cool demo of how to use particles to create a beautiful firefly scene in around 30 seconds. (Literally, 30 seconds.)

As always, if this helps you and you’d like to see more, please consider signing up for my newsletter, following me on Twitter or liking Techority on Facebook.

Peach Pellen :-)

  One Response to “Tutorial: Long Touches and Double Taps in Platino”

  1. […] Peach Pellen shares Long Touches and Double Taps in Platino. […]

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.