[outdated]CRT screen effect

じ☆ve冰风

---

Warning: This plugin takes an unconventional approach to adding filtering effects to the entire screen. It may cause lag on a slow device.

---

Introduction
This is not a "full" plugin. Just a simple plugin I wrote a while back for my game, but I ended up not using it because it doesn't fit the type of the game.
Just in case somebody needs it, I decided to share it here.
It adds a crt monitor effect to the WHOLE screen, including the video layer and loading text.

Terms
You can use it in any project, credit is not required but appreciated.

How to Use
Save the code as a js file and put it in plugins directory. There are no parameters for this plugin, just turn it on in the editor.
It adds a Graphics. _crtFilter property.  When it's true,  the filter effect is on.  The property is true by default.  You can edit it or change it in game if you want.

                JavaScript:       

1. /*
2. Create a filter canvas above upper canvas (the canvas
3. that displays the loading screen), the filter canvas
4. is used to copy contents from the game canvas, the video,
5. and the upper canvas, so you can change the pixels later.
6. */
7. Graphics._createUpperCanvas = function () {
8.   this._upperCanvas = document.createElement('canvas');
9.   this._upperCanvas.id = 'UpperCanvas';
10.   this._filterCanvas = document.createElement('canvas');
11.   this._filterCanvas.id = 'FilterCanvas';
12.   this._updateUpperCanvas();
13.   document.body.appendChild(this._upperCanvas);
14.   document.body.appendChild(this._filterCanvas);
15.   this._crtFilter = true;
16. };
17. Graphics._updateUpperCanvas = function () {
18.   this._upperCanvas.width = this._filterCanvas.width = this._width;
19.   this._upperCanvas.height = this._filterCanvas.height = this._height;
20.   this._upperCanvas.style.zIndex = 3;
21.   this._filterCanvas.style.zIndex = 4;
22.   this._centerElement(this._upperCanvas);
23.   this._centerElement(this._filterCanvas);
24. };
25. /*
26. crt monitor effect
27. */
28. var rgbData = null;
29. function crt(gfx, ctx) {
30.   var shift = gfx.frameCount;
31.   var canvas = ctx.canvas;
32.   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
33.   var data = imageData.data;
34.   var lw = canvas.width * 4;
35.   var s = Math.round(shift / 20);
36.   var sl = false;
37.   if (!rgbData) {
38.     rgbData = new ImageData(canvas.width, canvas.height).data;
39.     for (let i = 0; i < rgbData.length; i += 4) {
40.       var y = Math.floor(i / lw);
41.       var x = Math.floor((i % lw) / 4);
42.       var r = 128;
43.       var g = 128;
44.       var b = 128;
45.       x = (x + Math.floor(y / 3)) % 3;
46.       if (x == 0) { r += 32; g -= 16; b -= 16; }
47.       else if (x == 1) { g += 32; r -= 16; b -= 16; }
48.       else if (x == 2) { b += 32; r -= 16; g -= 16; }
49.       rgbData[i] = r;
50.       rgbData[i + 1] = g;
51.       rgbData[i + 2] = b;
52.     }
53.   }
54.   var cw = canvas.width, ch = canvas.height, i = 0, dl = data.length;
55.   for (var y = 0; y < ch; y++) {
56.     var ds = 0;
57.     var ss = (y + shift) % 160;
58.     if (ss == 0) ds = lw * 2 + 4;
59.     else if (ss == 1) ds = lw + 4;
60.     var ys = ((y + s) % 4) ? 0 : 64;
61.     for (var x = 0; x < cw; x++, i += 4) {
62.       var is = (i + ds) % dl;
63.       data[i] = data[is] + rgbData[i] - 128 - ys;
64.       data[i + 1] = data[is + 1] + rgbData[i + 1] - 128 - ys;
65.       data[i + 2] = data[is + 2] + rgbData[i + 2] - 128 - ys;
66.     }
67.   }
68.   ctx.putImageData(imageData, 0, 0);
69. }
70. /*
71. Draw everythign on this canvas and change pixels
72. */
73. Graphics.renderFilterCanvas = function () {
74.   this._filterCanvas.style.opacity = 1;
75.   var ctx = this._filterCanvas.getContext('2d');
76.   ctx.save();
77.   ctx.globalAlpha = 1;
78.   ctx.drawImage(this._canvas, 0, 0, this.width, this.height);
79.   if (this.isVideoPlaying()) {
80.     ctx.drawImage(this._video, 0, 0, this.width, this.height);
81.   }
82.   if (this._upperCanvas.style.opacity > 0) {
83.     ctx.drawImage(this._upperCanvas, 0, 0, this.width, this.height);
84.   }
85.   ctx.restore();
86.   crt(this, ctx);
87. }
88. const g_paintUpperCanvas = Graphics._paintUpperCanvas;
89. Graphics._paintUpperCanvas = function () {
90.   g_paintUpperCanvas.call(this);
91.   //Just in case you need to display the loading text
92.   if (this._crtFilter) {
93.     this.renderFilterCanvas();
94.   } else {
95.     this._filterCanvas.style.opacity = 0;
96.   }
97. };
98. const g_render = Graphics.render;
99. Graphics.render = function (stage) {
100.   g_render.call(this, stage);
101.   if (this._crtFilter) {
102.     if (this._rendered) {
103.       this.renderFilterCanvas();
104.     }
105.   } else {
106.     this._filterCanvas.style.opacity = 0;
107.   }
108. };

复制代码

本贴来自国际rpgmaker官方论坛作者:utunnels处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/outdated-crt-screen-effect.169964/