设为首页收藏本站|繁體中文

Project1

 找回密码
 注册会员
搜索
查看: 6963|回复: 5
打印 上一主题 下一主题

[交流讨论] ULDS脚本的深入使用方法

[复制链接]

Lv4.逐梦者

梦石
2
星屑
5550
在线时间
2566 小时
注册时间
2012-2-9
帖子
990

开拓者

跳转到指定楼层
1
发表于 2016-6-20 14:02:44 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式

加入我们,或者,欢迎回来。

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
原MV版ULDS脚本地址:https://rpg.blue/forum.php?mod=viewthread&tid=384603

ULDS的神奇之处不在于T大实现了哪些Sprite显示的功能,而在于,它提供这样一个自由度极高的接口,让使用者可以随心所欲的控制Sprite的各种特性,可以是一个固定的值,也可以是一个随着时间/人物坐标/开关/变量,甚至随机变化的function。

在这个帖子里,我将不定期记录一些利用ULDS实现的功能,有很多功能甚至在我之前的印象里,都是需要单独的脚本来实现,比如跟随主角或事件的烛光/多天气扩展/地图关联的光、影、地面等脚本……

现在,有了ULDS,我们只要一个ULDS就可以了。

这里不提供完整的插件,只提供实现方法和相关方法的代码片段。

贴一张结果图:

图中的亮光都在缓慢的向上飘动。



这些范例的预览,我也将不定期更新在网页版范例里:http://garfeng.github.io/rmmv/

评分

参与人数 3星屑 +66 +2 收起 理由
indio + 1 塞糖
Kim_Shyuen + 1 塞糖
鑫晴 + 66 塞糖

查看全部评分

Lv4.逐梦者

梦石
2
星屑
5550
在线时间
2566 小时
注册时间
2012-2-9
帖子
990

开拓者

2
 楼主| 发表于 2016-6-20 14:24:32 | 只看该作者
本帖最后由 garfeng 于 2016-6-20 16:01 编辑

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

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


在Helper的update里,有一个自增的this.t。所以y的坐标可以是:
JAVASCRIPT 代码复制
  1. this.y=window.height - this.t

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

代码如下:(利用scrollRate改变移动速度)


JAVASCRIPT 代码复制
  1. weatherY: function(scrollRate) {
  2.             if (scrollRate == null) {
  3.                 scrollRate = $gameMap.tileHeight();
  4.             }
  5.  
  6.             if (scrollRate === 0) {
  7.                 return y;
  8.             } else {
  9.                 var yReal = SceneManager._boxHeight - this.t*(0.5 + scrollRate/5) ; //0.5+scrollRate/5 是速度
  10.                 if (yReal< -200) { //当y的坐标小于-200,也就是飘出窗口的视野后
  11.                     this.t = Math.random()*20*(-1); //t设定为一个0~(-20)的随机数
  12.                     yReal = SceneManager._boxHeight - this.t*(0.5 + scrollRate/5) ; //重新计算y的坐标
  13.                     this.x = Math.random()*SceneManager._boxWidth; //x坐标设定为0~窗口宽度之间的随机值
  14.                     this.bitmap.rotateHue(Math.random()*360); //随机更改亮光的色调。
  15.                     var scale = 0.5 + Math.random(); //随机更改图片的缩放比例
  16.                     this.scale.x = scale;
  17.                     this.scale.y = scale;
  18.                 }
  19.                 return yReal;
  20.             }
  21.         },





在img/parallaxes里放一个名为light.png的光斑图片。

在地图的注释里添加这样一句:
JAVASCRIPT 代码复制
  1. <ulds> {
  2. "name": "light",
  3. "x":0,
  4. "y": "this.weatherY(6)", //这个6就是scrollRate,表征速度
  5. "z":10.0,
  6. "opacity":255,
  7. "blendMode":1, //做加法,出来会比较像亮光
  8. "loop": false
  9. } </ulds>


同样的原理,
如果你准备一张叶子的图,xy坐标都按某个方向随机移动,则可以做成叶子飘的效果,
如果始终不改变色调,用一个白色的圆点,x坐标微变,y坐标匀速下移,则可以做成下雪的效果。
你还可以在重新定位x,y时,限定范围,则可以让图片只在某个区域内移动(屋外下雨、池塘上方飘气泡)。
回复 支持 反对

使用道具 举报

Lv3.寻梦者 (版主)

…あたしは天使なんかじゃないわ

梦石
0
星屑
2208
在线时间
4033 小时
注册时间
2010-10-4
帖子
10779

开拓者贵宾

3
发表于 2016-6-20 14:33:46 | 只看该作者
本帖最后由 taroxd 于 2016-6-20 16:41 编辑
garfeng 发表于 2016-6-20 14:24
1.实现一楼里向上漂的亮光

实现原理:

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

  1. "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

点评

嗯,学习了,我去了解下commonJS  发表于 2016-6-20 17:55
还有,即使跨平台也可以写的很好,MV写成那样只能说是自己作死。  发表于 2016-6-20 17:52
还有,即使跨平台也可以写的很好,MV写成那样只能说是自己作死。  发表于 2016-6-20 17:48
噗 表示在github上看到你在折腾electron。感觉electron要比nw.js好很多。反正目前的MV我实在是一点都不想去动ORZ  发表于 2016-6-20 17:46
如果不做兼容浏览器和跨平台的话,写代码会舒服很多  发表于 2016-6-20 17:39

评分

参与人数 1星屑 +15 收起 理由
garfeng + 15 塞糖

查看全部评分

回复 支持 反对

使用道具 举报

Lv4.逐梦者

梦石
2
星屑
5550
在线时间
2566 小时
注册时间
2012-2-9
帖子
990

开拓者

4
 楼主| 发表于 2016-6-20 15:27:01 | 只看该作者
本帖最后由 garfeng 于 2016-6-20 15:39 编辑

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



实现原理:

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


JAVASCRIPT 代码复制
  1. memberX: function(id) { //这个id是指事件id,当id为0时,则定位为主角
  2.             var idx = 0;
  3.             var scrollRate = $gameMap.tileWidth();
  4.             if(id>0){
  5.                 idx = ($gameMap._events[id]||$gamePlayer)._realX;
  6.             }
  7.             else
  8.             {
  9.                 idx = $gamePlayer._realX;
  10.             }
  11.  
  12.             idx = $gameMap.adjustX(idx) + 0.5; //定位到主角身上后,还需要偏移0.5格,定位到主角所在格子的中心点。
  13.  
  14.             //var x = idx - Math.min(17,$gameMap.width())/2 - 8; //这是我根据自己的屏幕参数,把下面那个公式简化后的结果,你如果需要使用,请根据屏幕大小自己简化
  15.             var x = this.bitmap.width/scrollRate/2 - idx - ((SceneManager._boxWidth/scrollRate/2) - Math.min($gameMap.width()/2,SceneManager._boxWidth/scrollRate/2));//说明见下
  16.             x = -x;
  17.             x = x*scrollRate;
  18.  
  19.             return x;
  20.  
  21.         },
  22.  
  23.         memberY: function(id) {
  24.             var idy = 0;
  25.             var scrollRate = $gameMap.tileHeight();
  26.             if(id>0){
  27.                 idy = ($gameMap._events[id]||$gamePlayer)._realY;
  28.             }
  29.             else
  30.             {
  31.                 idy = $gamePlayer._realY;
  32.             }
  33.             idy = $gameMap.adjustY(idy) + 0.5;
  34.             var y = this.bitmap.height/scrollRate/2 - idy - ((SceneManager._boxHeight/scrollRate/2) - Math.min($gameMap.height()/2,SceneManager._boxHeight/scrollRate/2));
  35.  
  36.             y = -y;
  37.  
  38.             //var y = idy - Math.min(10,$gameMap.height())/2 - 4.5;
  39.  
  40.             y = y*scrollRate;
  41.             return y;
  42.         },


对这一行做说明:
JAVASCRIPT 代码复制
  1. var x = this.bitmap.width/scrollRate/2 - idx - ((SceneManager._boxWidth/scrollRate/2) - Math.min($gameMap.width()/2,SceneManager._boxWidth/scrollRate/2));
  2.  
  3. this.bitmap.width/scrollRate/2 //是烛光图片的宽度除以格子宽再除以2,。
  4. 其他说明见下图:


图片穿不上来……下次再传吧……

准备一张纯黑的,中心挖空的图片,放在img/parallaxes目录下,存储为candle.png,图片的宽高最好是屏幕的两倍,

在地图注释里加一句:

JAVASCRIPT 代码复制
  1. <ulds> {
  2. "name": "candle",
  3. "x":"this.memberX(0)",//0代表主角
  4. "y": "this.memberY(0)",
  5. "z":10,
  6. "opacity":255,
  7. "blendMode":0,
  8. "loop": false
  9. } </ulds>

回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
50
在线时间
73 小时
注册时间
2016-4-6
帖子
39
5
发表于 2016-6-20 17:26:44 | 只看该作者
本帖最后由 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, 下载次数: 16)

FFF.png

点评

你好,已更新  发表于 2016-6-20 23:02
在x,y,opacity的更新函数里改都可以……就看哪里更方便了,但是请注意尽量不要在多个函数里修改同一个值。  发表于 2016-6-20 17:59
你好,请问你有火星的图片吗?能否发出来一下,我试试实现这个效果……大约需要明天或后天才能写出来……我决定在opacity的更新函数里修改  发表于 2016-6-20 17:57
用 t 做参数写参数方程就可以了  发表于 2016-6-20 17:42
回复 支持 反对

使用道具 举报

Lv4.逐梦者

梦石
2
星屑
5550
在线时间
2566 小时
注册时间
2012-2-9
帖子
990

开拓者

6
 楼主| 发表于 2016-6-20 23:01:58 | 只看该作者
本帖最后由 garfeng 于 2016-6-20 23:03 编辑

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

JAVASCRIPT 代码复制
  1. fireOpa:function(rate){
  2.             rate = rate || 5;
  3.             var dY = rate; //在这里修改y的坐标改变方式
  4.             var dX = Math.random() - 4; //在这里修改x的坐标改变
  5.             this.y = this.y - dY;
  6.             this.x = this.x + dX;
  7.             if (this.opacity <= 1) {
  8.                 this.y = SceneManager._boxHeight;
  9.                 this.x = Math.random()*SceneManager._boxWidth;
  10.                 this.t = 0;
  11.                 return 255;
  12.             }
  13.             return 255 - this.t*rate/2; //在这里修改透明度更新后的值
  14.  
  15.         },


运动规律没找准,所以看起来并不像火星……
x方向最好不要做成随机的,否则很不自然……刚才尝试过了,随机运动根本就不像风乱吹……更像布朗运动呵呵呵呵呵……
火星理当需要做旋转,还没做……

增加地图注释:

JAVASCRIPT 代码复制
  1. <ulds> {
  2. "name": "fire",
  3. "x":0,
  4. "y": 480,
  5. "z":10.0,
  6. "opacity":"this.fireOpa(5)",
  7. "blendMode":0,
  8. "loop": false
  9. } </ulds>

点评

可以的,你需要一个变量来存储这个一开始设定的随机数,这样就可以一直朝一个方向飘  发表于 2016-6-20 23:23
感謝 , 布朗運動XDDDDDD我想像到了 X軸的移動用遞增或遞減可以嗎? 一開始random0和1一個數, 然後if , 1就隨機遞增t(頂樓的t隨機數) , 0就隨機遞減 t  发表于 2016-6-20 23:20

评分

参与人数 1+1 收起 理由
mollyko + 1 我很赞同

查看全部评分

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

拿上你的纸笔,建造一个属于你的梦想世界,加入吧。
 注册会员
找回密码

站长信箱:[email protected]|手机版|小黑屋|无图版|Project1游戏制作

GMT+8, 2024-11-10 22:33

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表