Phaser高仿微信对话

今天来介绍一下,怎么用Phaser来实现一个高仿微信对话界面的效果,有了这个效果之后,我们可以做很多事情,比如,把网上的一些段子,用微信对话的形式表现出来,我这里有一个例子,有兴趣的可以看一看。线上地址:http://game.webxinxin.com/?game=weiduan

其实要实现这个功能并不是很难,只需要用到一些Phaser里面的图形、texttween动画等等知识。

这里一个难点是要让文字不超出区域的边界,要实现这一点,可以设置textstylewordWraptrue,然后设置一个wordWrapWidth,这样,文本就会在wordWrapWidth所限定的范围内折行了。但是,这仅仅是对于英文来说的,谁让Phaser是老外做的呢?那中文怎么办?中文需要在需要折行的地方加上一个空格,对了,就是空格!加上空格之后,就会被当成两个英文单词啦,这样就能够折行啦!

Phaser高仿微信对话_第1张图片

this.textStyle = {
  font: "14px Arial",
  fill: '#000000',
  wordWrap: true,
  wordWrapWidth: game.width - 80
};

另外一个难点就是,要让白色或者绿色的框框正好包含文本,这就需要提前知道文本的长度,才能确定框框的宽度。但是文本的长度怎么知道呢?这里,我们使用一个临时文本来解决这个问题。步骤是这样的,我们申明一个tmp的临时文本,使用设定好的style,将它addgame里,然后将它的widthheight得到,这样,我们就可以根据这个widthheight做后面的事情了。

// 虚拟一个text来计算宽高
var tmp = game.add.text(0, 0, text, this.textStyle);
tmp.lineSpacing = -3;
var width = tmp.width;
var height = tmp.height;
tmp.kill();

得到文本的宽度和高度之后,接下来,当产生一条新的消息之后,我们需要让前面的所有消息都往上移动一个距离,而这个距离就取决于之前得到的高度。当然,在这个过程中,如果有某一条消息移出了屏幕区域,我们需要将它kill掉。接下来,就是让新的消息出现,我们通过drawRoundedRect来绘制圆角矩形,然后把文本、矩形等等元素都作为head的子sprite,相对于head来定位,也和head一起移动。

// 都上移一个高度
for(var i=0; i<this.words.length; i++) {
  var newpos = this.words[i].pos - height - this.ellipse;
  if(newpos < 0 - this.words[i].height) {
    this.words[i].sprite.kill();
    this.words.splice(0, 1);
    i--;
  } else {
    game.add.tween(this.words[i].sprite).to({y: newpos}, 100, Phaser.Easing.Linear.None, true);
    this.words[i].pos = newpos;
  }
}
// 创建一个sprite
if(me) {
  var sprite = game.add.sprite(game.width - 40, game.height, head);
} else {
  var sprite = game.add.sprite(10, game.height, head);
}
// 背景
var rounded = game.make.graphics(0, 0);
if(me) {
  rounded.beginFill(0xa0e75a);
  rounded.drawRoundedRect(-width-29, 0, width+17, height+7, 4);
} else {
  rounded.beginFill(0xffffff);
  rounded.drawRoundedRect(42, 0, width+17, height+7, 4);
}
rounded.endFill();
sprite.addChild(rounded);
// 尖尖
if(me) {
  var jian = game.make.sprite(-12, 10, 'greenjian');
} else {
  var jian = game.make.sprite(37, 10, 'whitejian');
}
sprite.addChild(jian);
// 文本
if(me) {
  var txt = game.make.text(-width-19, 7, text, this.textStyle);
} else {
  var txt = game.make.text(52, 7, text, this.textStyle);
}
txt.lineSpacing = -3;
sprite.addChild(txt);
game.add.tween(sprite).to({y: game.height - height - this.ellipse}, 100, Phaser.Easing.Linear.None, true);

接下来,就是用一些数据结构去保存一些必要的数据啦,比较简单,这里就不细讲了,需要了解的同学,可以查看源码!

有了这个技能,只要脑洞够大,很多东西都能够实现了!

转载请注明出处: http://www.channingbreeze.com/blog-17.html

你可能感兴趣的:(html,游戏,Web,Phaser)