制作一款HTML5 RPG游戏引擎教程(四).docx

《制作一款HTML5 RPG游戏引擎教程(四).docx》由会员分享，可在线阅读，更多相关《制作一款HTML5 RPG游戏引擎教程(四).docx（12页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1，实现后的代码为了向大家展示封装的必要性，所以我们先看实现后的代码：javascriptview plaincopy1. 2. 3. 4. 5. LTalk6. 7. 8. 9. init(30,legend,480,320,main);10. LRPGStage.setShortcuts(true);11. LGlobal.setDebug(true);12. varbackLayer,loadingLayer,talkLayer;13. vartalk;14. vartalkContent;15. vartalkNum=0;16. varloadData=17. name:yorhom_

2、face,path:./yorhom.jpg,18. name:lufy_face,path:./lufy.jpg19. ;20. varimglist=;21. functionmain()22. /加入进度条23. loadingLayer=newLoadingSample1();24. addChild(loadingLayer);25. /加载图片并显示进度26. LLoadManage.load(27. loadData,28. function(progress)29. loadingLayer.setProgress(progress);30. ,31. gameInit32.

3、);33. 34. functiongameInit(result)35. removeChild(loadingLayer);36. imglist=result;37. /初始化层38. backLayer=newLSprite();39. addChild(backLayer);40. talkLayer=newLSprite();41. backLayer.addChild(talkLayer);42. /加入操作按钮43. addEvent();44. /添加对话内容45. talkContent=46. name:Yorhom,msg:你好，lufy,face:imglistyor

4、hom_face,47. name:lufy,msg:你好，yorhom,face:imglistlufy_face,48. name:Yorhom,msg:lufylegend最新版本是哪个版本啊？,face:imglistyorhom_face,49. name:lufy,msg:你不知道自己看吗？,face:imglistlufy_face,50. name:Yorhom,msg:说得也是,face:imglistyorhom_face,51. ;52. /加入对话53. talkLayer.graphics.drawRect(5,black,20,15,400,130,true,bla

5、ck);54. talkLayer.alpha=0.8;55. talk=newLTalk(talkContent);56. talkLayer.addChild(talk);57. talkLayer.addEventListener(LMouseEvent.MOUSE_DOWN,say);58. /设置样式59. talk.setNameStyle(x:160,y:40,color:white,size:12);60. talk.setMsgStyle(x:160,y:70,color:white,size:10);61. talk.setFaceStyle(x:30,y:30);62.

6、talk.textWidth=260;63. 64. functionaddEvent()65. LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,say);66. 67. functionsay()68. if(talkNumtalkContent.length)69. /输出对话70. talk.wind(talkNum,function()talkNum+;);71. 72. 73. 74. 75. 76. 77. 78. 这78行代码就可以实现进行5次对话的效果，先发两张截图，如下：由此可见，本次封装还是很有作用的

7、。但是如何实现呢？请看接下来的讲解。2，LTalk类LTalk是一个对话类，构造器如下：javascriptview plaincopy1. functionLTalk(content)2. vars=this;3. base(s,LSprite,);4. if(!content)5. s.content=;6. else7. s.content=content;8. 9. s.x=0;10. s.y=0;11. s.textWidth=LStage.width;12. s.talkIndex=0;13. s.faceX=0;14. s.faceY=0;15. s.nameX=0;16. s.

8、nameY=0;17. s.nameColor=black;18. s.nameFont=宋体;19. s.nameSize=15;20. s.msgX=0;21. s.msgY=0;22. s.msgColor=black;23. s.msgFont=宋体;24. s.msgSize=15;25. 其中，textWidth属性是为了设置文字区宽度的，设置后，如果文字过多而超出这个区域就会自动换行。talkIndex指对话编号。faceX，faceY指人物头像位置。nameX，nameY指人物名称的位置；nameColor，nameFont，nameSize分别用来设置名称颜色，字体，尺寸。m

9、sgX，msgY，msgColor，msgFont，msgSize同分别代表对话内容的x坐标，y坐标，颜色，字体，尺寸。设定好刚才的那些属性后，就可以自定义对话样式了。这个类构造时要传个参数，这个参数是对话内容。是一个数组套JSON的格式，如下：plainview plaincopy1. 2. name:名称,msg:内容,face:头像图片,3. name:名称,msg:内容,face:头像图片,4. name:名称,msg:内容,face:头像图片,5. name:名称,msg:内容,face:头像图片,6. name:名称,msg:内容,face:头像图片,7. ;每往这个列表里加一条，

10、就会多一段对话。3，wind方法接下来看看wind方法：javascriptview plaincopy1. LTalk.prototype.wind=function(num,completeFunc)2. vars=this;3. if(!num|num=null)num=0;4. if(!completeFunc)completeFunc=null;5. s.talkIndex=num;6. s.removeAllChild();7. if(s.talkIndexs.content.length)8. vartalkObject=s.contents.talkIndex;9. varfa

11、ceBitmapdata=newLBitmapData(talkObject.face);10. varfaceBitmap=newLBitmap(faceBitmapdata);11. faceBitmap.x=s.faceX;12. faceBitmap.y=s.faceY;13. s.addChild(faceBitmap);14. varname=newLTextField();15. name.x=s.nameX;16. name.y=s.nameY;17. name.size=s.nameSize;18. name.color=s.nameColor;19. name.font=s

12、.nameFont;20. name.text=talkObject.name;21. name.width=s.textWidth;22. name.setWordWrap(true,name.getHeight()+5);23. s.addChild(name);24. varmsg=newLTextField();25. msg.x=s.msgX;26. msg.y=s.msgY;27. msg.size=s.msgSize;28. msg.color=s.msgColor;29. msg.font=s.msgFont;30. msg.text=talkObject.msg;31. ms

13、g.width=s.textWidth;32. msg.setWordWrap(true,msg.getHeight()+7);33. msg.wind(completeFunc);34. s.addChild(msg);35. else36. trace(Error:Paramexceedsthesizeofthecontent!);37. 38. 这个方法有两个参数，第一个是播放序号，第二个参数是输出完成后调用的函数。首先我们判断一下参数num是不是没定义，如果是就自动设0，然后再判断第二个参数是否定义，如果没有，就设为null。这样做可以确保程序运行无误。接着，我们把控制播放序号的属性t

14、alkIndex设为num，然后清空一次，以便不和上次输出的重叠在一起。接着判断talkIndex有没有超出最大值，没有的话就执行输出命令。代码如下：javascriptview plaincopy1. vartalkObject=s.contents.talkIndex;2. varfaceBitmapdata=newLBitmapData(talkObject.face);3. varfaceBitmap=newLBitmap(faceBitmapdata);4. faceBitmap.x=s.faceX;5. faceBitmap.y=s.faceY;6. s.addChild(face

15、Bitmap);7. varname=newLTextField();8. name.x=s.nameX;9. name.y=s.nameY;10. name.size=s.nameSize;11. name.color=s.nameColor;12. name.font=s.nameFont;13. name.text=talkObject.name;14. name.width=s.textWidth;15. name.setWordWrap(true,name.getHeight()+5);16. s.addChild(name);17. varmsg=newLTextField();1

16、8. msg.x=s.msgX;19. msg.y=s.msgY;20. msg.size=s.msgSize;21. msg.color=s.msgColor;22. msg.font=s.msgFont;23. msg.text=talkObject.msg;24. msg.width=s.textWidth;25. msg.setWordWrap(true,msg.getHeight()+7);26. msg.wind(completeFunc);27. s.addChild(msg);熟悉lufylegend的朋友不难理解这些，就是将名称，内容，头像全部加到界面上。显示内容为构造器参数

17、中对应的内容。wind做好后，大家想让文本逐字显示时只用写一行obj.wind();就行了。4，更改样式&手动清空对话&重设数据刚才我们看了控制文字，图片样式的几个属性，有很多，如果一个一个用手改就会很麻烦，而且要写很多行代码，因此我们加几个控制样式的方法，它们分别是：setFaceStyle，setNameStyle，setMsgStyle。运用时只用传入参数就行了。实现方法如下：javascriptview plaincopy1. LTalk.prototype.setFaceStyle=function(styleData)2. vars=this;3. if(!styleData.x)

18、s.faceX=0;elses.faceX=styleData.x;4. if(!styleData.y)s.faceY=0;elses.faceY=styleData.y;5. 6. LTalk.prototype.setNameStyle=function(styleData)7. vars=this;8. if(!styleData.x)s.nameX=0;elses.nameX=styleData.x;9. if(!styleData.y)s.nameY=0;elses.nameY=styleData.y;10. if(!styleData.color)s.nameColor=blac

19、k;elses.nameColor=styleData.color;11. if(!styleData.font)s.nameFont=宋体;elses.nameFont=styleData.font;12. if(!styleData.size)s.nameSize=15;elses.nameSize=styleData.size;13. 14. LTalk.prototype.setMsgStyle=function(styleData)15. vars=this;16. if(!styleData.x)s.msgX=0;elses.msgX=styleData.x;17. if(!sty

20、leData.y)s.msgY=0;elses.msgY=styleData.y;18. if(!styleData.color)s.msgColor=black;elses.msgColor=styleData.color;19. if(!styleData.font)s.msgFont=宋体;elses.msgFont=styleData.font;20. if(!styleData.size)s.msgSize=15;elses.msgSize=styleData.size;21. 值得注意的是，参数是一个JSON对象。格式如下：javascriptview plaincopy1. /*

21、给msg和name设置样式时传的参数*/2. x:x坐标,y:y坐标,color:文字颜色,size:文字尺寸3. /*给face设置样式时传的参数*/4. x:x坐标,y:y坐标OK，给对话设定样式就搞定了。再加一个手动清空对话的方法，这样一来可以方便用户手动清空对话：javascriptview plaincopy1. LTalk.prototype.clear=function()2. vars=this;3. s.removeAllChild();4. s.die();5. 最后加一个重设对话数据的函数：javascriptview plaincopy1. LTalk.prototyp

22、e.setData=function(content)2. vars=this;3. s.content=content;4. 5，Debug输出前面在设计类时，没考虑到大家debug，所以都没加入什么debug输出。这次想到了，就顺便做一下，顺便把以前的也做了一下。今天就只呈现LTalk中的Debug输出，代码如下：javascriptview plaincopy1. LTalk.prototype.showData=function()2. vars=this;3. for(varkeyins.content)4. trace(-No.+key+-);5. trace(Name:+s.co

23、ntentkey.name);6. trace(Msg:+s.contentkey.msg);7. trace(Face:+s.contentkey.face);8. 9. 调用此方法输出如下：6,源代码源代码不多，大家可以拿下去测试一下：javascriptview plaincopy1. /*2. *LTalk.js3. */4. functionLTalk(content)5. vars=this;6. base(s,LSprite,);7. if(!content)8. s.content=;9. else10. s.content=content;11. 12. s.x=0;13.

24、s.y=0;14. s.textWidth=LStage.width;15. s.talkIndex=0;16. s.faceX=0;17. s.faceY=0;18. s.nameX=0;19. s.nameY=0;20. s.nameColor=black;21. s.nameFont=宋体;22. s.nameSize=15;23. s.msgX=0;24. s.msgY=0;25. s.msgColor=black;26. s.msgFont=宋体;27. s.msgSize=15;28. 29. LTalk.prototype.setData=function(content)30.

25、 vars=this;31. s.content=content;32. 33. LTalk.prototype.showData=function()34. vars=this;35. for(varkeyins.content)36. trace(-No.+key+-);37. trace(Name:+s.contentkey.name);38. trace(Msg:+s.contentkey.msg);39. trace(Face:+s.contentkey.face);40. 41. 42. LTalk.prototype.setFaceStyle=function(styleData

26、)43. vars=this;44. if(!styleData.x)s.faceX=0;elses.faceX=styleData.x;45. if(!styleData.y)s.faceY=0;elses.faceY=styleData.y;46. 47. LTalk.prototype.setNameStyle=function(styleData)48. vars=this;49. if(!styleData.x)s.nameX=0;elses.nameX=styleData.x;50. if(!styleData.y)s.nameY=0;elses.nameY=styleData.y

27、;51. if(!styleData.color)s.nameColor=black;elses.nameColor=styleData.color;52. if(!styleData.font)s.nameFont=宋体;elses.nameFont=styleData.font;53. if(!styleData.size)s.nameSize=15;elses.nameSize=styleData.size;54. 55. LTalk.prototype.setMsgStyle=function(styleData)56. vars=this;57. if(!styleData.x)s.

28、msgX=0;elses.msgX=styleData.x;58. if(!styleData.y)s.msgY=0;elses.msgY=styleData.y;59. if(!styleData.color)s.msgColor=black;elses.msgColor=styleData.color;60. if(!styleData.font)s.msgFont=宋体;elses.msgFont=styleData.font;61. if(!styleData.size)s.msgSize=15;elses.msgSize=styleData.size;62. 63. LTalk.pr

29、ototype.wind=function(num,completeFunc)64. vars=this;65. if(!num|num=null)num=0;66. if(!completeFunc)completeFunc=null;67. s.talkIndex=num;68. s.removeAllChild();69. if(s.talkIndexs.content.length)70. vartalkObject=s.contents.talkIndex;71. varfaceBitmapdata=newLBitmapData(talkObject.face);72. varfac

30、eBitmap=newLBitmap(faceBitmapdata);73. faceBitmap.x=s.faceX;74. faceBitmap.y=s.faceY;75. s.addChild(faceBitmap);76. varname=newLTextField();77. name.x=s.nameX;78. name.y=s.nameY;79. name.size=s.nameSize;80. name.color=s.nameColor;81. name.font=s.nameFont;82. name.text=talkObject.name;83. name.width=

31、s.textWidth;84. name.setWordWrap(true,name.getHeight()+5);85. s.addChild(name);86. varmsg=newLTextField();87. msg.x=s.msgX;88. msg.y=s.msgY;89. msg.size=s.msgSize;90. msg.color=s.msgColor;91. msg.font=s.msgFont;92. msg.text=talkObject.msg;93. msg.width=s.textWidth;94. msg.setWordWrap(true,msg.getHei

32、ght()+7);95. msg.wind(completeFunc);96. s.addChild(msg);97. else98. trace(Error:Paramexceedsthesizeofthecontent!);99. 100. 101. LTalk.prototype.clear=function()102. vars=this;103. s.removeAllChild();104. s.die();105. 运用时，就只用写这些代码：javascriptview plaincopy1. vartalkContent=2. name:Yorhom,msg:你好，lufy,f

33、ace:imglistyorhom_face,3. name:lufy,msg:你好，yorhom,face:imglistlufy_face,4. name:Yorhom,msg:lufylegend最新版本是哪个版本啊？,face:imglistyorhom_face,5. name:lufy,msg:你不知道自己看吗？,face:imglistlufy_face,6. name:Yorhom,msg:说得也是,face:imglistyorhom_face,7. ;8. vartalk=newLTalk(talkContent);9. addChild(talk);10. talk.wind();顺便提示一下，LTalk构造时所传的对话内容参数是一个数组套JSON的格式，它要在游戏图片加载完成后再初始化，否则显示不出对话头像。最后把测试链接给大家： 进入后点击黑框开始对话。祝大家测试愉快近天就先说到这里，下次我们接着研究。本文由: 整理编辑 资源来源：