Input
This page will cover the different ways that the user can interact with the application that Cocos provides.
Process
- Create event listener to detect touch
- Assign functions for different input states to the event listener
- Add the event listener to the event dispatched
Single Touch Input - detect when the user has interacted with their device using touch primarily for mobile devices using a single finger
// called when the touch first begins
bool onTouchBegan( Touch *touch, Event *event );
// called when the user moves their finger
void onTouchMoved( Touch *touch, Event *event );
// called when the user lifts their finger
void onTouchEnded( Touch *touch, Event *event );
// called when the device goes to another application such as a phone call
void onTouchCancelled( Touch *touch, Event *event );
EventListenerTouchOneByOne *listener = EventListenerTouchOneByOne::create( );
listener->setSwallowTouches( true );
listener->onTouchBegan = CC_CALLBACK_2( ClassName::onTouchBegan, this );
listener->onTouchMoved = CC_CALLBACK_2( ClassName::onTouchMoved, this );
listener->onTouchEnded = CC_CALLBACK_2( ClassName::onTouchEnded, this );
listener->onTouchCancelled = CC_CALLBACK_2( ClassName::onTouchCancelled, this );
Director::getInstance( )->getEventDispatcher( )->addEventListenerWithSceneGraphPriority( listener, this );
// called when the touch first begins
bool HelloWorld::onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *event)
{
CCLOG("onTouchBegan x = %f, y = %f", touch->getLocation().x, touch->getLocation().y);
return true; // true if the function wants to swallow the touch
}
// called when the user moves their finger
void HelloWorld::onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *event)
{
CCLOG("onTouchMoved x = %f, y = %f", touch->getLocation().x, touch->getLocation().y);
}
// called when the user lifts their finger
void HelloWorld::onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *event)
{
CCLOG("onTouchEnded x = %f, y = %f", touch->getLocation().x, touch->getLocation().y);
}
// called when the device goes to another application such as a phone call
void HelloWorld::onTouchCancelled(cocos2d::Touch *touch, cocos2d::Event *event)
{
CCLOG("onTouchCancelled x = %f, y = %f", touch->getLocation().x, touch->getLocation().y);
}
// checks if the device you are using is capable of touch
if ( cc.sys.capabilities.hasOwnProperty( 'touches' ) )
{
cc.eventManager.addListener(
{
event: cc.EventListener.TOUCH_ONE_BY_ONE,
// called when the touch first begins
onTouchBegan:function( touch, event )
{
cc.log( "Touch Began X: " + touch.getLocationX( ) );
cc.log( "Touch Began Y: " + touch.getLocationY( ) );
return true;
},
// called when the user moves their finger
onTouchMoved:function( touch, event )
{
cc.log( "Touch Moved X: " + touch.getLocationX( ) );
cc.log( "Touch Moved Y: " + touch.getLocationY( ) );
},
// called when the user lifts their finger
onTouchEnded:function( touch, event )
{
cc.log( "Touch Ended X: " + touch.getLocationX( ) );
cc.log( "Touch Ended Y: " + touch.getLocationX( ) );
},
// called when the device goes to another application such as a phone call
onTouchCancelled:function( touch, event )
{
cc.log( "Touch Cancelled X: " + touch.getLocationX( ) );
cc.log( "Touch Cancelled Y: " + touch.getLocationX( ) );
}
}, this );
}
Note: Put the JavaScript code inside the constructor
Multi Touch Input - detect when the user has interacted with their device using touch primarily for mobile devices using a multiple fingers
// called when the touches first begins
void onTouchesBegan( const std::vector<Touch *> &touches, cocos2d::Event *event );
// called when the user moves their finger(s)
void onTouchesMoved( const std::vector<Touch *> &touches, cocos2d::Event *event );
// called when the user lifts their finger(s)
void onTouchesEnded( const std::vector<Touch *> &touches, cocos2d::Event *event );
// called when the device goes to another application such as a phone call
void onTouchesCancelled( const std::vector<Touch *> &touches, cocos2d::Event *event );
EventListenerTouchAllAtOnce *listener = EventListenerTouchAllAtOnce::create( );
listener->onTouchesBegan = CC_CALLBACK_2( ClassName::onTouchesBegan, this );
listener->onTouchesMoved = CC_CALLBACK_2( ClassName::onTouchesMoved, this );
listener->onTouchesEnded = CC_CALLBACK_2( ClassName::onTouchesEnded, this );
listener->onTouchesCancelled = CC_CALLBACK_2( HelloWorld::onTouchesCancelled, this );
Director::getInstance( )->getEventDispatcher( )->addEventListenerWithSceneGraphPriority( listener, this );
// called when the touches first begins
void ClassName::onTouchesBegan( const std::vector<Touch *> &touches, Event *event )
{
CCLOG( "Touch Began %f", touches[touchIndex]->getLocation( ).x );
}
// called when the user moves their finger(s)
void ClassName::onTouchesMoved( const std::vector<Touch *> &touches, Event *event )
{
CCLOG( "Touch Moved %f", touches[touchIndex]->getLocation( ).x );
}
// called when the user lifts their finger(s)
void ClassName::onTouchesEnded( const std::vector<Touch *> &touches, Event *event )
{
CCLOG( "Touch Ended %f", touches[touchIndex]->getLocation( ).x );
}
// called when the device goes to another application such as a phone call
void ClassName::onTouchesCancelled( const std::vector<Touch *> &touches, Event *event )
{
CCLOG( "Touch Cancelled %f", touches[touchIndex]->getLocation( ).x );
}
// checks if the device you are using is capable of touch
if ( cc.sys.capabilities.hasOwnProperty( 'touches' ) )
{
cc.eventManager.addListener(
{
event: cc.EventListener.TOUCH_ALL_AT_ONCE,
onTouchesBegan:function( touches, event )
{
cc.log( "Touch Began: " + touches[touchIndex].getLocationX( ) );
},
onTouchesMoved:function( touches, event )
{
cc.log( "Touch Moved: " + touches[touchIndex].getLocationX( ) );
},
onTouchesEnded:function( touches, event )
{
cc.log( "Touch Ended: " + touches[touchIndex].getLocationX( ) );
},
onTouchesCancelled:function( touches, event )
{
cc.log( "Touch Cancelled: " + touches[touchIndex].getLocationX( ) );
}
}, this);
}
Note: touchIndex is the touch you are detecting so 0 would be the first touch in multi touch, 1 would be the second touch in multi touch etc
Note: Put the JavaScript code inside the constructor
Mouse Input - detect when the user has interacted with their device using a mouse
// when the user presses a mouse button
void onMouseDown( cocos2d::Event *event );
// when the user releases a mouse button
void onMouseUp( cocos2d::Event *event );
// when the mouse is moved
void onMouseMove( cocos2d::Event *event );
// when the mouse wheel is scrolled
void onMouseScroll( cocos2d::Event *event );
EventListenerMouse *listener = EventListenerMouse::create( );
listener->onMouseMove = CC_CALLBACK_1( ClassName::onMouseMove, this );
listener->onMouseUp = CC_CALLBACK_1( ClassName::onMouseUp, this );
listener->onMouseDown = CC_CALLBACK_1( ClassName::onMouseDown, this );
listener->onMouseScroll = CC_CALLBACK_1( ClassName::onMouseScroll, this );
Director::getInstance( )->getEventDispatcher( )->addEventListenerWithSceneGraphPriority( listener, this );
// when the user presses a mouse button
void ClassName::onMouseDown( Event *event )
{
EventMouse *e = ( EventMouse * )event;
e->getMouseButton( );
e->getCursorX( );
e->getCursorY( );
}
// when the user releases a mouse button
void ClassName::onMouseUp( Event *event )
{
}
// when the mouse is moved
void ClassName::onMouseMove( Event *event )
{
}
// when the mouse wheel is scrolled
void ClassName::onMouseScroll( Event *event )
{
EventMouse *e = ( EventMouse * )event;
e->getScrollX( );
e->getScrollY( );
e->getDelta();
}
// checks if the device you are using is capable of mouse input
if ( cc.sys.capabilities.hasOwnProperty( 'mouse' ) )
{
cc.eventManager.addListener(
{
event: cc.EventListener.MOUSE,
onMouseDown: function( event )
{
if ( event.getButton( ) == cc.EventMouse.BUTTON_LEFT )
{
cc.log( "Left mouse button pressed at " + event.getLocationX( ) );
}
},
onMouseUp: function(event)
{
if ( event.getButton() == cc.EventMouse.BUTTON_LEFT )
{
cc.log( "Left mouse button released at " + event.getLocationX( ) );
}
},
onMouseMove: function(event)
{
cc.log( "Mouse Moved: " + event.getLocationX( ) );
},
onMouseScroll: function(event)
{
cc.log( "Scroll: " + event.getLocationX( ) );
}
}, this );
}
Note: Put the JavaScript code inside the constructor
Keyboard Input - detect when the user has interacted with their device using a keyboard
// called when a key is pressed on the keyboard
void onKeyPressed( EventKeyboard::KeyCode keyCode, Event *event );
// called when a key is released on the keyboard
void onKeyReleased( EventKeyboard::KeyCode keyCode, Event *event );
EventListenerKeyboard *listener = EventListenerKeyboard::create( );
listener->onKeyPressed = CC_CALLBACK_2( ClassName::onKeyPressed, this );
listener->onKeyReleased = CC_CALLBACK_2( ClassName::onKeyReleased, this );
Director::getInstance( )->getEventDispatcher( )->addEventListenerWithSceneGraphPriority( listener, this );
// called when a key is pressed on the keyboard
void ClassName::onKeyPressed( EventKeyboard::KeyCode keyCode, Event *event )
{
CCLOG( "Key with keycode %d pressed", keyCode );
}
// called when a key is released on the keyboard
void ClassName::onKeyReleased( EventKeyboard::KeyCode keyCode, Event *event )
{
CCLOG( "Key with keycode %d released", keyCode );
}
// checks if the device you are using is capable of keyboard input
if ( cc.sys.capabilities.hasOwnProperty( 'keyboard' ) )
{
cc.eventManager.addListener(
{
event: cc.EventListener.KEYBOARD,
onKeyPressed: function( key, event )
{
cc.log( "Key Pressed: " + key.toString( ) );
},
onKeyReleased: function( key, event )
{
cc.log( "Key Released: " + key.toString( ) );
}
}, this );
}
Note: Put the JavaScript code inside the constructor
Accelerometer Input - detect when the user has interacted with their device by tilting it
// called when the device is tilted
void OnAcceleration( Acceleration *acc, Event *event );
Device::setAccelerometerEnabled( true );
EventListenerAcceleration *listener = EventListenerAcceleration::create( CC_CALLBACK_2( ClassName::OnAcceleration, this ) );
Director::getInstance( )->getEventDispatcher( )->addEventListenerWithSceneGraphPriority( listener, this );
// called when the device is tilted
void ClassName::OnAcceleration( Acceleration *acc, Event *event )
{
CCLOG( "X axis tilt %f", acc->x );
CCLOG( "Y axis tilt %f", acc->y );
CCLOG( "Z axis tilt %f", acc->z );
}
// checks if the device you are using is capable of accelerometer input
if ( cc.sys.capabilities.hasOwnProperty( 'accelerometer' ) )
{
cc.inputManager.setAccelerometerInterval( 1 / 60 );
cc.inputManager.setAccelerometerEnabled( true );
cc.eventManager.addListener(
{
event: cc.EventListener.ACCELERATION,
callback: function( accelEvent, event )
{
cc.log( 'Accel X: ' + accelEvent.x + ' Y: ' + accelEvent.y + ' Z: ' + accelEv
}
}, this );
}
Note: Put the JavaScript code inside the constructor
Updated about 2 months ago