|
探照灯实现效果如下：
看看怎么实现的吧：
light.effect
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
in vec3 a_position;
in vec4 a_color;
out vec4 v_color;
#if USE_TEXTURE
in vec2 a_uv0;
out vec2 v_uv0;
#endif
void main () {
vec4 pos = vec4(a_position, 1);
#if CC_USE_MODEL
pos = cc_matViewProj * cc_matWorld * pos;
#else
pos = cc_matViewProj * pos;
#endif
#if USE_TEXTURE
v_uv0 = a_uv0;
#endif
v_color = a_color;
gl_Position = pos;
}
}%
CCProgram fs %{
precision highp float;
#include <alpha-test>
in vec4 v_color;
uniform ARGS {
float width;
float height;
vec2 center;
};
#if USE_TEXTURE
in vec2 v_uv0;
uniform sampler2D texture;
#endif
void mainImage(out vec4 color,vec2 uv,vec4 s) {
vec2 realCenter;
realCenter.x = uv.x / width;
realCenter.y = uv.y / height;
float radius = 3.;
float dis = sqrt(pow((realCenter.x - uv.x),2.) + pow((realCenter.y - uv.y),2.));
if(dis < 1.) {
color = vec4(0.3,0.4,0.5,1.);
} else {
color = s;
// color = color * vec4(1.,0.,0.,0.5);
}
}
void circle(out vec4 color,vec2 uv,vec2 cen,float radius,vec4 s) {
float ratio = width / height;
/* 所有像素点到中心点的距离*/
float dis = sqrt(pow((cen.x - uv.x),2.) + pow((cen.y - uv.y),2.));
if(dis < radius) {
color = s;
} else {
color = vec4(s.r * s.g * s.b,s.b * s.r * s.g,s.b * s.r * s.g ,0.5);
}
}
void main () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= texture(texture, v_uv0);
#if CC_USE_ALPHA_ATLAS_TEXTURE
o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
#endif
#endif
o *= v_color;
ALPHA_TEST(o);
gl_FragColor = o;
vec2 resolution = vec2(width,height);
vec2 uv = v_uv0;
float ratio;
vec2 realCenter = vec2(0.5,0.5);
if(height > width) {
ratio = height / width;
uv.y *= ratio;
realCenter.y = center.y * ratio;
realCenter.x = center.x;
} else {
ratio = width / height;
uv.x *= ratio;
realCenter.x = center.x * ratio;
realCenter.y = center.y;
}
// uv.y *= 1.77;
// vec2 uv = (-resolution.xy + 2. * v_uv0.xy) / resolution.y;
circle(gl_FragColor,uv,realCenter,0.2,o);
// mainImage(gl_FragColor,uv,o);
}
}%
对应setUniform的ts文件：
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
// LIFE-CYCLE CALLBACKS:
_material: cc.Material;
@property({
type: cc.Integer,
step: 1,
displayName: '横向格子的数量',
slide: true,
min: 10,
max: 200
})
width: number = 0;
@property({
type: cc.Integer,
step: 1,
displayName: '纵向格子的数量',
slide: true,
min: 20,
max: 300
})
height: number = 0;
onLoad () {
this._material = this.node.getComponent(cc.RenderComponent).getMaterial(0);
let sprite: cc.Sprite = this.node.getComponent(cc.Sprite);
let spriteFrame: cc.SpriteFrame = sprite.spriteFrame;
let texture: cc.Texture2D = spriteFrame.getTexture();
let textureWidth: number = texture.width;
let textureHeight: number = texture.height;
console.log("width is ",textureWidth," and height is ",textureHeight);
// for(let i = 0; i < textureWidth; i++) {
// for(let j = 0; j < textureHeight; j++) {
// }
// }
this.node.on(cc.Node.EventType.TOUCH_MOVE,this.move,this);
console.log("width is ",this.node.width," and height is ",this.node.height);
// this._material.setProperty('width')
this._material.setProperty('width',this.node.width);
this._material.setProperty('height',this.node.height);
this._material.setProperty('center',cc.v2(0.5,0.5));
}
move(event: cc.Event.EventMouse): void {
let ratio = this.node.height / this.node.width;
let location: cc.Vec2 = event.getLocation();
console.log("location.y is ",location.y);
let x = location.x / cc.winSize.width;
let y = (location.y / cc.winSize.height);
/**
* x [-1,1]
* y [-1,1]
*/
console.log("x is ",x);
console.log("y is ",y);
let center = cc.v2(x,1 - y);
this._material.setProperty('center',center);
}
start () {
}
update (dt) {
}
}
鼠标移动到哪哪个地方就会有个探照灯
|
转播
