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

لوحات قابلة للتخصيص إضافة تنوع بسيط إلى شخصيات لعبتك

by
Difficulty:IntermediateLength:MediumLanguages:

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

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

ملاحظة: على الرغم من كتابة هذا البرنامج التعليمي باستخدام AS3 و Flash ، يجب أن تكون قادرًا على استخدام نفس الأساليب والمفاهيم في أي بيئة تطوير ألعاب تقريبًا.

نموذج الأحرف المستخدمة للعرض وأدلى دينيس ريكاردو دياس سامانيغو، ويمكن الاطلاع هنا: Leviathan. تلاعب وأدلى دافاو دارين، ويمكن الاطلاع هنا: زورت الطاغوت.


معاينة النتيجة النهائية

انقر على قسم من نموذج الحرف ، ثم انقر في أي مكان في منتقي الألوان. ألا ترى صندوق SWF أعلاه؟ تحقق من هذا الفيديو بدلاً من ذلك:

تتوفر ملفات المصدر الكاملة في تنزيل المصدر.


نظام

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


لوحات في الألعاب

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

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

Game development tutorial about customising palettes

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

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

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


جعل صور Paletted

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

أولاً: تمتلك اللوحات نطاقًا محدودًا ؛ في هذا البرنامج التعليمي ، يحتوي كل رمز متحرك الأحرف على 8 بتات -- أي 256 قيمة ممكنة -- سيتم استخدام القيمة '255' للإشارة إلى كلمة 'شفافة'.

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

Game development tutorial about customising palettes
تحتوي الصورة الموجودة على اليمين على لوحة معدلة سيتم عرضها في وقت الليل في اللعبة.

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

Game development tutorial about customising palettes
تعرض لوحة Levels بوضوح كيف يأخذ كل مكون حرف مقطعًا من قيم الصورة.

سيؤدي ذلك إلى تقليل عمق الصورة الكلي للصورة. إذا كنت تقوم بلعبة كارتونية (cel shaded) ، فيمكن أن يكون الأمر على ما يرام ، لكنك قد تجد أنه يفتقر إلى أسلوب أكثر واقعية. يمكننا معالجة هذا الأمر إلى حد ما عن طريق التضحية بالذاكرة مع زيادة عمق الصورة إلى 16 بتة - يمكن أن تبقى اللوحة بنفس الحجم ، وسوف نستخدم الاستيفاء لتزويدنا بمزيد من التنوع.


التنفيذ

يستخدم التنفيذ لدينا مادة قناة واحدة من 8 بت للشخصية. بالنسبة إلى البساطة ، سنفعل ذلك باستخدام صورة PNG عادية ، يتم تعيين قنواتها الخضراء والزرقاء على 0 ، ويتم تخزين كل شيء في القناة الحمراء (وهذا هو السبب في أن صورة المثال باللون الأحمر). اعتمادا على النظام الأساسي الخاص بك يمكنك حفظه في تنسيق قناة واحدة مناسبة. يتم حفظ لوحة الألوان الأولية كصورة 1D ، مع عرض 256 لتمثيل جميع القيم التي سنقوم بتعيينها.

Game development tutorial about customising palettes
الصورة الشخصية الرئيسية.
Game development tutorial about customising palettes
لوحة البداية للحرف في مثالنا.

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

(تعني البنية المتعددة بشكل أساسي استخدام مواد متعددة أثناء رسم هندسة واحدة ، وتدعمها وحدات معالجة الرسومات.)

سنستخدم هذا الملصق للطباعة. توجه إلى القائمة وحدد Image> Image Size. في النافذة المنبثقة ، قم بمراجعة الخيارات تقييد النسب وإعادة تشكيل الصورة> Bicubic Automatic. Shaders جزء لها أوامر والتي سيتم تجاهل جزء مما يجعلها غير مرئية. سنفعل ذلك عن طريق اكتشاف عندما تكون القيمة 255.

يستخدم هذا المثال لغة AGAL shader. يمكن أن يكون من الصعب أن نفهم ، لأنها لغة تشبه التجميع. يمكنك معرفة المزيد عنه في Adobe Developer Connection.

يمكن الآن تغليف هذا في Starling DisplayObject مخصص يحتوي على النسيج وصورة لوح الألوان - هكذا تم تنفيذه في مثال شفرة المصدر.

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

Game development tutorial about customising palettes
تم الآن تلوين جزء اللوحة المطابق للشعر.

تتكرر التعليمة البرمجية التالية من خلال لوح الألوان وتطبق اللون المناسب على كل جزء:

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

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


يمكننا أن نفعل المزيد

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

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

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

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

يمكن رؤية مثال مذهل على ذلك هنا: Canvas Cycle.

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

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


استنتاج

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

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.