抛砖引玉 mv中使用shader

じ☆ve冰风

虽然我已经不用rm了 为了庆祝论坛复活 国庆期间看了下mv 于是就有了这东西
JAVASCRIPT 代码

1. function Sprite_Shader(){
2.     this.initialize.apply(this, arguments);
3. }
4. Sprite_Shader.defultfrag = " \
5.     varying vec2 vTextureCoord; \
6.     uniform sampler2D uSampler; \
7.     void main(void) \
8.     { \
9.         gl_FragColor = texture2D(uSampler, vTextureCoord); \
10.     } \
11. ";
14. Sprite_Shader.defultvert= " \
15.     attribute vec2 aVertexPosition; \
16.     attribute vec2 aTextureCoord; \
17.     uniform mat3 projectionMatrix; \
18.     varying vec2 vTextureCoord; \
19.     void main(void) \
20.     { \
21.         gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); \
22.         vTextureCoord = aTextureCoord; \
23.     } \
24.     ";
26. Sprite_Shader.prototype = Object.create(Sprite.prototype);
27. Sprite_Shader.prototype.constructor = Sprite_Shader;
29. Sprite_Shader.prototype.initialize = function(bitmap){
30.     Sprite.prototype.initialize.call(this);
31.     this.bitmap = bitmap;
32.     this.mode = -1;   
33. };
36. Sprite_Shader.prototype.gray = function(){
37.     this.mode= 1;
38.     var frag = " \
39.         varying vec2 vTextureCoord; \
40.         uniform sampler2D uSampler; \
41.         void main(void) \
42.         { \
43.             gl_FragColor = texture2D(uSampler, vTextureCoord); \
44.             float  gray = (gl_FragColor.r + gl_FragColor.g + gl_FragColor.b)/3.0; \
45.             gl_FragColor.r = gray; \
46.             gl_FragColor.g = gray; \
47.             gl_FragColor.b = gray; \
48.         } \
49.     ";
50.     var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag);
51.     this._filters = [simpleShader];
52. };
56. Sprite_Shader.prototype.shadow = function(){
57.     this.mode= 2;
58.     var uniform = {};
60.     var frag = " \
61.         varying vec2 vTextureCoord; \
62.         uniform sampler2D uSampler; \
63.         const vec2 step = vec2(0.015, 0.002); \
64.         void main(void) \
65.         { \
66.             vec3 color = texture2D(uSampler, vTextureCoord).rgb; \
67.             float olda =  texture2D(uSampler, vTextureCoord).a; \
68.             float weight = 10.0; \
69.             float assess = texture2D(uSampler, vTextureCoord).a * weight; \
70.             float alpha = assess; \
71.             alpha += texture2D( uSampler, vTextureCoord.xy + vec2( -3.0*step.x, -3.0*step.y ) ).a; \
72.             alpha /= (2.0+assess);  \
73.             gl_FragColor = vec4(color, alpha); \
74.         } \
75.     ";
76.     var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,uniform);
77.     this._filters = [simpleShader];
78. };
82. Sprite_Shader.prototype.twist = function(){
83.     this.mode= 3;
84.     this.uniform = {};
85.     this.uniform.iGlobalTime = {
86.         type:"f",
87.         value:0
88.     }
90.     frag = " \
91.         varying vec2 vTextureCoord; \
92.         uniform sampler2D uSampler; \
93.         uniform float iGlobalTime; \
94.         void main(void) \
95.         { \
96.             vec2 uv = vTextureCoord.xy; \
97.             float w = (0.5 - (uv.x)); \
98.             float h = 0.5 - uv.y; \
99.             float distanceFromCenter = sqrt(w * w + h * h); \
100.             float sinArg = distanceFromCenter * 10.0 - iGlobalTime * 10.0; \
101.             float slope = cos(sinArg) ; \
102.             vec4 color = texture2D(uSampler, uv + normalize(vec2(w, h)) * slope * 0.05); \
103.             gl_FragColor = color; \
104.         } \
105.     ";
106.     var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);
107.     this._filters = [simpleShader];
108. };
110. Sprite_Shader.prototype.magic = function(mode){
111.     this.mode= 4;
112.     this.uniform = {};
113.     this.uniform._Angle = {
114.         type:"f",
115.         value:0
116.     };
117.       this.uniform._Radius = {
118.         type:"f",
119.         value:0
120.     };
121.       this.uniform._mode = {
122.         type:"f",
123.         value:mode
124.     };
126.     frag = " \
127.         varying vec2 vTextureCoord; \
128.         uniform sampler2D uSampler; \
129.         uniform float _Angle;  \
130.         uniform float _Radius;  \
131.         uniform float _mode;  \
132.         void main(void) \
133.         { \
134.             vec2 uv = vTextureCoord; \
135.             uv -= vec2(0.25, 0.5); \
136.             float dist = length(uv); \
137.             float percent = (_Radius - dist) / _Radius; \
138.             if (percent < 1.0 && percent >= 0.0) \
139.             {  \
140.                 float theta = percent * percent * _Angle * 3.0; \
141.                 float s = sin(theta); \
142.                 float c = cos(theta); \
143.                 uv = vec2(uv.x*c - uv.y*s*_mode , uv.x*s + uv.y*c); \
144.             } \
145.             uv += vec2(0.25, 0.5); \
146.             gl_FragColor = texture2D(uSampler, uv); \
147.         } \
148.     ";
149.     var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);
150.     this._filters = [simpleShader];
151. };
154. Sprite_Shader.prototype.update = function(){
155.     Sprite.prototype.update.call(this);
156.     if(this.mode == 3){
157.         this._filters[0].uniforms.iGlobalTime += 0.01;
158.     }
159.     elseif(this.mode == 4){
160.         this._filters[0].uniforms._Angle += 0.01;
161.         this._filters[0].uniforms._Radius += 0.001;
162.         if(this._filters[0].uniforms._Radius >= 0.6)
163.         {
164.             this._filters[0].uniforms._Angle = 0;
165.             this._filters[0].uniforms._Radius = 0.1;
166.         }
167.     }
168. };

复制代码

至于用法 我随便找了个地方addchild
var test1 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
    test1.magic(-1);
    this.addChild(test1);

    var test2 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
    test2.magic(1);
    test2.x = 280;
    test2.y = 0;
    this.addChild(test2);

    var test3 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
    test3.twist();
    test3.x = 560;
    test3.y = 0;
    this.addChild(test3);


    var test4 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
    test4.shadow();
    test4.x = 0;
    test4.y = 300;
    this.addChild(test4);

    var test5 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
    test5.gray();
    test5.x = 560;
    test5.y = 300;
    this.addChild(test5);


             本帖来自P1论坛作者yagami，因Project1站服务器在国外有时候访问缓慢不方便作者交流学习，经联系P1站长fux2同意署名转载一起分享游戏制作经验，共同为国内独立游戏作者共同创造良好交流环境，原文地址：https://rpg.blue/forum.php?mod=viewthread&tid=403202  若有侵权，发帖作者可联系底部站长QQ在线咨询功能删除，谢谢。