0 من 15 يومًا نسبة الإنجاز: 0%
الأسبوع الأول - اليوم الثالث

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

⏱ ساعة واحدة ⚙ عملي
مخرجات التعلم
  • إدراك أهمية التسلسل الزمني في تنفيذ المقاطع البرمجية.
  • التبديل السريع لمظاهر (Costumes) الكائن لإنشاء وهم الحركة البصرية.
  • استخدام لبنات "انتظر" (Wait) للتحكم في السرعة ومنع تداخل الإجراءات.
  • الدمج بين لبنات "الحركة" ولبنات "الهيئة" لإنشاء مشهد متحرك متناسق.

1. فهم أهمية التسلسل الزمني

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

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

Chronological Script Sequencing Flow
الشكل 3.1: مخطط يوضح آلية تنفيذ المقاطع البرمجية بالتسلسل الزمني من الأعلى إلى الأسفل.

2. التبديل السريع للمظاهر لإنشاء حركة

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

يتم إنشاء دورة الحركة (Animation Cycle) عن طريق تغيير المظهر ضمن إطار زمني محدد. إذا قمت باختيار كائن مثل شخصية "Avery Walking" من المكتبة، ستلاحظ أنها تمتلك 4 مظاهر مختلفة تُظهر حركة الساقين في مراحل متنوعة. التبديل المستمر بين هذه المظاهر هو ما يُولد حركة المشي المتسلسلة.

Costume Swapping Walking Cycle
الشكل 3.2: دورة التبديل بين المظاهر لإنشاء حركة مشي واقعية للشخصية.

3. استخدام لبنات "انتظر" للتحكم بالسرعة

تُنفذ أجهزة الحاسوب الأكواد البرمجية بسرعة فائقة، حيث يمكنها معالجة آلاف اللبنات في أجزاء من الثانية. إذا طلبت من كائن التبديل إلى "المظهر 1" ثم فورًا إلى "المظهر 2"، سيحدث التغيير بسرعة لا يمكن للعين البشرية إدراكها، وسيبدو وكأن شيئًا لم يحدث. هنا يأتي دور لبنة التحكم البرتقالية انتظر (0.1) ثانية؛ فهي تجبر البرنامج على التوقف مؤقتًا للمدة المحددة، مما يسمح للمستخدم برؤية كل إطار من إطارات الحركة بوضوح.

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

Timing Control with Wait Blocks
الشكل 3.3: التحكم في سرعة التنفيذ باستخدام لبنات "انتظر" البرتقالية من فئة التحكم.

4. دمج الحركة المكانية مع تغير المظاهر

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

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

نشاط عملي

تطبيق عملي: برمجة حركة المشي لشخصية

  1. اختر كائنًا يحتوي على مظاهر متعددة للمشي (مثل شخصية "Avery Walking" أو "Cat").
  2. قم بتعيين خلفية المنصة إلى "Hedge" أو "Boardwalk".
  3. ضع لبنة الحدث "عند النقر على العلم الأخضر" كبداية للمقطع البرمجي.
  4. قم بتركيب اللبنات بشكل تسلسلي لتحريك الشخصية: [تحرك 10 خطوة]، ثم [المظهر التالي]، ثم [انتظر 0.2 ثانية].
  5. كرر هذا التسلسل الدقيق ثلاث مرات متتالية، لإنشاء سلسلة أوامر طولية.
  6. قم بتشغيل المقطع البرمجي، وجرّب تعديل قيم الانتظار لرؤية كيف تتغير سرعة المشي.
شرح المقطع البرمجي النموذجي
  1. نقطة البداية: [عند النقر على العلم الأخضر] (من فئة الأحداث).
  2. الخطوة الأولى: قم بتركيب التسلسل التالي: [تحرك (10) خطوة] -> [المظهر التالي] -> [انتظر (0.2) ثانية].
  3. الخطوة الثانية: قم بتكرار مجموعة اللبنات السابقة وركبها أسفلها: [تحرك (10) خطوة] -> [المظهر التالي] -> [انتظر (0.2) ثانية].
  4. الخطوة الثالثة: أضف مجموعة ثالثة مطابقة: [تحرك (10) خطوة] -> [المظهر التالي] -> [انتظر (0.2) ثانية].
  5. الختام: أنهِ المقطع البرمجي برسالة: [قل (اكتمل المشي!) لمدة (1) ثانية].
  6. راقب كيف تتحرك الشخصية عبر المنصة خطوة بخطوة، مع توقف قصير عند كل إطار لتتمكن من رؤية حركة الساقين بشكل طبيعي.