اذهب إلى المحتوى

إنشاء شخصية لها عيون ذات تأثير كرتوني باستخدام سكراتش


أروى عفان

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

سنعمل في هذا المشروع على:

  • إنشاء مشروع تفاعلي.
  • إضفاء طابع شخصي على المشروع باستخدام التأثيرات الرسومية.
  • التعرف على التصميم في المجال الرقمي.

وسنحصل على النتيجة التالية: حرك مؤشر الفأرة (أو إصبعك، إذا كنت تستخدم جهازًا لوحيًا) وشاهد ماذا سيحدث لعيون غوبو:

جرب النقر على أماكن مختلفة في المشروع وشاهد ماذا سيحدث!

سنشرح في البداية بعض المفاهيم المهمة، والمتمثلة في الآتي:

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

showcase-line.png

استلهم أفكارك

اطلع على المشاريع التالية لتحصل على الإلهام ولتكوّن فكرة حول شكل الشخصية التي ستعمل على إنشائها:

تصميم الشخصية

حان الآن وقت وضع أفكارك قيد التنفيذ كي ترى شخصيتك النور!

إضافة كائن من مكتبة الكائنات

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

انقر على خيار إضافة كائن:

ChooseSprite.png

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

SpriteLibrary.png

إذا احترت في اختيار الكائن، انقر على أيقونة اختيار كائن عشوائي لتحصل على كائن عشوائي من اختيار البرنامج:

RandomSprite.png

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

إنشاء خلفيات وكائنات باستخدام الرسام

يمكنك إنشاء خلفيات ومظاهر للكائنات في الرسام باستخدام أشكال بسيطة.

انقر على خيارالرسام من أيقونة اختيار خلفية أو من أيقونة اختيار كائن:

paint2.png

ثم اختر أداةً مما يلي لإنشاء الأشكال التي ترغب بها:

  • الأداة الدائرية: اضغط على رمز الأداة لرسم دائرة، اضغط باستمرار على مفتاح Shift لمساعدتك بالرسم.

circle-tool.png

  • الأداة المستطيلة: استخدم هذه الأداة لرسم مستطيل، واضغط باستمرار على مفتاح Shift لرسم مربع.

rectangle-tool.png

  • الأداة المثلثة: يمكنك استخدام هذه الأداة لرسم مستطيلاتٍ أو مربعاتٍ أولًا، ثم الضغط على أداة تغيير الشكل لاختيار جزءٍ من الشكل وحذفه باستخدام أداة الحذف والحصول على شكل المثلث!

square.png

reshape.png

delete.png

corner.png

استخدم أداة ملء اللون لتغيير لون الشكل:

fill-tool.png

changed-colour.png

قد تحتاج لاستخدام أداتي طبقة إلى الأمام و طبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

ForwardBackward.png

كما يمكنك تحديد عدة أشكال ومعاملتها مثل شكل واحد باستخدام أداة التجميع Group وبذلك يسهل عليك تحريك الأشكال وتعديلها:

Regroup.png

selected-shapes.png

إليك مثالًا عن كائنٍ أنشأناه باستخدام الأداة الدائرية والمستطيلة، كما يمكنك الانتقال إلى محرر سكراتش للتعديل عليه:

لا تنسى تسمية الأشكال والخلفيات التي أنشأتها في الرسام بأسماء مناسبة.

في الخطوة الموالية، عدل حجم الكائن ليملأ حيزًا أكبر من الشاشة، وذلك عبر تغيير الحجم في نافذة الكائن:

Size.PNG

اختر خلفيةً مناسبةً أو فكاهيةً للكائن بالضغط على رمز اختيار خلفية من قائمة المنصة الموجود في الزاوية السفلية اليسرى لفتح مكتبة الخلفيات:

ChooseBackdrop.png

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

إضافة عيون ذات تأثير كرتوني

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

character-with-eyes.png

  • انقر على خيار الرسام لإضافة كائن العين.

Paint.png

BackdropLibrary.PNG

  • استخدم أداة الدائرة وانقر باستمرار على مفتاح Shift للحصول على دائرة متناسقة الأبعاد. اخترنا في مثالنا اللون الأسود لإطار العين:

Circle.PNG

  • استخدم أداة انتقاء الألوان لاختيار ألوان الملء والإطار. اسحب شريط السطوع وتشبع اللون إلى القيمة 0 للحصول على اللون الأسود، واسحب شريط السطوع إلى القيمة 100 وشريط تشبع اللون إلى القيمة 0 للحصول على اللون الأبيض.

Black.PNG

White.PNG

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

EyeballCircles.PNG

  • ارسم عدة دوائر واستخدم ألوانًا مختلفةً للحصول على عين أكثر حيوية!

تعديل إحدى مظاهر الكائن واستخدامها كعين

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

costume-eyes.gif

GreenEyeball.PNG

بعد ذلك سمّ كائن العين الجديد باسم مناسب:

NewEyeballSprite.PNG

ثم اسحب كائن العين الجديد إلى موضعه المناسب ثم غيّر حجمه ليتناسب مع الشخصية.

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

Block1.PNG

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

Duplicate.png

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

Eyeball2.PNG

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

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

تصحيح الأخطاء

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

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

eye-right.gif

tempsnip.png

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

eye-centered.gif

tempsnip.png

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

Block18.png

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

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

إضافة تأثيرات للكائنات

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

character-graphic-effects.png

إضافة تأثيرات على العينين

أولًا، أضف كتلة "عند النقر على الكائن" ثم أضف بعدها كتلة "غير مؤثر اللون" ليتغير لون العينين عند النقر عليهما.

Block19.png

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

إضافة تأثيرات على الشخصية

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

استخدام مؤثرات بصرية

يمكن تطبيق عدة مؤثرات بصرية على الكائنات في سكراتش، كما في المثال التالي:

إذ تحتوي كل من الكتلتين اجعل مؤثر اللون و غيّر مؤثر اللون على نافذة منزلقة يمكن اختيار عدة تأثيرات منها لتغيير مظهر الكائنات وهي:

  • اللون: يمكن اختيار القيم من القيمة 0 إلى القيمة 199 (تُدَور الارقام الكبيرة، فيعد الرقم 200 كالرقم 0).
  • عين السمكة: لا تعطي القيمة 0 أي تأثير، وكلما كبرت القيمة ازداد تأثير "عين السمكة" fisheye، أما القيم السالبة فتعطي تأثيرًا عكسيًا.
  • الدوامة: لا تعطي القيمة 0 أي تأثير، وتعطي القيم الكبيرة الموجبة تأثيرًا أفعوانيًا نحو اليسار، أما القيم السالبة الكبيرة فتعطي تأثيرًا أفعوانيًا نحو اليمين.
  • البكسلة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم الكبيرة عدد البكسلات في الكائن.
  • الموزاييك: لا تعطي القيمة 0 أي تأثير، بينما تغير القيم الكبيرة الموجبة والسالبة عدد النسخ.
  • شدة الإضاءة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من سطوع الكائن، وتجعل القيم السالبة من القيمة 1- حتى القيمة 100- الكائن أكثر عتمةً.
  • الشبح: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من شفافية الكائن.

أسند قيمًا مختلفة للتأثيرات واكتشف كيف سيتغير مظهر الكائن باختلاف القيم.

SetColorBlock.png

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

RepeatColor.png

يمكنك إما استخدام كتلة أزل التأثيرات الرسومية أو الضغط على زر العلم لمسح التأثيرات.

Block20.png

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

Block21.PNG

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

accessory-sprite.png

كما في المشروع التالي:

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

ثانيًا، أضف الكتلة التالية للانتقال إلى المظهر التالي عند النقر على الشخصية:

Block22.PNG

إذا لم يكن للكائن الذي اخترته مظاهر، أو إذا أردت إضافة المزيد من المظاهر، فيمكنك إضافتها كما يلي.

إضافة مظهر جديد للكائن

انقر على نافذة المظاهر ثم انقر على أيقونة اختيار مظهر لإضافة المظهر الذي تحب من المكتبة:

ChooseACostume.png

احرص على تعديل حجم المظهر الجديد في الرسام ليتناسب مع المظاهر الأخرى للكائن.

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

تصحيح الأخطاء

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

Block23.PNG

إضافة تأثيرات على المنصة

يمكنك إضافة بعض التأثيرات عند النقر على المنصة، كتغيير الخلفية أو إضافة تأثيرات لونية.

stage-effects.png

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

يمكنك تغيير المؤثرات اللونية بإضافة الكتلة التالية:

Block16.png

يمكنك تغيير الخلفية بإضافة الكتلة التالية:

Block17.png

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

FullScreen.png

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

ترقية المشروع

إليك بعض التحسينات التي يمكنك إضافتها على مشروعك لترقيته:

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

إليك المشروع التالي الذي أُضيف فيه أذرع للكائن تتحرك بحركة مؤشر الفأرة:

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

كما يمكنك زيارة معرض مشاريع شخصيات العيون ذات الطابع الكرتوني للإطلاع عليها ومشاهدة الكتل البرمجية الخاصة بكل مشروع في محرر سكراتش لمعرفة كيف نُفِذت.

تحديد مركز دوران الكائن

تدور الكائنات في سكراتش حول مركزها. تحقق من وجود المؤشر الرمادي الصغير التالي في محرر الرسام لمعرفة ما إذا كان الكائن في المنتصف أم لا:

crosshair.png

إذا لم يكن المؤشر الرمادي في مركز الكائن، استخدم أداة التحديد لتحديد العنصر ولاحظ ظهور مؤشر أزرق:

CatHead.png

اسحب الكائن بحيث يتطابق مؤشر الكائن الأزرق مع المؤشر الرمادي:

Crosshairpointer.png

إذا لم يكن مركز الدوران هو منتصف الكائن، ضع مركز الدوران على المؤشر الرمادي في محرر الرسام:

CrosshairNotCentered.png

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

ختامًا

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

ترجمة -وبتصرف- للمقال Silly Eyes من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...