Touch Component

Provides the entity with touch related events

Events

TouchStart [Data = {TouchPoint}]
when entity is touched
TouchMove [Data = {TouchPoint}]
when finger is moved over entity
TouchCancel [Data = {TouchPoint}]
when a touch event has been disrupted in some way
TouchEnd [Data = {null}]
when the finger is raised over the entity, or when finger leaves entity. (Passes no data)

To be able to use multitouch, you must enable it with Crafty.multitouch(true).

If you don't need multitouch, you can probably use the Mouse component instead, since by default Crafty will trigger mouse events for touch input.

You can read more about the TouchEvent.

Example

Crafty.multitouch(true);

var myEntity = Crafty.e('2D, Canvas, Color, Touch')
.attr({x: 10, y: 10, w: 40, h: 40})
.color('green')
.bind('TouchStart', function(TouchPoint){
  Crafty.log('myEntity has been touched', TouchPoint);
}).bind('TouchMove', function(TouchPoint) {
  Crafty.log('Finger moved over myEntity at the { x: ' + TouchPoint.realX + ', y: ' + TouchPoint.realY + ' } coordinates.');
}).bind('TouchEnd', function() {
  Crafty.log('Touch over myEntity has finished.');
});