Touch Component

src/inputs/touch.js#L244-L298

Provides the entity with touch point events. Touch point events get dispatched to the closest (visible & Touch-enhanced) entity to the source of the event (if available).

Note: If you do not add this component, touch events will not be triggered on the entity.

Triggers all events described in TouchSystem and TouchState, these are:

Events

TouchOver [Data = {TouchPointEvent}]
when a finger enters the entity
TouchMove [Data = {TouchPointEvent}]
when a finger is over the entity and moves
TouchOut [Data = {TouchPointEvent}]
when a finger leaves the entity
TouchStart [Data = {TouchPointEvent}]
when a finger is pressed on the entity
TouchEnd [Data = {TouchPointEvent}]
when a finger is raised over the entity
TouchCancel [Data = {TouchPointEvent}]
when a touch event has been disrupted in some way whilst over the entity

Note: By default, touch events are treated as mouse events and are not triggered by this component. To change this behaviour (and enable multitouch) use Crafty.multitouch.

Example

Crafty.multitouch(true);

Crafty.e('2D, Canvas, Color, Touch')
  .attr({x: 10, y: 10, w: 40, h: 40})
  .color('green')
  .bind('TouchOver', function(TouchPoint){
    Crafty.log('A finger is over the entity', TouchPoint.identifier);
  })
  .bind('TouchMove', function(TouchPoint) {
    Crafty.log('A finger moves over the entity at { x: ' + TouchPoint.realX + ', y: ' + TouchPoint.realY + ' } coordinates.');
  })
  .bind('TouchOut', function(TouchPoint){
    Crafty.log('A finger is no longer over the entity', TouchPoint.identifier);
  });

Example

Crafty.multitouch(true);

var myEntity1 = Crafty.e('2D, Canvas, Color, Touch')
   .attr({x: 100, y: 100, w:200, h:200, z:1 })
   .color('black')
   .bind('TouchStart',function(e){ alert('big black box was touched', e); }),
 myEntity2 = Crafty.e('2D, Canvas, Color, Touch')
   .attr({x: 40, y: 150, w:90, h:300, z:2 })
   .color('green')
   .bind('TouchStart',function(e){ alert('big green box was touched', e); });