标签：
使用Phaser有一段时间的,越来越喜欢这个游戏引擎，但是它不像egret那样有专业的公司和团队去维护，并提供大量的工具，所以Phaser没有那么多的工具，但是真的很好用。
在做游戏登录界面的时候，发现Phaser没有提供TextBox的控件，在官方的论坛进行搜索以后得到了如下的结论
大部分的情况都是采用DOM的方式来去实现textbox。
本文采用DOM的方式实现了可以自适应Phaser画布的TextBox，效果图如下：
实现步骤如下：
1.自适应屏幕的程序在Phaser提供的模板里，具体可以到Phaser的官网上下载最新的源码，在源码里找到temple文件夹里面的fullscreen工程，因为该工程实现了屏幕的自适应缩放。
2.创建一个名为
的js文件
3.在该文件中定义function HtmlTextBox(game,x,y,width,height,text,style)，作为使用类
4.实现主要内容
上述代码添加了一个html的input。this.game = game;this.parentElement = game.canvas.parentNode;//创建一个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);
5.自适应屏幕
上述代码实现了update的时候，根据新的位置计算dom的位置和大小，从而自动适应了屏幕大小。
//更新函数，用来重新计算TextBox的位置 HtmlTextBox.prototype.update = function() { var canvas = this.game.canvas; var canvasX = canvas.offsetLeft; var canvasY = canvas.offsetTop; var canvasWidth = canvas.offsetWidth; var canvasHeight = canvas.offsetHeight; if(this.oldCanvasWidth == canvasWidth && this.oldCanvasHeight == canvasHeight && this.oldCanvasX == canvasX && this.oldCanvasY == canvasY)return; var gameWidth = this.game.world.width; var gameHeight = this.game.world.height; var widthScanle = canvasWidth/gameWidth; var heightScanle = canvasHeight/gameHeight; var xScanle = this._x/gameWidth; var yScanle = this._y/gameHeight; var newX = canvasX + canvasWidth * xScanle; var newY = canvasY + canvasHeight * yScanle; var newWidth = this._width * widthScanle; var newHeight = 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; }
最后附上这个TextBox的完整的源码。
HtmlTextBox.js
标签：
原文地址：http://www.cnblogs.com/litengfei/p/4250009.html
