بكسل الفن: من مشروع لأصول اللعبة

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

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

إذا كان هذا مألوفًا لك ، فهذا المقال مناسب لك تمامًا ، لذا استمر في القراءة.

غالبًا ما يشتكي مطورو الألعاب المستقلون من أنهم لا يستطيعون إنشاء رسومات ، لأنهم مبرمجون ، وليس لديهم أموال لدفع فنانين.

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

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

احصل على استعداد للفن بكسل


في هذه المقالة ، سأناقش فن البكسل. هل تعتقد أنه أصبح كليشيه منذ وقت طويل والجميع متعب منه؟

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

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

غالبًا ما يقولون عن فن البيكسل وهذا: "يمكن أن يبدو جميلًا ، ولكن معظم صور البيكسل لمطوري إيندي فظيعة."

وأستطيع أن أتفق مع هذا ، لكن إذا اتبعت قواعد هذه المقالة ، فسيكون فن البكسل الخاص بك أعلى من المتوسط ​​، فلا تقلق.

10 خطوات لإنشاء بكسل الفن


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

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

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

المرحلة 1 - لوحة


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

يرجى ملاحظة أن عدد الألوان في اللوحات قد يكون مختلفًا. لا أوصي باستخدام اللوحات بأكثر من 32 لونًا ، وللبداية ، حتى 16 لونًا.

لهذا المقال سأختار هذه اللوحة . كان من الممكن أن تأخذ أي شيء آخر ، لقد اخترت عشوائيا من القائمة.



المرحلة 2 - القرار


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

يمكنك استخدام نسب أخرى ، على سبيل المثال 24 × 32 ، والأهم من ذلك ، ليس الكثير من هذا.



المرحلة 3 - الخطوط العريضة


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

من المستحسن أن يكون لديك دائما إشارة أمام عينيك (الصورة المرجعية). يجب أن تكون قادرًا على رؤية المرجع أثناء الرسم ، وليس تبديل النوافذ باستمرار.

تحقق أيضًا من عدم وجود ثقوب في الدائرة ؛ وهذا هو الأهم في هذه المرحلة.



وجهت مثل هذا الرجل مع قرار 32x32. يبدو مروعا.

على الأقل الآن لن تشكو من أنني لم أبدأ من البداية!

المرحلة 4 - الألوان


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

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

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



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

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



لذلك ، اخترت عدة ألوان من اللوحة ورسمت شخصيتي.

تذكر ، قلت إنه من المهم عدم ترك الثقوب؟

المرحلة 5 - ظلال


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

لكن لكي تنمو كفنان ، فأنت بحاجة إلى إتقان مهارة التظليل.

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

تعليق

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


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

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

لذلك ، إليك الخدعة لك. في المثال الخاص بي ، سوف آخذ الإضاءة الساقطة على اليمين.

بادئ ذي بدء ، سأختار لونًا أفتح لكل لون حرف ، ولون بكسل واحد لكل حافة يقع على اليمين أو أعلى.

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



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

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

المرحلة 6 - النسب


هذا مصدر آخر للفشل بالنسبة للفنان المبتدئ. لحسن الحظ ، تعمل تقنية البكسل منخفضة الدقة على تبسيطها إلى حد كبير.

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

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

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

دعونا نتحقق من عينيك - انظر مرة أخرى إلى هذا العفريت الرهيب وأخبرني ما هي أجزاء منه التي تبدو غبية



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

أول ما يتبادر إلى الذهن هو أن شخصيتنا تبدو وكأنها تسقط. دعنا نساعده.



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

دعونا نلقي نظرة أخرى على هذا الإصدار ونفكر في ما هو الخطأ الآن؟

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



عظيم ، أصبح الوضع أفضل ، وأضفت عليه أيضًا السراويل.

تعليق

يمكنك استخدام الآلاف من المراجع من الإنترنت لإنشاء يطرح. حتى بعض الصور العشوائية قد تكون كافية.

لا تعتقد أن الفنانين يستمدون من خيالهم فقط ، فهم ينظرون إلى المراجع!

هذا مشابه لكيفية قيام برامج التشفير بزيارة Google أو Stack Overflow كل يوم - لا أحد يهتم.

المرحلة 7 - تنظيف الكتل


ترى هذه المجموعات السوداء القبيحة للبكسل؟

دعنا نتخلص منها جميعًا وننشئ قاعدة يمكن للبكسل أن يلمسها كحد أقصى بكسلين آخرين.



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

في بعض الأحيان تعطينا عملية التحرير نفسها الإلهام.

تعليق

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



أضفت أنفًا وغيرت شكل الرأس قليلاً لتناسب الأنف بشكل أفضل.

أضفت أيضا ملامح حول الساقين لتناسب بقية الساقين. يجب أن يكون كل فن في اللعبة كليًا!

المرحلة 8 - تنظيف ظلال


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

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



قمت هنا ببعض الإجراءات - استبدلت جميع وحدات البكسل الساطعة والمظلمة التي بدت خارج المكان ، ثم غيرت الخطوط الخارجية.

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

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



تغيير بسيط: لقد غيرت بنطاله وانتقلت بكسلين. ولكن لا يزال هناك شيء غريب ، لا أفهم تمامًا ما يجب القيام به بعد ذلك.

دعنا نحاول إزالة الخطوط العريضة ، واستبدالها بألوان أقرب بكسل.



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

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

تتيح لك النظرة الجديدة أن تلاحظ ما لم أره من قبل ، وعندما قمت بتنظيف الأكفة ، يمكنك فقط إلقاء نظرة على الصورة المقلوبة!



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

لكن مهلا ، لماذا ليس لديه آذان؟ ولماذا يبدو أن قبعته معلقة في الهواء ولا تتصل برأسه؟



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

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

لجعل التظليل يبدو صحيحًا ، إذا لم تكن قد فتحت "عين الفنان" بعد ، فحاول فقط تجربة مجموعات مختلفة من البيكسلات الداكنة المحايدة والخفيفة.

دائما عصا مع ثلاثة ظلال. من الصعب ارتكاب خطأ هنا ، لأنه عند العمل مع رموز منخفضة الدقة ، هناك تغييرات قليلة للغاية.

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

تعليق

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

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


المرحلة 9 - تصحيح الأخطاء


نعم ، يمكن استخدام الشخصية بالفعل ، ولكن دعنا نواصل تحسينها.

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



لذلك ، صنعت إحدى يدي أحد ساقي الظل الداكن ، كل شيء بسيط.

دعونا تحسين شيء آخر!



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

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

في حالتنا ، يتيح لك الوشاح إضافة تباين لفصل الشعر عن القميص.

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

ثم تحتاج إلى اثنين من بكسل الظلام في منتصف القميص؟

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



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

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



لا يجب أن تكون الدائرة سوداء دائمًا. إليك طريقة بديلة لإنشاء مسار - فنحن ننظر إلى وحدات البكسل المجاورة للمسار وتحديد ظل أغمق قليلاً.

بالطبع ، أنا دائما استخدام الألوان فقط من اللوحة الأصلية ، لا تنسى ذلك!

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

تعليق

إذا قارنت الإصدار بالدائرة والإصدار بدون الدائرة ، فقد تبدو الدائرة "ثقيلة".

يعتمد اختيار خيار أو آخر على التأثير المطلوب لنمط الرسوم.

صورة

المرحلة 10 - الرسوم المتحركة


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

دقة منخفضة من الفن بكسل يساعد أيضا في تدريس الرسوم المتحركة. لنبدأ مع الرسوم المتحركة الخاملة ، الأسهل من جميع أنواع الرسوم المتحركة.





في الواقع ، لقد اخترت فقط نصف العفريت ونقله لأسفل. إذا كنت مطورًا كسولًا ، فسيكون هذا كافيًا لك ، ولكن ليس بالنسبة لي!





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

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

المرحلة 10 - الرسوم المتحركة Subpixel


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

حتى الآن ، ساعدت الدقة المنخفضة على إخفاء حقيقة أننا ندرس الرسومات ، ولكن في بعض الأحيان يعمل ضدنا.

كانت اللقطة الأخيرة مثالًا جيدًا: حركات القبعة والأنف قوية جدًا. لكننا نقلنا منهم بكسل واحد فقط!

الآن ، إذا استطعنا تحويلها أقل من بكسل لجعل الحركة أكثر سلاسة ... ولكن للأسف ، فإن البيكسل هي أصغر قيمة.

ومع ذلك ، هناك خدعة واحدة - بدلاً من تحريك وحدات البكسل ، يمكننا تحريك الألوان!





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

وتعتمد هذه الخدعة أيضًا على "مظهر الفنان". دربه بنشاط ، وبالتدريج سوف تبدأ في العمل بشكل أسهل وأسرع!

استنتاج


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



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

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

Source: https://habr.com/ru/post/ar444738/


All Articles