Sign in to follow this  
xronn

Phaser key use in another js section

Recommended Posts

Hey,

 

I'm using spacebar as an interaction key in my phaser game, but I also want to use spacebar for my chatbox running on the same page. Unfortunately I can't put spaces in between words in my chat box because phaser won't allow it. 

Is there anyway to get around this?

 

Share this post


Link to post
Share on other sites

Hello,

 

I don't know your structure but perhaps try changing your preventDefault() in event handler for key press only to your phaser game, so it is not cought anywhere else in your page?

Hi, How would I do that I'm calling it in phaser as such - 

 

 interactButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

Should I just write the JS to do the correct action as default? 

Share this post


Link to post
Share on other sites

Aha, I'm not sure I understand how to apply it could someone show can example?

 

                $(".chat-entry").focus(function() {                    Phaser.Keyboard.removeKeyCapture(interactButton.Phaser.Keyboard.SPACEBAR);                    interactButton.enabled = false;                });

I can't call phaser outside of phaser so how do I know when to turn it off ;/

Share this post


Link to post
Share on other sites

How about stopping phaser key capture when your game element in your page loses focus and when the focus is back just add it back as well instead of your chat element? (or perhaps handle key event on your own).

 

EDIT: Or you can add addKeyCapture in phaser only when your key is pressed for your phaser action and leave it if it's for anything else - basically call preventDefault() only when your character jumps or whatever you use space bar for in your game?

Share this post


Link to post
Share on other sites

Well, I don't know if you saw my edit in the previous post.

 

But one way you can do that thing is as was suggested in that post I linked before, for example you can force it like this:

 

html page:

    <body>        <div id="gameDiv"></div>        <form>            First name:<br>            <input type="text" name="testInput" id="testInput"><br>        </form>        <script>            game.formKeys = false;            document.getElementById('testInput').addEventListener('focus', function(event){                game.formKeys = true;            })            document.getElementById('testInput').addEventListener('blur', function(event){                game.formKeys = false;            })        </script>    </body>

And in your javascript file somewhere (in this case everything is in one state called mainstate:

// inside phaser create function    this.spaceBar = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);// inside phaser update function    if (game.formKeys && !this.spaceBar.useOutside)    {        this.input.keyboard.removeKeyCapture(this.spaceBar.keyCode);        this.spaceBar.enabled = false;        this.spaceBar.useOutside = true;    }    if (!game.formKeys)    {        this.spaceBar.useOutside = false;        this.input.keyboard.addKeyCapture(this.spaceBar.keyCode);        this.spaceBar.enabled = true;    }    if (!this.spaceBar.useOutside && this.spaceBar.isDown)    {        // here whatever is needed to be done if space bar is down, I just print some text        var style = { font: "35px Arial", fill: "#ff0044", align: "center" };        var text = this.add.text(0, 0, "AAAAJJJ", style);    }

Well this works I tested it. Not sure if I didn't go through too many vars but I'm dead tired and I jsut wanted to show you how it is possible to achieve so implement it however you want or do something completely different ;-).

 

EDIT:

Just to be sure you know the context where game var came from

var game = new Phaser.Game(400, 300, Phaser.AUTO, 'gameDiv');game.state.add('main', mainstate);game.state.start('main');

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.