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>

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

  最近才在學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 发表于 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

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时，限定范围，则可以让图片只在某个区域内移动（屋外下雨、池塘上方飘气泡）。