How to Handle the Windows Phone 8.1 Back Button in Cocos2d-x v3.6

We recently added code to cocos2d-x v3.6 to better handle when the user presses the back button on a Windows Phone 8.1 device. In order for your cocos2d-x game to receive the back button event you will need to add some code to your app. Here is a simple tutorial that adds support for the back button event using the app generated by the Cocos2D-x console tool. 

 

  1. Make sure you have Cocos2d-x v3.6. 

  1. Make sure you have run setup.py and restarted the console window. 

  1. In your cocos2d-x directory type the following command 

cocos new backbutton -p com.back.button -l cpp -d projects 

  1. Open backbutton.sln in cocos2d-x\projects\backbutton\proj.win8.1-universal\ 

  1. Right-click on the backButton.WindowsPhone project and select Set as Startup Project 

  1. Press F5 to build and run the project 

  1. When the app runs in the emulator press the back button 

  1. The app will exist since you did not handle the back button event. This is the expected behavior. 

 

image

Handling the Back Button Event 

When you clicked on the back button, the Windows Phone 8.1 cocos2d-x engine detected that you did not handle the back button event and exited your app. It also printed out a message to the Debug output window in Visual Studio to tell you how to handle the event. The message looks like this: 

 

********************************************************************* 

GLViewImpl::BackButtonListener: Exiting application! 

 

If you want to listen for Windows Phone back button events, 

add a listener for EventKeyboard::KeyCode::KEY_ESCAPE 

Make sure you call stopPropagation() on the Event if you don't 

want your app to exit when the back button is pressed. 

 

For example, add the following to your scene... 

auto listener = EventListenerKeyboard::create(); 

listener->onKeyReleased = CC_CALLBACK_2(HelloWorld::onKeyReleased, this); 

getEventDispatcher()->addEventListenerWithFixedPriority(listener, 1); 

 

void HelloWorld::onKeyReleased(EventKeyboard::KeyCode keyCode, Event* event) 

{ 

     if (keyCode == EventKeyboard::KeyCode::KEY_ESCAPE) 

     { 

         if (myAppShouldNotQuit) // or whatever logic you want... 

         { 

             event->stopPropagation(); 

         } 

     } 

} 

 

You MUST call event->stopPropagation() if you don't want your app to quit! 

********************************************************************* 

So let’s follow these instructions to handle the back button event in our app. 

  1. Open the file HelloWorldScene.cpp in the backButton.Shared project. It is in the Classes folder. 

 

image

  1. Add the following code to the HelloWorld::init() method: 

 

// listen for the back button event 

auto listener = EventListenerKeyboard::create(); 

listener->onKeyReleased = CC_CALLBACK_2(HelloWorld::onKeyReleased, this); 

getEventDispatcher()->addEventListenerWithFixedPriority(listener, 1); 

 

  1. Add the following method to the HelloWorld class: 

void HelloWorld::onKeyReleased(EventKeyboard::KeyCode keyCode, Event* event) 

{ 

    bool myAppShouldNotQuit = true; 

    if (keyCode == EventKeyboard::KeyCode::KEY_ESCAPE) 

    { 

        if (myAppShouldNotQuit) // or whatever logic you want... 

        { 

            event->stopPropagation(); 

        } 

    } 

} 

 

  1. Declare the method in HelloWordScene.h 

 

// handle the back button event 

void onKeyReleased(cocos2d::EventKeyboard::KeyCode keyCode, cocos2d::Event* event); 

  1. Run your app and press the back button in the phone emulator. Your app should not quit since you are now handling the back button event. It is important to call stopPropagation() on the event passed to your listener if you do not want your app to quit. If your app is ready to quit then simple do not call stopPropagation() on the event. 

 

Happy coding !