# एटलस कोशिकाओं को स्रोत और गंतव्य आयतों में मैप करें

> स्रोत आयतों को परिभाषित करके, नियमों, पिवोट्स को ट्रिम करके और एक रेंडरिंग मैप में चेक लोड करके स्प्राइट एटलस फ्रेम को संरेखित रखें।

- URL: https://oneshotgems.ai/hi/topics/sprite-atlas-rendering
- श्रेणी: गेम डेवलपर के लिए
- प्रकार: गाइड
- अपडेट किया गया: 5 अक्टूबर 2026

एक स्प्राइट एटलस एक छवि में कई फ़्रेमों को पैक करता है, लेकिन ब्राउज़र केवल वही आयत बनाता है जिसे आप उसे बनाने के लिए कहते हैं। गलत फ्रेम चौड़ाई पड़ोसी को नुकसान पहुंचा सकती है; एक बेमेल धुरी प्रत्येक छवि के वैध होने पर भी एनीमेशन को डगमगाती हुई दिखा सकती है। एक डेटा मैप में फ़्रेम ज्यामिति को परिभाषित करें और स्रोत पिक्सेल को गेम द्वारा उपयोग किए जाने वाले गंतव्य आकार से अलग रखें। यह एटलस डिबगिंग को प्रत्येक ड्रॉ कॉल को आंख से समायोजित करने के बजाय स्पष्ट आयतों की जांच में बदल देता है।

## फ़्रेम ज्यामिति और एनीमेशन क्रम का वर्णन करें

नियमित ग्रिड के लिए सेल की चौड़ाई और ऊँचाई, कॉलम की संख्या और हर एनीमेशन का फ़्रेम इंडेक्स सहेजें। स्रोत x की गणना (फ़्रेम इंडेक्स को कॉलम की संख्या से भाग देने पर शेष) × सेल चौड़ाई से करें; स्रोत y की गणना (फ़्रेम इंडेक्स / कॉलम की संख्या से नीचे की ओर पूर्णांक किया गया पंक्ति इंडेक्स) × सेल ऊँचाई से करें। अनियमित एटलस के लिए स्रोत आयत स्पष्ट रूप से सहेजें। एनीमेशन क्रम को फ़ाइल क्रम से अलग रखें; यदि कला क्रम के बजाय मुद्रा के अनुसार रखी गई हो, तो आठ-फ़्रेम की चाल में [0, 1, 2, 1, 0, 3, 4, 3] इंडेक्स उपयोग हो सकते हैं।

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

## स्रोत आयत का जानबूझकर उपयोग करें

कैनवास drawImage में एक अधिभार है जो एक स्रोत आयत का चयन करता है और इसे एक गंतव्य आयत में मापता है। एमडीएन स्रोत x, y, चौड़ाई और ऊंचाई को गंतव्य x, y, चौड़ाई और ऊंचाई से अलग-अलग दस्तावेजित करता है। प्रस्तुत आकार बदलते समय एटलस क्रॉप को सटीक रखने के लिए उस पृथक्करण का उपयोग करें। पहले, आखिरी और पंक्ति-सीमा फ़्रेम का परीक्षण करें; एक गलत कॉलम गिनती अक्सर उन सीमाओं पर आसन्न स्प्राइट से एक-पिक्सेल स्लिवर के रूप में दिखाई देती है।

## ज्यामिति का निदान करने से पहले सीम और लोडिंग की जाँच करें

यदि स्केल करके चित्र बनाते समय पास की कला एक-दूसरे में दिखने लगे, तो एटलस सेल के बीच पारदर्शी खाली जगह रखें और जाँचें कि चुना गया फ़िल्टरिंग मोड कला शैली के अनुकूल है। हर गंतव्य फ़्रेम के चारों ओर डिबग आयत बनाएँ और उसका इंडेक्स अस्थायी रूप से लिखें। चित्र बनाने से पहले छवि लोड और डिकोड होने दें; फिर canvas के वास्तविक स्केल और आंतरिक ड्रॉइंग बफ़र के रिज़ॉल्यूशन पर परीक्षण करें। बिना स्केल वाले और स्केल किए गए फ़्रेम की तुलना करें। यदि सीम केवल स्केल किए गए फ़्रेम में दिखती है, तो स्रोत निर्देशांक बदलने से पहले सैंपलिंग और एटलस के अंदरूनी मार्जिन की जाँच करें।

## सवाल

**पड़ोसी स्प्राइट का भाग क्यों प्रकट होता है?** स्रोत आयत में पड़ोसी पिक्सेल शामिल हो सकते हैं, या स्केल किए गए नमूने कसकर पैक किए गए एटलस से किनारे वाले पिक्सेल दिखा सकते हैं। फ़्रेम क्रम बदलने से पहले फसल की जाँच करें और फ़्रेमों के बीच उचित खाली अंतर रखें।

**क्या टकराव बक्सों को छंटनी की गई स्प्राइट सीमा का उपयोग करना चाहिए?** आमतौर पर टकराव के आयामों को खेल के चरित्र से बांध कर रखें, न कि आकस्मिक पारदर्शी पिक्सेल से। एक स्थिर धुरी और स्पष्ट टक्कर क्षेत्र एनीमेशन फ़्रेम को गेमप्ले ज्यामिति को बदलने से रोकता है।

## अपनी जिज्ञासा के साथ आगे बढ़ें

- [खाली स्क्रीन के बजाय गेम एसेट सही क्रम में लोड करें](https://oneshotgems.ai/hi/topics/game-asset-loading): एक परिसंपत्ति लोडिंग अनुक्रम की योजना बनाएं जो वास्तविक प्रगति की रिपोर्ट करता है, विफलताओं को संभालता है, और एक महत्वपूर्ण फ्रेम के दौरान एक बड़ी छवि को डिकोड करने से बचाता है।
- [गेम ग्राफ़िक्स साफ़ दिखाने के लिए Canvas रिज़ॉल्यूशन सेट करें](https://oneshotgems.ai/hi/topics/canvas-pixel-density): जब कोई गेम स्क्रीन पर स्पष्ट दिखना चाहिए तो कैनवास बैकिंग रिज़ॉल्यूशन, डिवाइस पिक्सेल अनुपात, मेमोरी उपयोग और ड्राइंग लागत को संतुलित करें।

## आगे पढ़ें

- [एमडीएन कैनवास पर छवियों का उपयोग कर रहा है](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
- [एमडीएन ड्रॉइमेज](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)

---
मूल पेज: https://oneshotgems.ai/hi/topics/sprite-atlas-rendering