抛砖引玉 mv中使用shader
虽然我已经不用rm了 为了庆祝论坛复活 国庆期间看了下mv 于是就有了这东西 https://rpg.blue/data/attachment/forum/201710/04/115005hql634lvql56k9zp.gifJAVASCRIPT 代码
function Sprite_Shader(){
this.initialize.apply(this, arguments);
}
Sprite_Shader.defultfrag = " \
varying vec2 vTextureCoord; \
uniform sampler2D uSampler; \
void main(void) \
{ \
gl_FragColor = texture2D(uSampler, vTextureCoord); \
} \
";
Sprite_Shader.defultvert= " \
attribute vec2 aVertexPosition; \
attribute vec2 aTextureCoord; \
uniform mat3 projectionMatrix; \
varying vec2 vTextureCoord; \
void main(void) \
{ \
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); \
vTextureCoord = aTextureCoord; \
} \
";
Sprite_Shader.prototype = Object.create(Sprite.prototype);
Sprite_Shader.prototype.constructor = Sprite_Shader;
Sprite_Shader.prototype.initialize = function(bitmap){
Sprite.prototype.initialize.call(this);
this.bitmap = bitmap;
this.mode = -1;
};
Sprite_Shader.prototype.gray = function(){
this.mode= 1;
var frag = " \
varying vec2 vTextureCoord; \
uniform sampler2D uSampler; \
void main(void) \
{ \
gl_FragColor = texture2D(uSampler, vTextureCoord); \
floatgray = (gl_FragColor.r + gl_FragColor.g + gl_FragColor.b)/3.0; \
gl_FragColor.r = gray; \
gl_FragColor.g = gray; \
gl_FragColor.b = gray; \
} \
";
var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag);
this._filters = ;
};
Sprite_Shader.prototype.shadow = function(){
this.mode= 2;
var uniform = {};
var frag = " \
varying vec2 vTextureCoord; \
uniform sampler2D uSampler; \
const vec2 step = vec2(0.015, 0.002); \
void main(void) \
{ \
vec3 color = texture2D(uSampler, vTextureCoord).rgb; \
float olda =texture2D(uSampler, vTextureCoord).a; \
float weight = 10.0; \
float assess = texture2D(uSampler, vTextureCoord).a * weight; \
float alpha = assess; \
alpha += texture2D( uSampler, vTextureCoord.xy + vec2( -3.0*step.x, -3.0*step.y ) ).a; \
alpha /= (2.0+assess);\
gl_FragColor = vec4(color, alpha); \
} \
";
var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,uniform);
this._filters = ;
};
Sprite_Shader.prototype.twist = function(){
this.mode= 3;
this.uniform = {};
this.uniform.iGlobalTime = {
type:"f",
value:0
}
frag = " \
varying vec2 vTextureCoord; \
uniform sampler2D uSampler; \
uniform float iGlobalTime; \
void main(void) \
{ \
vec2 uv = vTextureCoord.xy; \
float w = (0.5 - (uv.x)); \
float h = 0.5 - uv.y; \
float distanceFromCenter = sqrt(w * w + h * h); \
float sinArg = distanceFromCenter * 10.0 - iGlobalTime * 10.0; \
float slope = cos(sinArg) ; \
vec4 color = texture2D(uSampler, uv + normalize(vec2(w, h)) * slope * 0.05); \
gl_FragColor = color; \
} \
";
var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);
this._filters = ;
};
Sprite_Shader.prototype.magic = function(mode){
this.mode= 4;
this.uniform = {};
this.uniform._Angle = {
type:"f",
value:0
};
this.uniform._Radius = {
type:"f",
value:0
};
this.uniform._mode = {
type:"f",
value:mode
};
frag = " \
varying vec2 vTextureCoord; \
uniform sampler2D uSampler; \
uniform float _Angle;\
uniform float _Radius;\
uniform float _mode;\
void main(void) \
{ \
vec2 uv = vTextureCoord; \
uv -= vec2(0.25, 0.5); \
float dist = length(uv); \
float percent = (_Radius - dist) / _Radius; \
if (percent < 1.0 && percent >= 0.0) \
{\
float theta = percent * percent * _Angle * 3.0; \
float s = sin(theta); \
float c = cos(theta); \
uv = vec2(uv.x*c - uv.y*s*_mode , uv.x*s + uv.y*c); \
} \
uv += vec2(0.25, 0.5); \
gl_FragColor = texture2D(uSampler, uv); \
} \
";
var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);
this._filters = ;
};
Sprite_Shader.prototype.update = function(){
Sprite.prototype.update.call(this);
if(this.mode == 3){
this._filters.uniforms.iGlobalTime += 0.01;
}
elseif(this.mode == 4){
this._filters.uniforms._Angle += 0.01;
this._filters.uniforms._Radius += 0.001;
if(this._filters.uniforms._Radius >= 0.6)
{
this._filters.uniforms._Angle = 0;
this._filters.uniforms._Radius = 0.1;
}
}
};
至于用法 我随便找了个地方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在线咨询功能删除，谢谢。
页:
[1]