TouchState Component

Handles valid touch related events and touch points for the entity.

Note: This is an internally used component, automatically included in the TouchSystem.


TouchStart [Data = {TouchPointEvent}]
when a finger is pressed
TouchMove [Data = {TouchPointEvent}]
when a pressed finger is moved
TouchEnd [Data = {TouchPointEvent}]
when a finger is raised
TouchCancel [Data = {TouchPointEvent}]
when a touch event has been disrupted in some way

The standard Crafty TouchPointEvent object:

// event name of touch event

// identifier for this touch point, unique over the duration the finger is on the touch surface

// the closest (visible & Touch-enhanced) entity to the source of the event (if available), otherwise null

// (x,y) coordinates of the touch point in world (default viewport) space

// Original touch event, containing additional native properties

In addition to binding to these events, the current touch points can also be queried using the .touchPoints property.



Back to top


Holds data of all currently pressed touch points (useful for determining positions of fingers in every frame). Data of a touch point is lost when the respective finger is raised.


var touchPoint, touchPoints = Crafty.s('Touch').touchPoints;
for (var i = 0, l = touchPoints.length; i < l; i++) {
  touchPoint = touchPoints[i];
  Crafty.log(touchPoint.realX, touchPoint.realY); // logs coordinates in Crafty's world space
Back to top


public this .resetTouchPoints()

Reset all current touch points. Triggers appropriate "TouchCancel" events.

This method is called internally, but may be useful when running Crafty in headless mode.

See Also

Back to top


public this triggerTouch(String eventName, Object eventData)

Name of the touch event to trigger ("TouchStart", "TouchMove", "TouchEnd", "TouchCancel", ...)


The touch event to trigger

Try to trigger a touch event on this entity and persist the touch point. This method prevents inconsistent touch state. e.g. If this entity didn't receive a "TouchStart" of a identifier previously, it won't fire a "TouchEnd" event for that identifier.

This method is called internally, but may be useful when running Crafty in headless mode.


var wasTriggered = false;

   .bind('TouchEnd', function(evt) {
      wasTriggered = true;
   .triggerTouch('TouchEnd', { identifier: 0 });

Crafty.log(wasTriggered); // prints false