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\u00a0and resizing of the textarea. I am posting bare minimum code to achieve this fuctionality here.<\/p>\n
Add following html<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Demo<\/title>\r\n <meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no\">\r\n\r\n <link rel=\"stylesheet\" href=\"css\/app.css\">\r\n\r\n <script src=\"js\/phaser.min.js\"><\/script>\r\n <script src=\"js\/game.js\"><\/script>\r\n<\/head>\r\n <body>\r\n <textarea disabled id=\"txtArea\" style=\"display:none\" class=\"txtArea\"><\/textarea>\r\n\r\n <div id=\"container\">\r\n <div id=\"mygame\"><\/div>\r\n <\/div>\r\n <\/body>\r\n<\/html><\/pre>\nWe have added a textarea which is hidden initially. We will display this component after resizing and repositioning inside the game.<\/p>\n
Now add css as following in app.css<\/p>\n
body {\r\n padding: 0px;\r\n margin: 0px;\r\n background: #862C2C;\r\n overflow-x: hidden;\r\n}\r\n.txtArea{\r\n position: absolute;\r\n background-color: #ffffff;\r\n color: #000;\r\n padding: 10px;\r\n border: 3px solid #9E9E9E;\r\n resize: none;\r\n}\r\n\r\n\/* Scrollbar styles *\/\r\n::-webkit-scrollbar {\r\nwidth: 12px;\r\nheight: 12px;\r\n}\r\n\r\n::-webkit-scrollbar-track {\r\nborder: 1px solid red;\r\nborder-radius: 10px;\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\nbackground: #fb685d; \r\nborder-radius: 10px;\r\n}\r\n\r\n::-webkit-scrollbar-thumb:hover {\r\nbackground: #fb9891; \r\n}<\/pre>\nWe 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.<\/p>\n
Now add the game code as following<\/p>\n
\/\/ ---------------boot---------------------\r\nboot = {\r\n preload: function () {\r\n mygame.stage.backgroundColor = 0x33FCFF;\r\n mygame.load.image(\"loading\", \"images\/loading.png\");\r\n },\r\n create: function () {\r\n mygame.scale.scaleMode = Phaser.ScaleManager.RESIZE;\r\n mygame.scale.setScreenSize = true;\r\n mygame.state.start(\"Loading\");\r\n }\r\n};\r\n\/\/ ---------------loading---------------------\r\nloading = {\r\n preload: function () {\r\n mygame.stage.backgroundColor = 0x33FCFF;\r\n var loadingBar = mygame.add.sprite(this.world.centerX, this.world.centerY, \"loading\");\r\n loadingBar.anchor.setTo(0.5);\r\n this.load.setPreloadSprite(loadingBar);\r\n },\r\n create: function () {\r\n mygame.state.start(\"TheGame\");\r\n }\r\n};\r\n\r\n\/\/ ---------------TheGame---------------------\r\nvar TheGame = function () { };\r\n\r\nTheGame.prototype = {\r\n init: function () {\r\n },\r\n create: function () {\r\n var gameWidth = mygame.width;\r\n var gameHeight = mygame.height;\r\n\t\tthis.title = mygame.add.text(mygame.world.centerX, mygame.world.centerY, 'My Game', { font: '24px Arial', fill: '#000' });\r\n\t\tthis.title.anchor.setTo(0.5);\r\n\r\n this.positionControls(gameWidth, gameHeight);\r\n\t\tdisplayDiv(\"txtArea\", true);\r\n\t\tmygame.input.onDown.add(this.onMouseClick, this);\r\n },\r\n resize: function (width, height) {\r\n this.positionControls(width, height);\r\n },\r\n positionControls: function (width, height) {\r\n\t\tthis.title.x = mygame.world.centerX;\r\n\t\tthis.title.y = height * 0.125;\r\n this.divProps = { x: width * 0.25, y: height * 0.25, width: width * 0.50, height: height * 0.5 };\r\n this.resizeDiv(\"txtArea\", this.divProps);\r\n },\r\n resizeDiv: function (id, props) {\r\n var div = document.getElementById(id);\r\n div.style.width = props.width + 'px';\r\n div.style.height = props.height + 'px';\r\n div.style.left = props.x + 'px';\r\n div.style.top = props.y + 'px';\r\n },\r\n\tonMouseClick: function () {\r\n\t\tthis.writeToBoard('txtArea', \"Clicked at \" + mygame.input.x + \", \" + mygame.input.y + \"\\n\");\r\n\t},\r\n writeToBoard: function (id, message) {\r\n var div = document.getElementById(id);\r\n div.value += message;\r\n div.scrollTop = div.scrollHeight;\r\n }\r\n};\r\n\r\nfunction displayDiv(id, display) {\r\n var x = document.getElementById(id);\r\n if (display) {\r\n x.style.display = \"block\";\r\n } else {\r\n x.style.display = \"none\";\r\n }\r\n}\r\n\t\r\nvar mygame\r\nvar loadGame = function () {\r\n mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, \"mygame\");\r\n\r\n mygame.state.add(\"Boot\", boot);\r\n mygame.state.add(\"Loading\", loading);\r\n mygame.state.add(\"TheGame\", TheGame);\r\n mygame.state.start(\"Boot\");\r\n};\r\n \r\nif (document.readyState === \"complete\" || (document.readyState !== \"loading\" && !document.documentElement.doScroll)) {\r\n loadGame();\r\n} else {\r\n document.addEventListener(\"DOMContentLoaded\", loadGame);\r\n}\r\n<\/pre>\n