Listener must be a function. Key down + function with arguments

Phaser 3
1

Hi.

So, I wrote a simple line of code to listen to the key “Enter” down event.
Here’s the line : this.scene.scene.input.keyboard.on('keydown-' + 'Enter', onArrowClicked,this);

So !
this.scene.scene because when I took the example from the “Notes of Phaser 3”, my code told me “scene is undefined”.

Then, I tried to send arguments in “onArrowClicked” from all the possible ways. I always had the error “The listener must be a function”.

I also had a weird behaviour. In the called function (“onArrowClicked”) I MUST put a condition because an event (“type:“load””) is acting just like the keydown event is activated every second (probably every tick).

I suppose you need my entire code. I hope not, because I can’t put it on jsbin or codepen as the sprites (even phaser’s sprites (“red”,“sky”,“logo”)) don’t work.
So yeah, I corrected everything (with weird code xD). But know I can’t launch the function on pressing “Enter” (“Enter” is working as I listen to every key and print them and “Enter” works).

2

Yes, you should codepen your entire code. You can host images in a cloud solution (dropbox, google drive) and link to them.

3

Okay, I did it.
Sprites still aren’t working, but you can click on the black boxes to use the script as it should be used.
Just imagine that the box on the right is a big arrow to the right and the box to the left is a big arrow to the left.
But nevermind, that’s not the problem here. The real problem is that “Enter” isn’t working at all.

EDIT : https://codepen.io/anon/pen/LvdBGb

4

You probably don’t need to post your entired code, just try to find the relevant parts (mostly onArrowClicked and where it’s called).

5

@Skwal You’re right. But I already had the immense slackness to upload my code on codepen and my lazyness is 10 times higher when I think about cutting it but keeping it working.

How do I flag it ?

6

No, it’s fine. I was saying that because it’s not always easy (when the project is big and has a lot of files), but in your case it was one file and it’s not that big, so it’s all good. :slight_smile:

7

Okay nice :stuck_out_tongue:

8

The only problem I see is that the event is called 'keydown-ENTER'. It is case-sensitive, 'keydown-Enter' won’t work. You shouldn’t have to check for the type thought.

Here’s the pen updated https://codepen.io/anon/pen/EJEeBd if you want to test.

1 Like
9

Hello @TheHaricover, I’m actually not favoring this way to use functions but here is code’s kinda fixed version…

https://codepen.io/halilcakar/pen/gyeBOP

Basicly, i added your config.scene object another extend object and use these functions as it’s scene’s own functions.

So your config is:

var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            //added this
            extend: {
              createArrowNext,
              handleSlide
            }
        }
    };

After this inside your create function:

function create() {
    //....
    this.createArrowNext();
    this.handleSlide();
}

I actually didn’t understand at all what you are trying to do, but most certainly you should extend the Phaser.Scene and use it’s internal functions maybe check for examples for more info this one for instance. It’s from the labs.phaser.io and would be better with this i guess :slight_smile:

If you need help about refactoring your code into this kind let me know :slight_smile:

10

@Skwal. I changed ‘keydown-Enter’ to ‘keydown-ENTER’ but still, the key is “seen” by the code, but the function isn’t called.
I shouldn’t have to check for the type, but unfortunatly I must. Otherwise, the ‘load’ event call the function until the end of the slides and kinda block my script.

11

Hi @hcakar. Thank you for your help.
I’m not sure I understand how your fix could help me, but I don’t really understand everything behind phaser.
I’ve tested your codepen and when I press the “Enter” key, nothing happens. What I was trying to do is to press “Enter” instead of clicking on the arrow to go forward to another slide. Unfortunatly, nothing happens when we press “Enter”, except a console.log which shows us that the key is being “seen” by the code.
I’ll watch your other links now.

12

@Skwal Okay, after watching your codepen, I realized that you removed the condition for the type, so I removed it in my code (+ changed “Enter” to “ENTER”) and it’s working just like it should.
So apparently, it was just a typo. Is that normal that a typo (which is in addition really minor) did a so much weird behavior ?
Anyway, thank you !

13

Yes @TheHaricover, typos in actual code will generate errors, but typos in strings like this won’t, because they could literally be anything; unless some code validates it of course.
Basically, the reason why it didn’t complain about Enter is that you could have created your own event with that name, and it wouldn’t be an error (just a terrible idea :smiley: ).