Use textarea in Phaser Game

In order to use textboxes in canvas we can use html input components and position them over the canvas. I recently had a requirement to display a message board resembling “textarea” in a Phaser game. The game was responsive so it also required repositioning and resizing of the textarea. I am posting bare minimum code to achieve this fuctionality here.

Add following html

We have added a textarea which is hidden initially. We will display this component after resizing and repositioning inside the game.

Now add css as following in app.css

We can customize scrollbar styles to make it look nicer using webkit scrollbar properties. You can change these styles to match your game. This works on chrome and safari. Other browsers do not support these properties but you can still stylize it using normal css styles to match your game.

Now add the game code as following

Click here to run the example on your system. Click on the game area to add message to the textarea. Resize the screen which will correctly calculate textarea size and reposition it in the game area.

 


Leave A Comment

Your email address will not be published. Required fields are marked *