How to use Back Button Android?

Hello,

I would like to ask how to use KEY_ESCAPSE in Cocos Creator.

Thanks so much !

You can try this code:

cc.eventManager.addListener({
    event: cc.EventListener.KEYBOARD,
    onKeyPressed: function(keyCode, event) {
        if (keyCode === cc.KEY.back) {
            // the back button of Android Device is pressed
            // maybe it's not work in Web environment
        }
        else if (keyCode === cc.KEY.backspace) {
            // the backspace of PC/Mac is pressed
        }
        else if (keyCode === cc.KEY.escape) {
            // the escape of PC/Mac is pressed
        }
    }
}, this.node);
1 Like

Thank you so much ^___^

First time, I had to write code in proj.android.

:slight_smile:

I found this link document : http://cocos2d-x.org/docs/api-ref/creator/v1.2/classes/EventListener.html

// Create KEYBOARD EventListener.
cc.EventListener.create({
event: cc.EventListener.KEYBOARD,
onKeyPressed: function (keyCode, event) {
cc.log('pressed key: ’ + keyCode);
},
onKeyReleased: function (keyCode, event) {
cc.log('released key: ’ + keyCode);
}
});

// Create ACCELERATION EventListener.
cc.EventListener.create({
event: cc.EventListener.ACCELERATION,
callback: function (acc, event) {
cc.log('acc: ’ + keyCode);
}
});

Hi @zhangbin,

I want the cc.KEY.back to send a touchend event to a button. Can we do that? I have a “Close” button and if the user presses it, something happens. It’s working great in the browser:

closeButton = cc.find("Canvas/close-button");
closeButton.dispatchEvent(new cc.Event("touchend"));

But in Android, it causes this error:

Hi @Lifz,

I’m using the following code in the onLoad to handle the back button on Android and PC:

    cc.eventManager.addListener({
        event: cc.EventListener.KEYBOARD,
        onKeyPressed: function(keyCode, event) {
            if ((keyCode == cc.KEY.back) || (keyCode == cc.KEY.backspace))
                this.onTapBack(null);
        }.bind(this)
    }, this.node);

The onTapBack is the event handler of the dedicated back button on the screen, so I don’t have to send touchend to the button. I hope this helps.

Best regards,
Zsolt

…and one more additional info. To simulate the pressing event, I use the following in the onTapBack event:

    if (event === null)
        cc.find("Canvas/header/button_back").getComponent(cc.Button)._applyTransition("pressed");

That’s all!

Best regards,
Zsolt

Hi @PZsolt27,

Thanks for your reply! However, I’m not having trouble capturing the cc.KEY.back event, but sending a touchend to an unknown button at the time of the capture. I have a helper file I included in every scene and it decides which button to press when the back key is tapped. If there is a dialog box on the screen, it will press the close button for the dialog. If no dialog exists, it will press the scene’s close button. It works great in the browser but I think there’s a bug in the js -> native code for new cc.Event("touchend").

Anyway, I just now got it working by using emit() rather than dispatchEvent():

closeButton = cc.find("Canvas/close-button");
closeButton.emit("touchend");

Hi @Lifz,

I do nearly the same as you described, and the emit seems to be more elegant. Thanks! :slight_smile:

Best regards,
Zsolt

Here’s my full solution for anyone curious or for anyone in the future. This function is in a helper js file and is included in every scene; I just call listenForBack in every onLoad. There’s a bit of proprietary code in it, but it should all make sense given then context of the above conversation :slight_smile:

listenForBack: function() {
	var canvas = cc.find("Canvas");
	cc.eventManager.addListener({
		event: cc.EventListener.KEYBOARD,
		onKeyPressed: (code, event) => {
			var closeButton = null;

			if (code == cc.KEY.back || code == cc.KEY.backspace || code == cc.KEY.escape) {
				if (this.alertDialog && this.alertDialog.isValid) {
					closeButton = cc.find("container/ok", this.alertDialog);
				} else if (this.confirmDialog && this.confirmDialog.isValid) {
					closeButton = cc.find("container/cancel", this.confirmDialog);
				} else {
					closeButton = cc.find("close-button", canvas);
				}

				if (closeButton) closeButton.emit("touchend");
			}
		}
	}, canvas);
}
2 Likes

Hi everyone … i’m using cocos creator v2.0.0 and i use this code to run android back button

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);

onKeyDown: function ( event) {
if ((cc.macro.KEY.back) || (cc.macro.KEY.backspace)){
cc.director.end();
}
},

this code is working in editor(pc) but its not working at device… please my friends if u find any solution to run android back button . thank youu

1 Like

Your condition seems to be broken a little though the idea is correct.

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function(ev) {
  if (ev.keyCode === cc.macro.KEY.back) {
    cc.log(`'back' button pressed`);
  }
})