CRT屏幕效果

三姐

                               
登录/注册后可看大图

作者的话:

简介
这不是“完整”的插件。只是我之前为我的游戏编写的一个简单的插件，但我最终没有使用它，因为它不适合游戏类型。
以防有人需要它，我决定在这里分享它。
它为整个屏幕添加了 CRT 显示器效果，包括一些移动的扫描线。

条款
您可以在任何项目中使用它，不需要信用但会表示感谢。

如何使用
将代码保存为 js 文件并将其放在插件目录中。这个插件没有参数，只需在编辑器中打开它即可。
它添加了一个 Graphics._crtFilter 属性。当它为 true 时，滤镜效果处于打开状态。该属性默认为 true。如果需要，您可以在游戏中编辑或更改它。

[JavaScript] 纯文本查看 复制代码

/*
Create a filter canvas above upper canvas (the canvas
that displays the loading screen), the filter canvas
is used to copy contents from the game canvas, the video,
and the upper canvas, so you can change the pixels later.
*/
Graphics._createUpperCanvas = function() {
    this._upperCanvas = document.createElement('canvas');
    this._upperCanvas.id = 'UpperCanvas';
    this._filterCanvas = document.createElement('canvas');
    this._filterCanvas.id = 'FilterCanvas';
    this._updateUpperCanvas();
    document.body.appendChild(this._upperCanvas);
    document.body.appendChild(this._filterCanvas);
    this._crtFilter = true;
};
Graphics._updateUpperCanvas = function() {
    this._upperCanvas.width = this._filterCanvas.width = this._width;
    this._upperCanvas.height = this._filterCanvas.height = this._height;
    this._upperCanvas.style.zIndex = 3;
    this._filterCanvas.style.zIndex = 4;
    this._centerElement(this._upperCanvas);
    this._centerElement(this._filterCanvas);
};
/*
crt monitor effect
*/
function crt(gfx, ctx) {
  var shift = gfx.frameCount;
  var canvas = ctx.canvas;
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;
  var lw = canvas.width*4;
  var s = Math.round(shift/20);
  var sl = false;
  for (let i = 0; i < data.length; i += 4) {
    var y = Math.floor(i/lw);
    var x = Math.floor((i%lw)/4);
    var is = i;
    if(sl||(y+shift)%160==0) {
      sl = !sl;
      is = lw*Math.min(canvas.height-1, y+(sl?2:1)) + x*4+4;
    }
    var r = data[is];
    var g = data[is+1];
    var b = data[is+2];
    x = (x+Math.floor(y/3))%3;
    if(x==0) {r+=32;g-=16;b-=16;}
    else if(x==1) {g+=32;r-=16;b-=16;}
    else if(x==2) {b+=32;r-=16;g-=16;}
    if(r<0) r=0; if(r>255)r=255;
    if(g<0) g=0; if(g>255)g=255;
    if(b<0) b=0; if(b>255)b=255;
    if((y+s)%4==0){
      r = Math.round(r*0.75);
      g = Math.round(g*0.75);
      b = Math.round(b*0.75);
    }
    data[i] = r;
    data[i+1] = g;
    data[i+2] = b;
  }
  ctx.putImageData(imageData, 0, 0);
}
/*
Draw everythign on this canvas and change pixels
*/
Graphics.renderFilterCanvas = function(){
  this._filterCanvas.style.opacity=1;
  var ctx = this._filterCanvas.getContext('2d');
  ctx.save();
  ctx.globalAlpha = 1;
  ctx.drawImage(this._canvas,0,0,this.width,this.height);
  if(this.isVideoPlaying()){
    ctx.drawImage(this._video,0,0,this.width,this.height);
  }
  if(this._upperCanvas.style.opacity > 0){
    ctx.drawImage(this._upperCanvas,0,0,this.width,this.height);
  }
  ctx.restore();
  crt(this,ctx);
}
const g_paintUpperCanvas = Graphics._paintUpperCanvas;
Graphics._paintUpperCanvas = function() {
  g_paintUpperCanvas.call(this);
  //Just in case you need to display the loading text
  if(this._crtFilter){
    this.renderFilterCanvas();
  }else{
    this._filterCanvas.style.opacity=0;
  }
};
const g_render = Graphics.render;
Graphics.render = function(stage) {
  g_render.call(this,stage);
  if(this._crtFilter){
    if(this._rendered){
      this.renderFilterCanvas();
    }
  }else{
    this._filterCanvas.style.opacity=0;
  }
};