سنقوم في هذا الدرس بتصميم مرحلة باستعمال الـTilemap.

ستكون مرحلة بسيطة. يخلو الدرس من البرمجة وسيكون مميّزًا قليلًا.

وقد قمت بتسجيل معظم الخطوات في فيدوهات ورفعتها كون شرح هذا الموضوع أسهل بهذه الطريقة.

سنستعمل صور وملفات من حزمة kenney مرة أخرى.

الحصول على الصور المطلوبة

صور الخلفية:

لنحصل أولًا على صور الخلفية. تستطيعون استعمال أي صور تريدون بالطبع. بالنسبة للحزمة التي بين أيدينا، وجدت صورًا مناسبة في:

Mushroom expansion\Backgrounds

واستعملت bg_grasslands.png

سنحتاج لتكرار الخلفية يمينًا ويسارًا. بالنسبة للأعلى والأسفل، سأكرر اللون الذي في الأعلى – الأزرق الفاتح – واللون الذي في الأسفل.

لذلك، قمت بتعديل الصورة على الرسام لأحصل على صورتين :

ثم أضفت الثلاثة إلى مجلد في المشروع:

Sprites/Backgrounds

صور البيئة

بالنسبة للأرض، البلاتفورم (المنصات)، الجدران وهذه العناصر، سنستعمل الـTiles الموجودة في المجلد:

Base pack\Tiles

كل صورة ببساطة تكون مربعة. سنرى لاحقًا عندما نستعمل الـTilemap كيف نجمع الصور سويًا لنحصل على البيئة كاملة.

الآن أضفت الصور الآتية:

لن نستعملها كلها و بالتأكيد يمكنكم اختيار الصور التي ترغبون بها. غير أن هناك صور أساسية مثل grassCenter و grassLeft ,grassRight, grassMid.

حملت أيضًا صورة بلون غامق لنستعملها في المنطقة السفلى، موجودة في هذا المجلد:

Candy expansion\Tiles\chocoCenter.png

سنضيف أيضًا عناصر أخرى مفيدة، وبعضها للزينة:

/Base Pack/

1. Tiles/torch
2. /Tiles/box
3. /Items/bush
4. /Items/coinGold

وهناك صور للواجهة سنستعملها مستقبلًا. أضفت الآتي من المجلد Base Pack/HUD:

تعديل خصائص الصور

هناك تعديل صغير علينا القيام به. وهو تغيير قيمة pixels per unit للصور التي أضفناها للمشروع. ستتضح أهمية ذلك لاحقًا.

ليس لجميع الصور، فقط الـTiles والـBackgrounds.

بالنسبة للـTiles، فحجم كل واحدة هو 70×70 بكسل.

لهذا، نقوم باختيارها كلها في المحرر، ثم نعين الرقم 70:

بالنسبة لصور الخلفية، فإن أبعادها هي 1024×512.

يمكننا هنا في الحقيقة اختيار أي رقم، ولكن بعد التجربة وجدت أننا إن قسمنا القيمة 40 مرة، نحصل على 25.6.

ثم يمكننا في الـTilemap لاحقًا تكبير ضرب الحجم في 40. (سيتضح كل شيء عندها(.

لذا الآن سنستعمل هذا الرقم:

تصميم المرحلة

كما ذكرنا سنستعمل الـTilemap للرسم. وهي ببساطة أداة مخصصة لهذه المهمة بالذات، تصميم مراحل ثنائية الأبعاد.

تعتمد الـtilemap على ما يسمى بـTiles. وهي مجموعة من الصور التي سنستخدمها في المرحلة. تقوم الـtilemap بحفظ معلومات عن الصور المستخدمة في المرحلة.

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

فائدتها الأهم هو الـpositioning. فبدلًا من وضع sprite واحدة في المشهد، ثم تكرارها بشكل يدوي، وتغيير موقعها، تقوم بذلك تلقائيًا باستعمال هذه الأداة.

وأيضًا إذا أردنا تغيير حجم الصور، أو تغيير الصور ذاتها، أو أي خصائص اخرى متعلقة بالصور، تقوم الـtilemap بتطبيق ذلك على كل الصور. وتتيح لنا تغيير الأبعاد والأحجام من خصائص موجودة فيها أيضًا.

تنزيل حزمة 2D Tilemap Editor

سنقوم بتنزيل الأدوات المطلوبة أولًا. نذهب في الأعلى إلى Window -> Package Manager.

ثم في الواجهة نبحث عن 2D Tilemap Editor:

نضغط على تنزيل في الأسفل وننتظر قليلًا.

التعرف على TilePalette

الآن بإمكاننا الذهاب إلى Window -> 2D -> Tile Palette وستظهر واجهة جديدة في المحرر:

هنا ترون الأدوات التي سنستخدمها لرسم المرحلة. يمكننا إضافة الصور إلى الـPalette عبر سحبهم إلى الواجهة.

لكن أولًا لننشئ مجلدًا جديدًا نضع فيه كل الـTiles. سأسميه Tile Palettes.

من المفترض أن يكون هناك زر Create New Palette في الواجهة. بالنسبة لي فإنني قمت بإنشائهم مسبقًا لذلك لم يظهر.

قوموا بالضغط عليه ثم في واجهة اختيار المجلدات، اختاروا مجلدًا جديدًا (قمت بوضعه داخل Tile Palettes)

ستكون الـPalette الجديدة لصور البيئة، لذا سنسميه Environment – Grass.

الآن اختاروا كل صور الـgrass من مجلد Sprites -> Tiles التي أضفناها سابقًا. وقوموا بسحبها إلى الواجهة.

سيطلب منكم اختيار المجلد مرة أخرى. اختاروا المجلد الجديد ذاته:

قمت بتكرار هذه العملية مع Palette جديدة سميتها Environment – Sand. وأضفت الصور الأخرى إليها:

رسم البيئة

علينا إنشاء كائن يحتوي على العنصر Tilemap Renderer. لفعل ذلك، في المشهد نختار (+) > 2D Object > Tilemap.

سيقوم ذلك تلقائيًا بإنشاء عنصر Grid المطلوب أيضًا.

وقد قمت بذلك في هذا الفيديو:

لذا كما ترون الرسم بهذه الأداة سهل حقًا.

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

وعلى كل حال، التصميم في الفيديوهات لم يكن مكتملًا، فقد قمت بعدة تعديلات لأخطاء انتبهت لها لاحقًا. يمكنكم مشاهدة الصورة في بداية المقال لملاحظتها.

انتقلت إلى تصميم المنطقة السفلى أو Underground. استعملت هنا صور الـ Sand.

والآن سأضيف خلفية لمنطقة تحت الأرض. وذلك باستعمال صورة الشوكولاتة الداكنة التي أضفناها سابقًا.

تغيير ترتيب طبقة الأرضية

تأكدوا من وضع الرقم الصحيح لترتيب طبقات الـTilemaps:

إضافة Collider

لا ننسى إضافة Collider لتستطيع الشخصية المشي على الأرض!

من مزايا الـTilemap الأخرى أنه بإمكاننا إضافة Collider بسهولة عبر Tilemap Collider 2D.

لذا فقط نذهب إلى الكائن Ground ونضيفه من خلال Add Component ->Tilemap Collider 2D.

وعلينا تعيين الـPhysics Material للذي كنا نستخدمه في المقالات السابقة:

إضافة الخلفية

أولًا نقوم بإنشاء Tile Palette جديدة باسم Background بالطريقة ذاتها.

ثم نسحب الصور الثلاثة إلى واجهة Tile Palette بشكل مباشر. وعند طلب مكان المجلد، نختر مجلد جديد بذات الاسم. (أو أي اسم آخر):

بعدها نتابع الفيديوهات:

ونتأكد من أن ترتيب الطبقة Large Background أصغر من الصفر. فلم أظهر ذلك في الفيديو، أي الOrder in layer.

المزيد من العناصر

إضافة clouds

هناك ثلاثة صور للغيوم في المجلد:

Base pack\Items

قمت بإضافتها كلها للمشروع. وفي هذا الفيديو أعرض وضعهم عند الخلفية:

إضافة صور ثابتة

سنقوم بإضافة عناصر للزينة الآن. أنشأت Tile Palette جديدة بهذه الصور:

من المفترض أن الأمر أصبح سهلاً بالنسبة لكم. سميتها Static Items.

والآن نتابع الفيديوهات:

لاحظوا في هذا الفيديو أنني أضفت المكعبات الخشبية إلى الـTilemap المسماة Ground. وذلك كي تتم إضافة collider إلى الـمكعبات.

بعدها قمت بوضع عشب وشجيرات:

أما هذه فقد أضفتها إلى الـTilemap المسماة Background.

ليصبح الشكل هكذا:

إضافة coins

قمت أولًا بإنشاء prefab عبر سحب صورة القطع النقدية إلى المشهد. وسحبتها إلى مجلد Prefabs في المشروع.

وهناك أضفت ملف برمجي جديد coinItem سنستعمله لاحقًا.

ثم عدت للمشهد أنشأت نسخة منها ولوّنها بلون ذهبي، وسحبتها للمجلد ذاته وبذلك كوّنت prefab variant:

ثم نسخت ال prefab في المشهد مرات عديدة وبذلك أصبح هناك الكثير من النقود في اللعبة.

وضعت البرونزية في الأعلى والذهبية تحت الأرض.

لمسات أخيرة

قمت بإضافة كائن الماء الذي صنعناه في الدرس السابق. عدلت المشهد قليلا لأفرغ مساحة له.