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