如何制作一款HTML5 RPG游戏引擎——第三篇,利用幕布切换场景

本文转载自 http://blog.csdn.net/yorhomwang/article/details/9042571

开言:

在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果。所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕。

为了大家做游戏方便,于是我给这个引擎加了这么一个类。

本系列文章目录:

如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

http://blog.csdn.net/yorhomwang/article/details/8892305

如何制作一款HTML5 RPG游戏引擎——第二篇,烟雨+飞雪效果

http://blog.csdn.net/yorhomwang/article/details/8915020


该引擎是基于lufylegend开发的,学习时请先了解lufylegend。

官方网站地址:http://lufylegend.com/lufylegend

API地址:http://lufylegend.com/lufylegend/api


今天我们先看实现后的代码:

[javascript] view plaincopy
  1. var curtain = new LCurtainSample3();  
  2. addChild(curtain);  

就两行,已经达到最简单了。那么接下来就来看看是如何实现它的。

由于有很多种幕布效果,因此我只为大家实现常用的3种作为sample,大家可以借鉴一下,写出更美观的幕布。

1,LCurtainSample1

这个是一个基础幕布,效果是左右合拢。

看看构造器中的代码:

[javascript] view plaincopy
  1. function LCurtainSample1(speed,onClosing,onComplete){  
  2.     var s = this;  
  3.     base(s,LSprite,[]);  
  4.     if(!speed)speed = LStage.width/100;  
  5.     if(!onClosing){  
  6.         s.onClosing = function(){};  
  7.     }else{  
  8.         s.onClosing = onClosing;  
  9.     }     
  10.     if(!onComplete){  
  11.         s.onComplete = function(){};  
  12.     }else{  
  13.         s.onComplete = onComplete;  
  14.     }  
  15.     s.mode = "close";  
  16.     s.width1 = 0;  
  17.     s.width2 = 0;  
  18.     s.isDoClosing = false;  
  19.     s.speed = speed;  
  20.     s.addEventListener(LEvent.ENTER_FRAME,s.onshow);  
  21. }  
这个类是继承自LSprite类,有三个参数,分别是:幕布合拢/展开的速度,幕布合拢后调用此函数,幕布展开后调用此函数。

mode 属性顾名思义,它是用来表示接下来的工作的。当为close时说明要合拢。
我们在其中定义两个属性:width1,width2,它们分别表示两块幕布显示的宽度,通过调节宽度来实现合拢。另外定义了isDoClosing来判断是否已经合拢。用speed来保存幕布移动速度,方便以后使用。

然后我们给自身加一个时间轴事件,在时间轴事件中调用onshow方法绘画幕布。

onshow中的完整代码:

[javascript] view plaincopy
  1. LCurtainSample1.prototype.onshow = function(s){  
  2.     s.graphics.clear();  
  3.     s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");  
  4.     s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");  
  5.     if(s.width1 >= LStage.width/2){  
  6.         s.mode = "open";  
  7.         if(s.isDoClosing == false){  
  8.             s.onClosing();  
  9.             s.isDoClosing = true;  
  10.         }  
  11.     }  
  12.     if(s.mode == "close"){  
  13.         s.width1 += s.speed;  
  14.         s.width2 += s.speed;  
  15.     }else if(s.mode == "open"){  
  16.         s.width1 -= s.speed;  
  17.         s.width2 -= s.speed;  
  18.         if(s.width1 < 0){  
  19.             s.mode = "stop";  
  20.         }  
  21.     }else if(s.mode == "stop"){  
  22.         s.graphics.clear();  
  23.         s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);  
  24.         s.onComplete();  
  25.     }  
  26. }  
首先我们将我们的绘图区清空,然后画一个高为画布的高度,宽为width1的矩型。由于它是从x坐标为0,y坐标为0的地方画起,所以不需要任何处理。

接着用同样的办法画出高为画布的高度,宽为width2的矩形。但是由于是在屏幕最右边开始画,所以我们求是杂志就得计算出它的x坐标,然后再来画。计算方法很简单,就是用屏幕宽度减去width2的长度就可以得到画笔起始的x坐标。

接着我们判断第一块幕布是否已经到达中点,如果是,就将mode设为"open",表示接下来要open,判断isDoClosing是否为false,是则设为true,并且调用合拢时调用的函数。

接下来我们为了使幕布增长或缩短,我用到了判断mode的值的方法来实现。当为close时,就将宽度变大,当为open时就变小。如果移动完毕就将mode设置为stop,然后接着判断如果为stop就清屏,然后移除时间轴事件,达到停止的效果。效果如下:


虽然单独看有点丑,但是如果放在游戏中还是很不错的

2,LCurtainSample2

LCurtainSample2和LCurtainSample1差不多,只是一个是横着的,一个竖着的。

直接上代码:

[javascript] view plaincopy
  1. /** 
  2. *LCurtainSample2.js 
  3. */  
  4. function LCurtainSample2(speed,onClosing,onComplete){  
  5.     var s = this;  
  6.     base(s,LSprite,[]);  
  7.     if(!speed)speed = LStage.height/100;  
  8.     if(!onClosing){  
  9.         s.onClosing = function(){};  
  10.     }else{  
  11.         s.onClosing = onClosing;  
  12.     }     
  13.     if(!onComplete){  
  14.         s.onComplete = function(){};  
  15.     }else{  
  16.         s.onComplete = onComplete;  
  17.     }  
  18.     s.mode = "close";  
  19.     s.height1 = 0;  
  20.     s.height2 = 0;  
  21.     s.isDoClosing = false;  
  22.     s.speed = speed;  
  23.     s.addEventListener(LEvent.ENTER_FRAME,s.onshow);  
  24. }  
  25. LCurtainSample2.prototype.onshow = function(s){  
  26.     s.graphics.clear();  
  27.     s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");  
  28.     s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");  
  29.     if(s.height1 >= LStage.height/2){  
  30.         s.mode = "open";  
  31.         if(s.isDoClosing == false){  
  32.             s.onClosing();  
  33.             s.isDoClosing = true;  
  34.         }  
  35.     }  
  36.     if(s.mode == "close"){  
  37.         s.height1 += s.speed;  
  38.         s.height2 += s.speed;  
  39.     }else if(s.mode == "open"){  
  40.         s.height1 -= s.speed;  
  41.         s.height2 -= s.speed;  
  42.         if(s.height1 < 0){  
  43.             s.mode = "stop";  
  44.         }  
  45.     }else if(s.mode == "stop"){  
  46.         s.graphics.clear();  
  47.         s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);  
  48.         s.onComplete();  
  49.     }  
  50. }  

效果如下:


3,LCurtainSample3

LCurtainSample3是LCurtainSample1和LCurtainSample2的结合体,效果就是一起合拢展开。实现方法差不多,大家可以看看:

[javascript] view plaincopy
  1. /** 
  2. *LCurtainSample3.js 
  3. */  
  4. function LCurtainSample3(speed,onClosing,onComplete){  
  5.     var s = this;  
  6.     base(s,LSprite,[]);  
  7.     if(!speed)speed = LStage.width/100;  
  8.     if(!onClosing){  
  9.         s.onClosing = function(){};  
  10.     }else{  
  11.         s.onClosing = onClosing;  
  12.     }     
  13.     if(!onComplete){  
  14.         s.onComplete = function(){};  
  15.     }else{  
  16.         s.onComplete = onComplete;  
  17.     }  
  18.     s.mode = "close";  
  19.     s.height1 = 0;  
  20.     s.height2 = 0;  
  21.     s.width1 = 0;  
  22.     s.width2 = 0;  
  23.     s.isDoClosing = false;  
  24.     s.speed = speed;  
  25.     s.addEventListener(LEvent.ENTER_FRAME,s.onshow);  
  26. }  
  27. LCurtainSample3.prototype.onshow = function(s){  
  28.     s.graphics.clear();  
  29.     s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");  
  30.     s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");  
  31.     s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");  
  32.     s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");  
  33.     if(s.height1 >= LStage.height/2 ){  
  34.         s.mode = "open";  
  35.         if(s.isDoClosing == false){  
  36.             s.onClosing();  
  37.             s.isDoClosing = true;  
  38.         }  
  39.     }  
  40.     if(s.mode == "close"){  
  41.         s.height1 += s.speed;  
  42.         s.height2 += s.speed;  
  43.         s.width1 += s.speed;  
  44.         s.width2 += s.speed;  
  45.     }else if(s.mode == "open"){  
  46.         s.height1 -= s.speed;  
  47.         s.height2 -= s.speed;  
  48.         s.width1 -= s.speed;  
  49.         s.width2 -= s.speed;  
  50.         if(s.height1 < 0){  
  51.             s.mode = "stop";  
  52.         }  
  53.     }else if(s.mode == "stop"){  
  54.         s.graphics.clear();  
  55.         s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);  
  56.         s.onComplete();  
  57.     }  
  58. }  
效果如下:

4,切换场景

上面我们实现了幕布类,接下来就要实战一下了。

首先我们找几张图片:

还有一张


接着就用到了我们的幕布类实现切换场景,代码如下:

[javascript] view plaincopy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Curtain幕布</title>  
  6.     <script type="text/javascript" src="./js/lufylegend-1.7.6.min.js"></script>  
  7.     <script type="text/javascript" src="./js/lufylegendrpg-1.0.0.js"></script>   
  8.     <script>  
  9.     init(30,"legend",600,400,main);  
  10.     var backindex = 1;  
  11.     var loadlist = [  
  12.         {name:"back1",path:"./back1.jpg"},  
  13.         {name:"back2",path:"./back2.jpg"}  
  14.     ];  
  15.     var datalist = [];  
  16.     LRPGStage.setShortcuts(true);  
  17.     LGlobal.setDebug(true);  
  18.     var backLayer;  
  19.     var loadingLayer;  
  20.     function main(){  
  21.         LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown);  
  22.         loadingLayer = new LoadingSample1();   
  23.         addChild(loadingLayer);   
  24.         LLoadManage.load(   
  25.             loadlist,   
  26.             function(progress){   
  27.                 loadingLayer.setProgress(progress);   
  28.             },   
  29.             gameInit   
  30.         );   
  31.     }  
  32.     function gameInit(result){  
  33.         datalist = result;  
  34.         backLayer = new LSprite();  
  35.         addChild(backLayer);  
  36.         addImg();  
  37.     }  
  38.     function addImg(){  
  39.         backLayer.removeAllChild();  
  40.         var bitmapdata = new LBitmapData(datalist["back"+backindex]);  
  41.         var bitmap = new LBitmap(bitmapdata);  
  42.         backLayer.addChild(bitmap);  
  43.     }  
  44.     function onkeydown(){  
  45.         var curtain = new LCurtainSample3(20,function(){  
  46.             if(backindex == 1){  
  47.                 backindex = 2;  
  48.             }else if(backindex == 2){  
  49.                 backindex = 1;  
  50.             }  
  51.             addImg();  
  52.         },function(){  
  53.             trace("已经切换为back"+backindex);  
  54.         });  
  55.         addChild(curtain);  
  56.     }  
  57.     </script>  
  58.     </head>  
  59.     <body>  
  60.             <div id="legend"></div>  
  61.     </body>  
  62. </html>  
截图如下:

合拢时



展开完成后


嘻嘻~不错吧

5,源代码

本次开发代码虽然比较多,但都有些类似,放在下面,大家可以拿下去测试:

[javascript] view plaincopy
  1. /** 
  2. *LCurtainSample1.js 
  3. */  
  4. function LCurtainSample1(speed,onClosing,onComplete){  
  5.     var s = this;  
  6.     base(s,LSprite,[]);  
  7.     if(!speed)speed = LStage.width/100;  
  8.     if(!onClosing){  
  9.         s.onClosing = function(){};  
  10.     }else{  
  11.         s.onClosing = onClosing;  
  12.     }     
  13.     if(!onComplete){  
  14.         s.onComplete = function(){};  
  15.     }else{  
  16.         s.onComplete = onComplete;  
  17.     }  
  18.     s.mode = "close";  
  19.     s.width1 = 0;  
  20.     s.width2 = 0;  
  21.     s.isDoClosing = false;  
  22.     s.speed = speed;  
  23.     s.addEventListener(LEvent.ENTER_FRAME,s.onshow);  
  24. }  
  25. LCurtainSample1.prototype.onshow = function(s){  
  26.     s.graphics.clear();  
  27.     s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");  
  28.     s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");  
  29.     if(s.width1 >= LStage.width/2){  
  30.         s.mode = "open";  
  31.         if(s.isDoClosing == false){  
  32.             s.onClosing();  
  33.             s.isDoClosing = true;  
  34.         }  
  35.     }  
  36.     if(s.mode == "close"){  
  37.         s.width1 += s.speed;  
  38.         s.width2 += s.speed;  
  39.     }else if(s.mode == "open"){  
  40.         s.width1 -= s.speed;  
  41.         s.width2 -= s.speed;  
  42.         if(s.width1 < 0){  
  43.             s.mode = "stop";  
  44.         }  
  45.     }else if(s.mode == "stop"){  
  46.         s.graphics.clear();  
  47.         s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);  
  48.         s.onComplete();  
  49.     }  
  50. }  
  51. /** 
  52. *LCurtainSample2.js 
  53. */  
  54. function LCurtainSample2(speed,onClosing,onComplete){  
  55.     var s = this;  
  56.     base(s,LSprite,[]);  
  57.     if(!speed)speed = LStage.height/100;  
  58.     if(!onClosing){  
  59.         s.onClosing = function(){};  
  60.     }else{  
  61.         s.onClosing = onClosing;  
  62.     }     
  63.     if(!onComplete){  
  64.         s.onComplete = function(){};  
  65.     }else{  
  66.         s.onComplete = onComplete;  
  67.     }  
  68.     s.mode = "close";  
  69.     s.height1 = 0;  
  70.     s.height2 = 0;  
  71.     s.isDoClosing = false;  
  72.     s.speed = speed;  
  73.     s.addEventListener(LEvent.ENTER_FRAME,s.onshow);  
  74. }  
  75. LCurtainSample2.prototype.onshow = function(s){  
  76.     s.graphics.clear();  
  77.     s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");  
  78.     s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");  
  79.     if(s.height1 >= LStage.height/2){  
  80.         s.mode = "open";  
  81.         if(s.isDoClosing == false){  
  82.             s.onClosing();  
  83.             s.isDoClosing = true;  
  84.         }  
  85.     }  
  86.     if(s.mode == "close"){  
  87.         s.height1 += s.speed;  
  88.         s.height2 += s.speed;  
  89.     }else if(s.mode == "open"){  
  90.         s.height1 -= s.speed;  
  91.         s.height2 -= s.speed;  
  92.         if(s.height1 < 0){  
  93.             s.mode = "stop";  
  94.         }  
  95.     }else if(s.mode == "stop"){  
  96.         s.graphics.clear();  
  97.         s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);  
  98.         s.onComplete();  
  99.     }  
  100. }  
  101. /** 
  102. *LCurtainSample3.js 
  103. */  
  104. function LCurtainSample3(speed,onClosing,onComplete){  
  105.     var s = this;  
  106.     base(s,LSprite,[]);  
  107.     if(!speed)speed = LStage.width/100;  
  108.     if(!onClosing){  
  109.         s.onClosing = function(){};  
  110.     }else{  
  111.         s.onClosing = onClosing;  
  112.     }     
  113.     if(!onComplete){  
  114.         s.onComplete = function(){};  
  115.     }else{  
  116.         s.onComplete = onComplete;  
  117.     }  
  118.     s.mode = "close";  
  119.     s.height1 = 0;  
  120.     s.height2 = 0;  
  121.     s.width1 = 0;  
  122.     s.width2 = 0;  
  123.     s.isDoClosing = false;  
  124.     s.speed = speed;  
  125.     s.addEventListener(LEvent.ENTER_FRAME,s.onshow);  
  126. }  
  127. LCurtainSample3.prototype.onshow = function(s){  
  128.     s.graphics.clear();  
  129.     s.graphics.drawRect(1,"black",[0,0,LStage.width,s.height1],true,"black");  
  130.     s.graphics.drawRect(1,"black",[0,LStage.height-s.height2,LStage.width,s.height2],true,"black");  
  131.     s.graphics.drawRect(1,"black",[0,0,s.width1,LStage.height],true,"black");  
  132.     s.graphics.drawRect(1,"black",[LStage.width-s.width2,0,s.width2,LStage.height],true,"black");  
  133.     if(s.height1 >= LStage.height/2 ){  
  134.         s.mode = "open";  
  135.         if(s.isDoClosing == false){  
  136.             s.onClosing();  
  137.             s.isDoClosing = true;  
  138.         }  
  139.     }  
  140.     if(s.mode == "close"){  
  141.         s.height1 += s.speed;  
  142.         s.height2 += s.speed;  
  143.         s.width1 += s.speed;  
  144.         s.width2 += s.speed;  
  145.     }else if(s.mode == "open"){  
  146.         s.height1 -= s.speed;  
  147.         s.height2 -= s.speed;  
  148.         s.width1 -= s.speed;  
  149.         s.width2 -= s.speed;  
  150.         if(s.height1 < 0){  
  151.             s.mode = "stop";  
  152.         }  
  153.     }else if(s.mode == "stop"){  
  154.         s.graphics.clear();  
  155.         s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);  
  156.         s.onComplete();  
  157.     }  
  158. }  

这次讲解就到这里,下一次我们就来实现必不可少的对话类,不容错过哦!!!

阅读更多

没有更多推荐了,返回首页