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

资源ID：70325974 资源大小：82.68KB 全文页数：12页
资源格式： DOCX 下载积分：15金币

快捷下载

会员登录下载

微信登录下载

三方登录下载：

微信扫一扫登录

下载资源需要15金币

邮箱/手机：
温馨提示：	快捷下载时，用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）。如填写123，账号就是123，密码也是123。
支付方式：
验证码：	换一换

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

网站客服

侵权投诉

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

1，实现后的代码为了向大家展示封装的必要性，所以我们先看实现后的代码：javascript view plaincopy1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="utf-8" /> 5. <title>LTalk</title> 6. <script type="text/javascript" src="./lufylegend-1.7.6.min.js"></script> 7. <script type="text/javascript" src="./lufylegendrpg-1.0.0.js"></script> 8. <script> 9. init(30,"legend",480,320,main); 10. LRPGStage.setShortcuts(true); 11. LGlobal.setDebug(true); 12. var backLayer,loadingLayer,talkLayer; 13. var talk; 14. var talkContent; 15. var talkNum = 0; 16. var loadData = 17. name:"yorhom_face",path:"./yorhom.jpg", 18. name:"lufy_face",path:"./lufy.jpg" 19. 20. var imglist = 21. function main() 22. /加入进度条 23. loadingLayer = new LoadingSample1(); 24. addChild(loadingLayer); 25. /加载图片并显示进度 26. LLoadManage.load( 27. loadData, 28. function(progress) 29. loadingLayer.setProgress(progress); 30. , 31. gameInit 32. ); 33. 34. function gameInit(result) 35. removeChild(loadingLayer); 36. imglist = result; 37. /初始化层 38. backLayer = new LSprite(); 39. addChild(backLayer); 40. talkLayer = new LSprite(); 41. backLayer.addChild(talkLayer); 42. /加入操作按钮 43. addEvent(); 44. /添加对话内容 45. talkContent = 46. name:"Yorhom",msg:"你好，lufy",face:imglist"yorhom_face", 47. name:"lufy",msg:"你好，yorhom",face:imglist"lufy_face", 48. name:"Yorhom",msg:"lufylegend最新版本是哪个版本啊？",face:imglist"yorhom_face", 49. name:"lufy",msg:"你不知道自己看吗？",face:imglist"lufy_face", 50. name:"Yorhom",msg:"说得也是",face:imglist"yorhom_face", 51. 52. /加入对话 53. talkLayer.graphics.drawRect(5,"black",20,15,400,130,true,"black"); 54. talkLayer.alpha = 0.8; 55. talk = new LTalk(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. talk.textWidth = 260; 63. 64. function addEvent() 65. LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,say); 66. 67. function say() 68. if(talkNum < talkContent.length) 69. /输出对话 70. talk.wind(talkNum,function()talkNum+;); 71. 72. 73. </script> 74. </head> 75. <body> 76. <div id="legend"></div> 77. </body> 78. </html> 这78行代码就可以实现进行5次对话的效果，先发两张截图，如下：由此可见，本次封装还是很有作用的。但是如何实现呢？请看接下来的讲解。2，LTalk类LTalk是一个对话类，构造器如下：javascript view plaincopy1. function LTalk(content) 2. var s = this; 3. base(s,LSprite,); 4. if(!content) 5. s.content = 6. else 7. 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.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分别用来设置名称颜色，字体，尺寸。msgX，msgY，msgColor，msgFont，msgSize同分别代表对话内容的x坐标，y坐标，颜色，字体，尺寸。设定好刚才的那些属性后，就可以自定义对话样式了。这个类构造时要传个参数，这个参数是对话内容。是一个数组套JSON的格式，如下：plain view plaincopy1. 2. name:"名称",msg:"内容",face:头像图片, 3. name:"名称",msg:"内容",face:头像图片, 4. name:"名称",msg:"内容",face:头像图片, 5. name:"名称",msg:"内容",face:头像图片, 6. name:"名称",msg:"内容",face:头像图片, 7. ; 每往这个列表里加一条，就会多一段对话。3，wind方法接下来看看wind方法：javascript view plaincopy1. LTalk.prototype.wind = function(num,completeFunc) 2. var s = this; 3. if(!num | num = null)num = 0; 4. if(!completeFunc)completeFunc = null; 5. s.talkIndex = num; 6. s.removeAllChild(); 7. if(s.talkIndex < s.content.length) 8. var talkObject = s.contents.talkIndex; 9. var faceBitmapdata = new LBitmapData(talkObject.face); 10. var faceBitmap = new LBitmap(faceBitmapdata); 11. faceBitmap.x = s.faceX; 12. faceBitmap.y = s.faceY; 13. s.addChild(faceBitmap); 14. var name = new LTextField(); 15. name.x = s.nameX; 16. name.y = s.nameY; 17. name.size = s.nameSize; 18. name.color = s.nameColor; 19. name.font = s.nameFont; 20. name.text = talkObject.name; 21. name.width = s.textWidth; 22. name.setWordWrap(true,name.getHeight()+5); 23. s.addChild(name); 24. var msg = new LTextField(); 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. msg.width = s.textWidth; 32. msg.setWordWrap(true,msg.getHeight()+7); 33. msg.wind(completeFunc); 34. s.addChild(msg); 35. else 36. trace("Error: Param exceeds the size of the content!"); 37. 38. 这个方法有两个参数，第一个是播放序号，第二个参数是输出完成后调用的函数。首先我们判断一下参数num是不是没定义，如果是就自动设0，然后再判断第二个参数是否定义，如果没有，就设为null。这样做可以确保程序运行无误。接着，我们把控制播放序号的属性talkIndex设为num，然后清空一次，以便不和上次输出的重叠在一起。接着判断talkIndex有没有超出最大值，没有的话就执行输出命令。代码如下：javascript view plaincopy1. var talkObject = s.contents.talkIndex; 2. var faceBitmapdata = new LBitmapData(talkObject.face); 3. var faceBitmap = new LBitmap(faceBitmapdata); 4. faceBitmap.x = s.faceX; 5. faceBitmap.y = s.faceY; 6. s.addChild(faceBitmap); 7. var name = new LTextField(); 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. var msg = new LTextField(); 18. 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的朋友不难理解这些，就是将名称，内容，头像全部加到界面上。显示内容为构造器参数中对应的内容。wind做好后，大家想让文本逐字显示时只用写一行obj.wind();就行了。4，更改样式&手动清空对话&重设数据刚才我们看了控制文字，图片样式的几个属性，有很多，如果一个一个用手改就会很麻烦，而且要写很多行代码，因此我们加几个控制样式的方法，它们分别是：setFaceStyle，setNameStyle，setMsgStyle。运用时只用传入参数就行了。实现方法如下：javascript view plaincopy1. LTalk.prototype.setFaceStyle = function(styleData) 2. var s = this; 3. if(!styleData.x)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. var s = 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 = "black"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. var s = this; 16. if(!styleData.x)s.msgX = 0;elses.msgX = styleData.x; 17. if(!styleData.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对象。格式如下：javascript view plaincopy1. /*给msg和name设置样式时传的参数*/ 2. x:x坐标,y:y坐标,color:文字颜色,size:文字尺寸 3. /*给face设置样式时传的参数*/ 4. x:x坐标,y:y坐标 OK，给对话设定样式就搞定了。再加一个手动清空对话的方法，这样一来可以方便用户手动清空对话：javascript view plaincopy1. LTalk.prototype.clear = function() 2. var s = this; 3. s.removeAllChild(); 4. s.die(); 5. 最后加一个重设对话数据的函数：javascript view plaincopy1. LTalk.prototype.setData = function(content) 2. var s = this; 3. s.content = content; 4. 5，Debug输出前面在设计类时，没考虑到大家debug，所以都没加入什么debug输出。这次想到了，就顺便做一下，顺便把以前的也做了一下。今天就只呈现LTalk中的Debug输出，代码如下：javascript view plaincopy1. LTalk.prototype.showData = function() 2. var s = this; 3. for(var key in s.content) 4. trace("-No."+key+"-"); 5. trace("Name: " + s.contentkey.name); 6. trace("Msg: " + s.contentkey.msg); 7. trace("Face: " + s.contentkey.face); 8. 9. 调用此方法输出如下：6,源代码源代码不多，大家可以拿下去测试一下：javascript view plaincopy1. /* 2. *LTalk.js 3. */ 4. function LTalk(content) 5. var s = this; 6. base(s,LSprite,); 7. if(!content) 8. s.content = 9. else 10. s.content = content; 11. 12. s.x = 0; 13. 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. var s = this; 31. s.content = content; 32. 33. LTalk.prototype.showData = function() 34. var s = this; 35. for(var key in s.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) 43. var s = 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. var s = this; 49. if(!styleData.x)s.nameX = 0;elses.nameX = styleData.x; 50. if(!styleData.y)s.nameY = 0;elses.nameY = styleData.y; 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. var s = this; 57. if(!styleData.x)s.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.prototype.wind = function(num,completeFunc) 64. var s = this; 65. if(!num | num = null)num = 0; 66. if(!completeFunc)completeFunc = null; 67. s.talkIndex = num; 68. s.removeAllChild(); 69. if(s.talkIndex < s.content.length) 70. var talkObject = s.contents.talkIndex; 71. var faceBitmapdata = new LBitmapData(talkObject.face); 72. var faceBitmap = new LBitmap(faceBitmapdata); 73. faceBitmap.x = s.faceX; 74. faceBitmap.y = s.faceY; 75. s.addChild(faceBitmap); 76. var name = new LTextField(); 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 = s.textWidth; 84. name.setWordWrap(true,name.getHeight()+5); 85. s.addChild(name); 86. var msg = new LTextField(); 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.getHeight()+7); 95. msg.wind(completeFunc); 96. s.addChild(msg); 97. else 98. trace("Error: Param exceeds the size of the content!"); 99. 100. 101. LTalk.prototype.clear = function() 102. var s = this; 103. s.removeAllChild(); 104. s.die(); 105. 运用时，就只用写这些代码：javascript view plaincopy1. var talkContent = 2. name:"Yorhom",msg:"你好，lufy",face:imglist"yorhom_face", 3. name:"lufy",msg:"你好，yorhom",face:imglist"lufy_face", 4. name:"Yorhom",msg:"lufylegend最新版本是哪个版本啊？",face:imglist"yorhom_face", 5. name:"lufy",msg:"你不知道自己看吗？",face:imglist"lufy_face", 6. name:"Yorhom",msg:"说得也是",face:imglist"yorhom_face", 7. ; 8. var talk = new LTalk(talkContent); 9. addChild(talk); 10. talk.wind(); 顺便提示一下，LTalk构造时所传的对话内容参数是一个数组套JSON的格式，它要在游戏图片加载完成后再初始化，否则显示不出对话头像。最后把测试链接给大家：进入后点击黑框开始对话。祝大家测试愉快近天就先说到这里，下次我们接着研究。本文由: 整理编辑资源来源：

注意事项

本文（制作一款HTML5 RPG游戏引擎教程(四).docx）为本站会员（asd****56）主动上传，淘文阁 - 分享文档赚钱的网站仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知淘文阁 - 分享文档赚钱的网站（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。