لوحة المتصدرين

نبذة مختصرة عن صناعة الألعاب وتطويرها لعل صناعة الألعاب هي إحدى أصعب الصناعات في هذا العصر، وذلك من عدة نواح تبدأ بالتحديات التقنية، مرورا بجمهور صعب الإرضاء ولا يرحم حتى كبريات الشركات إن لم تكن منتجاتها بالمستوى المطلوب، وليس انتهاءا بالمنافسة الشرسة ونسب الفشل العالية وصعوبة تحقيق أرباح تغطي تكاليف الإنتاج المرتفعة. على الجانب الآخر يوجد ميزات لهذه الصناعة تجعل من النجاة فيها أمرا ممكنا، فعلى الجانب التقني مثلا، لا تخلوا الغالبية العظمى من الألعاب من وظائف متشابهة وأنماط متكررة من معالجة البيانات، مما يجعل إعادة استخدام الوحدات البرمجية للألعاب السابقة من أجل إنشاء ألعاب جديدة أمرا ممكنا، وهذا بدوره يساهم في تذليل العقبات التقنية واختصار الوقت والجهد. عندما تتحدث عن صناعة لعبة، فأنت هنا تذكر العملية الكبرى والتي تنطوي على عشرات وربما مئات المهام التي يجب أن تنجزها في مجالات عدة. فصناعة لعبة تعني إنتاجها وتسويقها ونشرها وكل ما يتعلق بهذه العمليات من إجراءات وخطوات إدارية وتقنية وفنية ومالية وقانونية. على أية حال فإن ما يهمنا في سلسلة الدروس هذه هو الجانب التقني وهو تطوير اللعبة، وهي عملية بناء المنتج البرمجي النهائي بكافة مكوّناته. هذه العملية لا تشمل بالضرورة تصميم اللعبة، حيث أن عملية التصميم ذات منظور أوسع وتركز على أمور مثل القصة والسمة العامة للعبة وأشكال المراحل وطبيعة الخصوم، بالإضافة إلى قواعد اللعبة وأهدافها وشروط الفوز والخسارة. بالعودة لعملية تطوير اللعبة، نجد أن العديد من الاختصاصات والمهارات تساهم في هذه العملية، فهناك الرسامون ومصممو النماذج وفنيو التحريك ومهندسو الصوت والمخرج، إضافة – بالطبع – للمبرمجين. هذه النظرة الشاملة مهمة لنعرف أن دور المبرمج في إنتاج اللعبة ليس سوى دورا مكمّلا لأدوار غيره من أعضاء الفريق، ولو أن هذه الصورة بدأت تتغير بظهور المطورين المستقلين Indie Developers والذين يقومون بالعديد من المهام إلى جانب البرمجة. لماذا نستخدم محركات الألعاب؟ لو أردنا الحديث بتفصيل أكبر عن دور المبرمجين في صناعة الألعاب، سنجد أنه حتى على مستوى البرمجة نفسها هناك أدوار عديدة يجب القيام بها: فهناك برمجة الرسومات وهناك أنظم الإدخال وأنظمة استيراد الموارد والذكاء الاصطناعي ومحاكاة الفيزياء وغيرها مثل مكتبات الصوت والأدوات المساعدة. كل هذه المهام يمكن إنجازها على شكل وحدات برمجية قابلة لإعادة الاستخدام كما سبق وذكرت، وبالتالي فهذه الوحدات تشكل معا ما يعرف بمحرك الألعاب Game Engine. باستخدامك للمحرك والمكتبات البرمجية التي يتكون منها، فأنت تختصر على نفسك الجهد اللازم لبناء نظام الإدخال والإخراج والاستيراد ومحاكاة الفيزياء، وحتى جزء من الذكاء الاصطناعي. وما يتبقى عليك هو كتابة منطق لعبتك الخاصة وإبداع ما يميزها عن غيرها من الألعاب. هذه النقطة الأخيرة هي ما ستدور حوله سلسلة الدروس القادمة، وبالرغم من أن المهمة تبدو صغيرة جدا مقارنة بتطوير اللعبة كاملة، إلا أنها على صغرها تحتاج لمجهود معتبر في التصميم والتنفيذ كما سنرى. خطوات سريعة لتبدأ مع محرك Unity إن لم تكن ذا خبرة سابقة بهذا المحرك يمكنك قراءة هذه المقدمة السريعة، كما يمكنك تخطيها إن كنت تعاملت مع هذا المحرك سابقا. لن أطيل شرح هذه الخطوات حيث هناك الكثير من الدروس سواء بالعربية أو الإنجليزية تتناولها، لكنها هنا لنتأكد من أن كل قارئ للسلسلة على نفس الدرجة من المعرفة الأولية قبل البدء. الخطوة الأولى: تحميل وتنصيب المحرك لتنزيل الإصدار الأحدث من المحرك وهو 5 ادخل مباشرة إلى الموقع http://unity3d.com ومن ثم قم بتحميل النسخة المناسبة لنظام التشغيل الذي تستخدمه، علما بأن النسخة المجانية من المحرك ذات إمكانات كبيرة وهي تفي بالغرض بالنسبة لمشروعنا في سلسلة الدروس هذه. الخطوة الثانية: إنشاء المشروع بمجرد تشغيل المحرك بعد تنصيبه ستظهر لك شاشة البداية، قم بالضغط على New Project لتظهر لك شاشة كالتي تراها في الصورة أدناه. كل ما عليك هو اختيار النوع 2D ومن ثم اختيار اسم وموقع المشروع الجديد الذي ستقوم بإنشائه، ومن ثم الضغط على Create Project. الخطوة الثالثة: التعرف على نوافذ البرنامج الرئيسية تهمنا في البداية 4 نوافذ رئيسية في محرك Unity، وفيما يلي ملخص لوظائفها: نافذة المشهد Scene: وهي التي تستخدمها لبناء مشهد اللعبة وإضافة الكائنات المختلفة إليه وتوزيعها في الفضاء ثنائي الأبعاد. تحتوي هذه النافذة مبدئيا على كائن واحد وهو الكاميرا. هرمية المشهد Hierarchy: تحتوي على ترتيب شجري يحوي كافة الكائنات التي تمت إضافتها للمشهد ويساعدك في تنظيم العلاقات بينها، حيث أنه من الممكن أن تضيف كائنات كأبناء لكائنات أخرى بحيث يتأثر الكائن الابن بالكائن الأب كما سنرى. تحتوي هذه النافذة مبدئيا على كائن واحد وهو الكاميرا. مستعرض المشروع Project: يقوم بعرض جميع الملفات الموجودة داخل مجلد المشروع، سواء تلك التي تمت إضافتها للمشهد أم التي لم تُضف. يحتوي المشروع مبدئيا على مجلد واحد يسمى Assets، وسنضيف داخله كافة الملفات والمجلدات الأخرى. نافذة الخصائص Inspector: عند اختيار أي كائن من هرمية المشهد أو نافذة المشهد أو مستعرض المشروع، فإن خصائصه ستظهر في هذه النافذة ويمكنك تغييرها من هناك. استعرضنا في هذا الدرس ما يظهر من واجهة Unity3D للوهلة الأولى، مع مقدمة بسيطة حول صناعة الألعاب، سنشرع في الدروس القادمة في مشروع عملي نتعلم من خلاله كيفية صناعة لعبة كاملة حقيقية. فترقبوا!

نستخدِم المحدِّدات Selectors في كلّ مرّة نستخدم فيها CSS. تبقى محدِّدات CSS - رغم كثرة الاستخدام - أحد الأجزاء الأكثر إهمالًا في ملفّ المواصفة Specification. نتحدّث كثيرًا عن التّحويلات Transformations الكبرى في CSS3 لكنّنا دائمًا ننسى الأساسيّات. يجعل الاستخدام الجيّد للمحدّدات من كتابة الشّفرة أيسر وأكثر أناقة. سنغطّي في هذا المقال عشرة محدّدات يقلّ الانتباه إليها في الغالب، إلّا أنّها تجمع بين الفائدة العاليّة والفعاليّة. *ربّما يكون محدِّد * الأسهل تذكّرا إلّا أنّه في الغالب لا يُستخدَم بكثرة. يتمثّل عمل هذا المحدِّد في تنسيق جميع العناصر الموجودة في الصّفحة؛ ومن الجيّد استخدامُه لإعادة العناصر للوضع الابتدائيّ Reset وإنشاء بعض التّنسيقات الافتراضيّة للصّفحة مثل مجموعة الخطوط Font family والحجم Size. * { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; }A + Bيُسمَّى محدّد المُجاوِر Adjacent ويعمل على تحديد العنصُر (B) الّذي يتبع العُنصُرَ الأوَّل (A) مباشرةً. العنصران A وB يوجدان في نفس المستوى. نحدّد في المثال التّالي أوَّلَ عنصر div بعد التّرويسة Header: header + div { margin-top: 50px; }A > Bيُشبه عملُه عملَ المحدِّد A B. يكمن الاختلاف في أنّ A B يحدّد كلّ العناصر المتفرّعة من العنصُر A مهما كان المستوى الّذي توجد به ؛ أما A > B فيكتفي بالعناصر الفرعيّة ذات المستوى الأوّل. يُنصَح باستخدام المحدِّد A > B عند التّعامل مع الأبناء المباشرين للعنصُر الأب. لاحِظ المثال التّالي: <h1> <em>هامّ:</em> هذا <span> العنوان <em>مهمّ</em> جدًّا </span> </h1>التّنسيق التّاليّ يلوّن عنصُر em المتفرّع عن h1 مباشرةً بالأحمر: h1 > em { color: red; }لو استخدمنا المحدّد A B لأعطى اللّون الأحمر لكلّ عناصر em في المثال السّابق. ["A[href*="exampleيُستخدَم لتنسيق رابط خاصّ بطريقة مغايرة. يُقارن ما يوجد بين ظفريْن بعنوان الرّابط فإن وُجدت مطابقة نُفِّذ التّنسيق. المثال التّاليّ يجعل كلّ الّروابط الّتي تُحيل إلى فيسبوك تبدو زرقاء: a[href*="facebook"] { color: blue; }يُمكن استخدام المحدِّد دون علامة *؛ يجب في هذه الحالة أن يكون التّطابق مع الرّابط تامًّا. (A:not(Bيستخدم عبارة النّفي not لاستبعاد ما لا يُطابق B. المثال التّاليّ يحدّد كلّ عناصر div الموجودة في الصّفحة ما عدا التّذييل Footer: div:not(.footer) { margin-bottom: 40px; }A:first-child / A:last-childيسمح بتحديد أوّل أو آخر عنصُر فرعيّ من العنصُر A (على التّوالي A:first-child وA:last-child). يُمكن أن يكون المحدِّد مفيدًا عند التّعامل مع عناصر لائحة، لحذف هامش أو إطار على سبيل المثال. في ما يلي نحذف الإطار عن أوّل عنصُر من اللّائحة والهامش عن آخر عنصُر: ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; }(A:nth-child(nيوفّر المحدِّد nth-child وسيلةً سهلة لاختيّار أيّ عنصُر فرعيّ حسب ترتيبه. يحدّد المثال التّالي العنصُر الثّالث ضمن لائحة غير مرتَّبة ul ويطبِّق عليه التّنسيق. ul li:nth-child(3) { background: #ccc; }يُمكن استخدام هذا المحدّد أيضًا لاختيّار العناصِر الّتي ترتيبها مُضاعِف لعدد معيَّن عبر إضافة n بعد العدد. المثال التّالي يحدِّد العناصر ذات التّرتيب 3، 6، 9، 12 وهكذا. ul li:nth-child(3n) { background: #ccc; }(A:nth-last-child(nيُشبِه عمله عمل المحدِّد nth-child ويُستعمل على نفس المنوال؛ لكنه يبدأ حساب التّرتيب من آخر عنصُر، بدلًا من أوّل عنصُر. يعني هذا أنّك عند إعطاء العدد 2 لتحديد عنصُر من لائحة فسيختار العنصُر قبل الأخير في التّرتيب. ul li:nth-last-child(2) { background: #ccc; }(A:nth-of-type(nيحدّد العنصُر من نوع A الّذي يظهر للمرّة n. نختار في المثال التّاليّ ثالث فقرة (عنصُر p) ضمن div. div p:nth-of-type(3) { font-style: italic; }A:visitedهل لاحظت في ما مضى أنّ الصّفحات الّتي سبقت لك زيّارتها تظهر بلون مختلف في نتائج Google؟ هذا بالضّبط هو عمل المحدِّد visited. يمثّل هذا التّنسيق إضافةً كبيرة للمستخدِم؛ إلّا أنّه يُهمَل في بعض الأحيان. a:visited { color: blue; }خاتمةيظهر لي - حسب خبرتي - أنّ هذا النّوع من المحدِّدات يُمكن أن يختصر الكثير من الوقت ويجنِّب تكدّس الكثير من المعرّفات ID داخل الوسوم. ليست هذه سوى البداية، توجد الكثير من محدِّدات CSS الأخرى المفيدة الّتي تُهمَل أحيانًا. هل تستخدِم محدِّدات CSS؟ هل استخدامها أيسر من المعرِّفات والأصناف Classes؟ شاركنا تجربتك عبر التّعليقات. ترجمة بتصرّف لمقال 10 CSS selectors you shouldn’t code without لصاحبته Sara Vieira.