Project1
标题: ULDS脚本的深入使用方法 [打印本页]
作者: garfeng 时间: 2016-6-20 14:02
标题: ULDS脚本的深入使用方法 原MV版ULDS脚本地址:https://rpg.blue/forum.php?mod=viewthread&tid=384603
ULDS的神奇之处不在于T大实现了哪些Sprite显示的功能,而在于,它提供这样一个自由度极高的接口,让使用者可以随心所欲的控制Sprite的各种特性,可以是一个固定的值,也可以是一个随着时间/人物坐标/开关/变量,甚至随机变化的function。
在这个帖子里,我将不定期记录一些利用ULDS实现的功能,有很多功能甚至在我之前的印象里,都是需要单独的脚本来实现,比如跟随主角或事件的烛光/多天气扩展/地图关联的光、影、地面等脚本……
现在,有了ULDS,我们只要一个ULDS就可以了。
这里不提供完整的插件,只提供实现方法和相关方法的代码片段。
贴一张结果图:
图中的亮光都在缓慢的向上飘动。
这些范例的预览,我也将不定期更新在网页版范例里:http://garfeng.github.io/rmmv/
作者: garfeng 时间: 2016-6-20 14:24
本帖最后由 garfeng 于 2016-6-20 16:01 编辑
1.实现一楼里向上漂的亮光
实现原理:
一个圆圈的图,x坐标不变,y坐标匀速向上移动,当移动到离开画面时,又把y坐标定位到画面底部。
在Helper的update里,有一个自增的this.t。所以y的坐标可以是:
this .y =window.height - this .t
this .y =window.height - this .t
我们给this.t乘以一个系数v,就可以改变光斑上移的速度。
代码如下:(利用scrollRate改变移动速度)
weatherY: function ( scrollRate) {
if ( scrollRate == null ) {
scrollRate = $gameMap.tileHeight ( ) ;
}
if ( scrollRate === 0 ) {
return y;
} else {
var yReal = SceneManager._boxHeight - this .t* ( 0.5 + scrollRate/5 ) ; //0.5+scrollRate/5 是速度
if ( yReal< -200 ) { //当y的坐标小于-200,也就是飘出窗口的视野后
this .t = Math.random ( ) *20 *( -1 ) ; //t设定为一个0~(-20)的随机数
yReal = SceneManager._boxHeight - this .t* ( 0.5 + scrollRate/5 ) ; //重新计算y的坐标
this .x = Math.random ( ) *SceneManager._boxWidth; //x坐标设定为0~窗口宽度之间的随机值
this .bitmap .rotateHue ( Math.random ( ) *360 ) ; //随机更改亮光的色调。
var scale = 0.5 + Math.random ( ) ; //随机更改图片的缩放比例
this .scale .x = scale;
this .scale .y = scale;
}
return yReal;
}
} ,
weatherY: function ( scrollRate) {
if ( scrollRate == null ) {
scrollRate = $gameMap.tileHeight ( ) ;
}
if ( scrollRate === 0 ) {
return y;
} else {
var yReal = SceneManager._boxHeight - this .t* ( 0.5 + scrollRate/5 ) ; //0.5+scrollRate/5 是速度
if ( yReal< -200 ) { //当y的坐标小于-200,也就是飘出窗口的视野后
this .t = Math.random ( ) *20 *( -1 ) ; //t设定为一个0~(-20)的随机数
yReal = SceneManager._boxHeight - this .t* ( 0.5 + scrollRate/5 ) ; //重新计算y的坐标
this .x = Math.random ( ) *SceneManager._boxWidth; //x坐标设定为0~窗口宽度之间的随机值
this .bitmap .rotateHue ( Math.random ( ) *360 ) ; //随机更改亮光的色调。
var scale = 0.5 + Math.random ( ) ; //随机更改图片的缩放比例
this .scale .x = scale;
this .scale .y = scale;
}
return yReal;
}
} ,
在img/parallaxes里放一个名为light.png的光斑图片。
在地图的注释里添加这样一句:
<ulds> {
"name" : "light" ,
"x" :0 ,
"y" : "this.weatherY(6)" , //这个6就是scrollRate,表征速度
"z" :10.0 ,
"opacity" :255 ,
"blendMode" :1 , //做加法,出来会比较像亮光
"loop" : false
} </ulds>
<ulds> {
"name" : "light" ,
"x" :0 ,
"y" : "this.weatherY(6)" , //这个6就是scrollRate,表征速度
"z" :10.0 ,
"opacity" :255 ,
"blendMode" :1 , //做加法,出来会比较像亮光
"loop" : false
} </ulds>
同样的原理,
如果你准备一张叶子的图,xy坐标都按某个方向随机移动,则可以做成叶子飘的效果,
如果始终不改变色调,用一个白色的圆点,x坐标微变,y坐标匀速下移,则可以做成下雪的效果。
你还可以在重新定位x,y时,限定范围,则可以让图片只在某个区域内移动(屋外下雨、池塘上方飘气泡)。
作者: taroxd 时间: 2016-6-20 14:33
本帖最后由 taroxd 于 2016-6-20 16:41 编辑
garfeng 发表于 2016-6-20 14:24
1.实现一楼里向上漂的亮光
实现原理:
应该还可以随机更改亮光的缩放比例,但暂时没找着缩放是怎么改的。 谢谢你的提醒,我发现写 "scale.x": 0.5 会有 bug,正在修复中(顺便用 ES6 + babel 重写一遍……)
搞定,现在写 "scale.x": 0.5 也没有问题了
希望 MV 1.3 的时候能更新一下 node,写 ES6 不用 babel 吧(躺
我摔,编译完之后 Helper 那段完全不能读啊 QAQ
MV 更新之前我还是放弃 ES6 吧(TAT
作者: garfeng 时间: 2016-6-20 15:27
本帖最后由 garfeng 于 2016-6-20 15:39 编辑
2.跟随主角或事件的烛光
实现原理:
获取主角或事件在地图上的坐标,烛光图片的透明位置的中心点始终定位在主角身上。
memberX: function ( id) { //这个id是指事件id,当id为0时,则定位为主角
var idx = 0 ;
var scrollRate = $gameMap.tileWidth ( ) ;
if ( id>0 ) {
idx = ( $gameMap._events[ id] ||$gamePlayer) ._realX;
}
else
{
idx = $gamePlayer._realX;
}
idx = $gameMap.adjustX ( idx) + 0.5 ; //定位到主角身上后,还需要偏移0.5格,定位到主角所在格子的中心点。
//var x = idx - Math.min(17,$gameMap.width())/2 - 8; //这是我根据自己的屏幕参数,把下面那个公式简化后的结果,你如果需要使用,请根据屏幕大小自己简化
var x = this .bitmap .width /scrollRate/2 - idx - ( ( SceneManager._boxWidth/scrollRate/2 ) - Math.min ( $gameMap.width ( ) /2 ,SceneManager._boxWidth/scrollRate/ 2 ) ) ;//说明见下
x = -x;
x = x*scrollRate;
return x;
} ,
memberY: function ( id) {
var idy = 0 ;
var scrollRate = $gameMap.tileHeight ( ) ;
if ( id>0 ) {
idy = ( $gameMap._events[ id] ||$gamePlayer) ._realY;
}
else
{
idy = $gamePlayer._realY;
}
idy = $gameMap.adjustY ( idy) + 0.5 ;
var y = this .bitmap .height /scrollRate/2 - idy - ( ( SceneManager._boxHeight/scrollRate/2 ) - Math.min ( $gameMap.height ( ) /2 ,SceneManager._boxHeight/scrollRate/ 2 ) ) ;
y = -y;
//var y = idy - Math.min(10,$gameMap.height())/2 - 4.5;
y = y*scrollRate;
return y;
} ,
memberX: function ( id) { //这个id是指事件id,当id为0时,则定位为主角
var idx = 0 ;
var scrollRate = $gameMap.tileWidth ( ) ;
if ( id>0 ) {
idx = ( $gameMap._events[ id] ||$gamePlayer) ._realX;
}
else
{
idx = $gamePlayer._realX;
}
idx = $gameMap.adjustX ( idx) + 0.5 ; //定位到主角身上后,还需要偏移0.5格,定位到主角所在格子的中心点。
//var x = idx - Math.min(17,$gameMap.width())/2 - 8; //这是我根据自己的屏幕参数,把下面那个公式简化后的结果,你如果需要使用,请根据屏幕大小自己简化
var x = this .bitmap .width /scrollRate/2 - idx - ( ( SceneManager._boxWidth/scrollRate/2 ) - Math.min ( $gameMap.width ( ) /2 ,SceneManager._boxWidth/scrollRate/ 2 ) ) ;//说明见下
x = -x;
x = x*scrollRate;
return x;
} ,
memberY: function ( id) {
var idy = 0 ;
var scrollRate = $gameMap.tileHeight ( ) ;
if ( id>0 ) {
idy = ( $gameMap._events[ id] ||$gamePlayer) ._realY;
}
else
{
idy = $gamePlayer._realY;
}
idy = $gameMap.adjustY ( idy) + 0.5 ;
var y = this .bitmap .height /scrollRate/2 - idy - ( ( SceneManager._boxHeight/scrollRate/2 ) - Math.min ( $gameMap.height ( ) /2 ,SceneManager._boxHeight/scrollRate/ 2 ) ) ;
y = -y;
//var y = idy - Math.min(10,$gameMap.height())/2 - 4.5;
y = y*scrollRate;
return y;
} ,
对这一行做说明:
var x = this .bitmap .width /scrollRate/2 - idx - ( ( SceneManager._boxWidth/scrollRate/2 ) - Math.min ( $gameMap.width ( ) /2 ,SceneManager._boxWidth/scrollRate/ 2 ) ) ;
this .bitmap .width /scrollRate/ 2 //是烛光图片的宽度除以格子宽再除以2,。
其他说明见下图:
var x = this .bitmap .width /scrollRate/2 - idx - ( ( SceneManager._boxWidth/scrollRate/2 ) - Math.min ( $gameMap.width ( ) /2 ,SceneManager._boxWidth/scrollRate/ 2 ) ) ;
this .bitmap .width /scrollRate/ 2 //是烛光图片的宽度除以格子宽再除以2,。
其他说明见下图:
图片穿不上来……下次再传吧……
准备一张纯黑的,中心挖空的图片,放在img/parallaxes目录下,存储为candle.png,图片的宽高最好是屏幕的两倍,
在地图注释里加一句:
<ulds> {
"name" : "candle" ,
"x" :"this.memberX(0)" ,//0代表主角
"y" : "this.memberY(0)" ,
"z" :10 ,
"opacity" :255 ,
"blendMode" :0 ,
"loop" : false
} </ulds>
<ulds> {
"name" : "candle" ,
"x" :"this.memberX(0)" ,//0代表主角
"y" : "this.memberY(0)" ,
"z" :10 ,
"opacity" :255 ,
"blendMode" :0 ,
"loop" : false
} </ulds>
作者: iceBOXz 时间: 2016-6-20 17:26
本帖最后由 iceBOXz 于 2016-6-20 18:32 编辑
這個腳本我打算用來做火星的效果 ( 木材燃燒時會向上彈出的一些發亮灰燼
我希望的情況是光點會在上升時 隨機向左或右 飛散消逝
最近才在學JS , 想問如果要加插一句opacity 要隨著 已移動的距離 減少
因為MV視窗是800x600 , 所以yReal=600就在畫面底部 , 畫面最右邊就是800
那我就需要寫 : opacity 在 yReal==600 的時候為255 , 並會隨著 [yReal的減少+xReal的改變]的總和 而 等比減少
yReal的減少 暫定為變數yN : 思路上是 yReal減600 乘-1 變正數 加去yN
xReal的改變 暫定為變數xN : 思路上是 xReal為負數時 將xReal乘-1變正數 加上去xN , xReal正數時就直接加去xN
以下數式暫定 :
第一個600為自定義數 , 希望火星不會一直都在畫面最頂透明消失 , 為500-1000之間的隨機數 , 後面的500是另一個自定義數 可以改
opacity = 255* {[600-(yN+xN)]/500}
而opacity最大為255 , if opacity>255 var opacity=255 (除此之外 , 還有沒有其他正式一些的方法定義某變數的最大值?)
之後要 定義xReal 和定義yReal不同 , 因為xReal不像yReal只會減少
var xReal = SceneManager._boxWidth 之後應該怎寫 它會隨機的向左或右 移動?
然後 , 飛出畫面的判定不難
if (xReal< -200 && > 1000 )
接下來 , 因為座標無論向左或右移動 也是移動 , 但在數字上 例如向左移動了10像素 又向右移動了15像素
難道是-10+15= 5?? ......不對吧.. 25才是移動了的距離 , 這裡又應該怎樣寫?
還是其實我思路一開始就錯了 , 只需在yReal內修改就行!?
----------------------------------------------------------------
附上PNG一張 , 可是我不知道實際效果如何 , 會不太亮太暗 , 連這個格式對不對也不知道 , 要我修改請通知我 , 你自行修改也可
FFF.png
(1.66 KB, 下载次数: 17)
作者: garfeng 时间: 2016-6-20 23:01
本帖最后由 garfeng 于 2016-6-20 23:03 编辑
3.向上飘,透明度递减,想做成火星的效果
fireOpa:function ( rate) {
rate = rate || 5 ;
var dY = rate; //在这里修改y的坐标改变方式
var dX = Math.random ( ) - 4 ; //在这里修改x的坐标改变
this .y = this .y - dY;
this .x = this .x + dX;
if ( this .opacity <= 1 ) {
this .y = SceneManager._boxHeight;
this .x = Math.random ( ) *SceneManager._boxWidth;
this .t = 0 ;
return 255 ;
}
return 255 - this .t*rate /2 ; //在这里修改透明度更新后的值
} ,
fireOpa:function ( rate) {
rate = rate || 5 ;
var dY = rate; //在这里修改y的坐标改变方式
var dX = Math.random ( ) - 4 ; //在这里修改x的坐标改变
this .y = this .y - dY;
this .x = this .x + dX;
if ( this .opacity <= 1 ) {
this .y = SceneManager._boxHeight;
this .x = Math.random ( ) *SceneManager._boxWidth;
this .t = 0 ;
return 255 ;
}
return 255 - this .t*rate /2 ; //在这里修改透明度更新后的值
} ,
运动规律没找准,所以看起来并不像火星……
x方向最好不要做成随机的,否则很不自然……刚才尝试过了,随机运动根本就不像风乱吹……更像布朗运动呵呵呵呵呵……
火星理当需要做旋转,还没做……
增加地图注释:
<ulds> {
"name" : "fire" ,
"x" :0 ,
"y" : 480 ,
"z" :10.0 ,
"opacity" :"this.fireOpa(5)" ,
"blendMode" :0 ,
"loop" : false
} </ulds>
<ulds> {
"name" : "fire" ,
"x" :0 ,
"y" : 480 ,
"z" :10.0 ,
"opacity" :"this.fireOpa(5)" ,
"blendMode" :0 ,
"loop" : false
} </ulds>
欢迎光临 Project1 (https://rpg.blue/)
Powered by Discuz! X3.1