ULDS脚本的深入使用方法

garfeng

原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

1.实现一楼里向上漂的亮光

实现原理：
一个圆圈的图，x坐标不变，y坐标匀速向上移动，当移动到离开画面时，又把y坐标定位到画面底部。


在Helper的update里，有一个自增的this.t。所以y的坐标可以是：

JAVASCRIPT 代码复制

this.y=window.height - this.t

this.y=window.height - this.t

我们给this.t乘以一个系数v，就可以改变光斑上移的速度。

代码如下：（利用scrollRate改变移动速度）

JAVASCRIPT 代码复制

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的光斑图片。

在地图的注释里添加这样一句：

JAVASCRIPT 代码复制

<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

garfeng 发表于 2016-6-20 14:24
1.实现一楼里向上漂的亮光

实现原理：

应该还可以随机更改亮光的缩放比例，但暂时没找着缩放是怎么改的。

1. 
   
2. "scale.x": "0.5"
   

复制代码

谢谢你的提醒，我发现写 "scale.x": 0.5 会有 bug，正在修复中（顺便用 ES6 + babel 重写一遍……）

---

搞定，现在写 "scale.x": 0.5 也没有问题了
希望 MV 1.3 的时候能更新一下 node，写 ES6 不用 babel 吧（躺

---

我摔，编译完之后 Helper 那段完全不能读啊 QAQ
MV 更新之前我还是放弃 ES6 吧（TAT

garfeng

2.跟随主角或事件的烛光



实现原理：

获取主角或事件在地图上的坐标，烛光图片的透明位置的中心点始终定位在主角身上。

JAVASCRIPT 代码复制

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;


        },

对这一行做说明：

JAVASCRIPT 代码复制

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，图片的宽高最好是屏幕的两倍，

在地图注释里加一句：

JAVASCRIPT 代码复制

<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

這個腳本我打算用來做火星的效果 ( 木材燃燒時會向上彈出的一些發亮灰燼
     我希望的情況是光點會在上升時 隨機向左或右 飛散消逝

  最近才在學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一張 , 可是我不知道實際效果如何 , 會不太亮太暗 , 連這個格式對不對也不知道 , 要我修改請通知我 , 你自行修改也可

garfeng

3.向上飘，透明度递减，想做成火星的效果

JAVASCRIPT 代码复制

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方向最好不要做成随机的，否则很不自然……刚才尝试过了，随机运动根本就不像风乱吹……更像布朗运动呵呵呵呵呵……
火星理当需要做旋转，还没做……

增加地图注释：

JAVASCRIPT 代码复制

<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>