TouchState Component

src/controls/touch.js#L3-L38

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

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

Events

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
e.eventName

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

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

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

// Original touch event, containing additional native properties
e.originalEvent

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

Properties

Methods

Back to top

.touchPoints

src/controls/touch.js#L40-L58

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.

Example

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

.resetTouchPoints()

src/controls/touch.js#L70-L82
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

.triggerTouch()

src/controls/touch.js#L96-L123
public this triggerTouch(String eventName, Object eventData)
eventName

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

eventData

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.

Example

var wasTriggered = false;

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

Crafty.log(wasTriggered); // prints false