對於一款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;
}