🕗 🅱️ 🤸🏼 जावास्क्रिप्ट में शानदार विनाश एनीमेशन (पिक्सेल धूल) 🔏 📹 🏤

हमारे एचटीएमएल 5 गेम को विकसित करने की प्रक्रिया में, हम एक दुविधा के साथ सामना कर रहे थे: प्रत्येक तत्व के लिए विनाश प्रभाव को आकर्षित करने के लिए या जावास्क्रिप्ट (कैनवास) में इस प्रोग्राम को करने की कोशिश करें। यदि पहली विधि के साथ सब कुछ स्पष्ट है (यह मज़बूती से काम करता है, लेकिन कलाकार के लिए बहुत काम करता है), तो दूसरे के साथ हमें रेंडरिंग गति के बारे में संदेह था, क्योंकि यह 60FPS x 64 x 4 बाइट्स ~ 1 एमबी / एस है। एक तत्व पर, और अगर उनमें से 40 एक स्क्रीन पर हैं?

इसलिए, कार्य यह है: एचटीएमएल 5 (कैनवास) पर आधारित गेम के लिए एक प्रभाव बनाने के लिए, प्रभाव को 32x32 से 64x64 पिक्सल के आकार की छवि लेनी चाहिए और फ़्रेम का एक अनुक्रम उत्पन्न करना चाहिए जो 60FPS की आवृत्ति पर खेलेंगे। ऐसा लगता है कि आप इसे कैश कर सकते हैं ताकि प्रोसेसर को अधिभार न डालें, लेकिन 60FPS x 64 चौड़ाई x 64 ऊंचाई x 4 बाइट्स प्रति पिक्सेल लगभग मेगाबाइट है, और यह केवल एक सेकंड प्रति इनपुट छवि है। कल्पना कीजिए कि एक प्रभाव को सैकड़ों छवियों पर लागू करने की आवश्यकता होती है, और यह एक सेकंड से अधिक समय तक रहता है - आपको पर्याप्त मेमोरी नहीं मिलती है। एक वास्तविक समय की गणना बनी हुई है, और यहां हम इसके बारे में बात करेंगे।

विचार के लिए रेखापुंज को 2x2 या 4x4 पिक्सेल के छोटे टुकड़ों में आकार में तोड़ना है, और प्रत्येक ड्राइंग के साथ उनकी नई स्थिति की गणना करना है, जिसके परिणामस्वरूप उन्हें रेखापुंज में रखना है। रंग घटकों और अल्फा चैनल को कुछ द्विघात कानून के अनुसार समय पर भी निर्भर होना चाहिए। मेरे मामले में, "हीप" का रंग 0x323232, अल्फा से 1.0, पिक्सेल बराबरी की दिशा (बाएं / दाएं) की पारदर्शिता (अल्फा 0) की ओर जाता है।

तरंग प्रभाव के लिए दो प्रकार के कणों की आवश्यकता होती है: कुछ दूर की ओर उड़ जाएंगे, दूसरे बसेंगे और एक गुच्छा बनाएंगे। इसके अलावा, प्रत्येक कण के लिए, किसी प्रकार की यादृच्छिक प्रस्थान गति की आवश्यकता होती है। सब कुछ पूरी तरह से यादृच्छिक बनाने के लिए, दोनों यादृच्छिक चर को पर्लिन के शोर से लिया जा सकता है।

जैसा कि यह पता चला है, V8 पूरी तरह से 60xPS पर 48x48 के औसत आकार के साथ छवियों के लिए इन प्रभावों में से 40 का समर्थन करने के लिए काफी तेज है। ( उस पर गौर करें )

विस्तृत टिप्पणी के साथ प्रभाव कोड

//       var test = [], test2 = [] for (var i = 0; i < 256; i++) { test.push(0); test2.push(0); } //  - Effect = function () { this.buffer = document.createElement('canvas'); }; // ****       -,    //       (new Effect()) Effect.prototype.ready = function () { return this.progress >= 0.99; } //    // w, h -       // part -     // dir -   , -1 , 0  , 1  //               , //     this.w2 //        Effect.prototype.init0 = function (w, h, part, dir) { this.buffer.width = dir == 0 ? w : 2 * w; this.buffer.height = h; this.dir = 0; this.sx = 0; this.w = w; this.w2 = w; this.h = h; this.dir = dir; if (dir == -1) { this.sx = w; this.w *= 2; } if (dir == 1) { this.w *= 2; } this.wp = w / part; this.hp = h / part; this.part = part; return this.buffer; } //      ,      (x, y) Effect.prototype.init1 = function (x, y) { var context = this.buffer.getContext("2d"); //    var data = context.createImageData(this.w, this.h); //   var orig = context.getImageData(0, 0, this.w2, this.h); //  : 0 -  , 1 -  , 2 -   , 3 -    var parts = []; //     ,    1 var px = [], py = []; //  ,      var vx = [], speed = []; //           var noise = GenerateRandom(this.wp, this.hp); var k = 0; var part = this.part; for (var j = this.hp - 1; j >= 0; j--) { for (var i = 0; i < this.wp; i++) { var x0 = i * part; var y0 = j * part; var c = 0; for (var dx = 0; dx < part; dx++) for (var dy = 0; dy < part; dy++) { var t = (x0 + dx) + (y0 + dy) * this.w2; if (orig.data[t * 4 + 3] != 0) { c++; } } var r = noise[k++] px.push(x0 + this.sx); py.push(y0); //      if (c * 2 >= part * part) { speed.push(1.2 * r + 0.75); if (r > 0.5) { parts.push(3); } else { parts.push(2); } } else { speed.push(0); parts.push(0); } } } //     this.level = []; for (var i = 0; i < this.w; i++) this.level.push(this.h); this.parts = parts; this.vx = vx; this.speed = speed; this.px = px; this.py = py; this.context = context; this.data = data; this.orig = orig; this.progress = 0.0; this.x = x; this.y = y; return this; } //     img,    Effect.prototype.init01 = function (x, y, w, h, part, dir, img, imgX, imgY, imgW, imgH) { this.init0(w, h, part, dir); var context = this.buffer.getContext("2d"); context.drawImage(img, imgX, imgY, imgW, imgH, 0, 0, w, h); this.init1(x, y); return this; } //               Effect.prototype.draw = function (context, x, y, w, h) { if (w === undefined) { w = this.w2; h = this.h; } if (this.dir == -1) { x -= w; w *= 2; } if (this.dir == 1) { w *= 2; } context.drawImage(this.buffer, x, y, w, h); } //    , progress -       , this.progress  0.0  1.0 Effect.prototype.update = function (progress) { this.progress += progress; var c = 100; var data = this.data.data; var orig = this.orig.data; var wp = this.wp; var hp = this.hp; var part = this.part; var h = this.h; var w = this.w; var k = 0; var w2 = this.w2; // test -   , test2 -    var p = this.progress; var p2 = Math.min(p * p, 1.0); for (var i = 0; i < 256; i++) { var j = i + (50 - i) * p2 | 0; if (j > 255) j = 255; if (j < 0) j = 0; test[i] = j; j = i + (255 - i) * p2 | 0; if (p2 > 0.7) j = 255 * (1.0 - p2) / 0.3 | 0 test2[i] = j; } //    for (var i = 3; i < w * h * 4; i += 4) data[i] = 0; for (var j = hp - 1; j >= 0; j--) for (var i = 0; i < wp; i++, k++) if (this.parts[k] != 0) { //   //   ,        var p = this.progress * this.speed[k]; //      var x0 = i * part; var y0 = j * part; var x = this.px[k], y = this.py[k]; var a = 1.0; //   0.2      if (p > 0.2) { p = (p - 0.2) / 0.8; //   x,          0.1, //          var px = p * this.dir + this.progress * (this.speed[k] * 10 % 0.1); if (this.parts[k] == 2) { //     x = x0 + this.sx + px * w / 2 | 0; y = y0 + p * p * this.h | 0; } else if (this.parts[k] == 3) { //   -,         x = x0 + this.sx + px * w | 0; y = y0 + p * w / 4 | 0; if (this.dir == -1) { a = Math.min(1.0, x / w2); } else if (this.dir == 0) { a = Math.min(1.0, 1.0 - y / h); y = y + p * w / 2 | 0; } else if (this.dir == 1) { a = Math.min(1.0, 2.0 - x / w2); } //   -  if (y + part > h) this.parts[k] = 0; } //    -  if (x < 0 || x + part > w) this.parts[k] = 0; } if (this.parts[k] == 0) continue; var min = 0; //    ,      if (this.parts[k] == 2) { var max = this.level[x] var num = x; //       for (var x1 = x + 1; x1 < x + part; x1++) if (this.level[x1] > max) { num = x1; max = this.level[x1]; } //    if (y + part > max) { y = max - part; x = num; this.level[num]--; this.parts[k] = 1; } } this.px[k] = x; this.py[k] = y; //         ,            if (this.parts[k] == 3 && p > 0.2) { for (var dy = 0; dy < part; dy++) for (var dx = 0; dx < part; dx++) { var s = (x + dx) + (y + dy) * w; var t = (x0 + dx) + (y0 + dy) * w2; s *= 4; t *= 4; data[s] = test[orig[t]]; data[s + 1] = test[orig[t + 1]]; data[s + 2] = test[orig[t + 2]]; data[s + 3] = a * orig[t + 3] | 0; } } else { //      for (var dy = 0; dy < part; dy++) for (var dx = 0; dx < part; dx++) { var s = (x + dx) + (y + dy) * w; var t = (x0 + dx) + (y0 + dy) * w2; s *= 4; t *= 4; data[s] = test[orig[t]]; data[s + 1] = test[orig[t + 1]]; data[s + 2] = test[orig[t + 2]]; data[s + 3] = test2[orig[t + 3]]; } } } //       this.context.putImageData(this.data, 0, 0); }

टिप्पणियों वाला स्रोत यहां से डाउनलोड किया जा सकता है ।

जावास्क्रिप्ट में शानदार विनाश एनीमेशन (पिक्सेल धूल)

More articles: