Phaser's textbox

Using phaser for a while, more and more like the game engine, but it is not as egret as a professional company and team to maintain, and provide a lot of tools, so phaser not so many tools, but really very useful.

In the game login interface, found that Phaser did not provide a TextBox control, in the official forum after the search has been the following conclusions

In most cases, the DOM approach is used to implement the TextBox.

This paper uses DOM to implement a TextBox that can be adapted to the Phaser canvas, as follows:

The implementation steps are as follows:

1. Adaptive screen program in Phaser provided template, specific to phaser official online Download the latest source code, found in the Source Temple folder fullscreen project, because the project to achieve the adaptive scaling of the screen.

2. Create a JS file named

3. Define function Htmltextbox (Game,x,y,width,height,text,style) in this file as the use class

4. Implementation of the main content

 This. game = game; This. parentelement = Game.canvas.parentNode;//Create a inputelement This. textboxelement = document.createelement (' input '); This. textBoxElement.style.position = ' absolute '; This. TextBoxElement.style.left = x+ ' px '; This. textBoxElement.style.top = y+ ' px '; This. TextBoxElement.style.width =width; This. TextBoxElement.style.height =height; This. Parentelement.insertbefore ( This. Textboxelement,game.canvas);
The above code adds an HTML input.

5. Adaptive screen

When the code above implements the update, the location and size of the DOM are calculated based on the new location, which automatically adapts to the screen size.

//update function to recalculate the location of the textboxHtmlTextBox.prototype.update =function(){    varCanvas = This. Game.canvas; varCANVASX =Canvas.offsetleft; varCanvasy =Canvas.offsettop; varCanvaswidth =Canvas.offsetwidth; varCanvasheight =Canvas.offsetheight; if( This. Oldcanvaswidth = = Canvaswidth && This. Oldcanvasheight = =Canvasheight&& This. oldcanvasx = = canvasx && This. Oldcanvasy = = Canvasy)return; varGamewidth = This. Game.world.width; varGameheight = This. Game.world.height; varWidthscanle = Canvaswidth/gamewidth;varHeightscanle = Canvasheight/gameheight;varXscanle = This. _x/gamewidth;varYscanle = This. _y/gameheight;varNEWX = canvasx + canvaswidth *Xscanle; varNewy = Canvasy + canvasheight *Yscanle; varNewwidth = This. _width *Widthscanle; varNewheight = This. _height *Heightscanle;  This. SetX (NEWX);  This. Sety (Newy);  This. SetWidth (Newwidth);  This. SetHeight (Newheight);  This. Oldcanvaswidth =Canvaswidth;  This. Oldcanvasheight =Canvasheight;  This. oldcanvasx =canvasx;  This. Oldcanvasy =Canvasy;}

Finally, attach the full source of this textbox.

Htmltextbox.js

Phaser's textbox