Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Isometric Games
Gamedevelopment

خلق عوالم متساوية القياس:  كتاب تمهيدي لمطوري الألعاب

by
Difficulty:IntermediateLength:LongLanguages:

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

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

الوظائف ذات الصلة

 تريد المزيد من النصائح حول إنشاء عوالم متساوية القياس؟ تحقق من مشاركة المتابعة ، خلق عوالم متساوية القياس: تمهيدي ل Gamedevs ، تابع ، وكتاب جوال ،  اساسيات تطوير لعبة ستارلينج.


1. تساوي قياس العالم

العرض متساوي القياس هو طريقة عرض تستخدم لإنشاء وهم 3D من أجل لعبة 2D خلاف ذلك - يشار إليها أحيانا باسم Pseudo 3D أو 2.5D. توضح هذه الصور (المأخوذة من Diablo 2 و Age of Empires) ما أعنيه:

diablo

ديابلو 2
AOE

عصر الإمبراطوريات

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


2. الألعاب القائمه على التبليط

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

الوظائف ذات الصلة

وعلى سبيل المثال فلننظر نظرة 2D قياسية من أعلى إلى أسفل مع اثنين من البلاط-بلاط عشب وبلاط جدار-كما هو موضح هنا:

base 2d tiles

بعض التبليط بسيط

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

للحصول على مستوى مع المراعي المغلقة من جميع الجوانب بالجدران ، ستبدو صفيف ثنائي الأبعاد للبيانات على النحو التالي:

هنا ، يشير 0 إلى بلاط الأعشاب و 1 إلى بلاط الجدران. سيؤدي ترتيب المربعات وفقًا لبيانات المستوى إلى إنتاج صورة المستوى أدناه:

2d level simple

المستوى البسيط ، يتم عرضها من أعلى لأسفل.

يمكننا تحسين ذلك بإضافة بلاط الزاوية وبلاط الجدران المنفصل الرأسي والأفقي ، الأمر الذي يتطلب خمسة بلاطات إضافية:

2d level complex

مستوى محسن مع ترقيم البلاط

آمل أن مفهوم النهج القائم على البلاط واضح الآن. هذا هو تنفيذ شبكة 2D مباشرة ، والذي يمكننا ان نرمز له على النحو التالي:

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

في النهج القائم على التبليط العادي ، نقوم إما بتطبيق عرض من أعلى لأسفل أو عرض جانبي ؛ للحصول على عرض متساوي القياس ، نحتاج إلى تنفيذ الإسقاط isometric.


3. الإسقاط متساوي القياس

إن أفضل تفسير تقني لماهية "الإسقاط متساوي القياس" يعني ، حسب علمي ، هذا المقال من كلينت بيلانجر:

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

على الرغم من أن الأمر يبدو معقدًا بعض الشيء ، إلا أن تنفيذ هذا العرض واضح في الواقع. ما نحتاج إلى فهمه هو العلاقة بين المساحة ثنائية الأبعاد والمساحة متساوية القياس - أي ، العلاقة بين بيانات المستوى والعرض ؛ التحويل من الإحداثيات "الديكارتية" من أعلى إلى أسفل إلى إحداثيات متساوي القياس.

the_isometric_grid

الشبكة الديكارتية مقابل الشبكة متساوية القياس.

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

وضع البلاط متساوي القياس

اسمحوا لي أن أحاول تبسيط العلاقة بين بيانات المستوى المخزنة كمصفوفة ثنائية الأبعاد والمظهر متساوي القياس - أي كيف نقوم بتحويل الإحداثيات الديكارتية إلى إحداثيات غير متساوية.

سنحاول إنشاء عرض متساوي القياس لبياناتنا على مستوى الأراضي العشبية المغلقة:

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

بالنسبة إلى طريقة العرض المتساوي القياس ، يبقى الرمز هو نفسه ، ولكن تتغير الدالة placeTile ().

للحصول على عرض متساوي القياس ، نحتاج إلى حساب الإحداثيات المتشابهة المقابلة داخل الحلقات.
معادلات القيام بذلك هي كما يلي ، حيث تمثل isoX و isoY isometric x- و y-coordinates ، و cartX و cartY تمثلان إحداثيات الديكارتية x و y-:

توضح هذه الوظائف كيف يمكنك التحويل من نظام إلى آخر:

يبدو pseudocode للحلقة كما يلي:

isolevel screenshot

لدينا مراعي مغلقة الجدار في عرض متساوي القياس.

على سبيل مثال، دعونا نرى كيف يحصل موقف نموذجي 2D يحويلها إلى وضع متساوي القياس:

وبالمثل ، فإن إدخال [0 ، 0] سيؤدي إلى [0 ، 0] ، و [10 ، 5] سيعطي [5 ، 7.5].

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

(هنا ، نفترض بشكل أساسي أن ارتفاع البلاطة وعرض البلاط متساويان ، كما هو الحال في معظم الحالات.)

ومن ثم ، من إحداثيات الشاشة (متساوي القياس) ، يمكننا العثور على إحداثيات البلاط عن طريق الاتصال:

يمكن أن تكون نقطة الشاشة هذه ، على سبيل المثال ، موضع نقرة بالماوس أو موضع التقاط.

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

تتحرك في الإحداثيات متساوية القياس

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

تصنيف العمق

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

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

الطريقة الأكثر فعالية لفرزعميق لعوالم isometric هو كسر جميع البلاط إلى أبعاد بلاط واحد القياس وعدم السماح لصور أكبر. على سبيل المثال ، هنا هذا البلاط الذي لا يتناسب مع حجم البلاط القياسي - انظر كيف يمكننا تقسيمه إلى مربعات متعددة والتي تناسب كل منها أبعاد البلاط:

split big tile

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

4. خلق الفن

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

عند إنشاء فن متساوي القياس ، والقواعد العامة هي

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

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


5. أحرف متساوية القياس

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

Eight-way navigation directions in top-down and isometric views

اتجاهات التنقل في ثمانية اتجاهات من أعلى إلى أسفل وطرق عرض متساوي القياس.

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

spriteSheet

الحرف متساوية القياس توجه في اتجاهات مختلفة.

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

سنقوم بتعيين متغيرين ، dX و dY ، بناءً على مفاتيح الاتجاه التي يتم الضغط عليها. بشكل افتراضي ، ستكون هذه المتغيرات 0 ، وسيتم تحديثها وفقًا للرسم البياني أدناه ، حيث تشير U و D و R و L إلى مفاتيح الأسهم لأعلى ولأسفل ولليمين ولليسار على التوالي. تمثل قيمة 1 تحت المفتاح المفتاح الذي يتم ضغطه ؛ 0 يعني أن المفتاح لا يتم الضغط عليه.

الآن ، باستخدام قيم dX و dY ، يمكننا تحديث الإحداثيات الديكارتية على النحو التالي:

لذا فإن dX و dY يقفان للتغيير في وضعي x و y الخاصين بالحرف ، على أساس الضغط على المفاتيح.

يمكننا بسهولة حساب الإحداثيات متساوية القياس الجديدة ، كما ناقشنا بالفعل:

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

كشف التصادم

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

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

ترتيب التصنيف مع الأحرف

ضع في اعتبارك شخصية وبلاط شجرة في عالم متساوي القياس.

لفهم عمق التصنيف بشكل صحيح ، يجب علينا أن نفهم أنه كلما كان إحداثيات x- و y-character أقل من تلك الخاصة بالشجرة ، تتداخل الشجرة مع الحرف. عندما تكون إحداثيات x- و y للحرف أكبر من تلك الخاصة بالشجرة ، تتداخل الحرف مع الشجرة.

عندما يكون لديهم نفس الإحداثي السيني ، فإننا نقررالاعتمادًا على الإحداثي الصادي فقط: أيهما كان التنسيق الأعلى للإحداثيات y يتداخل مع الآخر. عندما يكون لديهم نفس الإحداثي الصادي ، فإننا نقرر الاعتمادًا على الإحداثي السيني وحده: أيهما يتطابق مع الإحداثيات x الأعلى مع الأخرى.

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

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


6. هل تريد الذهاب!

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

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

قد تجد هذه الفئة مفيدة مفيدة (لقد كتبتها في AS3 ، ولكن يجب أن تكون قادرا على فهمها في أي لغة برمجة أخرى):

إذا واجهتك مشكلة بالفعل ، فإليك الرمز الكامل من العرض التوضيحي الخاص بي (في نموذج شفرة الفلاش و AS3 الزمني):

نقاط التسجيل

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

سيتعين علينا تغيير رمز الرسم لدينا لإصلاح نقاط التسجيل بشكل صحيح ، خاصة بالنسبة للبطل.

كشف التصادم

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

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

اختصارات

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

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

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


الاستنتاج

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

Advertisement
Advertisement
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.