மறைந்து விளையாடும் வண்ணம் பூசும் பிரவுசர் மினி கேமை உருவாக்குதல்

Meccha Chameleon விளையாட்டினால் ஈர்க்கப்பட்டு நான் ஒரு பிரவுசர் விளையாட்டை உருவாக்கினேன். அந்த விளையாட்டில், ஒளிந்து கொள்ள விரும்புபவர்கள் சுவர்கள் அல்லது பெட்டிகளின் நிறத்திற்கு ஏற்ப தங்கள் உடலை வண்ணம் பூசிக்கொள்வார்கள். தேடுபவர்கள் அவர்களைக் கண்டுபிடிக்க முயற்சிப்பார்கள்.

இந்த யோசனை அடிப்படையிலான இரண்டு கருவிகளை நான் உருவாக்கினேன்.

  1. The Camo Lab இந்தக் கருவி எந்தவொரு மேற்பரப்பிற்கும் துல்லியமான நிறங்கள், வடிவங்கள் (patterns) மற்றும் நிலைகளை (poses) உங்களுக்கு வழங்கும். நான் அந்த நிறம் மாறும் பல்லிக்கு (chameleon) ஒரு ஒற்றை inline SVG-ஐப் பயன்படுத்தினேன். மேற்பரப்பின் வண்ணத் தொகுப்பிற்கு (palette) ஏற்ப நிறங்கள் மாறும்.

படங்களை உருவாக்குவதை விட, மாறிகளைப் (variables) பயன்படுத்தி SVG நிறங்களை மாற்றுவது எளிது என்பதைக் கண்டறிந்தேன். ஒவ்வொரு மேற்பரப்பும் ஒரு சிறிய தரவுப் பொருளாக (data object) உள்ளது. இதில் மூன்று hex நிறங்கள், ஒரு pattern மற்றும் ஒரு blend score ஆகியவை அடங்கும். ஒரு புதிய மேற்பரப்பைச் சேர்ப்பதற்கு ஒரே ஒரு வரி குறியீடு (code) போதுமானது.

  1. The Minigame இது விளையாடக்கூடிய கட்டங்கள் (tiles) கொண்ட ஒரு grid ஆகும். சில கட்டங்களுக்குள் ஒரு பல்லி ஒளிந்திருக்கும். நேரம் முடிவதற்குள் அவற்றை நீங்கள் கண்டறிய கட்டங்களைத் தொட வேண்டும் (tap). இதை நான் React state பயன்படுத்தி உருவாக்கினேன். நான் canvas அல்லது game engine எதையும் பயன்படுத்தவில்லை. இது கோப்பின் அளவைச் சிறியதாகவும், வேகமாகத் தொடங்குவதற்கும் (load time) உதவுகிறது.

தொழில்நுட்ப அடுக்கு (Tech stack):

இந்தத் தளம் edge-இல் static பக்கங்களைப் பயன்படுத்துகிறது. ஊடாடும் (interactive) பகுதிகள் client side-இல் hydrate ஆகின்றன.

கருவிகளை இங்கே முயற்சிக்கவும்: Camo Lab: [Link] Browser Game: [Link]

SVG வண்ணம் பூசுதல் அல்லது OpenNext அமைப்பு குறித்து என்னிடம் கேள்விகளைக் கேட்கலாம்.

ஆதாரம்: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn