مرحبا! أنا مصمم واجهة مستخدم أقدم في Pixonic ، Alexey Morev. وفي هذه المقالة ، سنركز على الرسوم المتحركة لواجهة المستخدم التي يمكن لكل منا رؤيتها في الألعاب.
واجهة اللعبة عبارة عن مجموعة من العناصر التي تساعد المستخدم على التفاعل والتحكم في اللعبة: الأزرار والرموز وأشرطة التقدم والخلفيات والبطاقات والنوافذ المنبثقة. لتسهيل التفاعل مع عناصر الواجهة ، يتم تحريكها.
سأخبرك كيف يتم إنشاء مثل هذه الرسوم المتحركة ، وفي أي البرامج يتم إنشاؤها ، وما هي مراحل تطوير الرسوم المتحركة الموجودة ولماذا هناك حاجة إليها بشكل عام.
لذا ، لنبدأ!
بادئ ذي بدء ، دعنا نحدد ماهية الرسوم المتحركة وأنواعها الموجودة.
لتوضيح الأمر ببساطة ، الرسوم المتحركة هي سلسلة من الإطارات التي تجعل الصورة تنبض بالحياة. وهي مقسمة إلى رسوم متحركة كاملة (رسوم متحركة كاملة) ومبسطة (رسوم متحركة محدودة). مثال على الرسوم المتحركة الكاملة هو أي فيلم رسوم متحركة كامل الطول: ديزني علاء الدين ، كتاب الغابة ، ذا ليتل ميرميد ، إلخ. من أمثلة الرسوم المتحركة المبسطة معظم الرسوم المتحركة مثل ريك ومورتي ، وشلالات غرافيتي ، وإكستريم سبيس ، و إلخ
في حالة الرسوم المتحركة الكاملة ، يتم رسم 24-25 إطارًا لمدة ثانية واحدة من التوقيت ويتم تحريك التفاصيل الصغيرة للشخصية والبيئة وما إلى ذلك. في الرسوم المتحركة المبسطة ، يكون عدد الإطارات في الثانية أقل ، وقد لا تتحرك بعض العناصر غير المهمة من الشخصيات والمناطق المحيطة بها على الإطلاق وتظل ثابتة. وتجدر الإشارة إلى أنه يجب اتباع هذه المبادئ عند إنشاء أي رسوم متحركة ، سواء كانت واجهة أو رسوم متحركة.
الرسوم المتحركة الكاملة والمبسطة على أساس الرسوم المتحركة The Simpsons
كما ترون ، في النسخة الكاملة من شاشة البداية ، تكون الرسوم المتحركة أكثر سلاسة وتفصيلاً ، بينما في الفتح قصير الطول يمكنك رؤية كيف يتم تقليل عدد الإطارات وعدم تحريك تفاصيل الشخصية.
اكتشفنا ما هي الرسوم المتحركة. الآن من المنطقي الانتقال إلى الأسئلة التالية: ما نوع الرسوم المتحركة التي يجب استخدامها في واجهة المستخدم؟ وهل هي حتى بحاجة؟
سأجيب على السؤال الثاني أولاً. هل نحتاج الرسوم المتحركة؟ يبدو أن كل شيء واضح: تم فتح النافذة واستلام الجائزة والضغط على الزر. ليس من المهم استخدام أي نوع من الرسوم المتحركة ، أليس كذلك؟
ليس بالتأكيد بهذه الطريقة. بفضل الرسوم المتحركة ، لا يمكنك فقط تنويع المكون المرئي للعبة ، ولكن أيضًا مساعدة المستخدم على فهم ما يحدث على الشاشة ، وأين ينقر وما الإجراء الذي يجب القيام به. هذا هو أحد الأسباب الرئيسية لاستخدام الرسوم المتحركة لواجهة المستخدم في الألعاب: لفت انتباه اللاعب إلى العناصر الأكثر أهمية في الوقت الحالي.
السبب الثاني هو قدرة الرسوم المتحركة على إظهار الديناميكيات العامة وأسلوب اللعب. يجب أن تتطابق الرسوم المتحركة لواجهة المستخدم مع ديناميكيات اللعبة. هذا يساهم في انغماس أكبر. سيؤدي استخدام الرسوم المتحركة التي تكون بطيئة جدًا في لعبة سريعة الوتيرة إلى إزعاج اللاعبين والتأثير على التجربة الإجمالية.
بالنسبة لنوع الرسوم المتحركة المستخدمة ، فهي تعتمد فقط على مواردك وقدراتك. إذا كنت أنت وفريقك قادرين على تنفيذ الرسوم المتحركة الكاملة ، والأسلوب المرئي للعبة يسمح بذلك ، فمن الأفضل القيام بذلك: ستخرج أكثر جاذبية وجمالاً. في حالات أخرى ، من الأفضل استخدام الرسوم المتحركة المبسطة.
دعنا نستخدم أمثلة من نفس النافذة المنبثقة لنرى كيف تبدو مع الرسوم المتحركة الكاملة والمبسطة والصغيرة.
الرسوم المتحركة الكاملة
رسوم متحركة مبسطة
الحد الأدنى من الرسوم المتحركة
من يقوم بإنشاء الرسوم المتحركة لواجهة المستخدم وكيف تعمل عملية التطوير
عادة ما يشارك ثلاثة أشخاص في تطوير الرسوم المتحركة:
- ينشئ المصمم أو الفنان مرجعًا للرسوم المتحركة ؛
- ينقل المصمم الفني هذه الإشارة إلى محرك اللعبة ؛
- المبرمجون يجعلون الرسوم المتحركة تظهر في الوقت المناسب وفقًا لمشغل معين.
في بعض الأحيان ، يستأجر الاستوديو رسامًا متحركًا على وجه التحديد ، ولكن ليس كثيرًا - عادةً ما يكون المصمم كافياً.
يمكن تقسيم إنشاء الرسوم المتحركة تقريبًا إلى ثلاث مراحل: التفكير وإنشاء مرجع والتنفيذ.
المرحلة الأولى: الفكرة
من أجل ملاءمة الرسوم المتحركة بشكل عضوي مع ما يحدث على الشاشة ، تحتاج إلى تحديد ما يجب أن يكون متحركًا ، وكذلك ما سيحدث قبل الرسوم المتحركة وبعدها.
دعنا نتصفح عملية إنشاء الرسوم المتحركة خطوة بخطوة باستخدام مثال الرسوم المتحركة المنبثقة الموضحة أعلاه.
في بداية العمل ، سنجري لعبة بحث حول مواضيع وأساليب متشابهة ، ثم نختار أكثر الخيارات نجاحًا وإثارة للاهتمام والتي سنستخدمها كمراجع. وبالتالي ، فإننا نوفر الوقت ، لا نعيد اختراع العجلة من الصفر ، بل نبدأ مما سبق لنا فعله. ثم نصف بالتفصيل ما يجب أن يحدث مع كائن الرسوم المتحركة. يتم ذلك بشكل أساسي لنفسك ، حتى لا تنسى أي شيء مهم ، وكذلك لمزيد من كتابة التوثيق.
كمثال ، لنأخذ النافذة المنبثقة التالية ونحلل التسلسل الكامل لإنشاء الرسوم المتحركة عليها.
دعنا نصف الفكرة بإيجاز:
- ظهور نافذة منبثقة بعد غياب طويل للاعب عن اللعبة ؛
- جعل الرسوم المتحركة سلسة ولكن سريعة بما فيه الكفاية ؛
- استخدام الرسوم المتحركة ذات الإطار الكامل ؛
- تحريك كل عنصر ؛
- تحريك مدفع ديناصور ؛
- أضف توهجًا متحركًا تحت الديناصور.
عندما يصبح الهدف واضحًا ومصاغًا بوضوح ، يمكنك الانتقال إلى المرحلة الثانية.
الخطوة الثانية: إنشاء مرجع
نقوم بإنشاء مرجع الرسوم المتحركة الخاص بنا ، والذي سيتم توضيحه وصقله وتغييره.
لهذا الغرض ، برامج مثل Adobe Animate و After Effects و Spine وما إلى ذلك. في هذه المرحلة ، لا يهمنا أي برنامج سيتم تحريكه (قد يكون Spine استثناءً ، نظرًا لأن هذا المحرر لديه تصدير للرسوم المتحركة إلى العديد من المحركات) ، لذلك نختار ما سيكون أكثر ملاءمة وأسرع بالنسبة لنا. يمكنك حتى تحريك عنصر إطارًا بإطار في Photoshop ، لكن هذا أمر غريب بالفعل. أفضل العمل في After Effects لأنه المحرر الأكثر مرونة من حيث الرسوم المتحركة: يمكنك تقريبًا تنفيذ أي فكرة تخطر ببالك فيه.
لا تنس أن تأخذ في الاعتبار التوقيتات بحيث تتصرف جميع عناصر واجهة المستخدم بشكل مناسب: بدون عدم التزامن والتأخيرات وبالتسلسل الصحيح.
يجب ألا ننسى مدة الرسوم المتحركة نفسها. على سبيل المثال ، إذا استغرق ظهور النافذة أكثر من ثانية واحدة ، وظهر في اللعبة كثيرًا ، فسرعان ما يتعب اللاعب من الرسوم المتحركة الطويلة ويصبح منزعجًا. في الوقت نفسه ، إذا كان ظهور عنصر نادرًا جدًا ، وكان هذا الحدث يجلب الفرح للاعب (على سبيل المثال ، استلام صندوق أو جائزة أو إنجاز) ، يمكنك جعل الرسوم المتحركة للمظهر أطول وأكثر سخونة.
المرحلة الثالثة: التنفيذ
نقوم هنا بتحسين جميع الرسومات المستخدمة في المرجع: نقوم بقص الجسيمات والتوهج واللامع والديناصور وأشياء صغيرة أخرى - وبعبارة أخرى ، جميع التأثيرات المرئية.
مثال على التقطيع المُحسَّن
مثل هذا التقطيع للعناصر ضروري لتقليل حجم الرسوم المتحركة النهائية ، لأن هناك العديد من العناصر الأخرى في المشروع ، وكل ميغا بايت مهمة. إذا لم تقم بتحسين العناصر المقطعة ، فقد ينشأ موقف أن الرسوم المتحركة الجميلة الخاصة بك ستتباطأ. بعد ذلك ، باستخدام الرسوم المتحركة للمحرك الذي تم تطوير اللعبة عليه ، نكرر نفس الرسوم المتحركة التي تم إجراؤها في المرحلة المرجعية.
لماذا لا يمكنك فعل كل شيء على المحرك دفعة واحدة؟ الجواب ليس واضحًا ، ولكنه بسيط جدًا: عند إنشاء الرسوم المتحركة ، على سبيل المثال ، في After Effects ، يكون لديك فقط برنامج الرسوم المتحركة ووظائفه. ليست هناك حاجة لتكوين الكاميرات في اللعبة حتى يتم عرضها بشكل صحيح في واجهة المستخدم. ليست هناك حاجة لتحسين الرسومات وتقسيم كل شيء إلى مكونات: يمكنك بسهولة استبدال أي عنصر ، أو حتى إعادة التفكير في الرسوم المتحركة بالكامل ، وتغييرها تمامًا. إذا قمت بإنشاء كل شيء مرة واحدة على محرك اللعبة ، فسوف تضيع الكثير من الوقت في تحسين الملفات ، وسوف يتم ضغطك تقنيًا وتقضي الكثير من الوقت في تقطيع الرسومات للرسوم المتحركة في المرحلة الأولية ، على الرغم من أنها قد تكون مختلفة تمامًا في النهاية.
خاتمة
أخيرًا ، سألخص المادة وأعطي بعض النصائح القصيرة. عند العمل باستخدام الرسوم المتحركة ، فكر في الأمر مقدمًا ، ولاحظ التوقيت ، واستخدم الرسوم المتحركة الكاملة كلما أمكن ذلك ، ولا تنسَ إلقاء نظرة على الرسوم المتحركة من المشاريع الأخرى للحصول على مراجع محتملة.
إذا كنت قد استمتعت بهذه المقالة ، فسيتم التخطيط للمقال التالي حول كيفية استخدام مبادئ الرسوم المتحركة من Disney في واجهة المستخدم. تعرف على المزيد حول المبادئ نفسها هنا .