الشبكة العربية لمطوري الألعاب

محترف  انس هذه المشاركة مميزة مشاركة 1

السلام عليكم.
اريد فقط ان اشير الى اللوح اللوني و كيفية استعماله و الاستفادة من ترتيب الالوان للتعامل معها بطريقة معينة كتعقيب على الموضوع التالي :
 http://agdn-online.com/communities.aspx?view=posts&threadid=846&page=1
، و في المثال الذي ساطرحه ساشير الى كيفية تعامل محرك العاب القتال الثنائية البعد Mugen لهذا النوع من الملفات :



انظر معي الصورة التالية :




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



لاحظ كل الالوان المستخدمة في  صورة الشخصية موجودة في هذا اللوح، لاحظ ايضا ان للالوان ترتيب خاص.مثلا الابيض موجود في الاسفل اي الترتيب رقم 0 (و ان كانت الترتيب غريبا لكن برنامج الفوتوشوب يظهره هكذا). 
الان اليك بعض الفوائد من هذه التقنية.
-قبل ان ابدأ بشرح الفوائد الا تلاحظ ان الشخصية محاطة بلون ابيض و هذا لن يجعل اللعبة عملية و ذات قيمة.اذن لنتخلص منها.كيف ذلك ؟ اليك الخطوات التي يقوم بها محرك Mugen و التي تنطبق في المبدا مع كل الالعاب التي تستخدم هذه التقنية

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


و في النهاية سنتحصل على النتيجة التالية بكلا الطريقتين : 



اظن ان هذه المرة يمكن ان نقول ان لدينا على الاقل شخصية تصلح للعبة 😄

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

سابدا الشرح بسؤال ؟ من منكم لم يلغب لعبة القتال الشهيرة street fighter ؟
اظن انهم قليلون جدا من لم يفعلو ذلك.اما بالنسبة للذين فعلو فاليكم هذه الحالة :
ماذا حدث عندما اردت انت و صديقك اللعب بنفس اللاعب ؟ مثال : Ken vs Ken؟ 
صورة اللاعب المختار هي كالتالي :




تخيل ان تلعب انت و صديقك بنفس الشخصية ، الن يصيبك الدوار عندما تحتدم المعركة و لن تعرف مقاتلك من مقاتل صديقك ؟
لهذا السبب في مثل هذه الالعاب عندما تختار نفس الشخصية من قبل اللاعبين فنا احد الشخصيتين ستكون بلون مغاير، هذا سيسهل اللعب اكثر و يريح اللاعب، في مثالنا السابق سيكون لدينا :



          و          
اول تفكير عن الطريق المتبعة سيكون "نعيد رسم جميع الصور بلون مغاير" و هذا يعني انتحار مجاني 😄 .
هذه المرة لن تفيدكم قناة الشفافية في ملفات الصور الاخرى، و الحل الامثل ( على الاقل الى حد قريب) هو استعمال اللوح اللوني.
كيف ذلك ؟ 
بعدما ان شرحت لكم كيفية عمل اللوح اللوني اليكم الصورة التالي :



بعد التدقيق في محتوى الصورة، نجد ان ما كان احمرا في الوح اللوني الاول تم استبداله باللون الازرق، و هذا دون تغير الصورة و انما فقط بتطبيق لوح لوني مختلف، فاصبح لدينا مقاتل بحلة جديدة 😄
بهذه الطريقة وفرنا على انفسنا كما هائلا من الصور الاظافية، تخيل شخصية هذا المقاتل تكاد تحتوي على اكثر من 1200صورة بالباس الاحمر، ماذا لو تم اعادة رسم و تحميل نفس العدد ضرب عدد البدلات المستخدمة ؟  حل غير منطقي و لا عملي بتاتا. لان حجم اي لوح لوني لا يمكن ان يتجاوز 768 بايت
لانه كل لون يحفظ في 3بايتات(1احمر 1ازرق 1اخضر) و الالواح اللونية تحتوي 256 لون اذن : 256*3=768 .....اقتصادية جدا جدا جدا 😄 .


لكن يبقى مشكل واحد يجب الانتباه له عند استعمال التقنية التي قمت بشرحها الا و هو ترتيب الالوان، اي انه يجب ان يكون ترتيب الالوان نفسه لجميع الصور. مثلا في الصور اعلاه، ترتيب الون الاحمر الخاص بالباس يجب ان يكون نفسه في كل الصور، و الا فعندما نغير اللون الاحمر الى الازرق و لايكون الترتيب نفسه فيمكن ان نغير شيئل اخر عدا اللباس.
مثال اكثر وضوحا :
-الصورة 01 : الترتيب رقم 4 يحتوي لون الشعر

الصورة 02 : الترتيب رقم 4 يحتوي لون الجلد
اذا، عندما نقوم بتجهيز لوح لوني انطلاقا من الصورة 01، حيث نغير لون الشعر من الاصفر (للشخصية المدروسة) الى الاسود مثلا، ثم نطبق اللوح اللوني على جميع الصور فاننا سنجد نتائج غريبة ابسطها :
-الصورة 01 : شعر اسود جلد عادي
الصورة 02 : شعر اصفر جلد اسود.
و هذا لان لون الشعر في الصورة 02 لا يوجد في الترتيب 4.لهذا وجب تعديل ترتيب الالوان في اللوح اللوني قبل الشروع في انشاء الواح لونية مختلفة

هذه بعض الصور التي تظهر ماكنت اشرحه، و هي صور لكيفية تغير شعر المقاتل، و اهمية الترتيب في ذلك :





لاحظو الالوان المسطرة بالاخضر.نغيرها لنحصل على :





ماتغير هو لون الشعر اذن الترتيب : 11،12،13،14 هي تحمل لون الشعر، ويجب ان تكون كذلك لكل الصور.(الترتيب تم حسابه انطلاقا من الصورة اي ان اللون الموجود يسارا في الاعلى هو الترتيب 1، و ليس ضروريا ان يكون الترتيب الذي قدمته صحيحا لكن هذا للشرح فقط )

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

رائع اليس كذلك ؟😒
طبعا رائع ☺ و الاروع اننا سنتعرف على كيفية الاستفادة من ذلك برمجيا 😄 .

قبل الخوض في الشرح يرجى عدم اخذ المكتبة المستعملة SDL  بعين الاعتبار، اذ ان المفهوم يطبق باي مكتبة اخرى، ز حتى ان لم تكن لديكم اي خلفية على هذه المكتبة فسابسط الامور حتى يتسنى لكم تطبيقها مع اي مكتبة تتعاملون بها.
البرنامج هنا مع الكود الخاص به : http://cid-68fc9008694076f5.office.live.com/self.aspx/.Public/Palettes%20reader.rar
اه قبل ان انسى تجاهلوا كل ما له علاقة او صلة بـ : Sff
هو مجرد ملف يحتوي على صور بامتداد pcx (احد الصيغ التي تدعم الالواح اللونية) و الكود المكتوب هو لقراءة الملف، و هذا ليس موضوعنا، المهم اننا نستخدم الصور الموجود فيه
اما ملفات الـ Act فهي مجرد صيغة ، هو ملف يحيو اللوح اللوني.
اخر نقطة : اللغة المستخدم هي لغة السي .
لنبدأ بسم الله :
اول شيئ الوح الوني محفوظ في ملف ؟ اذن لنفتح الملف و نحمل مافيه الى الذاكرة :
SDL_Color* Pallet_reader(const char* pal_name )
{
FILE* ptr_PaletteFile    = NULL ;    
      ptr_PaletteFile    = fopen(pal_name,"rb");

    if ( ptr_PaletteFile == NULL) printf("error can't open the paltte file\n");
}
الان نحتاج الى متغيرات لتخزين المعلومات.و كما ذكرن سابقا، فان الالواح اللونية تحتوي على 256 لون و كل لون مخزن في 3بايتات، اي اننا سنحتاج الى 768 بايت.
هذا من جهة، اما من جهة اخرى، فاننا تكلمنا سابقا عن الترتيب،و افضل حل لترتيب هو انشاء مصفوفة(او جدول او شعاع كل كما يحلو له تسميته).اذن نحتاج لانشاء مصفوفة من 256خانة،كل خانة منها تحتوي 3 بايت ترمز الى اللون و بما انه لا يويجد نوع جاهز له 3بايتات ( لان الـ int 4byte char 1 byte) فسنصنع نوعنا الخاص بهذه الطريقة :

 struct Color {

unsigned char r // 1byte
            , g // 1byte
            , b;// 1byte


};//3byte!!

//هذا النوع متوفر في مكتبة الـ SDL 
// باسم SDL_Color
حسنا بما انني اعمل بمكتبة الـ SDL، فساستعمل النوع : SDL_Color و هو نفس النوع المذكور اعلاه.
لنلخص ما ذكرناه :
-مصفوفة من 256 خانة من النوع SDL_Color الذي يمكن ان يخزن 3 بايتات فقط،ثم قراءة الملف. سنحصل على :

SDL_Color* Pallet_reader(const char* pal_name )
{
     FILE* ptr_PaletteFile    = NULL ;    
           ptr_PaletteFile    = fopen(pal_name,"rb");// فتح الملف

     SDL_Color *pal= (SDL_Color*)malloc( 256*sizeof(SDL_Color)) ;//انشاء مصفوفة بالحجم المطلوب لتخزين الالوان
     unsigned char PaletteFileInfo[768]  ;//لحفظ معلومات الملف  

      if ( ptr_PaletteFile == NULL) printf("error can't open the paltte file\n");
      fread( &PaletteFileInfo,768  , 1 , ptr_PaletteFile);// تخزين كامل الملف في PaletteFileInfo

}
الان كل شيئ جاهز و كل شيئ في ذاكرة الحاسوب لنراجع ماذا لدينا :
-ملف الوح اللوني مفتوح، ولقد انتهينا منه لذا سنغلقه في الخطوة القادمة.
-مصفوفة الوان جاهزة لاستقبال الوان الوح اللوني بترتيبها الموجود في الملف.
-مصفوفة معلومات بحجم 768 خانة ، كل خانة تحتوي على معلومة لاحد الالوان المشكلة للون الموجود في الترتيبة المرادة مثال على هذه النقطة :
pal[0].r = PaletteFileInfo[0]
pal[0].g = PaletteFileInfo[1]
pal[0].b = PaletteFileInfo[2]

pal[1].r = PaletteFileInfo[3]
pal[1].g = PaletteFileInfo[4]
pal[1].b = PaletteFileInfo[5]
....
pal[255].r = PaletteFileInfo[765]
pal[255].g = PaletteFileInfo[766]
pal[255].b = PaletteFileInfo[767]
انطلاقا من هذا المفهوم نقوم بتحميل الالوان في مصفوفة الالوان : pal انطلاقا من مصفوفة المعلومات :PaletteFileInfo
لنفم بذلك كاتالي :

SDL_Color* Pallet_reader(const char* pal_name )
{

    FILE* ptr_PaletteFile    = NULL ;
    SDL_Color *pal= (SDL_Color*)malloc( 256*sizeof(SDL_Color)) ;
    Uint8 PaletteFileInfo[768]  ;

    int i = 0;
    int j = 767;

    ptr_PaletteFile = fopen(pal_name,"rb");
    if ( ptr_PaletteFile == NULL) printf("erreur lecture de pallet\n");
    fread( &PaletteFileInfo ,768  , 1 , ptr_PaletteFile);

    fclose(ptr_PaletteFile) ;// غلق الملف


    for ( i = 0 ; i < 256 ; i++)
    {
        pal[i].b = PaletteFileInfo[j--] ;
        pal[i].g = PaletteFileInfo[j--] ;
        pal[i].r = PaletteFileInfo[j--] ;

    }

    return pal ;
}
ستلاحظون انني قمت بوضع اخر خانة في مصفوفة المعلومات في اول خانة في مصفوفة الالوان،عكس ما اشرته له سابقا، السبب في ذلك هو نوعية تخزين الالوان في صيغة الـ Act اذ ان اللون الاخير هو الذي له الترتيب الاول و ما قبل الاخير لديه الترتيب الثاني...الخ
السطر الاخير في الكود هو الاحتفاظ بعنوان المصفوفة اللونية و التي تمثل الوح الوني الذي قمنا بقرائته، و هذا حتى يتسنى لنا استرجاعها و العمل بها لاحقا.

حسنا بعد ان حملنا اللوح اللوني يمكننا الان تطبيقه على الصور التي نريد كالاتي :

    static int pallet_index      = 0 ;
    static int first_time        = 0 ;
    int j,i ;


        static  SDL_Color *color[5];   
        color[0]  = Pallet_reader(  "Robert_01.act" ) ;
        color[1]  = Pallet_reader(  "Robert_02.act" ) ;
        color[2]  = Pallet_reader(  "Robert_02.act" ) ;
        color[3]  = Pallet_reader(  "Robert_03.act" ) ;
        color[4]  = Pallet_reader(  "Robert_04.act" ) ;
....
if ( sff_file->spr[i].img != NULL)
      SDL_SetColors(sff_file->spr[i].img, color[pallet_index] , 0, 256);
الدالة : SDL_SetColors تقوم بتطبيق الوح على الصورة الموجودة في : sff_file->spr[i].img
العدد 0 : هو ترتيب اللون الذي تبدا عنده الدالة، و العدد 256 هو ترتيب اللون الذي تتوقف عنده الدالة
النتيجة :
http://a.imageshack.us/img251/626/niceb.png
لاحظو يمكن تخزين الوان عدة صور في لوح لوني واحد ( انظرو الى الوهج و الى الشخصية لم يتاثر ايهما بالوان الاخر رغم ان لهما نفس اللوح اللوني)
الشيئ الوحيد الذي اعيبه على هذا النوع من الملفات (الالواح اللونية) هي محدوديتها في عدد اللوان.

ارجو ان لا اكون قد نسيت شيئا، و ارجوا ان لا اكون قد ازعجت احدا، و اتمنى ان يكون الدرس مفيدا.
تحياتي،سلام

خبير  algeria مشاركة 2

ماشاء الله عليك أخي درس في قمة الإفادة
لكن الرجاء إعادة رفع الصور (2/3)
حتى يتسنى لنا إكمال الدرس

الجزائر قلبي وغزة نبضه

محترف  انس مشاركة 3

كل شيئ تماما الان، اليس كذلك ؟
ساقوم باضافة جزء حول كيفية الاستفادة برمجيا من هذه التقنية لذا قم بمراجعة الدرس لاحقا

خبير  algeria مشاركة 4

لا مشكلة أخي سأكون في انتظارك
أتمنى يكون ما ستضيفه يتعلق ببرمجة الألعاب بالتحديد
وإن أمكن يكون على c++
وفقك الله

الجزائر قلبي وغزة نبضه

محترف  انس مشاركة 5

انتهيت اخيرا.ارجوا ان يفيدكم، و اي اسئلة انا في خدمتكم 😄

خبير  Hisham Kayali مشاركة 6

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

شكا جزيلا استاذ أنس

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

محترف  انس مشاركة 7

لاشكر على واجب (لكن من فضلك دون استذة ☺ ) اذا احتجت الى اي شيئ فانا تحت تصرفك 😄

خبير  algeria مشاركة 8

أخي عندي بعض الاستفسارات
1- عندما تقول ترتيب اللون ,, من أين تبدأ
2- هل يوجد برنامج صغير الحجم تضع له الصورة ويعطيك اللوح اللوني وتتحكم به
بالنسبة لـ photoshop فحجمه كبير ويبطئ الجهاز كثيرا وأصلا جهازي ممتلئ
3- أنت وضعت مباشرة أكواد sdl
لكن لم تذكر كيف نصل لتلك المرحلة
يعني هل نستدعي المكتبة في vc++
ثم نفتح مشروع وملف جديد ونستدعي مكتبة معينة
ثم نضع الدالة main ونضع داخلها تلك الأكواد

وآسف إن كان هذا قد يتعبك أو يأخرك

الجزائر قلبي وغزة نبضه

خبير  algeria مشاركة 9

نسيت
أخي أتمنى تضع ملخص للمراحل , مثلا :
1- عمل لوح لوني
2- عمل كذا ..
وجعل الله كل ما كتبته في ميزان حسناتي أقصد حسناتك

الجزائر قلبي وغزة نبضه

محترف  انس مشاركة 10

بتاريخ 30 اغسطس 2010 06:04 م، قطب algeria حاجبيه بشدة وهو يقول:

1- عندما تقول ترتيب اللون ,, من أين تبدأ

من الصفر الى الرتبة 255 و المجموع يعطينا 256 رتبة و كل رتبة تحمل لونا
اذا لم افهم سؤال ارجو الاشارة الى ذلك.



وفي 30 اغسطس 2010 06:04 م، أعرب algeria عن رأيه بالموقف كالآتي:

2- هل يوجد برنامج صغير الحجم تضع له الصورة ويعطيك اللوح اللوني وتتحكم بهبالنسبة لـ photoshop فحجمه كبير ويبطئ الجهاز كثيرا وأصلا جهازي ممتلئ

نعم و مجاني ايضا : The Gimp


في 30 اغسطس 2010 06:04 م، قال algeria بهدوء وتؤدة:

3- أنت وضعت مباشرة أكواد sdlلكن لم تذكر كيف نصل لتلك المرحلةيعني هل نستدعي المكتبة في vc++ثم نفتح مشروع وملف جديد ونستدعي مكتبة معينةثم نضع الدالة main ونضع داخلها تلك الأكواد
نعم، لان الهدف ليس شرح كيفية تنصيب المكتبة او حتى كيفية استخدامها. لكن ان كنت تريد معرفة كيفية تنصيبها و استخدامها كنت قد كتبت درسين عن المكبتة ( و ساحاول اتمامهما لاحقا )
الدرس الاول : تعريف و تنصيب ال SDL :
http://agdn-online.com/communities.aspx?view=posts&threadid=557
الدرس الثاني : انشاء نافذة و استعمال السطوح : http://agdn-online.com/communities.aspx?view=posts&threadid=564

مع العلم انني لا استخدم Vc++ بل Code Blocks  و مترجم Gnu Gcc compiler


في 30 اغسطس 2010 06:04 م، عقد algeria حاجبيه بتفكير وقال:

وآسف إن كان هذا قد يتعبك أو يأخرك
لو كان كذلك لما طلبت استفساراتكم ☺ .



وفي 30 اغسطس 2010 06:14 م، قال algeria متحمساً:

أخي أتمنى تضع ملخص للمراحل , مثلا :

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