对于一款rpg游戏来说，地图上的丰富事件是必不可少的用以丰富游戏乐趣的方法，接下来就会介绍基于lufylegend引擎的基本实现方法，该引擎的下载以及使用方法可以参照之前的文章
在rpg中，剧情是不可缺少的组成部分，一款优秀的rpg游戏肯定会搭配一个精彩的故事，而故事的呈现主要通过过场和人物对话来呈现，这里主要讲的人物对话的实现
既然是对话，那么对话框就是必不可少的，所以需要先封装的就是对话框的类，该类实现对话框的显示，对鼠标点击事件的响应，以及文本的顺序载入
首先需要想到的是，对话框中所要呈现的东西，大致来说，一般分为，图像，人物姓名，人物所说的话这三种，所以，对于对话框内的类变量就需要包含上述三个变量，在这里，就先定义成piclayer（用来显示人物头像），Layer（用来显示外部的对话框），textlayer（用来显示人物所说的话），确定下来后，也就确定了需要给类赋初值的变量有几种，在这里简化成了三种，人物头像，人物所说的话，以及头像所在位置（左或右），通过数组变量来传递，下面就是定义用来传递参数的数组
dia=[[imglist["photo2"],"hello,My name is lianggong",1],
[imglist["photo1"],"well,you are so fast",2],
[imglist["photo2"],"em,I am the fastest",1],
[imglist["photo2"],"I am the lightning nova",1]]
接下来就是类的实现了，根据上述，实现的类的构造方法如下，首先是将三个变量定义好，并加载到对话框中，之后调用onshow方法将对话框显示出来
function LDialog(dia){
var s=this;
allLayer=this;
base(s,LSprite,[]);
s.dia=dia;
dialog=dia;
s.x=50;
s.y=1;
s.i=1;
//背景区域
Layer=new LSprite();
//文字区域
textLayer=new LTextField();
//头像区域
picLayer=new LSprite();
s.addChild(Layer);
s.addChild(picLayer);
s.addChild(textLayer);
s.onshow();
}
下面介绍的是onshow方法,在这里需要注意的是，运行onshow方法后并不会等待对话框显示完成后，才会调用下一个显示内容，所以在这里选择了将调用放在鼠标事件中
在按下鼠标后才会调用下一个显示内容，并清掉上一次的显示内容
//添加对话框
LDialog.prototype.οnshοw=function(){
var s=this;
Layer.graphics.drawRoundRect(4,"white",[50,1, 300,200,6],true,"#228B22");
var bitmapdata = new LBitmapData(s.dia[0][0]);
var bitmap = new LBitmap(bitmapdata);
picLayer.addChild(bitmap);
if(s.dia[0][2]==1){
picLayer.x=50;
picLayer.y=10;
textLayer.x=150;
textLayer.y=10;
}else{
picLayer.x=250;
picLayer.y=10;
textLayer.x=60;
textLayer.y=10;
}
textLayer.text=s.dia[0][1];
//字体的打印式显示
textLayer.speed=3;
textLayer.wind();
//调用下一次对话
s.addEventListener(LMouseEvent.MOUSE_DOWN, s.next);
}
另外需要注意一下的是通常在剧情中并不能做其他操作，所以在这里需要先设置一个剧情flag，在剧情开始时，将其赋值成true，此时不能做任何操作，在剧情结束后，将其赋值成false，允许操作。以及剧情只能发生一遍，如果不断重复发生就变的很怪异了，所以这里还需要设置了一个剧情flag，用来查看剧情是否已经触发过，所以index.php修改后的部分就是这样的
function onframe(){
//checkscene();
if(diaflag==false){
checkdialog();
}
}
function move(e){
if(!diastartflag){
playerLayer.move(e.keyCode);
}
}
function checkdialog(){
var dia1=new Array(dia.length);
if((playerLayer.x==192)&&(playerLayer.y==192))
{
diastartflag=true;
var dia1=new LDialog(dia);
diaLayer.addChild(dia1);
diaflag=true;
}
}
这样就实现了一个简单的对话框显示，效果图如下：
源代码：
LDialog.js
var Layer;
var picLayer;
var textLayer;
var textsize=32;//每个对话框可添加长度
var dialog;
var allLayer;
var i=1;
function LDialog(dia){
var s=this;
allLayer=this;
base(s,LSprite,[]);
s.dia=dia;
dialog=dia;
s.x=50;
s.y=1;
s.i=1;
//背景区域
Layer=new LSprite();
textLayer=new LTextField();
picLayer=new LSprite();
s.addChild(Layer);
s.addChild(picLayer);
s.addChild(textLayer);
s.onshow();
}
//添加对话框
LDialog.prototype.οnshοw=function(){
var s=this;
Layer.graphics.drawRoundRect(4,"white",[50,1, 300,200,6],true,"#228B22");
var bitmapdata = new LBitmapData(s.dia[0][0]);
var bitmap = new LBitmap(bitmapdata);
picLayer.addChild(bitmap);
if(s.dia[0][2]==1){
picLayer.x=50;
picLayer.y=10;
textLayer.x=150;
textLayer.y=10;
}else{
picLayer.x=250;
picLayer.y=10;
textLayer.x=60;
textLayer.y=10;
}
textLayer.text=s.dia[0][1];
textLayer.speed=3;
textLayer.wind();
s.addEventListener(LMouseEvent.MOUSE_DOWN, s.next);
//textLayer.addEventListener(LTextEvent.WIND_COMPLETE,s.clear);
}
LDialog.prototype.next=function(e){
var s=e.clickTarget;
Layer.remove();
picLayer.remove();
textLayer.remove();
if(s.i<s.dia.length){
Layer.graphics.drawRoundRect(4,"white",[50,1, 300,200,6],true,"#228B22");
var bitmapdata = new LBitmapData(dialog[s.i][0]);
var bitmap = new LBitmap(bitmapdata);
picLayer.addChild(bitmap);
if(dialog[s.i][2]==1){
picLayer.x=50;
picLayer.y=10;
textLayer.x=150;
textLayer.y=10;
}else{
picLayer.x=250;
picLayer.y=10;
textLayer.x=60;
textLayer.y=10;
}
textLayer.text=dialog[s.i][1];
textLayer.speed=3;
textLayer.wind();
//textLayer.addEventListener(LTextEvent.WIND_COMPLETE,s.next);
allLayer.addChild(Layer);
allLayer.addChild(picLayer);
allLayer.addChild(textLayer);
s.i++;
}else{
diastartflag=false;
}
return true;
}
//删除对话框
LDialog.prototype.clear=function(){
var s=this;
Layer.remove();
picLayer.remove();
textLayer.remove();
return true;
}