《制作一款HTML5 RPG游戏引擎教程(三).docx》由会员分享，可在线阅读，更多相关《制作一款HTML5 RPG游戏引擎教程(三).docx（16页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、今天我们先看实现后的代码：javascriptview plaincopy1. varcurtain=newLCurtainSample3();2. addChild(curtain);就两行，已经达到最简单了。那么接下来就来看看是如何实现它的。由于有很多种幕布效果，因此我只为大家实现常用的3种作为sample，大家可以借鉴一下，写出更美观的幕布。1，LCurtainSample1这个是一个基础幕布，效果是左右合拢。看看构造器中的代码：javascriptview plaincopy1. functionLCurtainSample1(speed,onClosing,onComplete)2.
2、 vars=this;3. base(s,LSprite,);4. if(!speed)speed=LStage.width/100;5. if(!onClosing)6. s.onClosing=function();7. else8. s.onClosing=onClosing;9. 10. if(!onComplete)11. s.onComplete=function();12. else13. s.onComplete=onComplete;14. 15. s.mode=close;16. s.width1=0;17. s.width2=0;18. s.isDoClosing=fal
3、se;19. s.speed=speed;20. s.addEventListener(LEvent.ENTER_FRAME,s.onshow);21. 这个类是继承自LSprite类，有三个参数，分别是：幕布合拢/展开的速度，幕布合拢后调用此函数，幕布展开后调用此函数。mode 属性顾名思义，它是用来表示接下来的工作的。当为close时说明要合拢。我们在其中定义两个属性：width1，width2，它们分别表示两块幕布显示的宽度，通过调节宽度来实现合拢。另外定义了isDoClosing来判断是否已经合拢。用speed来保存幕布移动速度，方便以后使用。然后我们给自身加一个时间轴事件，在时间轴事
4、件中调用onshow方法绘画幕布。onshow中的完整代码：javascriptview plaincopy1. 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=LS
5、tage.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. elseif(s.mode=open)16. s.width1-=s.speed;17. s.width2-=s.speed;18. if(s.width1=LStage.height/2)30. s.mode=open;31. if(s.isDoClosing
6、=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. elseif(s.mode=open)40. s.height1-=s.speed;41. s.height2-=s.speed;42. if(s.height1=LStage.height/2)34. s.mode=open;35. if(s.isDoClosing=false)36. s.onClosing();37. s.isDoClosi
7、ng=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. elseif(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.height10)51. s.mode=stop;52. 53. elseif(s.mode=stop)
8、54. s.graphics.clear();55. s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);56. s.onComplete();57. 58. 效果如下：4，切换场景上面我们实现了幕布类，接下来就要实战一下了。首先我们找几张图片：还有一张接着就用到了我们的幕布类实现切换场景，代码如下：javascriptview plaincopy1. 2. 3. 4. 5. Curtain幕布6. 7. 8. 9. init(30,legend,600,400,main);10. varbackindex=1;11. varloadlist=
9、12. name:back1,path:./back1.jpg,13. name:back2,path:./back2.jpg14. ;15. vardatalist=;16. LRPGStage.setShortcuts(true);17. LGlobal.setDebug(true);18. varbackLayer;19. varloadingLayer;20. functionmain()21. LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown);22. loadingLayer=newLo
10、adingSample1();23. addChild(loadingLayer);24. LLoadManage.load(25. loadlist,26. function(progress)27. loadingLayer.setProgress(progress);28. ,29. gameInit30. );31. 32. functiongameInit(result)33. datalist=result;34. backLayer=newLSprite();35. addChild(backLayer);36. addImg();37. 38. functionaddImg()
11、39. backLayer.removeAllChild();40. varbitmapdata=newLBitmapData(datalistback+backindex);41. varbitmap=newLBitmap(bitmapdata);42. backLayer.addChild(bitmap);43. 44. functiononkeydown()45. varcurtain=newLCurtainSample3(20,function()46. if(backindex=1)47. backindex=2;48. elseif(backindex=2)49. backinde
12、x=1;50. 51. addImg();52. ,function()53. trace(已经切换为back+backindex);54. );55. addChild(curtain);56. 57. 58. 59. 60. 61. 62. 截图如下：合拢时展开完成后嘻嘻不错吧5，源代码本次开发代码虽然比较多，但都有些类似，放在下面，大家可以拿下去测试：javascriptview plaincopy1. /*2. *LCurtainSample1.js3. */4. functionLCurtainSample1(speed,onClosing,onComplete)5. vars=th
13、is;6. base(s,LSprite,);7. if(!speed)speed=LStage.width/100;8. if(!onClosing)9. s.onClosing=function();10. else11. s.onClosing=onClosing;12. 13. if(!onComplete)14. s.onComplete=function();15. else16. s.onComplete=onComplete;17. 18. s.mode=close;19. s.width1=0;20. s.width2=0;21. s.isDoClosing=false;22
14、. 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,bl
15、ack);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. elseif(s.mode=open)40. s.width1-=s.speed;41. s.width2-=s.speed;42. if(s.width1=LStage.height/2)80. s.mod
16、e=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. elseif(s.mode=open)90. s.height1-=s.speed;91. s.height2-=s.speed;92. if(s.height1=LStage.height/2)134. s.mode=open;135. if(s.isDoClosing=false)136.
17、 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. elseif(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.height10)151. s.mode=stop;152. 153. elseif(s.mode=stop)154. s.graphics.clear();155. s.removeEventListener(LEvent.ENTER_FRAME,s.onshow);156. s.onComplete();157. 158. 这次讲解就到这里，下一次我们就来实现必不可少的对话类，不容错过哦！谢谢大家阅读本文。支持就是最大的鼓励。-本文由: 整理编辑 资源来源：