బ్రౌజర్ మినీగేమ్ కోసం 'పెయింట్ టు హైడ్' (paint to hide) రూపొందించడం
నేను Meccha Chameleon ప్రేరణతో ఒక బ్రౌజర్ గేమ్ను రూపొందించాను. ఆ గేమ్లో, దాక్కునేవారు (hiders) గోడలు లేదా పెట్టెల రంగులకు అనుగుణంగా తమ శరీరాలను పెయింట్ చేస్తారు. వెతికేవారు (seekers) వారిని కనుగొనడానికి ప్రయత్నిస్తారు.
ఈ ఆలోచన ఆధారంగా నేను రెండు సాధనాలను (tools) రూపొందించాను.
- The Camo Lab ఈ సాధనం మీకు ఏదైనా ఉపరితలం (surface) కోసం ఖచ్చితమైన రంగులు, నమూనాలు (patterns) మరియు భంగిమలను (poses) అందిస్తుంది. నేను కెమెలియన్ కోసం ఒకే ఒక inline SVGని ఉపయోగించాను. ఉపరితల ప్యాలెట్ (surface palette) ఆధారంగా రంగులు మారుతుంటాయి.
చిత్రాలను (images) రూపొందించడం కంటే, వేరియబుల్స్ (variables) ఉపయోగించి SVG రంగులను మార్చడం సులభమని నేను గుర్తించాను. ప్రతి ఉపరితలం ఒక చిన్న డేటా ఆబ్జెక్ట్. ఇందులో మూడు hex రంగులు, ఒక pattern మరియు ఒక blend score ఉంటాయి. కొత్త ఉపరితలాన్ని జోడించడానికి కేవలం ఒక లైన్ కోడ్ సరిపోతుంది.
- The Minigame ఇది ఆడగలిగే టైల్స్ గ్రిడ్ (grid of tiles). కొన్ని టైల్స్ వెనుక కెమెలియన్ దాగి ఉంటుంది. టైమర్ ముగియకముందే వాటిని కనుగొనడానికి మీరు టైల్స్ను ట్యాప్ చేయాలి. నేను దీనిని React state ఉపయోగించి రూపొందించాను. నేను canvas లేదా game engineని ఉపయోగించలేదు. దీనివల్ల ఫైల్ సైజు తక్కువగా ఉంటుంది మరియు లోడ్ టైమ్ వేగంగా ఉంటుంది.
టెక్ స్టాక్ (tech stack):
- Next.js
- OpenNext ద్వారా Cloudflare Workers
ఈ సైట్ ఎడ్జ్ (edge) వద్ద స్టాటిక్ పేజీలను ఉపయోగిస్తుంది. ఇంటరాక్టివ్ భాగాలు క్లయింట్ సైడ్ (client side) లో హైడ్రేట్ (hydrate) అవుతాయి.
ఈ సాధనాలను ఇక్కడ ప్రయత్నించండి: Camo Lab: [Link] Browser Game: [Link]
SVG కలరింగ్ లేదా OpenNext సెటప్ గురించి నన్ను ఏవైనా ప్రశ్నలు అడగండి.
మూలం (Source): https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn