Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php on line 101

Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks/edd-blocks.php on line 101

Warning: The magic method GAINWP_Manager::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/gainwp.php on line 78

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 555

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 585

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 617

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 651

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 686

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 745

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 785

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":8619,"date":"2018-12-09T08:50:11","date_gmt":"2018-12-09T08:50:11","guid":{"rendered":"https:\/\/phasergames.com\/?p=8619"},"modified":"2021-05-19T14:25:21","modified_gmt":"2021-05-19T07:25:21","slug":"phaser-3-input-text-form-ui-part-1","status":"publish","type":"post","link":"https:\/\/phasergames.com\/phaser-3-input-text-form-ui-part-1\/","title":{"rendered":"Phaser 3 Input Text – Form Ui- Part 1"},"content":{"rendered":"\n

Phaser 3 Input Text<\/h2>\n\n\n\n

About a month ago I needed to find a way to implement a Phaser 3 input text field. This was due to needing to put a form into a Phaser 3 virtual world project I was working on. I had already placed an input element below the canvas for users to send chats to each other, but this needed much more space. <\/p>\n\n\n\n

Could I accomplish my project’s goals without having to totally rewrite a text field, dropdowns, and other form elements?
<\/p>\n\n\n\n

Then I remembered in Phaser 2 we did have an input field that was a plug-in. I recalled that the developer added an actual HTML form element over the existing HTML5 canvas. Could I use some of the experiments I’ve been doing with the AlignGrid for form elements as well? So far I had only been using it to align sprites, text, and images inside the canvas.<\/p>\n\n\n\n

I realized I could do it but with a limitation.  That limit being that the canvas had to be in the top left-hand corner of the webpage. If I did need it to be in the middle of a webpage I could accomplish the task using an iframe. This did not pose too much trouble with my work because my games are either on mobile which means they’re in the top left-hand corner already or I use a pop-up window if the player is trying to use the game on a desktop or laptop. This post will focus on the Phaser 3 text input and I will follow up with additional posts covering buttons and dropdowns. 
  Here is the final result below:
<\/p>\n\n\n\n

\"Phaser
Phaser 3 Input Text and Form Elements<\/figcaption><\/figure><\/div>\n\n\n\n

The Phaser Code<\/h2>\n\n\n\n

Instead of adding a text field dynamically I decided to work with existing form elements placed into the index.html. I would then write a class that would allow me to keep writing in the Phaser code style I was accustomed to. It was important that I did all the scaling and aligning from a Phaser Scene. You can see what I mean in a sample of my sceneMain.<\/p>\n\n\n\n

class SceneMain extends Phaser.Scene {\n    constructor() {\n        super('SceneMain');\n    }\n    preload() {}\n    create() {\n        this.formUtil = new FormUtil({\n            scene: this,\n            rows: 11,\n            cols: 11\n        });\n        this.formUtil.showNumbers();\n        \/\/\n        \/\/\n        \/\/\n        this.formUtil.scaleToGameW(\"myText\", .3);\n        this.formUtil.placeElementAt(16, 'myText', true);\n        \/\/\n        \/\/\n        \/\/\n        this.formUtil.scaleToGameW(\"area51\", .8);\n        this.formUtil.scaleToGameH(\"area51\", .5);\n        this.formUtil.placeElementAt(60, \"area51\", true, true);\n        this.formUtil.addChangeCallback(\"area51\", this.textAreaChanged, this);\n        \/\/\n        \/\/\n        \/\/\n    }\n    textAreaChanged() {\n        var text = this.formUtil.getTextAreaValue(\"area51\");\n        console.log(text);\n    }\n    update() {}\n}<\/code><\/pre>\n\n\n\n
The Html Code<\/h2>\n\n\n\n
For the HTML I used simple form elements after the game div tag with the id tags set to ‘myText’ for the text field and ‘area51’ for the text area.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>\n        <\/title>\n        <meta content=\"user-scalable=0, initial-scale=1,minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1\" name=\"viewport\">\n        <\/meta>\n    <\/head>\n<\/html>\n<script src=\"js\/phaser.min.js\" type=\"text\/javascript\">\n<\/script>\n<script src=\"js\/sceneMain.js\" type=\"text\/javascript\">\n<\/script>\n<script src=\"js\/main.js\" type=\"text\/javascript\">\n<\/script>\n<script src=\"js\/util\/formUtil.js\" type=\"text\/javascript\">\n<\/script>\n<script src=\"js\/util\/alignGrid.js\" type=\"text\/javascript\">\n<\/script>\n<body>\n    <div id=\"phaser-game\">\n    <\/div>\n\n    <input type=\"text\" id=\"myText\"\/>\n    <textarea id=\"area51\">SOME TEXT HERE<\/textarea>\n<\/body><\/code><\/pre>\n\n\n\n
The FormUtil Class<\/h2>\n\n\n\n
For the formUtil<\/g> class, I borrowed a lot of code from my AlignGrid <\/a>class.  I also added a few functions to get the text value as well. The text area on change only works when the text area loses focus, but you could easily check the value when a button is pressed, which I will cover in the next section. <\/p>\n\n\n\n
class FormUtil {\n    constructor(config) {\n        \/\/super();\n        this.scene = config.scene;\n        \/\/get the game height and width\n        this.gameWidth = this.scene.game.config.width;\n        this.gameHeight = this.scene.game.config.height;\n        this.alignGrid = new AlignGrid({\n            scene: this.scene,\n            rows: config.rows,\n            cols: config.cols\n        });\n    }\n    showNumbers() {\n        this.alignGrid.showNumbers();\n    }\n    scaleToGameW(elName, per) {\n        var el = document.getElementById(elName);\n        var w = this.gameWidth * per;\n        el.style.width = w + \"px\";\n    }\n    scaleToGameH(elName, per) {\n        var el = document.getElementById(elName);\n        var h = this.gameHeight * per;\n        el.style.height = h + \"px\";\n    }\n    placeElementAt(index, elName, centerX = true, centerY = false) {\n        \/\/get the position from the grid\n        var pos = this.alignGrid.getPosByIndex(index);\n        \/\/extract to local vars\n        var x = pos.x;\n        var y = pos.y;\n        \/\/get the element\n        var el = document.getElementById(elName);\n        \/\/set the position to absolute\n        el.style.position = \"absolute\";\n        \/\/get the width of the element\n        var w = el.style.width;\n        \/\/convert to a number\n        w = this.toNum(w);\n        \/\/\n        \/\/\n        \/\/center horizontal in square if needed\n        if (centerX == true) {\n            x -= w \/ 2;\n        }\n        \/\/\n        \/\/get the height\n        \/\/        \n        var h = el.style.height;\n        \/\/convert to a number\n        h = this.toNum(h);\n        \/\/\n        \/\/center verticaly in square if needed\n        \/\/\n        if (centerY == true) {\n            y -= h \/ 2;\n        }\n        \/\/set the positions\n        el.style.top = y + \"px\";\n        el.style.left = x + \"px\";\n    }\n    \/\/changes 100px to 100\n    toNum(s) {\n        s = s.replace(\"px\", \"\");\n        s = parseInt(s);\n        return s;\n    }\n    \/\/add a change callback\n    addChangeCallback(elName, fun, scope = null) {\n        var el = document.getElementById(elName);\n        if (scope == null) {\n            el.onchange = fun;\n        } else {\n            el.onchange = fun.bind(scope);\n        }\n    }\n    getTextAreaValue(elName) {\n        var el = document.getElementById(elName);\n        return el.value;\n    }\n    getTextValue(elName) {\n        var el = document.getElementById(elName);\n        return el.innerText;\n    }\n    hideElement(elName) {\r\n        var el = document.getElementById(elName);\r\n        el.style.display = \"none\";\r\n    }\r\n    showElement(elName) {\r\n        var el = document.getElementById(elName);\r\n        el.style.display = \"block\";\r\n    }\n}<\/code><\/pre>\n\n\n\n
\"\"
Phaser 3 input text example<\/figcaption><\/figure><\/div>\n\n\n\n
I hope this has been helpful. If you give it a try, I’d love your feedback.

\t
\n\n\t\t\n\t\t
\n\t\t\t