Advertisement
  1. Game Development
  2. Tile-Based Games
Gamedevelopment

مقدمة لإنشاء محرك خريطة البلاط

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Kaso Toluppa (you can also view the original English article)

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

هنا ما سنقوم تغطية:

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

قد يمكنك الحصول على بداية جيدة في فكرة لعبة جديدة، وأيضا!


ما هي لعبة تعتمد على البلاط؟

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

  1. يتم تجانب صورة صغيرة، عادة ما تكون مستطيلة أو متساوي القياس، أن يتصرف مثل قطعة لغز الفن لبناء الصور الكبيرة.
  2. الخريطة عبارة عن تجميع للقرصين معًا لإنشاء قسم (أمل) مرئيًا جذابًا (مثل المستوى أو المنطقة).
  3. المستندة إلى بلاط يشير إلى أسلوب بناء مستويات في لعبة. سيقوم الكود بتخطيط البلاط في مواقع محددة لتغطية المنطقة المقصودة.

للحصول على أكثر أساسية، سوف أضع مثل هذا:

لعبة مبنية على البلاط تضع البلاط من أجل إنشاء كل مستوى.

إشارة إلى أنواع بلاط المشتركة-مستطيلة ومتساوي القياس-سوف نستخدم البلاط مستطيلة في هذه المقالة لبساطتها. إذا قررت لمحاولة الخروج من مستويات متساوي القياس بعض اليوم، هناك الرياضيات الإضافية المعنية العمل على إنجاحه. (بمجرد الانتهاء من ذلك هنا ، تحقق من هذا التمهيدي العظيم على إنشاء عوالم متساوية الأبعاد).

هناك بعض الفوائد بارد جداً التي تحصل عليها من استخدام محرك بلاط. التظاهر الأكثر وضوحًا هو أنك لن تحتاج إلى إنشاء صور ضخمة يدويًا لكل مستوى فردي. وهذا قلل من الوقت اللازم لتطوير وتقليل أحجام الملفات. وبعد 50 1280x768px الصور لمستوى 50 لعبة مقابل وجود صورة واحدة مع البلاط 100 فرقا كبيرا.

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


العثور على البلاط الخاص بك أو صنعه

أول شيء سوف تحتاج عند بناء محرك البلاط الخاص بك مجموعة من البلاط. أمامك خياران: استخدام مربعات شخص آخر ، أو إنشاء قسم خاص بك.

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

أين يمكن العثور على البلاط الخاص بك

هناك القليل من الموارد المتاحة للفن المجاني والمفتوح المصدر. وفيما يلي عدد قليل من الأماكن لبدء البحث الخاص بك:

  1. OpenGameArt.org
  2. دعونا نجعل الألعاب
  3. Pixel Prospector

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

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

كيف تصنع البلاط الخاص بك

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

العديد من مطوري تبدأ مع الفن بكسل للألعاب وفيما يلي عدد قليل من الأدوات كبيرة لمجرد أن:

  1. أسيبريتي
  2. تحرير بيكسيل
  3. غيل الرسومات
  4. بيزن لمستخدمي Mac

هذه هي بعض من البرامج الأكثر شعبية لصنع الفن بكسل. إذا كنت تريد شيئًا أكثر قوة ، فإن GIMP هو خيار ممتاز. يمكنك أيضا القيام ببعض الأعمال الفنية مع Inkscape ومتابعة بعض الدروس مذهلة في لعبة 2D Art For Programmers.

مرة واحدة يمكنك الاستيلاء على البرنامج يمكنك البدء في تجريب صنع البلاط الخاص بك. نظرًا لأن هذا البرنامج التعليمي يهدف إلى إظهار كيفية إنشاء محرك خريطة البلاط الخاص بك ، فلن أدخل في تفاصيل كثيرة حول إنشاء المربعات نفسها ، ولكن هناك أمر واحد يجب مراعاته دائمًا:

تأكد من الخاص بك البلاط مع بعضها البعض بسلاسة، وإضافة بعض التباين لإبقائها مثيرة للاهتمام.

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


كتابة الرمز إلى عرض البلاط

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

كيفية عرض تجانب واحد على الشاشة

دعونا نبدأ بالمهمة الأساسية للغاية لعرض بلاطة واحدة على الشاشة. جعل التأكد من أن لديك البلاط كافة بنفس الحجم ويتم حفظها في ملفات صور منفصلة (سنتحدث حول أوراق العفريت لاحقاً).

بمجرد حصولك على البلاط الموجود في مجلد الأصول الخاص بمشروعك ، يمكنك كتابة فئة تجانب بسيطة جدًا. هنا مثال في Haxe:

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

الآن بعد أن حصلنا على فئة Tile ، نحتاج إلى إنشاء نسخة من Tile وإضافتها إلى صفنا الرئيسي:

يقوم الفصل الرئيسي بإنشاء لوحة جديدة عندما يتم استدعاء المُنشئ (الدالة الجديدة () ، التي تسمى عند بدء اللعبة) ، ويضيفها إلى قائمة العرض.

عندما يتم تشغيل اللعبة ، سيتم استدعاء الدالة main () أيضًا ، وستتم إضافة كائن رئيسي جديد إلى الجزء الرئيسي. يجب عليك الآن البلاط الخاص بك التي تظهر في الأعلى يسار الشاشة. حتى الان جيدة جدا.

تلميح: إذا كان شيء من ذلك معنى--لا تقلق! وهو المتداول القياسي فقط هاكسي التعليمات البرمجية. الشيء الأساسي الذي يجب فهمه هو أن هذا يؤدي إلى إنشاء كائن بلاطة وإضافته إلى الشاشة.

استخدام صفائف لتخطيط شاشة بأكملها للبلاط

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

لديك خيار استخدام مصفوفة نموذجية أو استخدام مصفوفة ثنائية الأبعاد. في حال كنت لم تكن مألوفة مع صفائف ثنائية الأبعاد، هو أساسا صفيف مفرد الذي يتم تعبئة مع صفائف متعددة. معظم اللغات سوف تدل على هذا كما ناميوفاراي [س] [ص] حيث x و y هي الأرقام القياسية للوصول إلى عنصر واحد.

منذ x و y وتستخدم أيضا لإحداثيات الشاشة، قد يكون من المنطقي لاستخدام x و y إحداثيات للبلاط لدينا. الخدعة مع صفائف ثنائية الأبعاد هو فهم كيفية تنظيم الإعداد الصحيحة. قد تضطر إلى عكس y و x عند التكرار خلال المصفوفات (مثال أدناه).

لاحظ أنه في هذا التنفيذ ، يكون العنصر "0th" في الصفيف نفسه مصفوفة ، من خمسة أعداد صحيحة. وهذا يعني أنه يمكنك الوصول إلى كل عنصر مع y أولاً، ثم x. إذا كنت تحاول الوصول إلى اكسامبلير [1] [0]، يمكنك أن يكون الوصول إلى بلاط السادس.

إذا كنت لا أفهم تماما كيف لمصفوفات 2D العمل الآن، فلا تقلق. في هذا البرنامج التعليمي ، سأستخدم مصفوفة عادية من أجل إبقاء الأمور بسيطة وتسهيل رؤية الأشياء:

ويظهر المثال أعلاه كيف يمكن أن تكون مجموعة طبيعية أبسط قليلاً. يمكننا أن نتخيل بالضبط أين ستكون البلاطة وكل ما علينا فعله هو استخدام صيغة بسيطة (لا تقلق ، إنها قادمة!) للحصول على البلاطة التي نريدها.

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

نحتاج أولاً إلى إنشاء متغير داخل فصلنا الرئيسي لإبقاء صفيفنا:

قد يبدو هذا غريباً بعض الشيء ، لذا سأقوم بتفصيله لك.

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

بعد ذلك ، يتعين علينا إضافة بعض التعليمات البرمجية إلى منشئ الصف الرئيسي لدينا (تذكر ، هذه هي وظيفة جديدة ()) حتى نتمكن من إنشاء مثيل لخريطتنا:

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

لقد جعلت هذه القيم عامة ثابتة لأن هذا سيتيح لنا الوصول إليها من أي مكان في برنامجنا (عبر Main.Tile_WIDTH وما إلى ذلك). أيضا، كنت قد لاحظت أن قسمة SCREEN_WIDTH يعطي TILE_WIDTH لنا 10 وتقسيم SCREEN_HEIGHT من TILE_HEIGHT يعطينا 6. سيتم استخدام تلك الأرقام اثنين أن تقرر كم عدد الإعداد الصحيحة لتخزين في صفيف لدينا.

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

tileMapDiagram1

الآن لدينا بنيت لدينا الخريطة الأساسية ، ولكن كيف سنحكي البلاط للوصول إلى مكانها الصحيح؟ لذلك نحن بحاجة إلى العودة إلى فئة بلاط وإنشاء دالة التي سوف تسمح لنا بالتحرك البلاط في الإرادة:

عندما ندعو الدالة setLoc()، نحن نمر في x و y إحداثيات وفقا لدينا خريطة فئة (صيغة قريبا، واعدكم!). تأخذ الدالة هذه القيم وترجمها إلى إحداثيات بكسل بضربها بواسطة TILE_WIDTH و TILE_HEIGHT ، على التوالي.

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

نعم! هذا صحيح ، لدينا الآن شاشة مليئة بالبلاط. دعونا كسر ما يحدث أعلاه.

الصيغة

الصيغة التي أذكرها هي في النهاية هنا.

نقوم بحساب x بأخذ معامل التحويل (٪) من i و w (وهو 10، تذكر).

معامل التحويل هو فقط الباقي بعد قسمة عدد صحيح: \ (2\ \text {باقي} \div 3 = 4 14) حتى \ (14 \text {معامل} 3 = 2\).

نستخدم هذا لأننا نرغب في إعادة تعيين قيمة x إلى الصفر في بداية كل صف ، لذلك نرسم البلاط المعني في أقصى اليسار:

tile_grid_cols

أما بالنسبة y، نحن نأخذ floor() أنا/ث (فنحن الجولة تلك النتيجة) لأننا نريد فقط y لزيادة مرة واحدة لقد وصلت إلى نهاية كل صف وانتقل إلى أسفل مستوى واحد:

tile_grid_rows
نصيحة: معظم اللغات لن يتطلب منك الاتصال Math.floor() عند قسمة الإعداد الصحيحة؛ هاكسي فقط يتعامل مع قسمة عدد صحيح بشكل مختلف. إذا كنت تستخدم لغة تقوم بتقسيم صحيح ، فيمكنك فقط استخدام i / w (بافتراض أنها كلتا الأعداد الصحيحة).

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

فعلى سبيل المثال: حجم الشاشة الخاص بك هو 500 × 500 والبلاط الخاص بك هي 100 × 100 وحجم العالم الخاص بك هو 1000 × 1000. ستحتاج فقط إلى إجراء فحص سريع قبل رسم البلاط لمعرفة أي البلاط على الشاشة. استخدام الموقع من منفذ العرض الخاص بك--دعونا نقول 400 × 500--كنت بحاجة فقط لرسم البلاط من 4 إلى 9 صفوف وأعمدة 5 إلى 10. يمكنك الحصول على هذه الأرقام بقسمة الموقع على حجم المربع ، ثم تعويض هذه القيم بحجم الشاشة مقسومًا على حجم المربع. بسيطة.

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


تحرير تخطيطات تجانب لمستويات مختلفة

كل الحق، ولدينا الآن مخطط كامل من تلك التي تغطي الشاشة. عند هذه النقطة ، يجب أن يكون لديك أكثر من نوع واحد من البلاطات ، مما يعني أنه يجب علينا تغيير منشئ البلاط الخاص بنا لحساب ذلك:

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

الآن، علينا أن نعود إلى أعمالنا منشئ الرئيسية وإصلاح إنشاء بلاطة في جهودنا للحلقة:

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

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

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

عند محاولة تشغيل البرنامج الآن، ينبغي أن تحصل بعض الاستثناءات مؤشر فارغ. المشكلة هي أننا نستخدم الأصفار في خريطتنا وطبقة Tile لا تعرف ما يجب القيام به مع الصفر. أولاً، سنقوم الإصلاح المنشئ بإضافة في الاختيار قبل أن نقوم بإضافة صورة الطفل:

يضمن هذا الفحص السريع أننا لا نضيف أي أطفال فارغين إلى كائنات التجانب التي أنشأناها. التغيير الأخير لهذه الفئة من الدالة setLoc(). نحن الآن نحاول تعيين قيم x و y لمتغير لم يتم تهيئته.

دعونا إضافة فحص سريع آخر:

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

tileMapDiagram2

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

برنامج الطرف الثالث لتصميم المستويات

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


قمت بإنشائه هو محرك المستندة إلى بلاط!

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

أيضا ، لقد قدمت الملفات المصدر لك للتحقق من. هنا ما يبدو وكأنه فرنك سويسري النهائي:

تحميل SWF هنا.

... وهنا ، مرة أخرى ، هي المجموعة التي يتم إنشاؤها من:

لا تتوقف هنا!

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

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

كما دائماً، ترك بعض التعليقات أدناه حول كيف يعمل المحرك لك-وربما حتى بعض العروض حتى يمكننا أن نحاول خارج اللعبة بلاط التالية.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.