PIXI滤镜插件 本身没有做任何事情,它所做的事情仅仅是将PIXI-Filter最新的代码移植到了MV。也就是你可以在远古版本的PIXI.js使用该插件,不需要升级PIXI.js本身即可获得最大化的兼容效果。
pixi.js 官方代码库
pixi-filters.js 官方代码库
//支持pixi.js v6.4.2版本的滤镜
pixi.js - v6.4.2
//支持pixi-filter v4.1.6全滤镜效果
pixi-filter.js -v4.1.6
PIXI 滤镜插件分为两个部分,lib库部分 和 插件部分。
//pixi 滤镜核心扩展
lib/pixi-core-ext.js
//pixi 官方滤镜库
lib/pixi-filter.js
//MV PIXI滤镜插件
plugins/PIXIFilter.js
本插件仅有一个插件参数供使用者配置 - 命令前缀。
命令前缀 的默认值为$,你可以通过MV的插件管理修改前缀名称,我们设计此参数是为了解决和其他插件的命名空间冲突的问题,例如JQuery。
示例:
$ del Scene_Map 1
如果修改命令前缀为 # 号。则示例如下。
# del Scene_Map 1
add 指令
add 指令的作用是为场景配置一个滤镜,同一个滤镜重复添加其值会叠加。
指令格式: 命令前缀 添加滤镜 滤镜类型 场景名称 自定义的滤镜ID 滤镜参数
示例
$ add BlurFilter Scene_Map 1
示例说明:
指令前缀:$
指令类型:add
滤镜类型:BlurFilter
场景名称:Scene_Map
滤镜ID: 1
滤镜参数:默认
del 指令
del 指令的作用是为场景移除一个ID滤镜,重复移除不会有任何效果。
指令格式: 命令前缀 删除滤镜 场景名称 自定义的滤镜ID 滤镜参数(可选)
示例
$ del Scene_Map 1
示例说明:
指令前缀:$
指令类型:del
场景名称:Scene_Map
滤镜ID: 1
滤镜参数:默认
exec 指令
exec指令的作用是进一步修改场景中的滤镜的参数值。
指令格式: 命令前缀 执行滤镜 场景名称 自定义滤镜ID 滤镜方法 滤镜参数(可选)
示例
$ exec Scene_Map 1 blackAndWhite
示例说明:
指令前缀:$
指令类型:exec
场景名称:Scene_Map
滤镜ID: 1
滤镜方法:blackAndWhite
滤镜参数:默认
示例1: 调整滤镜
JS原始代码
new PIXI.filters.AdjustmentFilter(options);
options参数结构体
options = {
"gamma":1,
"saturation":1,
"contrast":1,
"brightness":1,
"red":1,
"green":1,
"blue":1,
"alpha":1,
}
options的属性说明
alpha 值 透明通道的值 默认值: 1
blue 值 蓝色通道的值 默认值: 1
brightness 值 亮度的值 默认值: 1
contrast 值 对比度的值 默认值:1
gamma 值 射线亮度值 默认值:1
green 值 绿色通道的值 默认值:1
red 值 红色通道的值 默认值:1
saturation 值 饱和度值 默认值:1
MV插件语法
$ add AdjustmentFilter Scene_Map 1 {"gamma":1,"saturation":1,"contrast":1,"brightness":1,"red":1,"green":1,"blue":1,"alpha":1}
示例2: 字符滤镜
JS原始代码
new PIXI.filters.AsciiFilter(size);
size参数说明
size 值 字符大小的值,默认值:8
MV插件语法
$ add AsciiFilter Scene_Map 1 16
示例3:高级bloom滤镜
PIXI.filters.AdvancedBloomFilter
JS原始代码
new PIXI.filters.AdvancedBloomFilter(options);
options参数说明
options = {
"threshold":0.5,
"bloomScale":1.0,
"brightness":1.0,
"blur":8,
"quality":4,
"kernels":null,
"pixelSize":1,
"resolution":PIXI.settings.FILTER_RESOLUTION,
}
options的属性说明
threshold 值 定义颜色bloom的域值 默认值: 0.5
bloomScale 值 调整bloom的强度。值越高,亮度越高 默认值: 1.0
brightness 值 亮度的值 默认值: 1.0
blur 值 模糊的值 默认值:8
quality 值 质量值 默认值:4
kernels 值 模糊内核数量 默认值:null
pixelSize 值 像素大小 默认值:1
resolution 值 模糊resolution 默认值:PIXI.settings.FILTER_RESOLUTION 1
MV插件语法
$ add AdvancedBloomFilter Scene_Map 1 {"threshold":0.5,"bloomScale":1.0,"brightness":1.0,"blur":8,"quality":4,"kernels":null,"pixelSize":1,"resolution":PIXI.settings.FILTER_RESOLUTION}
示例4:斜面阴影滤镜
JS原始代码
new PIXI.filters.BevelFilter(options);
options参数说明
options = {
"rotation":45,
"thickness":2,
"lightColor":0xffffff,
"lightAlpha":0.7,
"shadowColor":0x000000,
"shadowAlpha":0.7,
}
options的属性说明
rotation 值 旋转角度 默认值: 45
thickness 值 厚度 默认值: 2
lightColor 值 光线颜色 默认值: 0xffffff
lightAlpha 值 光绪透明度 默认值:0.7
shadowColor 值 阴影颜色 默认值:0x000000
shadowAlpha 值 阴影透明度 默认值:0.7
MV插件语法
$ add BevelFilter Scene_Map 1 {"rotation":45,"thickness":2,"lightColor":0xffffff,"lightAlpha":0.7,"shadowColor":0x000000,"shadowAlpha":0.7}
示例5: Bloom模糊滤镜
JS原始代码
new PIXI.filters.BloomFilter(blur, quality, resolution, kernelSize);
参数说明
blur 值 模糊XY大小的值,默认值:2
quality 值 模糊质量的值,默认值:4
resolution 值 模糊resolution,默认值:PIXI.settings.FILTER_RESOLUTION 1
kernelSize 值 模糊内核数量,默认值:5
MV插件语法
$ add BloomFilter Scene_Map 1 2 4 1 5
示例6: 凹凸模糊滤镜
JS原始代码
new PIXI.filters.BulgePinchFilter(options);
options参数说明
options = {
"center":[0,0],
"radius":100,
"strength":1
}
options的属性说明
center 值 圆心点[x,y] 默认值: [0,0]
radius 值 半径 默认值: 100
strength 值 强度 默认值: 1 (-1凹陷 0 无效 1 凸起)
MV插件语法
$ add BulgePinchFilter Scene_Map 1 {"center":[0,0],"radius":100,"strength":1}
示例7: 颜色覆盖滤镜
JS原始代码
new PIXI.filters.ColorOverlayFilter(color, alpha);
参数说明
color 值 颜色值,默认值:0x000000
alpha 值 透明度,默认值:1
MV插件语法
$ add ColorOverlayFilter Scene_Map 1 0x000000 1
示例8: 颜色替换滤镜
PIXI.filters.ColorReplaceFilter
JS原始代码
new PIXI.filters.ColorReplaceFilter(originalColor, newColor, epsilon);
参数说明
originalColor 值 原始颜色,默认值:0xFF0000 (number | number<Array> | Float32Array)
newColor 值 新颜色,默认值:0x000000 (number | number<Array> | Float32Array)
epsilon 值 颜色之间浮点比较的容差/灵敏度(低=更精确,高=更包容) 默认值:0.4
MV插件语法
$ add ColorReplaceFilter Scene_Map 1 0xFF0000 0x000000 0.4
示例9: 矩阵卷积滤镜
PIXI.filters.ConvolutionFilter
JS原始代码
new PIXI.filters.ConvolutionFilter(matrix, width, height);
参数说明
matrix 值 矩阵,默认值:[0,0,0,0,0,0,0,0,0]
width 值 宽度,默认值:200
height 值 高度 默认值:200
MV插件语法
$ add ConvolutionFilter Scene_Map 1 [0,0,0,0,0,0,0,0,0] 200 200
示例10: 交叉图案效果填充滤镜
JS原始代码
new PIXI.filters.CrossHatchFilter();
MV插件语法
$ add CrossHatchFilter Scene_Map 1