Shohanur Rahaman Shohanur Rahaman - 5 months ago 252
Javascript Question

How to take text input in Phaser?

I am making a HTML5 game with Phaser, I want to take palyer name as input and save it for later use how can I do it with Phaser?

Answer

I've never seen a Flash game with HTML overlayed to handle text. I expect as Javscript game engines grow, they will ultimately find they also need to handle rendering text inside the canvas. The good news is that the work has already begun. https://github.com/goldfire/CanvasInput

<script src="CanvasInput.min.js"></script>

<script>
    var bmd = this.add.bitmapData(400, 50);    
    var myInput = this.game.add.sprite(15, 15, bmd);

    myInput.canvasInput = new CanvasInput({
        canvas: bmd.canvas,
    });
    myInput.inputEnabled = true;
    myInput.input.useHandCursor = true;    
</script>

A Phaser and CanvasInput demo can be seen here, http://codepen.io/jdnichollsc/pen/waVMdB?editors=001

One downside is that you must use canvas rendering in Phaser using Phaser.CANVAS and not Phaser.AUTO.

UPDATE: someone made this too https://github.com/orange-games/phaser-input