如何制作一款HTML5 RPG游戏引擎——第二篇,烟雨+飞雪效果
今天我们来实现烟雨+飞雪效果。首先来说,一款经典的RPG游戏难免需要加入天气的变化。那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它。
本文为该系列文章的第二篇,如果想了解以前的文章可以看看下面列表:
如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现
http://blog.csdn.net/yorhomwang/article/details/8892305
该引擎是基于lufylegend开发的,学习时请先了解lufylegend。
官方网站地址:http://lufylegend.com/lufylegend
API地址:http://lufylegend.com/lufylegend/api
※获得本次开发的灵感来自lufy在lufylegend.js下载包中编写的一个实例。
一,LEffect类
首先来搞一个LEffect类,构造器如下:
function LEffect(){var s = this;base(s,LSprite,[]);s.rainList = [];s.snowList = [];s.rainLayer = new LSprite();s.addChild(s.rainLayer);s.snowLayer = new LSprite();s.addChild(s.snowLayer);
}
这个LEffect类也是继承自LSprite,rainList是用来装雨点的一个数组,snowList则是用来装雪的一个数组。rainLayer,snowLayer分别是一个LSprite,如果是雪就绘画在snowLayer上,雨就在rainLayer。这个构造器很简单,接下来就来看看下雨的效果是怎么样实现的。
二,烟雨纷纷
这里我用烟雨来形容这个效果,难免有一些过分,因为它的美感远远还没达到那种地步。不过能在屏幕上飘雨点子还是实现了的,那好,就来让我们来看看关于它的代码吧:
LEffect.prototype.raining = function(speed,size){var s = this;if(!speed)speed = 30;if(!size)size = 5;s.rainLayer.addEventListener(LEvent.ENTER_FRAME,function(){s.onshow("rain",speed,size);});
}
首先,它是LEffect一个成员类,叫raining,有两个参数,分别是下雨时雨点落下速度,另一个是雨点尺寸。当然,使用时可以不给它们赋值,如果不给它们赋值那就用默认的值。接着加入ENTER_FRAME事件,也就是说,当rainLayer刷新一次,就调用以下功能,相当于一个时间轴。ENTER_FRAME具体的使用方法可以去lufylegend API文档看看。也许有朋友心急了,想迫切地看看onshow是个什么东西。本文最后一节会讲它,因为它和下雪的效果也有些关系。
接下来就轮到飞雪效果了。
三,飞雪效果
这次直接上代码吧,很raining差不多,只是改了最后调用onshow时传的参数和参数赋值而已:
LEffect.prototype.snowing = function(speed,size){var s = this;if(!speed)speed = 10;if(!size)size = 1;s.snowLayer.addEventListener(LEvent.ENTER_FRAME,function(){s.onshow("snow",speed,size);});
}
四,onshow方法
在实现raining和snowing时,我们都用到了onshow方法,并且还给它几个参数,我们不妨先看看代码:
LEffect.prototype.onshow = function(thing,speed,size){var s = this;if(thing == "rain"){s.rainLayer.graphics.clear();var rainX = Math.random()*(LStage.width-10-10)+10;var n = s.rainList.length;while(n--){var o = s.rainList[n];o.y += o.s;s.rainLayer.graphics.drawRect(1,"white",[o.x,o.y,1,size],true,"#f3f3f3");}s.rainList.push({x:rainX,y:0,s:speed});}else if(thing == "snow"){s.snowLayer.graphics.clear();var snowX = Math.random()*(LStage.width-10-10)+10;var n = s.snowList.length;while(n--){var o = s.snowList[n];o.y += o.s;s.snowLayer.graphics.drawArc(2,"white",[o.x,o.y,size,0,2*Math.PI],true,"white");}s.snowList.push({x:snowX,y:0,s:speed});}
}
很显然,这个onshow方法是整个效果类的核心部分,光看代码长度就应该知道。。。首先我们来看看它的参数:
thing:效果类型,如果为snow就下雪,如果是rain就下雨
speed:下雨下雪的速度
size:下雨下雪的尺寸
speed,size和snowing、raining中的speed,size值是一样的,因此,如果你在用snowing、raining时,直接给它们的参数赋值就行了。
我们现在来解释一下代码:
if(thing == "rain"){s.rainLayer.graphics.clear();var rainX = Math.random()*(LStage.width-10-10)+10;var n = s.rainList.length;while(n--){var o = s.rainList[n];o.y += o.s;s.rainLayer.graphics.drawRect(1,"white",[o.x,o.y,1,size],true,"#f3f3f3");}s.rainList.push({x:rainX,y:0,s:speed});
}
以上是下雨效果的实现,首先我们先清屏一次,接着随机取一个x坐标作为绘制的位置。接着我们遍历了一下我们的雨点数组,并且每遍历到一个,就把这个的y坐标加上速度的大小。然后用lufylegend中专门用来画矩形的函数画一个小矩形作为一个雨点。然后在雨点数组中记录下这些雨点的数据。由于我们用了时间轴事件,所以就能使雨点不断地画出来。
下雪的原理是一样的,就只有绘画方式不同,把画矩形改成了画圆而已。大家可以根据我刚才说的对应看看。
五,封装完成后应该怎么写?
刚刚我们把效果类封装好了,那么别人怎么用呢?我不妨给大家呈现一下代码,原本我们要写百十行才能实现的,封装完成后就只有这些了:
var backLayer = new LSprite();
var effect = new LEffect();
backLayer.addChild(effect);
//下雪
effect.snowing();
//下雨
effect.raining();
很简单是不是?这就是封装的力量!
六,效果演示
为了方便测试,我给它加了一个按钮和选择框用来显示不同的效果。
截图如下:
演示地址:http://www.cnblogs.com/yorhom/articles/3073050.html
代码很少,归纳后如下,感兴趣的朋友可以复制下来看看:
/**
*LEffect效果类
*/
function LEffect(){var s = this;base(s,LSprite,[]);s.rainList = [];s.snowList = [];s.rainLayer = new LSprite();s.addChild(s.rainLayer);s.snowLayer = new LSprite();s.addChild(s.snowLayer);
}
LEffect.prototype.raining = function(speed,size){var s = this;if(!speed)speed = 30;if(!size)size = 5;s.rainLayer.addEventListener(LEvent.ENTER_FRAME,function(){s.onshow("rain",speed,size);});
}
LEffect.prototype.snowing = function(speed,size){var s = this;if(!speed)speed = 10;if(!size)size = 1;s.snowLayer.addEventListener(LEvent.ENTER_FRAME,function(){s.onshow("snow",speed,size);});
}
LEffect.prototype.onshow = function(thing,speed,size){var s = this;if(thing == "rain"){s.rainLayer.graphics.clear();var rainX = Math.random()*(LStage.width-10-10)+10;var n = s.rainList.length;while(n--){var o = s.rainList[n];o.y += o.s;s.rainLayer.graphics.drawRect(1,"white",[o.x,o.y,1,size],true,"#f3f3f3");}s.rainList.push({x:rainX,y:0,s:speed});}else if(thing == "snow"){s.snowLayer.graphics.clear();var snowX = Math.random()*(LStage.width-10-10)+10;var n = s.snowList.length;while(n--){var o = s.snowList[n];o.y += o.s;s.snowLayer.graphics.drawArc(2,"white",[o.x,o.y,size,0,2*Math.PI],true,"white");}s.snowList.push({x:snowX,y:0,s:speed});}
}
前几天做了一个留言板,欢迎大家发表自己的意见
留言板地址:http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明:转自Yorhom's Game Box
欢迎继续关注我的博客
如何制作一款HTML5 RPG游戏引擎——第二篇,烟雨+飞雪效果相关推荐
- 如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现
一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...
- 如何制作一款HTML5 RPG游戏引擎——第四篇,情景对话
今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... ...
- 如何制作一款HTML5 RPG游戏引擎——第五篇,人物人物特效
上一次,我们实现了对话类,今天就来做一个游戏中必不可少的--人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...
- 如何制作一款HTML5 RPG游戏引擎——第三篇,利用幕布切换场景
开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...
- 如何实现一个HTML5 RPG游戏引擎——第五章,实现人物和人物特效
上一次,我们实现了对话类,今天就来做一个游戏中不可缺少的--人物类. 当然,你全然是能够自己写一个人物类,可是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...
- 如何实现一个HTML5 RPG游戏引擎——第一章,实现地图类
一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.因为我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...
- HTML5开源RPG游戏引擎lufylegendRPG 0.1发布
一,小小开篇 首先不得不先介绍一下这个引擎: lufylegendRPG是lufylegend的拓展引擎,使用它时,需要引入lufylegend.同时您也需要了解lufylegend语法,这样才能更合 ...
- 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)
本次来说一说如何利用lufylegend.js引擎制作一款html5游戏后将其通过Qt转换成EXE程序.步骤其实非常简单,接下来就一步步地做一下解释和说明. 首先我们来开发一个有点类似于太空大战的游戏 ...
- 不用写代码的Android 2D RPG游戏引擎
菠萝BOSS为一款基于Android系统的2D RPG游戏引擎,具有以下主要特点:(1)无需编写代码,采用纯配置的开发方式,适合不熟悉Android APP开发的个人及小团队,开发者可将精力投入到游戏 ...
最新文章
- 独家 | 如何手动优化神经网络模型(附链接)
- 关于modbus温湿度传感器,IIC热成像仪相关知识点总结
- 技术分享:NodeJS中的Events(事件触发器)讲解
- 【2012百度之星/初赛上】C:集合的交与并
- 文件逆顺输出到新文件(三种方案)
- 入住博客园,小庆一下
- ssm整合之配置applicationContext-service.xml
- Python输出异常信息(行号)
- vmware VCPU的一点理解记录
- 如何删除WORD中的空白行以及换行符
- “远程网络教学系统”教师参与者的用例图(志志)
- 中国计算机软件行业分析4---外企的商业贿赂
- 用python做头像_教你用python下载和拼接微信好友头像图片
- 使用apk来控制指纹(指纹型号迈瑞微 ECS120)
- codeforces 1598 A
- 关于ios包破解激活码(一机一码)以及添加激活码(一机一码)大神进!!
- weblogic漏洞总结复现
- readlink /var/lib/docker/overlay2/l: invalid argument报错解决
- 防火墙对计算机有作用吗,win7自带防火墙有用吗?关闭win7系统自带的防火墙对电脑有影响吗...
- vscode你最后一个编辑器_这几个插件,让你的 vscode更牛逼
热门文章
- linux服务端修改EDT为东八区,EDT开发环境配置
- PHP仿百度实现弹窗登录效果,js仿百度登录页实现拖动窗口效果
- linux文件元数据,linux编程stat检测文件元数据信息
- android 输入法 监听,android 监听 输入法
- 公平锁非公平锁的实际使用_面经手册 · 第16篇《码农会锁,ReentrantLock之公平锁讲解和实现》...
- 天津全国计算机等级考试报名时间2020,天津2020年计算机等级考试报名时间汇总...
- 剑指offer面试题[40]-数组中只出现一次的数字
- 31岁零基础转行软件测试,现已成功入职月薪14K+
- python统计词频_Python中文分词及词频统计
- php登录实现session记住密码,利用php实现一周之内自动登录存储机制(cookie、session、localStorage)...