# قم بتعيين خلايا الأطلس إلى مستطيلات المصدر والوجهة

> حافظ على محاذاة إطارات أطلس الكائنات من خلال تحديد المستطيلات المصدر وقواعد القطع والمحاور وتحميل عمليات التحقق في خريطة عرض واحدة.

- URL: https://oneshotgems.ai/ar/topics/sprite-atlas-rendering
- الفئة: لمطوري الألعاب
- النوع: دليل
- آخر تحديث: 5 أكتوبر 2026

يقوم أطلس الكائنات بجمع العديد من الإطارات في صورة واحدة، لكن المتصفح يرسم فقط المستطيل الذي تطلب منه رسمه. يمكن أن يؤدي عرض الإطار الخاطئ إلى قطع جزء مجاور؛ يمكن للمحور غير المتطابق أن يجعل الرسوم المتحركة تبدو متذبذبة حتى عندما تكون كل صورة صالحة. حدد هندسة الإطار في خريطة بيانات واحدة واحتفظ بوحدات البكسل المصدر منفصلة عن حجم الوجهة الذي تستخدمه اللعبة. يؤدي ذلك إلى تحويل تصحيح أخطاء الأطلس إلى فحص المستطيلات الواضحة بدلاً من ضبط كل استدعاء رسم بالعين المجردة.

## وصف هندسة الإطار وترتيب الرسوم المتحركة

في الشبكة المنتظمة، خزّن عرض الخلية وارتفاعها وعدد الأعمدة وفهرس الإطار لكل حركة. احسب إحداثي المصدر x على أنه (باقي قسمة فهرس الإطار على عدد الأعمدة) × عرض الخلية، وإحداثي المصدر y على أنه (فهرس الصف الناتج عن تقريب فهرس الإطار ÷ عدد الأعمدة إلى الأسفل) × ارتفاع الخلية. في الأطالس غير المنتظمة، خزّن مستطيلات المصدر صراحةً. افصل ترتيب الحركة عن ترتيب الملفات؛ إذا كان الرسم مرتبًا حسب الوضعيات لا التسلسل، فقد تستخدم حركة مشي من ثمانية إطارات الفهارس [0, 1, 2, 1, 0, 3, 4, 3].

إذا تم قطع النقوش المتحركة لإزالة الهوامش الشفافة، فقم أيضًا بتخزين حجم قماش الرسم الأصلي وإزاحة القطع. ارسم حول محور ثابت، مثل أقدام الشخصية، بحيث لا تحرك حدود الإطار جسم الاصطدام أو الاتصال البصري بالأرض مع تغير العمل الفني.

## استخدم المستطيل المصدر عمدا

يحتوي Canvas drawImage على تحميل زائد يحدد المستطيل المصدر ويقيسه إلى مستطيل الوجهة. تقوم MDN بتوثيق المصدر x وy والعرض والارتفاع بشكل منفصل عن الوجهة x وy والعرض والارتفاع. استخدم هذا الفصل للحفاظ على دقة اقتصاص الأطلس أثناء تغيير الحجم المعروض. اختبار الإطارات الأولى والأخيرة وحدود الصف؛ غالبًا ما يظهر عدد الأعمدة الخاطئ كقطعة صغيرة مكونة من بكسل واحد من الكائن المجاور عند تلك الحدود.

## تحقق من اللحامات والتحميل قبل تشخيص الهندسة

إذا تسربت رسومات الخلايا المجاورة أثناء الرسم بعد التكبير، فاترك فاصلًا شفافًا بين خلايا الأطلس وتأكد من ملاءمة وضع التصفية لأسلوب الرسم. ارسم مستطيل تصحيح حول كل إطار وجهة وضع عليه فهرسه مؤقتًا. انتظر تحميل الصورة وفك ترميزها قبل الرسم، ثم اختبرها بمقياس canvas الفعلي ودقة مخزن الرسم الداخلي. قارن إطارًا غير مكبّر بإطار مكبّر. إذا ظهر خط التماس في المكبّر فقط، فتحقّق من أخذ العينات والهوامش الداخلية للأطلس قبل تغيير إحداثيات المصدر.

## أسئلة

**لماذا يظهر جزء من الكائن المجاور؟** قد يتضمن المستطيل المصدر وحدات بكسل مجاورة، أو قد تُظهر العينات ذات الحجم وحدات بكسل الحافة من أطلس مكتظ بإحكام. تحقق من الاقتصاص وأضف مسافات مناسبة بين الخلايا قبل تغيير ترتيب الإطار.

**هل يجب أن تستخدم صناديق التصادم حدود الكائنات المشذبة؟** عادةً ما تُبقي أبعاد التصادم مرتبطة بشخصية اللعبة، وليس وحدات البكسل الشفافة العرضية. يمنع المحور الثابت ومنطقة تصادم واضحة إطارات الرسوم المتحركة من تغيير هندسة اللعب.

## اتبع فضولك

- [قم بتحميل أصول اللعبة بدون بداية فارغة](https://oneshotgems.ai/ar/topics/game-asset-loading): قم بتخطيط تسلسل تحميل الأصول الذي يُبلغ عن التقدم الحقيقي، ويتعامل مع حالات الفشل، ويتجنب فك تشفير صورة كبيرة أثناء الإطار الحرج.
- [اضبط دقة Canvas لعرض رسومات اللعبة بوضوح](https://oneshotgems.ai/ar/topics/canvas-pixel-density): قم بموازنة دقة دعم اللوحة القماشية ونسبة بكسل الجهاز واستخدام الذاكرة وتكلفة الرسم عندما يجب أن تبدو اللعبة واضحة عبر الشاشات.

## للمزيد من القراءة

- [MDN باستخدام الصور على القماش](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images)
- [MDN drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)

---
الصفحة الأساسية: https://oneshotgems.ai/ar/topics/sprite-atlas-rendering