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

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

إنّ تصميم الأيقونات المسطّحة هو الموضوع الأكثر شعبية في مدوّنات ومنتديات التصميم في الآونة الأخيرة. كما بدأت الأنظمة الرئيسية لتشغيل الهواتف المحمولة باستخدام أو أنّها بالفعل استخدمت التصميم المسطّح مثل WindowsPhone + Metro ،Android وiOS7. وكما يبدو فإنّ صيحة التصميم المسطّح قد وصلت بالفعل إلى مستوى متطوّر جديد. وقد أطلق عليه جيف اسكالانت Jeff Escalante، وهو الشخص الذي بدأ بالنقاش حول هذا النوع من التصميم، مصطلح "تصميم الظل الطويل". وذَكر جيف في إحدى التغريدات على تويتر أنها بدأت كمزحة: إذًا كيف نصنع أيقونة مسطّحة رائعة، عصرية وبظلّ طويل؟ هذا ما سنتعلّمه خلال هذا الدّرس وذلك باستخدام الأدوات الأساسية، والأدوات في لوحة مستكشف المسارات Pathfinder Panel. ملاحظة: جميع الأشكال التي نرسمها ستكون في طبقة Layer جديدة كلّ على حِدة؛ حتّى وإن لم نذكر ذلك في كل خطوة. نقوم بتشغيل برنامج Adobe Illustrator، ونضغط Ctrl + N لفتح ملف جديد ثمّ نختار الإعدادات التَّالية: الأبعاد: 800x600px.نمط الألوان: CMYK.الدقة: 720pi.ولنتأكد من أنّ مربّع الخيار Align New Objects to Pixel Grid غير مؤشّر. 1. نرسم مستطيل مدوّر الحواف باستخدام Rounded Rectangle Tool بطول وعرض 250px. عند الرسم نضغط على المفتاح Shift ليكون الشكل مربّع. إذا رغبنا بتغييّر مقدار تدوير الحافة نضغط على مفاتيح الاتّجاه الأعلى أو الأسفل من لوحة المفاتيح أثناء الضغط على الزرّ الأيسر للفأرة. نملأ الشكل باللون C=35 M=9 Y=70 K=0: 2. نرسم مستطيل آخر مدوّر الحواف، داخل الشكل السابق، بالأبعاد 50px * 250px ونملأه باللون الأحمر. لا يوجد هنالك داعِ لمحاذاة الشكل الجديد في مكان معيّن داخل الشكل السابق، يمكننا وضعه في أي مكان نريده: 3. نرسم مستطيل باستخدام Rectangle Tool M وبالأبعاد 50px * 25px ونضعه فوق الشكل الأحمر. إذا لم نقم بتحديد الحجم في هذه الخطوة يمكننا فعل ذلك لاحقًا الخطوة 11: 4. نستخدم أداة المستطيل مدوّر الحواف Rounded Rectangle Tool لنرسم مربّع بالضغط على مفتاح Shift أثناء الرسم. لا يهمّ تحديد الحجم هنا حيث سنقوم بالتعديل عليه لاحقًا. نقوم بتدوير الشكل بزاوية 45 درجة عن طريق الذهاب إلى: Object > Transform > Rotate ثم ندخل قيمة الزاوية المذكورة أو بطريقة أبسط؛ نمسك بإحدى مقابض الزوايا ونبدأ بالتدوير مع الضغط على مفتاح Shift في نفس الوقت؛ بهذه الطريقة يمكننا التدوير بالضبط بزوايا 45، 90، و135 درجة: 5. كما نرى في الصورة أعلاه فقد تم تدوير المربّع المحيط أيضًا، وفي هذه الحالة لا يمكننا التعديل على أبعاد الشكل. يكننا تغيير الأبعاد من أعلى الشاشة، لكن إذا أردنا تغييرها باستخدام الفأرة يجب أن نذهب إلى: Object > Transform > Reset Bounding Box لعمل إعادة تعيين للمربّع المحيط: 6. نقوم بتغيير عرض الشكل إلى 50px والارتفاع إلى 80px، ثمّ نقوم بوضعه فوق الشكل الأحمر ونقوم بمحاذاتيهما بشكل عمودي. تلميح: حدّد الشكلين بينما تضغط على مفتاح Shift ثم اضغط من جديد على الشكل الذي لا تريد تحريكه. هنا سنضغط Shift+ الشكل الأحمر، Shift+ الشكل الرمادي، ثم Shift+ الشكل الأحمر من جديد؛ وبذلك يمكننا محاذاة الشكلين دون أن نحرّك الشكل الأحمر من مكانه. ولكي نضع الشكل الرمادي خلف الشكل الأحمر نقوم بتحديده ثم نضغط Ctrl +X، ثم نحدد الشكل الأحمر ونضغط Ctrl + B لتحريكه خلف جسم القلم: 7. نرسم دائرة باستخدام Ellipse Tool E، ونقوم بمحاذاتها مع الشكلين الآخرين، ونضعها أسفل الشكل الثاني لنشكّل قمّة القلم. نقوم بتحديد الشكل الرمادي ليست الدائرة ثم ننسخه Ctrl +C ثم Ctrl +F. بعد ذلك نقوم بتحديد النسخة الجديدة والدائرة معًا ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات: Windows > Pathfinder Panel 8. ستكون النتيجة كما في الصورة أدناه: 9. نرسم ثلاث دوائر E ونقوم بوضعها فوق الشكل الأحمر نعمل الدائرة الوسطى بحجم أكبر قليلًا. نقوم بتحديد جميع الدوائر ثم نضغط على زرّ Unite من لوحة مستكشف المسارات. نملأ الشكل بلون مميز؛ استخدمنا هنا اللون الأصفر: 10. نقوم بعمل نسخة للشكل الأحمر Ctrl +C ثم Ctrl +F. نحدد النسخة الجديدة والشكل الأصفر معًا ثم نضغط على زرّ Minus Front من لوحة مستكشف المسارات: 11. هذه الخطوة يمكن تجاوزها إذا قمنا بتحديد الحجم في الخطوة 3. وإذا لم نفعل، نقوم بنسخ الشكل الأحمر، نحدد النسخة الجديد والمستطيل الرمادي معًا، ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات: 12. نقوم برسم مستطيل M آخر لعمل الجزء العلوي من القلم. نعمل نسخة من الشكل الأحمر Ctrl +C ثم Ctrl +F، ثم نقوم بتحديد هذه النسخة والمستطيل الجديد معًا ونضغط على زرّ Intersect من لوحة مستكشف المسارات. بعدها نذهب إلى: Objec t> Arrange > Send Backward لكي نقوم بوضع الشكل الجديد خلف الشكل الرمادي: 13. نرسم مستطيلين جديدين M ونقوم بتعديل حجميهما لكي يتطابقا مع حجم الشكل الأحمر كما في الصورة أدناه: والآن لنملأ كل شكل باللون النهائي: 14. بعد تلوين الأشكال، نقوم بنسخ جسم القلم الجزء الأحمر، ثم نحدّد هذا الجزء سويّة مع أحد المستطيلين الذيْن قمنا برسمهما في الخطوة 14، ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات. نكرر هذه الخطوة مع المستطيل الآخر أيضًا. بعد ذلك نقوم بوضع الشكل الرمادي العلوي في مقدمة بقية الأشكال نحدده ثم نذهب إلى: Object > Arrange > Bring to Front 15. نكرّر الخطوتين 13 و 14 مع الشكل الرمادّي أي نرسم مستطيلين مستخدمين تدرّجات اللون الرمادي المدرجة في الأعلى، ثمّ نكمل باقي الخطوات كما سبق. وبذلك نكون قد انتهينا من شكل القلم المسطّح: 16. نرسم مستطيل M بعرض 500px وارتفاع مساوٍ لارتفاع القلم، ثم نقوم بوضعه فوق القلم حتى يغطّي نصف الشكل. سنكوّن الظل باستخدام هذا المستطيل: 17. نحرّك الظل خلف القلم عن طريق: Object > Arrange > Send Backward أو نحدد الظل ونضغط Ctrl +X، ثم نحدد المربّع الأخضر في الخلفية ونضغط Ctrl +F. بعدها نقوم بتحديد كِلا القلم وظلّه ونذهب إلى: Object > Transform > Rotate وندّوره بزاوية 45 درجة: 18. نقوم، كخطوة أخيرة، بنسخ الخلفية. نحدد النسخة الجديدة وظلّ القلم ثم نضغط على رزّ Intersect من لوحة مستكشف المسارات. وبذلك نحصل على الشكل النهائي للأيقونة. يمكن أن نجرّب ألوان أخرى لعمل أيقونة مسطّحة وعصرية يمكن استخدامها في المواقع أو تطبيقات الهاتف المحمول: انتهى الدرس. ولكن مهلًا، ماذا لو لم تكن الأيقونة بسيطة ومستقيمة كهذا القلم؛ كيف يمكن عمل الظل؟ لدينا هنا طريقة أفضل لعمل تأثير الظلّ. 1. قم بنسخ الأيقونة -أو أي شكل نريد عمل الظلّ له- بالضغط على Ctrl+C ثم Ctrl+F، ثم نقوم بتحريك النسخة إلى اليمين والأسفل: 2. حدّد الشكلين معًا Ctrl + Alt + B ثم نذهب إلى: Object > Blend > Make بعدها نذهب إلى: Object > Blend > Blend Options ونضع قيمة الخطوات 250؛ بذلك نكون قد قمنا بزيادة عدد الأشكال بين الشكلين الأساسيين: 3. نذهب إلى: Object > Expand نقوم بتأشير كِلا الخيارين Object وFill، ثمّ نضغط OK. وبينما لاتزال الأشكال محددة نقوم بالضغط على زرّ Unite من لوحة مستكشف المسارات. ستصبح لدينا العديد من النقاط كما نلاحظ في الصورة أدناه، لذلك يجب أن نتخلّص منها: 4. نقوم بتحديد نقاط الإرساء Anchor Points واحدة تِلو الأخرى باستخدام أداة الانتقاء المباشر A أثناء الضغط على مفتاح Shift، ثمّ نقوم بحذفها باستخدام أداة Remove Selected Anchor Points: 5. نقوم بلصق الأيقونة أو الشكل الأصلي من ذاكرة الحافظة Clipboard Ctrl +F. بعدها نقوم بتحديد المربّع مدوّر الحوّاف الخلفية ونسخه إلى ذاكرة الحافظة Ctrl +C. نقوم بتحديد شكل الظلّ بينما نضغط على مفتاح Shift ثم نضغط على زرّ Intersect من لوحة مستكشف المسارات. يجب أن تكون النتيجة كما في الصورة أدناه: 6. نملأ شكل الظلّ بلون أخضر غامق أو بتدرّج من الرمادي إلى الأبيض، ثم نغيّر الوضع إلى Multiply من لوحة الشفافية: Windows > Transparency Panel انتهى الدرس -حقًّا هذه المرّة-! ترجمة -وبتصرّف- للدرس Create a Flat Icon with Long Shadow in Adobe Illustrator لصاحبه Zoltan Ordog.

بإتّباعك للخُطوات التّالية، ستتعلّم طريقة رسم Apple watch باستخدام برنامج أدوبي اليستريتور، بالإضافة إلى إتقانك لبعض المهارات الخاصّة بالبرنامج، كتغيير حواف المُربّع، دمج الأشكال، رسم تدريجات بطريقة متناسقة وسهلة، وأيضا تصميم شعار شركة "Apple". بدايةً نقوم بفتح ملف جديد عن طريق الضغط على CTRL+N من لوحة المفاتيح ونختار الإعدادات التالية: الأبعاد: 900x600 PX.نمط الألوان: RGB.الدّقة: screen72ppi. باستخدام أداة المُستطيل M نرسم مُستطيلا مقاسه 160px * 177px: نختار اللّون AEAFAA# للمستطيل، ونتأكد من أننا ألغينا اللّون من stroke كما في الصّورة: من شريط الأدوات العلوي نختار: Effect > Stylize > Rounded Corners ثم نُدخل القيمة 25px: من قائمة الأدوات نختار: Object > Path > Offset Path ونحدد القيمة "8-" ثمّ نغيّر اللّون إلى الأسود، للحُصول على الشّكل المبدئي للشّاشة: نستعمل أداة Pen Tool للحصول على الشكل رقم "2"، ثم ننسخ الشكل الذي تحصّلنها عليه بالضغط على ctrl+c وبعدها ctrl+f. نقوم بقلبه ووضعه في الجهة المقابلة الشّكل رقم 3 لكن مع اختيار درجة لون افتح: نكرّر العملية من الجهة الأخرى، ثم باستخدام الأداة "rounded rectangle tool" وأداة المستطيل "M" نرسُم أزرار الجهة الجانبيّة اليُمنى، فنحصل على الشّكل النهائي للإطار: سنحتاج الى رسم تدريجات السّاعة وعقاربها، نختار من شريط الادوات أداة المستطيل ونرسم أوّل تدريجه: نحدّد التدريجة ونضغط على حرف "R"، ثم نُمرر الفأرة في وسط الشّكل حتى نحصل على كلمة "CENTER". نضغط في المَركز و في نفس الوقت على ALT فتظهر علبة حوار، نقوم بتحديد الزاوية ب45 درجة ونضغط على COPY ثم نحدد آخر تدريجة و نضعط على CTRL+D: كل ما سنحتاجه لرسم عقارب السّاعة، هو دائرة صغيرة نضعها في المركز و مستطيلات، نقوم بتعديلها كما في الصورة الموضحة، ايضا يمكنك استخدام خاصية التدوير كما تعلمناها ونحن نرسم التدريجات وذلك بالضغط على R: أنهينا تصميم أول شكل سنقوم بتحديده ونسخه مرتين، ونغير ألوان النسخة الاولى والثانية حسب ذوقك. شرط أن تكون متناسقة: الآن سنرسم شعار شركة APPLE. نقوم أوّلا برسم دائرة ولتكن بالمقاسات التالية: 73px * 110px، بعدها ومن قائمة الأدوات العلوية نختار المسار التالي: EFFECT > WARP > SHELL UPPER ننسخ ونلصق الشّكل بالضغط على CTRL+C ثم CTRL+V. الان نريد دمج الشكلين ليعطونا شكل واحد، يمكن عمل ذلك بطريقة بسيطة بالضغط على SHIFT+CTRL+F9، فتظهر لنا القائمة التالية، نختار العنصر المشار له بـ"سهم" لنحصل على الشّكل التالي: حتى نحصل على شكل المبدئي للشّعار نستخدم Pen Tool للتعديل على الشكل المدمج الذي تحصلنا عليه من الأعلى ومن الأسفل: نستخدم أداة Pen Tool مرة ثانية لرسم خط، ثم من القائمة العلوية للأدوات نختار النّوع المبيّن في الصورة: فنحصل على الشكل التالي: الخطوة التالية هي رسم دائرة، نضعها على الجهة اليمنى، بعدها نقوم بتحديد الشكلين والضّغط على العُنصر المشار اليه بالسهم: ننسقها مع احدى نسخ الساعات التى رسمناها: يُمكنك أيضا اضافة نوع آخر بإدراج صورة لتطبيقات apple على الشاشة: