Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Spritesheets
Gamedevelopment

مقدمة إلى الرسوم المتحركة Spritesheet

by
Difficulty:BeginnerLength:MediumLanguages:

Arabic (العربية/عربي) translation by Aisy Abdullah (you can also view the original English article)

تم استخدام بطاقات Spritesheets في الألعاب لفترة طويلة. الألعاب الكلاسيكية مثل Legend of Zelda: A Link to the Past وحتى الألعاب الحديثة مثل Cut the Rope استخدموها. في هذه المقالة، سوف نتحدث عن حركة سبريتيشيت ما هو وكيفية التعليمات البرمجية فإنه، وسنقوم أيضا شرح كيف يمكن استخدامها في لعبة صغيرة. سوف يتم استخدام JavaScript للتعليمات البرمجية، ولكن يجب أن تكون قادرة على متابعة طول بأي لغة.

الوظائف ذات الصلة

هذا البرنامج التعليمي جزء من تعاون خاص بين فنان ورسام متحرك و gamedev!


ضرب الفضاء للقفز.

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


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

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

Muybridge race horse image sheet
الصور مويبريدجي ''الحصان في الحرك" مع الصورة الأولى إزالة.

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

Muybridge race horse animated

تسمى عملية تغيير الصور في تعاقب سريع لإعطاء الوهم بحركة الرسوم المتحركة.


العفريت

العفريت هو صورة بيانية واحدة التي أدمجت في مشهد أكبر حيث أنه يبدو أن تكون جزءا من المشهد.

An example of a sprite

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

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

إذا كنت تبحث عن رسومات إبداعية مسبقة الصنع ، فاكتشف Game Sprites و Sheets الذي قد يكون مناسبًا تمامًا لاحتياجاتك. أو يمكنك طلب عواميد شخصية مخصصة اللعبة على Envato Studio.

game character sprite on Envato Studio

ورقة العفريت

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

An example of a shritesheet

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

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


أجزاء من ورقة شبكية

تتكون أوراق السبورتش من جزأين: الإطارات والدورات

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

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

وضع صور للحصان في الترتيب الذي تم نقلهم وتنتج دورة "تشغيل" حيث يشغل الحصان (بدلاً من "السير" أو "عاطلة" دورة).


الترميز سبريتيشيت الرسوم المتحركة

هناك ثلاثة أجزاء للترميز على سبريتيشيت للرسوم متحركة:

  1. إنشاء الصورة
  2. تحديث الصورة لكل إطار الرسوم المتحركة
  3. رسم الإطار على الشاشة

خلق الصورة

سوف نبدأ بإنشاء الدالة (أو فئة) التي سيتم التعامل مع الرسوم المتحركة سبريتيشيت. هذه الدالة سيتم إنشاء الصورة وتعيين المسار الخاص به بحيث يمكننا استخدامه لرسم.

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

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

تحديث الصورة

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

spritesheet divided into frames and numbered

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

من المهم أن نلاحظ أن ليس كل سبريتيشيت من شبح في كل إطار المتاحة (مثل صورة ''الحصانMuybridge لفي الحركة"). إذا كنا في محاولة لتحريك سبريتيشيت لدينا مع إطار فارغ، يكون هناك عابرة في الرسوم المتحركة في كل مرة يوجه الإطار فارغ على الشاشة.

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

باستخدام مودولو المشغل (%) currentFrame، يمكننا أن نخلق حلقة مستمرة – في كل مرة يتم التوصل إلى currentFrame، cendtFrame ستعود إلى 0، ثم حلقات الرسوم المتحركة.

يمنع مشغل modulo الخاص بالعداد الفائض الصحيح.

رسم الصورة

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

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

باستخدام هذا الصف والعمود ، يمكننا بعد ذلك حساب إحداثيات الإطار للرسم بضربهم بالإطارframeWidht and frameHeight ، على الترتيب:

باستخدام الدالة سبريتيشيت في المكان، ونحن الآن استخدامه لإنشاء الرسوم متحركة سبريتيشيت:


دورات متعددة في واحدة Spritesheet

سيعمل الرمز أعلاه لأي ورقة صوتية تحتوي على دورة واحدة. ومع ذلك ، ليس من غير المألوف أن تعقد ورقة sprites متعددة الدورات ، مما يعني أنه سيكون هناك العديد من الرسوم المتحركة في ورقة واحدة.

سوف نحتاج لتغيير كيف يعمل لدينا سبريتيشيت من أجل التعامل مع الرسوم المتحركة متعددة من سبريتيشيت واحد.

خلق الصورة

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

ستحمل ورقة الفراغ المعلومات حول الصورة وأحجام الإطارات.

تحديث ورسم الصورة

ستكون الرسوم المتحركة مسؤولة عن تحديث ورسم ورقة الرموز المتحركة.

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


وضع Spritesheet للاستخدام

مع الاستعداد للرسوم المتحركة للتعامل مع أي ورقة صوتية ، يمكننا استخدامه لصنع عداء لانهائي بسيط على طراز Canabalt:


ضرب الفضاء للقفز.

يمكنك العثور على شفرة المصدر الكاملة لهذا في ريبو GitHub. ما هي درجة عالية؟

موارد اضافية

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.