ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-24, Friday
🎮 ක්‍රීඩා තාක්ෂණය · 🕒 කියවීමට විනාඩි 2 · 👁 1

Black Myth: Zhong Kui ගේ 153-නෝඩ් අන්තර්ක්‍රියාත්මක ලෝර් ග්‍රාෆ් එක D3.js සහ Astro සමඟ නිර්මාණය

Black Myth: Zhong Kui ගේ 153-නෝඩ් අන්තර්ක්‍රියාත්මක ලෝර් ග්‍රාෆ් එක D3.js සහ Astro සමඟ නිර්මාණය

ලෝක ප්‍රසිද්ධ චීන පුරාණ-ක්‍රියාකාරී ක්‍රමයක් වන Black Myth: Zhong Kui ගේ කතාමාලා ගැඹුරුකම, දැන් අන්තර්ක්‍රියාත්මක සිතියම් මගින් තවත් පැහැදිලි කරලා. සංවර්ධක කණ්ඩායම D3.js සහ Astro භාවිතා කරමින් 153 නෝඩ්, 1,200 සම්බන්ධතා සහිත ලෝර් ග්‍රාෆ් එකක් සකස් කරලා, මොබයිල් දුරකථන වලත් සිසිලන 60 FPS ක පිරිසට පෙන්වීමට හැකිවුණා.

ප්‍රධාන අභියෝගය වුයේ මෙතරම් විශාල ග්‍රාෆ් එකක් බ්‍රවුසරයේ රන්-ත‍්‍රෙඩ් එකේ ලේඛන-සැලසුම් (layout) පිරිසිදු කිරීමක් හෝ බරපතළ JavaScript ගණනය කිරීමක් නොකර පෙන්වීම. මොබයිල් උපාංග වල CPU සම්පත් සීමිත නිසා, පසුබිම් ගණනය කිරීමට ඉඩ නොදෙමින් අත්හදා බැලීම අවශ්‍ය වුණා.

මෙම ගැටලුවට තීරණාත්මක තාක්ෂණික විසඳුම ලෙස, Astro ස්ථායි ගොඩනැගීමේ අවස්ථාවේ D3.js භාවිතා කර නෝඩ් ස්ථාන සහ භෞතික සංකල්ප ගණනය කරගත්තා. එම පරිණාමය SVG ලෙස පෙර-අච්චු කර, CSS ටෝකන සමඟ inline කිරීමෙන් රන්-ත‍්‍රෙඩ් එකේ කිසිදු JavaScript කේතයක් නැතිව පෙනුම ලබා දුන්නා. මේ නිසා මොබයිල් පරිශීලකයින්ට ස්ක්‍රෝල් කිරීමේදී 60 FPS ක වේගය පවත්වා ගත හැකි වුණා.

අවසන් ප්‍රතිඵලයක් ලෙස, Black Myth Lore & Concept Map වෙබ් අඩවියෙහි සජීවී සිතියම දැක්කාට, ක්‍රීඩකයින්ට කතාමාලා අතර සම්බන්ධතා තේරුම් ගැනීමට පහසු වුණා. මෙම ව්‍යාපෘතිය, වෙබ් තාක්ෂණය සහ ක්‍රීඩා අන්තර්ක්‍රියාත්මක අංගයන් එකට ගැලපීමේ නව මාදිලියක් ලෙස සැලකේ.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

  • ශ්‍රී ලාංකීය සංවර්ධකයන්ට D3.js සහ Astro භාවිතා කර ස්ථාතික සයිට් වල අන්තර්ක්‍රියාත්මක දත්ත සිතියම් සෑදීමේ ප්‍රායෝගික උදාහරණයක් ලැබේ.
  • ඉගෙනුම් ආකාරය: ග්‍රාෆ් ත්‍රෙඩ්, SVG ප්‍රි-රෙන්ඩරින්, සහ බිල්ඩ්-ටයිම් ගණනය කිරීම යන නවතම වෙබ් ඉංජිනේරු සංකල්ප ඉගෙන ගත හැකිය.
  • ව්‍යාපාරික පරිපාලන: තොරතුරු විශ්ලේෂණ, ජාල සම්බන්ධතා සිතියම්, සහ ඩේටා විව්‍යුආර් තාක්ෂණය භාවිතා කර ගනුදෙනුකාරී අත්දැකීම් වර්ධනය කළ හැකිය.

අනාගතයේදී තවත් ග්‍රාෆ්-අධාරිත අන්තර්ක්‍රියාත්මක අඩවි, අධ්‍යාපනික දෘශ්‍ය පසුබැසීම සහ ක්‍රීඩා විශ්ලේෂණ වැනි ක්ෂේත්‍රවලට මෙම පදනම මූලික වේදිකාවක් වනු ඇත.

💡 අදම අන්තර්ක්‍රියාත්මක ලෝර් ග්‍රාෆ් එක බලන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#Black Myth #Lore Graph #D3.js #Astro #Mobile