Project1

标题: 关于MZ Hue颜色的问题 [打印本页]
作者: MH-Pride    时间: 2021-6-7 12:50
标题: 关于MZ Hue颜色的问题
在MZ里面loadSvActor取消了hue
ImageManager.loadSvActor = function(filename) {
    return this.loadBitmap("img/sv_actors/", filename);
};

在MV里面loadSvActor是有hue改变颜色
ImageManager.loadSvActor = function(filename, hue) {
    return this.loadBitmap('img/sv_actors/', filename, hue, false);
};

如何在MZ里面可以做到MV loadSvActor 改变颜色， 在MZ setHue不能在bitmap下改只能在sprite里面改
作者: q3226257    时间: 2021-6-8 09:48
复制mv的到mz就好了~~~~~~~
作者: MH-Pride    时间: 2021-6-8 21:58
本帖最后由 MH-Pride 于 2021-6-8 22:50 编辑
q3226257 发表于 2021-6-8 09:48
复制mv的到mz就好了~~~~~~~


我也想但是不行，bitmap无法用hub去赋予颜色。只能通过sprite改颜色。就算sprite设置颜色都没用。Hue还是改变不了bitmap的颜色。
例如 this._svActor.setHue(100) 但是在 this._svActor.bitmap 下的bitmap是无效的所以 this.contents.blt(this._svActor.bitmap, sx, sy, sw, sh, dx, dy, dw, dh) 或者 this._svActor.bitmap._hue=100 也是没用
如果通过child改还是可以的但是全部都会变颜色。有什么办法可以让图片做到blt的效果但是要在sprite阶段做到。

还有在blt下的blt (source, sx, sy, sw, sh, dx, dy, dw, dh) . dx和dy sprite阶段有吗

如果hue能改bitmap的颜色会方便很多，不需要准备相同动作不同颜色的图片

战斗什么都没问题就差显示了 如果不行也只能用静态图片了

Capture.PNG (517.18 KB, 下载次数: 47)

动态图片

动态图片

Capture2.PNG (944.67 KB, 下载次数: 36)

静态图片

静态图片

Capture3.PNG (679.62 KB, 下载次数: 55)

战斗

战斗
作者: q3226257    时间: 2021-6-9 10:18
  1. Bitmap.prototype.rotateHue = function(offset) {
  2.     function rgbToHsl(r, g, b) {
  3.         var cmin = Math.min(r, g, b);
  4.         var cmax = Math.max(r, g, b);
  5.         var h = 0;
  6.         var s = 0;
  7.         var l = (cmin + cmax) / 2;
  8.         var delta = cmax - cmin;

  10.         if (delta > 0) {
  11.             if (r === cmax) {
  12.                 h = 60 * (((g - b) / delta + 6) % 6);
  13.             } else if (g === cmax) {
  14.                 h = 60 * ((b - r) / delta + 2);
  15.             } else {
  16.                 h = 60 * ((r - g) / delta + 4);
  17.             }
  18.             s = delta / (255 - Math.abs(2 * l - 255));
  19.         }
  20.         return [h, s, l];
  21.     }

  23.     function hslToRgb(h, s, l) {
  24.         var c = (255 - Math.abs(2 * l - 255)) * s;
  25.         var x = c * (1 - Math.abs((h / 60) % 2 - 1));
  26.         var m = l - c / 2;
  27.         var cm = c + m;
  28.         var xm = x + m;

  30.         if (h < 60) {
  31.             return [cm, xm, m];
  32.         } else if (h < 120) {
  33.             return [xm, cm, m];
  34.         } else if (h < 180) {
  35.             return [m, cm, xm];
  36.         } else if (h < 240) {
  37.             return [m, xm, cm];
  38.         } else if (h < 300) {
  39.             return [xm, m, cm];
  40.         } else {
  41.             return [cm, m, xm];
  42.         }
  43.     }

  45.     if (offset && this.width > 0 && this.height > 0) {
  46.         offset = ((offset % 360) + 360) % 360;
  47.         var context = this._context;
  48.         var imageData = context.getImageData(0, 0, this.width, this.height);
  49.         var pixels = imageData.data;
  50.         for (var i = 0; i < pixels.length; i += 4) {
  51.             var hsl = rgbToHsl(pixels[i + 0], pixels[i + 1], pixels[i + 2]);
  52.             var h = (hsl[0] + offset) % 360;
  53.             var s = hsl[1];
  54.             var l = hsl[2];
  55.             var rgb = hslToRgb(h, s, l);
  56.             pixels[i + 0] = rgb[0];
  57.             pixels[i + 1] = rgb[1];
  58.             pixels[i + 2] = rgb[2];
  59.         }
  60.         context.putImageData(imageData, 0, 0);
  61.         this._setDirty();
  62.     }
  63. };
复制代码



很明显，mv的实现是更改了图像的数据来实现hue的，
但是mz是通过滤镜实现的，所以你要改成mv那样，需要把更改图像数据这部分代码复制过来的
作者: MH-Pride    时间: 2021-6-11 00:44
q3226257 发表于 2021-6-9 10:18
很明显，mv的实现是更改了图像的数据来实现hue的，
但是mz是通过滤镜实现的，所以你要改成mv那样，需要 ...

JS 代码复制
  1. Bitmap.prototype.rotateHue = function(offset,bitmap) {
    

  2.     function rgbToHsl(r, g, b) {
    

  3.         var cmin = Math.min(r, g, b);
    

  4.         var cmax = Math.max(r, g, b);
    

  5.         var h = 0;
    

  6.         var s = 0;
    

  7.         var l = (cmin + cmax) / 2;
    

  8.         var delta = cmax - cmin;
    

  9.  
  10.         if (delta > 0) {
    

  11.             if (r === cmax) {
    

  12.                 h = 60 * (((g - b) / delta + 6) % 6);
    

  13.             } else if (g === cmax) {
    

  14.                 h = 60 * ((b - r) / delta + 2);
    

  15.             } else {
    

  16.                 h = 60 * ((r - g) / delta + 4);
    

  17.             }
    

  18.             s = delta / (255 - Math.abs(2 * l - 255));
    

  19.         }
    

  20.  
  21.         return [h, s, l];
    

  22.     }
    

  23.  
  24.     function hslToRgb(h, s, l) {
    

  25.         var c = (255 - Math.abs(2 * l - 255)) * s;
    

  26.         var x = c * (1 - Math.abs((h / 60) % 2 - 1));
    

  27.         var m = l - c / 2;
    

  28.         var cm = c + m;
    

  29.         var xm = x + m;
    

  30.  
  31.         if (h < 60) {
    

  32.             return [cm, xm, m];
    

  33.         } else if (h < 120) {
    

  34.             return [xm, cm, m];
    

  35.         } else if (h < 180) {
    

  36.             return [m, cm, xm];
    

  37.         } else if (h < 240) {
    

  38.             return [m, xm, cm];
    

  39.         } else if (h < 300) {
    

  40.             return [xm, m, cm];
    

  41.         } else {
    

  42.             return [cm, m, xm];
    

  43.         }
    

  44.     }
    

  45.  
  46.     if (offset && this.width > 0 && this.height > 0) {
    

  47.         offset = ((offset % 360) + 360) % 360;
    

  48.                 console.log(offset);
    

  49.         var context = bitmap.context;
    

  50.         var imageData = context.getImageData(0, 0, this.width, this.height);
    

  51.         var pixels = imageData.data;
    

  52.                 console.log(imageData)
    

  53.         for (var i = 0; i < pixels.length; i += 4) {
    

  54.             var hsl = rgbToHsl(pixels[i + 0], pixels[i + 1], pixels[i + 2]);
    

  55.            var h = hsl[0] + (hsl[0] + offset) % 360;
    

  56.             var s = hsl[1];
    

  57.             var l = hsl[2];
    

  58.             var rgb = hslToRgb(h, s, l);
    

  59.  
  60.             pixels[i + 0] = rgb[0];
    

  61.             pixels[i + 1] = rgb[1];
    

  62.             pixels[i + 2] = rgb[2];
    

  63.  
  64.         }
    

  65.         context.putImageData(imageData, 0, 0);
    

  66.         //this._setDirty();
    

  67.     }
    

  68. };


JS 代码复制
  1. var bitmap=ImageManager.loadSvActor("actor");
    

  2.                 bitmap.rotateHue(by,bitmap);


Bitmap.prototype.rotateHue = function(offset) 只能传一个参数所以我加了参数bitmap 如果没加  var context = this._context;是没data.
虽然可以改变颜色但是颜色怪怪的只能显示粉红色或者不断变换颜色直到粉红色 还有this._setDirty();是什么东西我在MV里面找不到Dirty()是有什么作用的
在MV里面loadBitmap 经过很多function才能到达bitmap.rotateHue.
ImageManager.loadSvActor = function(filename, hue) {
    return this.loadBitmap('img/sv_actors/', filename, hue, false);
};

滤镜能单独用在bitmap里面吗 在文档里面没有写滤镜可以在什么下作用 请问下ColorFilter怎么用啊
https://developer.rpgmakerweb.com/rpg-maker-mz/ColorFilter.html#setHue

我是刚接触rpg maker 所以很多东西不太明白 谢谢了

Capturex.PNG (36.92 KB, 下载次数: 45)

Capturex.PNG
作者: lisliz    时间: 2021-6-11 09:23
mz的核心脚本里有个ColorFilter，用来实现hue的，这东西比mv的要高效许多，不建议降级把mv的搬过来。不过我有点奇怪pixi已经自带了一个ColorMatrixFilter，已经完全实现了那个ColorFilter的功能了，再不济也可以直接改矩阵，为啥还要自己实现一个？
作者: q3226257    时间: 2021-6-11 10:05
MH-Pride 发表于 2021-6-11 00:44
Bitmap.prototype.rotateHue = function(offset,bitmap) {
    function rgbToHsl(r, g, b) {
        va ...

你抄代码要抄完啊，不知道就点进去看一下呗。。。
参数bitmap其实也没必要，你本来就是用bitmap.rotateHue,this就是指代bitmap了
滤镜是pixi的功能，在显示的时候会有一层滤镜，
mv的实现其实是修改了图片信息，渲染的时候就达到改变颜色，
作者: MH-Pride    时间: 2021-6-11 23:09
lisliz 发表于 2021-6-11 09:23
mz的核心脚本里有个ColorFilter，用来实现hue的，这东西比mv的要高效许多，不建议降级把mv的搬过来。不过我 ...

我也想用hue 但是 blt (source, sx, sy, sw, sh, dx, dy, dw, dh) 不知道怎么用colorfilter
所以q3226257提出的改变bitmap的颜色是能行的
作者: MH-Pride    时间: 2021-6-11 23:13
q3226257 发表于 2021-6-11 10:05
你抄代码要抄完啊，不知道就点进去看一下呗。。。
参数bitmap其实也没必要，你本来就是用bitmap.rotateHu ...

谢谢了我在研究下



欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1