[简单教程]snow.ks/rain.ks插件的学习及修改报告
kag新手一只,在这里蹭大人们的教程好久了,万分感谢
看到很多关于雨雪插件的帖子,但是似乎没有太详尽的介绍
姑且将自己的简易学习报告发来一份
仅供参考,欢迎指正\^_^/
======================================================
snow.ks和rain.ks是kag自带的雨雪效果插件,内容相近,只是雨和雪载入的图片,以及纵向的速度控制有所区别.修改脚本中的参数,以及对应图片,便能以此为基础实现新的效果.
以snow.ks为例.脚本中涉及两个类,SnowGrain可以看做是定义单个雪花的类.在其中定义了每一个雪花的产生规则(包括初速度,加速度,在画面上的出现位置,移动到画面之外后的处理方式等).SnowPlugin则可以看做是下雪效果的发生器.其中的数组snows[]容纳了n个SnowGrain的实例(也就是在画面上飘啊飘的n个雪花= =),n的数目由用户调用snowinit命令时通过制定num的值来指定,默认是17.
先看SnowGrain的内容.它有这样一些属性
var fore; // 表层的雪花实例
var back; // 里层的雪花实例
var xvelo; // 横速度
var yvelo; // 纵速度
var xaccel; // 横加速度
var l, t; //在画面上的横,纵位置
var ownwer; // 持有它的SnowPlugin实例的句柄
var spawned = false; // 雪花是否已经产生
var window; // 参照窗体
其中关于雪花运动的属性主要是xvelo,yvelo,xaccel. kag本身没有为雪花设置纵加速度,故对于一个已经产生的雪花,其纵速度恒定.如果需要纵加速度,可以自行添加变量var yaccel.
在SnowGrain的构造方法function SnowGrain(window, n, owner)中,定义了速度和加速度信息.
xvelo = 0; // 横方向速度
yvelo = n*0.6 + 1.9 + Math.random() * 0.2; // 纵方向速度
xaccel = Math.random(); // 初期加速度
fore.loadImages("snow_" + n); // 载入图像
back.assignImages(fore);
x方向默认初速度为0,而初期加速度为随机数,这样产生的雪花没有侧飘,如果需要侧飘,可以修改此处的xvelo.
yvelo初值的涉及了一些随机算法(比如为啥将Math.random()乘以0.2),为了保证多个雪花下落有快有慢,而且体积越大的越快(n值是0到4的随机数,对应的0到4的四张图片上的雪花是逐渐变大的).如果我们想改变下雪效果中雪花整体的速度感,最好是修改常量1.9,事实上载rain.ks中定义,雨点在此处的对应常量是75,因为雨飘得比雪快很多= =
function spawn()方法中定义了雪花的初坐标,
l = Math.random() * window.primaryLayer.width; // 横初期位置
t = -fore.height; // 縦初期位置
横坐标是画面宽度上任意随机值,纵坐标则是在画面上方以外.
function move()方法定义了已产生雪花的运动方式
l += xvelo;
t += yvelo;
xvelo += xaccel;
xaccel += (Math.random() - 0.5) * 0.3;
if(xvelo>=1.5) xvelo=1.5;
if(xvelo<=-1.5) xvelo=-1.5;
if(xaccel>=0.2) xaccel=0.2;
if(xaccel<=-0.2) xaccel=-0.2;
if(t >= window.primaryLayer.height)
{
t = -fore.height;
l = Math.random() * window.primaryLayer.width;
}
fore.setPos(l, t);
back.setPos(l, t);
事实上,是先修改了雪花的横纵坐标值(把速度作为位移的增量,把加速度作为速度的增量,可以回忆一下中学物理orz),再把l,t的坐标值加载给fore和back实例.在之后的KagPlugin中,这个方法被以计时器的步数不断调用,画面上雪花就动起来了.
中间四个if是对雪花横向速度和加速度的限制,超过一定值之后,速度就不再增大了,避免雪花横向越飘越快.
最后一个if表达式中是对于雪花超出画面显示范围的处理.当纵坐标超过画面高度,也就是移到最下方后,我们把它放回上方,同时随机取一个横坐标,这样它就可以再次飘下来了.事实上该效果中,并不是不停的产生新的雪花,而是固定只产生n个,每一个飘出画面之后就回到上方再飘一次＝＝
在KagPlugin的init()方法中,只需要创建SnowGrain的n个实例装在snows[]数组中,同时创建timer计时器,在onTimer()中不断对每个雪花调用其move()方法,就可以实现飘雪效果.
使用此插件的语句就是
@snowinit
和
@snowuninit
一是开始二是停止.可以指定num参数,默认17,可是指定forevisible和backvisible,默认都是true
注意snowinit调用的是init()方法,而这个方法中,第一句是
if(timer !== void) return;
也就是说重复调用时没有意义的,只执行第一次的结果,其余的直接返回.如果想通过修改num参数来达到越下越大的效果,比如
@snowinit num=20
@wait time=800
@snowinit num=40
这样,是无效的.如果想实现越下越大的效果,只能修改init()方法了,比如加一个timer让n值慢慢增大啥的.
================
几种简单修改实例
================
反向飘雪
(以下只列出需要修改的语句)
yvelo = - (n*0.6 + 1.9 + Math.random() * 0.2); //纵速度反向,这个不用说
t = window.primaryLayer.height; //初始位置为画面最下方
if(t <= 0)
{
t = window.primaryLayer.height;
l = Math.random() * window.primaryLayer.width;
}//如果到达最上方,送回最下方.
同时修改图片的话,可以达到火花啊萤火虫啊升空的效果(何?)
侧向飘雪
(以左上到右下为例)
xvelo = 4.0; //横向初速度,根据需要调整大小
if(xvelo>=5.5) xvelo=5.5;//放宽对横速度的约束,不然之前的修改就没有意义了.
if(xvelo<=-1.5) xvelo=-1.5;
if(xaccel>=0.2) xaccel=0.2;
if(xaccel<=-0.2) xaccel=-0.2;
撞壁反弹
模仿几个自由球体撞壁反弹,这已经不是雪花效果了,故取消xaccel,注释掉所有和xaccel有关的语句.
离开画面的约束改为
if(t <= 0 || t>=window.primaryLayer.height)
{
yvelo *= -1;
}
if(l<=0 || l>=window.primaryLayer.width)
{
xvelo *= -1;
}
即可,同时初速度和数量和图片,请自由的......
|
