• الإعلانات

    • فيصل الحربي

      تسجيل عضوية جديدة في المنتدى   01/31/2016

      السلام عليكم ورحمة الله وبركاته  عزيزي العضو الجديد :  حاليا رسالة الإيميل لتأكيد صحة إيميلكم تذهب للبريد العشوائي ( جاري حل المشكلة )  فإذا لم تجد رسالة التحقق من إيميلكم في صندوق الوارد لديكم إتجه للبريد العشوائي ( JUNK)  وقم بتفعيل إشتراككم من هناك   

kldoon

المشرفون
  • عدد المشاركات

    1,500
  • تاريخ الانضمام

  • تاريخ اخر زياره

كل شيء نشر بواسطة kldoon

  1. بسم الله الرحمن الرحيم درس تصميم معرض إحترافي للصور بإستخدام الجافا سكربت في هذا الدرس سوف أشرح عملية إنشاء معرض تفاعلي للصور بإستخدام الجافا سكربت. لن أقوم في بشرح أكود HTML كما أني لن أقوم بشرح أكود الJavaScript ولكن ما سوف اقوم بشرحة هو كيفية الإستفادة من و إستغلال ال HTML و الجافا سكربت من أجل الوصول إلى أداء مهمة معينة. • سنقوم أولا بإنشاء معرض بسيطة (الوظيفة الأساسية) • بعدها سنقوم بعمل بعض الإضافات و التأثيرات على المعرض • ثالثا سوف نقوم بعمل بعض التحسينات على شكل المعرض (Makeup) 1- الشكل البسيط: في البداية سوف نرسم الشكل العام للمعرض. كما نرى فإن هنالك 3 أزرار: التالي – السابق – تشغيل\ايقاف. إضافة إلى الصورة المعروضة. طبعا وظيفة معرض الصور هو عرض مجموعة من الصور في مكان واحد على صفحة إنترنت بدون الحاجة إلى إعادة تحميل الصفحة من أجل التنقل بين الصور. سنبدأ بكود ال HTML التالي لصفحة إنترنت فارغة، حيث سوف نقوم مبدأيا بوضع الكود في وسم <script> في داخل قسم ال Head من الصفحة. <html> <head> <script type="text/javascript"> //Here Our Code Will Be </script> </head> <body> </body> </html> بعد ذلك سوف نضيف بعض ال HTML كود من أجل وضع زرين مبدأيين (التالي، السابق)، إضافة إلى كائن صورة لكي يتم عرض الصورة في داخله، سيتم ترتيب هذه المكونات في جدول <Table> من أجل الترتيب. ضع الكود التالي داخل ال <Body>: <table align="center"> <tr> <td ><img id="img" src=""/></td> </tr> <tr> <td align="center"> <input type="button" value="Previous" /> <input type="button" value="Next" /> </td> </tr> </table> شيئان في الكود السابق سيكون من المهم لك التعرف عليهما، الأول عليك ملاحظة أن الضغط على الزر Previous يتم إستدعاء الدالة prev() من كود الجافا سكربت، كذلك الأمر مع زر التالي يتم إستدعاء الدالة next()، الأمر الآخر الذي يلزمك ملاحظته في وسم ال <img> حيث أننا قمنا بإعطاء الوسم id بإسم “img” حيث سيكون بإمكاننا الوصول إلى هذا الوسم من داخل السكربت. الآن نحن بحاجة إلى شيئ (مصفوفة) من أجل تخزين روابط الصور التي سوف يتم عرضها في المعرض، لذلك سوف نقوم بتعريف مصوفة في أعلى الوسم الخاص بالسكربت في ال <Head>: انسخ الكود[color= #000000; font-weight: bold;]var[/color] Imageslist [color= #339933;]=[/color][color= #000000; font-weight: bold;]new[/color] [color= #990000;]Array[/color][color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]  بعدها يجب علينا عمل دالة حيث يتم تعبئة المصفوفة بروابط الصورة داخل هذه الدالة، طبعا من يقوم بتعبئة المصفوفة هو مصمم صفحة الإنترنت من خلال التعديل على السكربت، أو من خلال عمل سكربت إضافي. وهذه الدالة يجب إستدعائها عند تحميل الصفحة. انسخ الكود [color= #000000; font-weight: bold;]function[/color] LoadImages[color= #009900;]([/color][color= #009900;])[/color][color= #009900;]{[/color] addImage [color= #009900;]([/color][color= #0000ff;]'1.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color] addImage [color= #009900;]([/color][color= #0000ff;]'2.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color] addImage [color= #009900;]([/color][color= #0000ff;]'3.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color] addImage [color= #009900;]([/color][color= #0000ff;]'4.jpg'[/color][color= #009900;])[/color][color= #339933;];[/color] addImage [color= #009900;]([/color][color= #0000ff;]'5.png'[/color][color= #009900;])[/color][color= #339933;];[/color]  setImage[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color]  تقوم هذه الدالة بإستدعاء دالة أخرى تسمى addImage() و ترسل إليه رابط للصورة، في كل مره يتم إستدعاء الدالة addImage() يتم إرسال رابط لأي صورة، لاحظ أن الصورة قد تكون في أي موقع وقد تكون تحمل أي اسم؛ في حالتنا هنا لدينا 5 صور موجوة في نفس المجلد الذي تتواجد فيه الصفحة. لاحظ أيضا أن الصورة رقم 5 تحمل الإمتداد png. بعد إضافة روابط الصور إلى المصفوفة يتم إستدعاء الدالة setImage() حيث سنتحدث عنها لاحقا. انسخ الكود [color= #000000; font-weight: bold;]function[/color] addImage[color= #009900;]([/color]url[color= #009900;])[/color][color= #009900;]{[/color]  Imageslist[color= #009900;][[/color][color= #990000;]count[/color][color= #009900;]][/color][color= #339933;]=[/color]url[color= #339933;];[/color] [color= #990000;]count[/color][color= #339933;]++;[/color] [color= #009900;]}[/color]  الدالة addImage() تستقبل متغير يحمل رابط الصورة كما قلنا سابقة و تضيفه إلى نهاية المصفوفة. طبعا من الواضح أننا سوف نحتاج لتعريف المتغير count في بداية كود السكربت (اسفل تعريف المصفوفة). انسخ الكود[color= #000000; font-weight: bold;]var[/color] [color= #990000;]count[/color][color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]  كما قلنا سابقا يلزمنا إستدعاء الدالة Loadimages() عند تحميل الصفحة من أجل تجهيز المصفوفة وتعبئتها بالروابط، إذن يجب علينا التعديل على الوسم <Body> الخاص بالصفحة ووضعه بالشكل التالي: <body onload="LoadImages()"> بعد ذلك سوف نقوم ببرمجة الأزرار بحيث عند الضغط على زر التالي أو السابق يتم الإنتقال إلى الصورة التالية او السابقة، يتم عمل ذلك من خلال إستدعاء كل من الدالتين next() و prev() عند الضغط على الأزرار، إذن يلزمنا تعديل وسوم الأزرار كالتالي: <input type="button" value="Previous" onclick="prev()"/> <input type="button" value="Next" onclick="next()"/> أيضا شكل كل من الدالتين سيكون كالتالي: انسخ الكود [color= #000000; font-weight: bold;]function[/color] [color= #990000;]next[/color][color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] [color= #b1b100;]if[/color][color= #009900;]([/color][color= #990000;]current[/color] [color= #339933;]>=[/color] [color= #009900;]([/color]Imageslist[color= #339933;].[/color]length[color= #cc66cc;]-1[/color][color= #009900;])[/color][color= #009900;])[/color] [color= #990000;]current[/color][color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color] [color= #b1b100;]else[/color] [color= #990000;]current[/color] [color= #339933;]++;[/color]  setImage[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color]  [color= #000000; font-weight: bold;]function[/color] [color= #990000;]prev[/color][color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] [color= #b1b100;]if[/color][color= #009900;]([/color][color= #990000;]current[/color] [color= #339933;]<=[/color] [color= #cc66cc;]0[/color][color= #009900;])[/color] [color= #990000;]current[/color] [color= #339933;]=[/color] Imageslist[color= #339933;].[/color]length[color= #cc66cc;]-1[/color][color= #339933;];[/color] [color= #b1b100;]else[/color] [color= #990000;]current[/color] [color= #339933;]--;[/color]  setImage[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color]  لدينا متغير بإسم current يمثل رقم index الصورة المعروضة من المصفوفة. حيث يتم في داخل الدالة next فحص قيمة المتغير current إذا كانت اكبر أو مساوية من عدد الصور الموجودة في المصفوفة يتم إعطائها القيمة 0 (ما يعني عند الوصول إلى الصورة الأخيرة يتم الإنتقال إلى الصورة الأولى)، إذا لم تكن قيمة ال current اكبر او يساوي عدد الصور في المصفوفة يتم زيادة قيمة المتغير بواحد من أجل الإنتقال إلى الصورة التالي. نفس الأمر مع الدالة prev ولكن يتم فحص فيما إذا كانت قيمة المتغير تساوي او اقل من صفر يتم إعطاء المتغير ال index الخاص بالصورة الأخيرة (ما يعني إذا كنا نقف على أول صورة و تم الضغط على السابق يتم الإنتقال إلى الصورة الأخيرة). إذا لم تكن قيمة المتغير مساوية لصفر يتم طرح واحد منه. طبعا من الواضح أنه يلزمنا تعريف متغير بإسم current في أعلى كود السكربت (تحت تعريف المتغير count). انسخ الكود[color= #000000; font-weight: bold;]var[/color] [color= #990000;]current[/color][color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]  الآن نعود إلى الدالة setImage()، كما لاحظنا فإن الدالة next و الدالة prev تقوم أيضا بإستدعاء الدالة setImage. ربما تكون قد تكهنت بشكل هذه الدالة حيث تتمثل الدالة بالكود البسيط التالي: انسخ الكود[color= #000000; font-weight: bold;]function[/color] setImage[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"img"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color]Imageslist[color= #009900;][[/color][color= #990000;]current[/color][color= #009900;]][/color][color= #339933;];[/color] [color= #009900;]}[/color]  يتم في هذه الدالة تغيير قيمة خاصية ال src الذي يمثل رابط الصورة الخاص بالوسم <img> الذي يحمل ال id المسمى img، حيث يتم إسناد القيمة الموجودة في الفهرس current في المصفوفة الخاصة بروابط الصور. طبعا يتم إستدعاء هذه الدالة من ثلاث أماكن كما لاحظنا، حيث يتم إستدعائها من داخل الدالتين next() و prev() بحيث يتم تغيير قيمة المتغير current قبل إستدعاء هذه الدالة. أيضا عندما يتم إستدعاء هذه الدالة من داخل الدالة LoadImages() بكون المتغير current يحمل القيمة صفر؛ ما يعني أنه سوف يتم عرض الصورة الأولى. في هذه اللحظة بإمكانك حفظ الكود في ملف html و فتحه في المتصفح، ستلاحظ أننا قد إنتهينا عمليا من الوظيفة الأساسية لمعرض الصور، حيث يتم عرض الصور مع إتاحة زرين للتنقل بين الصور. 2- إضافات و تأثيرات: أول الإضافات التي سوف نقوم بعملها هي زر لتشغيل العرض التقديمي و إيقافه، حيث يبدأ عند الضغط على زر Play العرض (ويتحول الزر إلى Pause) وعند الضغط على الزر Pause يتم إيقاف تشغيل العرض. في العرض يتم الإنتقال إلى الصورة التالية بعد 3 ثواني. لعمل ذلك سوف نحتاج أول لتعريف زر بين زري التالي و السابق، سيكون تعريف هذا الزر بالشكل التالي: <input type="button" value="Play" id="plypus" onclick="PlayPause()"/> كما نلاحظ أنه عند الضغط على الزر يتم إستدعاء الدالة PlayPause()، أيضا الزر يحمل ال id = plypus مما سوف يمكننا من الوصل إليه من داخل السكربت (حيث سوف نقوم بتغيير قيمة من Play إلى Pause و العكس). الدالة PlayPause() : انسخ الكود[color= #000000; font-weight: bold;]function[/color] PlayPause[color= #009900;]([/color][color= #009900;])[/color][color= #009900;]{[/color] [color= #b1b100;]if[/color][color= #009900;]([/color]play[color= #339933;]==[/color][color= #cc66cc;]0[/color][color= #009900;])[/color] [color= #009900;]{[/color] play[color= #339933;]=[/color][color= #cc66cc;]1[/color][color= #339933;];[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]value[color= #339933;]=[/color][color= #0000ff;]"Pause"[/color][color= #339933;];[/color] pt[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"playSlideShow()"[/color][color= #339933;],[/color][color= #cc66cc;]3000[/color][color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #b1b100;]else[/color] [color= #009900;]{[/color] play[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]value[color= #339933;]=[/color][color= #0000ff;]"Play"[/color][color= #339933;];[/color] clearTimeout[color= #009900;]([/color]pt[color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #009900;]}[/color]  في هذه الدالة يتم فحص قيمة متغير بإسم play إذا كان يحمل القيمة 0 (أي أن العرض متوقف) يتم إعطاء هذا المتغير القيمة 1 و بعدها يتم تعديل النص الظاهر في الزر الخاص بالتشغيل و كتابة “Pause” في داخله، بعد ذلك يتم إستخدام الدالة (المضمنة في الجافا سكربت) setTimeout() حيث تقوم هذه الدالة بإستداعاء الدالة playSlideShow() بعد 3 ثواني (3000 ملي ثانيه = 3 ثواني). –هنا أفترض ان لديك معرفة مسبقة بطريقة عمل ال setTimeout و ال clearTimeout إذا لم يكن لديك هذه المعرفة عليك بالرابط التالي-. إذا كان المتغير play يحمل القيمة 1 يتم تحويل قيمته إلى 0 و يتم تغير النص في الزر، و بعدها يتم إيقاف المؤقت الذي يستدعي الدالة playSlideShow() بشكل متكرر. من الواضح أننا بحاجة لتعريف المتغيرين play و pt و ذلك في أعلى كود السكربت (تحت تعريف ال current): انسخ الكود[color= #000000; font-weight: bold;]var[/color] play[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color][color= #000000; font-weight: bold;]var[/color] pt[color= #339933;];[/color]  بالنسبة للدالة playSlideShow() فهي بسيطة جدا و تحمل الشكل التالي: انسخ الكود[color= #000000; font-weight: bold;]function[/color] playSlideShow[color= #009900;]([/color][color= #009900;])[/color][color= #009900;]{[/color] pt[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"playSlideShow()"[/color][color= #339933;],[/color][color= #cc66cc;]3000[/color][color= #009900;])[/color][color= #339933;];[/color] [color= #990000;]next[/color][color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color][color= #009900;]}[/color]  حيث تقوم الدالة بإستدعاء نفسها كل 3 ثواني، و بعدها يتم إستدعاء الدالة next() من أجل الإنتقال إلى الصورة التالية. الإضافة التالية التي سوف نقوم بعملها، هي إضافة تأثير Fade-in (تلاش الدخول) عند الإنتقال من صورة إلى أخرى، مما سوف يكسب المعرض جانب جمالي كبير. أول شيئ سوف نحتاج لتطبيق هذه الفكرة هو دالة تقوم بتغيير قيمة شفافية\ اشباع الصورة "Opacity"، لذلك حصلنا على هذه الدالة التي تستقبل كائن، إضافة إلى قيمة بين ال 0 و ال100 و تقوم بإعطاء الكائن شفافية بناء على هذه القيمة (0 تعني شفافية تامه، الجسم مختفي). –حصلنا على هذا الكود من هنا- انسخ الكود[color= #000000; font-weight: bold;]function[/color] setOpacity[color= #009900;]([/color]obj[color= #339933;],[/color] opacity[color= #009900;])[/color] [color= #009900;]{[/color]  opacity [color= #339933;]=[/color] [color= #009900;]([/color]opacity [color= #339933;]==[/color] [color= #cc66cc;]100[/color][color= #009900;])[/color]?[color= #cc66cc;]99.999[/color][color= #339933;]:[/color]opacity[color= #339933;];[/color]  [color= #666666; font-style: italic;]// IE/Win[/color] obj[color= #339933;].[/color]style[color= #339933;].[/color]filter [color= #339933;]=[/color] [color= #0000ff;]"alpha(opacity:"[/color][color= #339933;]+[/color]opacity[color= #339933;]+[/color][color= #0000ff;]")"[/color][color= #339933;];[/color]  [color= #666666; font-style: italic;]// Safari<1.2, Konqueror[/color] obj[color= #339933;].[/color]style[color= #339933;].[/color]KHTMLOpacity [color= #339933;]=[/color] opacity[color= #339933;]/[/color][color= #cc66cc;]100[/color][color= #339933;];[/color]  [color= #666666; font-style: italic;]// Older Mozilla and Firefox[/color] obj[color= #339933;].[/color]style[color= #339933;].[/color]MozOpacity [color= #339933;]=[/color] opacity[color= #339933;]/[/color][color= #cc66cc;]100[/color][color= #339933;];[/color]  [color= #666666; font-style: italic;]// Safari 1.2, newer Firefox and Mozilla, CSS3[/color] obj[color= #339933;].[/color]style[color= #339933;].[/color]opacity [color= #339933;]=[/color] opacity[color= #339933;]/[/color][color= #cc66cc;]100[/color][color= #339933;];[/color][color= #009900;]}[/color]  من الواضح أن الكود يقوم بوضع الشفافية للعنصر بناء على المتصفح الذي يستخدمه المستخدم. سوف نحتاج أيضا إلى دالة أخرى بحيث تقوم هذه الدالة بتقليل شفافية الصورة على مدى زمن معين، ما يعني أن الصورة تبدأ بشفافية تامة و تنتهي بصورة بدون أي شفافية، سوف نحتاج إلى الدالة ImgOpen() لعمل ذلك: انسخ الكود[color= #000000; font-weight: bold;]function[/color] ImgOpen[color= #009900;]([/color][color= #009900;])[/color][color= #009900;]{[/color]op[color= #339933;]++;[/color] img[color= #339933;]=[/color]document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"img"[/color][color= #009900;])[/color][color= #339933;];[/color]setOpacity[color= #009900;]([/color]img[color= #339933;],[/color]op[color= #009900;])[/color][color= #339933;];[/color]t[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"ImgOpen()"[/color][color= #339933;],[/color][color= #cc66cc;]10[/color][color= #009900;])[/color][color= #339933;];[/color] [color= #b1b100;]if[/color][color= #009900;]([/color]op [color= #339933;]>=[/color][color= #cc66cc;]100[/color][color= #009900;])[/color] [color= #009900;]{[/color] op[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color] clearTimeout[color= #009900;]([/color]t[color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #009900;]}[/color]  سنحتاج لتعريف المتغير op الذي يمثل الشفافية، و المتغير t الازم لعمل دالة التوقيت، أضافة إلى المتغير loadT الذي سوف يتم إستخدامه لاحقا، في اعلى الكود (تحت تعريف المتغير pt و play): انسخ الكود[color= #000000; font-weight: bold;]var[/color] t[color= #339933;],[/color]loadT[color= #339933;],[/color]op[color= #339933;]=[/color][color= #cc66cc;]0[/color][color= #339933;];[/color]  نعود للدالة السابقة ImgOpen() حيث يتم زيادة قيمة الشفافية في كل مره يتم فيها دخول هذه الدالة، مع العلم بعدها يتم إسناد قيمة الشفافية الحالية الممثلة بالمتغير op إلى الصورة المعروضة حاليا من خلال الدالة setOpacity()، بعد ذلك تقوم الدالة بإستدعاء نفسها كل 10 ملي ثانية، عندما تصبح قيمة الإشباع تساوي أو اكبر من 100 يتم إيقاف المؤقت الذي يستدعي الدالة و تتوقف عن التنفيذ، ويتم إسناد القيمة 0 لمتغير الإشباع\ الشفافية. الآن علينا إستدعاء هذه الدالة من داخل الدالة setImage() حيث يتم تطبيق مؤثر الشفافية في كل مرة تتغير فيها الصورة. قبل عمل ذلك دعنا نفكر بالسيناريو التالي: لو فرضنا أن هنالك صورة معروضة، وقام المستخدم بالضغط على زر التالي وكانت الصورة التالية كبيرة الحجم، إذن سوف يؤدي ذلك إلى تطبيق تأثير التلاشي على الصورة المعروضة وهذا شيئ خاطئ!! لأننا نريد تطبيق المؤثر على الصورة التالية أثناء ظهورها. لحل هذه المشكلة سوف نقوم بتعريف وسم صورة <img> مؤقت بحيث يتم تحميل الصورة التالية إليه ولكن بدون إظهارها، و عندما نتأكد أن الصورة تم تحميلها يتم إظهارها في وسم الصورة الأساسي و تطبيق تأثير التلاشي عليها، لذلك دعنا نبدأ بإضافة السطر التالي إلى جانب وسم الصورة السابق داخل كود ال HTML، لاحظ أننا أعطينا خاصية العرض لهذه الصورة القيمة 0 ما يعني أنها لن تظهر على الشاشة، كما أننا أعطيناها ال id يحمل القيمة tmpImg. <img id="tmpImg" src="" width="0"/> بعد ذلك توجه إلى الدالة setImage() وقم بتعديلها بحيث تصبح بالشكل التالي: انسخ الكود[color= #000000; font-weight: bold;]function[/color] setImage[color= #009900;]([/color][color= #009900;])[/color][color= #009900;]{[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"tmpImg"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color]Imageslist[color= #009900;][[/color][color= #990000;]current[/color][color= #009900;]][/color][color= #339933;];[/color] [color= #000000; font-weight: bold;]var[/color] tmpImg[color= #339933;]=[/color]document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"tmpImg"[/color][color= #009900;])[/color][color= #339933;];[/color] [color= #b1b100;]if[/color][color= #009900;]([/color]tmpImg[color= #339933;].[/color]complete [color= #339933;]&&[/color] [color= #339933;]![/color][color= #009900;]([/color]op [color= #339933;]>[/color][color= #cc66cc;]0[/color] [color= #339933;]&&[/color] op [color= #339933;]<[/color] [color= #cc66cc;]100[/color][color= #009900;])[/color][color= #009900;])[/color] [color= #009900;]{[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"img"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color]Imageslist[color= #009900;][[/color][color= #990000;]current[/color][color= #009900;]][/color][color= #339933;];[/color] ImgOpen[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color] clearTimeout[color= #009900;]([/color]loadT[color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #b1b100;]else[/color][color= #009900;]{[/color] loadT[color= #339933;]=[/color]setTimeout[color= #009900;]([/color][color= #0000ff;]"setImage()"[/color][color= #339933;],[/color][color= #cc66cc;]10[/color][color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #009900;]}[/color]  في السطر الأول نقوم بتحميل الصورة الحالية من المصفوفة إلى الصورة المؤقته، بعدها في السطر الثاني و الثالث نفحص إذا كان قد تم الإنتهاء من تحميل الصورة أمل لا (من خلال الشرط tmpImg.complete) قمنا بإضافة إلى هذا الشرط أيضا شرط يفحص إذا ما كانت قيمة متغير الإشباع أكبر من صفر أو أقل من 100 ما يعني أن لن يكون بالإمكان الإنتقال إلى الصورة التالية إذا كانت الصورة الحالية في مرحلة الظهور. إذا تحقق كل من الشرطين السابقين يتم تحميل الصورة إلى وسم الصورة الأساسي و يتم تطبيق تأثير تلاشي الدخول على تلك الصورة (من خلال إستدعاء الدالة imgOpen) كما يتم إيقاف مؤقت التكرار. إذا لم يتحقق الشرطين السابقين تقوم الدالة بإستدعاء نفسها بعد 10 ملي ثانية. بهذا نكون قد حصلنا على معرض للصور مع خيار إضافي لتشغيل العرض التلقائي، إضافة إلى المؤثر الجميل الخاص بتلاشي الدخول للصور. 3- Makeup سنقوم في هذه المرحلة بعمل بعض التحسينات الإضافية التي تهدف إلى زيادة جمالية المعرض و ترتيبه. اول هذه التحسينات، سوف نقوم بعرض صورة صغيرة متحركة لتشير أنه جاري تحميل الصورة أثناء فتحها يمكنك الحصول على هذه الصورة من هذا الرابط. إذن قم بإضافة خلية ثانية للسطر الثاني في الجدول، وذلك من خلال إضافة الكود التالي بعد ال </td> الموجود مباشرة بعد الوسم الخاص بزر "التالي" في ال HTML: <td width ="35" height="40"> <img src="stuff\loading.gif" id="Img1" /> </td> هنا نفترض أن الصورة موجودة في مجلد "Stuff" أيضا قم بإضافة الخاصية التالية إلى وسم أول خلية في الجدول "<td>" بحيث تصبح كالتالي، وذلك لكي يظهر الجدول بشكل جيد: <td colspan="2" > بعدها إتجه إلى الدالة setImage() وقم بإضافة السطر التالي داخل الشرط مباشرة بعد ImgOpen(); : انسخ الكودdocument[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"loadImg"[/color][color= #009900;])[/color][color= #339933;].[/color]width[color= #339933;]=[/color][color= #0000ff;]"0"[/color][color= #339933;];[/color]  ثم في نفس الدالة ضع السطر التالي داخل الجزء الغير متحقق من الشرط بعد جملة loadT=setTimeout...: انسخ الكودdocument[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"loadImg"[/color][color= #009900;])[/color][color= #339933;].[/color]width[color= #339933;]=[/color][color= #0000ff;]"35"[/color][color= #339933;];[/color]  في السطرين السابقين إذا كانت الصورة لم يتم تحميلها بعد يتم إظهار صورة مؤشر التحميل من خلال إعطائه العرض 35، ولكن إذا كانت الصورة قد إنتهى تحميلها يتم إخفاء المؤشر من خلال تحديد العرض 0 لمؤشر التحميل و بالتالي لن يظهر. ثاني التحسينات التي سوف نجريها هي قيامنا بإستخدام صور جميلة بدل من الأزرار التي نستعملها، يمكنك الحصول على صور الاسهم من هنا كما يمكنك الحصول على صور تشغيل\إيقاف من هنا. لإستخدام صوره بدل زر التالي “next”. قم بإستبدال وسم الزر next بالكود التالي: <a href="java script:next()"><img src="stuff\right.png"></img></a> وكذلك الأمر مع زر السابق “Previous” : <a href="java script:prev()"><img src="stuff\left.png"></img></a> بالنسبة لزر تشغيل\إيقاف “Play/Puase”، إستخدم الكود التالي: <a href="java script:PlayPause()"><img src="stuff\play.png" id="Img1"></img></a> لاحظ أننا وضعنا ال id داخل وسم ال <img> لكي يتم تبديل الصور بصور الإيقاف عندما يتم الضغط تشغيل و العكس صحيح، لعمل ذلك إتجه إلى الدالة PlayPuase() وقم بإستبدال السطر الذي يقوم بتغير نص الزر إلى Pause بالسطر التالي: انسخ الكودdocument[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color][color= #0000ff;]"stuff/puase.png"[/color][color= #339933;];[/color]  وقم بإستبدال السطر الذي يقوم بتغيير نص الزر إلى Play: انسخ الكودdocument[color= #339933;].[/color]getElementById[color= #009900;]([/color][color= #0000ff;]"plypus"[/color][color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color][color= #0000ff;]"stuff/Play.png"[/color][color= #339933;];[/color]  جميل حاول التشغيل الآن، :happy: ; نتيجة جميلة. الآن سوف نقوم بعمل توهج حول الصور بحيث يظهر هذا التوهج عند تمرير الماوس فوق قم بتعديل صور أزرار التالي و السابق و إضافة وهج حول كل من الأزرار وقم بتسمية الزر بإسمه و أضف كلمة over قبل إسم الملف، مثل “overleft.png”. إستخدم برنامج مثل الفوتوشوب لتعديل الصور. أو بإمكانك الصور الجديده من الملفات المرفقة. بعدها سنقوم بإضافة دالتين إلى الكود MouseOver و MousOut كالتالي، حيث سوف تقوم الدالة الأولى بعرض الصورة ذات الوهج بدل الصورة الأصلية و ستقوم الدالة الثانية بإعادة عرض الصورة الأصلية. تحتوي هذه الدوال أيضا على إستثناء حيث إذا كان ال id يحمل القيمة “plypus” يتم فحص حالة التشغيل و الإيقاف للعرض التقديمي، و من ثم يتم إسناد الصورة الصحيحة إلى الزر حسب حالة العرض: انسخ الكود[color= #000000; font-weight: bold;]function[/color] MouseOver[color= #009900;]([/color]id[color= #009900;])[/color][color= #009900;]{[/color] [color= #b1b100;]if[/color][color= #009900;]([/color]id[color= #339933;]==[/color][color= #0000ff;]"plypus"[/color] [color= #009900;])[/color] [color= #009900;]{[/color] [color= #b1b100;]if[/color][color= #009900;]([/color]play[color= #339933;]==[/color][color= #cc66cc;]0[/color][color= #009900;])[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/overplay.png"[/color][color= #339933;];[/color] [color= #b1b100;]else[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/overpause.png"[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #b1b100;]else[/color][color= #009900;]{[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/over"[/color] [color= #339933;]+[/color] id [color= #339933;]+[/color] [color= #0000ff;]".png"[/color][color= #339933;];[/color] [color= #009900;]}[/color] [color= #009900;]}[/color][color= #000000; font-weight: bold;]function[/color] MouseOut[color= #009900;]([/color]id[color= #009900;])[/color][color= #009900;]{[/color] [color= #b1b100;]if[/color][color= #009900;]([/color]id[color= #339933;]==[/color][color= #0000ff;]"plypus"[/color] [color= #009900;])[/color] [color= #009900;]{[/color] [color= #b1b100;]if[/color][color= #009900;]([/color]play[color= #339933;]==[/color][color= #cc66cc;]0[/color][color= #009900;])[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/play.png"[/color][color= #339933;];[/color] [color= #b1b100;]else[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/pause.png"[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #b1b100;]else[/color][color= #009900;]{[/color] document[color= #339933;].[/color]getElementById[color= #009900;]([/color]id[color= #009900;])[/color][color= #339933;].[/color]src[color= #339933;]=[/color] [color= #0000ff;]"stuff/"[/color] [color= #339933;]+[/color] id [color= #339933;]+[/color] [color= #0000ff;]".png"[/color][color= #339933;];[/color] [color= #009900;]}[/color][color= #009900;]}[/color]  بعد ذلك قم بتعديل وسوم صور أزرار "التالي" و "السابق" و "تشغيل\إيقاف" بحيث تصبح بالشكل التالي: <img src="stuff\left.png" id="left" border="0" onmouseOver="MouseOver('left')" onmouseout="MouseOut('left')"> <img src="stuff\right.png" id="right" border="0" onmouseOver="MouseOver('right')" onmouseout="MouseOut('right')"> <img src="stuff\play.png" id="Img1" border="0" onmouseOver="MouseOver('plypus')" onmouseout="MouseOut('plypus')" > لاحظ أننا قمنا بإضافة ال id من أجل الوصول إلى الصورة من داخل الدوال MouseOver و MouseOut، كذلك لاحظ أننا قمنا بإستدعاء كل من الدالتين في حال حصل حدث مرور الماوس فوق الصورة، و في حال خروجه من فوق الصورة. أيضا أرسلنا إلى الدالة قيمة نصية تعبر عن ال id الخاص بالصورة. التحسين الثالث و الأخير بسيط جدا ألا وهو وضع السكربت في ملف منفصل إذا قم بقص كل الكود بين كل من وسمي البداية و النهاية للسكربت <script> (لا تقص وسم البداية و النهاية للسكربت). قم بلصق الكود في ملف بإسم GallScript.js وضعه في نفس مجلد الذي توجد فيها الصفحة، بعدها قم بتعديل وسم السكربت بالتالي: <script type="text/javascript" src="GallScript.js"/> ضع خلفية رمادية للجدول: <table border=0 align="center" bgColor="#222222"> شغل الكود، وأخيرا قد حصلنا على معرض جميل للصور :lol: . أرجو أن أكون قد وفقت في إيصال و لو بعض الأفكار الجديدة و الجميلة إليكم، و الآن أصبح لدينا معرض للصور مفتوح المصدر للإستخدام. :wub: ملاحظة: الكود مجرب ويعمل بشكل جيد على كل من Google Chrome و Mozilla Firefox 3. الملف المرفق يحتوي على المشروع كاملا مع الصور و ما يلزم لتشغيله. بإنتظار آرائكم و تعليقاتكم و إنتقادتكم، كما أرجو النتويه عن أي خطأ أو تعديل في الدرس. تقبلو تحياتي: خلدون خالد، الفريق العربي للبرمجة. نسخة من الدرس بصيغة PDF: ImageGallary.pdf ملفات المشروع جاهز للتنفيذ و الإستخدام: ImageGallary.zip
  2. نعم هناك برنامج إسمه multimedia fusion 2 برنامج سهل جدا وبالإمكان تصميم الكثير من الإلعاب من خلاله لا يحتاج إلى برمجة فعلية، ولكن يحتاج لفهم منطق البرمجة و يتم التعامل معها من خلال سحب و إسقاط العناصر بشكل أساسي و القوائم و ما إلى ذلك البرنامج مناسب للفئات العمرية الصغيرة،،، قمت بتدريسه لعمر 12 -15 تقريبا و تمكنو من إستيعابه بشكل تام،،، هذا رابط البرنامج،،، هناك نسخة تجريبية مجانية،،، http://www.clickteam.com/website/usa/multimedia-fusion-2.html أيضا يوجد مكتبه عناصر تأتي مع البرنامج حاول الحصول عليها فهي تعطي خيارات كبيرة و تسهل عملية التصميم... بالتوفيق
  3. بسم الله الرحمن الرحيم الحمد لله و الصلاة و السلام على رسول الله.. اما بعد .. لقد قررت أن اتعلم الXna -_- لمن لا يعرف ال Xna هي مكتبة لبرمجة الألعاب مقدمة من مايكروسوفت و مدعومة بشكل كامل بال .net Framework سوف أحاول بعون الله تعالى أن أقوم بترجمة سلسلة الدروس التعليمية بإسم 2D Xna Tutorial Using C# ,"تعلم 2D Xna بإستخدام C#". رابط الدروس الأصلية http://www.riemers.net/eng/Tutorials/XNA/Csharp/series2d.php مؤلف السلسلة يدعى Riemer Grootjans http://www.riemers.netو هو حاصل على شهادة “Microsoft MVP Award 2007 – 2008 DirectX - XNA” كما أنه مؤلف كتاب XNA 2.0 Game Programming Recipes بسم الله نبدأ السلسلة التعليمية. الهدف من هذه السلسلة هي تزويد المتعلم لل Xna بالمعلومات الأساسية التي تلزمه للوصول إلى مرحلة القدرة على بناء أي لعبة مبنية على البعدين “2D”. من أجل الوصول إلى هذا الهدف سوف يتم على مدى السلسة تطوير لعبة “Shooters” على مدى اللعبة, مما يعني أنك في النهاية سوف تصل إلى مرحلة إتقان ال Xna + القدرة على تطوير الألعاب بشكل جيد جدا إن شاء الله. لن يتم التطرق إلى مفاهم الألعاب بشكل نظري و لن يتم الحديث عن الجوانب النظرية المتعلقه بمكتبة ال Xna , طبعا هذا لا يعني أن هذه السلسلة غير مخصصة للمبتدئين , لإنها مخصصة للمبتدئين فعلا, الذين انتمي إليهم بطبيعة الحال (المترجم:) ). سأقوم بسرد بعض من المفاهيم التي سوف تتعلمها بإذن الله في نهاية هذه السلسلة من الدروس: • تنزيل و تثبيت ال Xna و البدء بمشروعك الأول • إضهار وتصيير “Render”صور ثنائية البعد على الشاشة • تحجيم و تدوير و تغيير مواضع الصور الثنائية البعد. • مدخلات لوحة المفاتيح • تشغيل مؤثرات صوتيه في ال Xna • معالجة الخامات Per-Pixel • إنشاء التضاريس العشوائية • مزج ألفا “Alpha Blending” • إكتشاف التصادمات (اكثر المواضيع صعوبة التي سوف تناقش هنا هي Per-Pixel Transformed) • إضافة إلى شرح كامل لمحرك الجزيئات ثنائي الأبعاد “2D Particle Engine” من أجل الإنفجارات. صور من اللعبة التي سوف يتم تطويرها بإذن الله. -من المترجم- سوف أحاول ان اترجم المصطلحات القابلة للترجمة حسب الأولويات التاليه: - المصطلحات التي تم ترجمتها في موضوع "دعوة عامة لتوحيد المصطلحات" http://www.arabteam2000-forum.com/index.php?showtopic=149732 - سأحاول استخدام الترجمات العامة للمصطلحات (الترجمات الأكثر إنتشارا) - إضافة إلى كل ذلك سوف اقوم بوضع المصطلح الإنجليزي إلى جانب العربي في علامتي تنصيص "" ملاحظات: *سأقوم بإرفاق الملفات الآزمة لتنفيذ كل درس إضافة إلى الروابط الأصلية التي سوف تظهر في الدرس, كما سأقوم بإرفاق الدرس في ملف بصيغة PDF. *بالنسبة لمناقشة الدروس , فأي شخص لديه اي سؤال أو مشكلة سأحاول بالتعاون مع الأخوة ان نجيبه على تساؤلاته , طبعا قلت سأحاول لأني مبتدأ و قد بدأت لتوي بدراستها. *سأقوم بطرح درس في كل يوم أو يومين حسب الوقت. (حتى الآن ترجمت 3 دروس و إن شاء الله مستمر في الباقي) *طبعا واضح ان الشرح سوف يتم بإستخدام لغة الس C# , و من السهل على أصحاب الفيجوال بيسك (أنا منهم) التحويل بين اللغتين. *أرجو أن اجد تفاعلا :) التوكل على الله ...   الدرس الأول أهلا بكم في الدرس الأول من سلسلة دروس تعلم ال Xna , هذه السلسلة من الدروس تستهدف الأشخاص الذين لم يسبق لهم اي معرفة في ال Xna, و يرغبون بالحصول على نتائج بأسرع وقت ممكن. ال Xna هي "بيئة" برمجية , تم إصدارها في ديسمبر 2006 بواسطة مايكروسوفت , هذه التقنية مبنية "حول" على ال DirectX , بحيث تسهل برمجة الألعاب بعدة طرق. المتطلبات البرمجية (مجانيه) : البرمجيات الازمة لكي تبدأ كتابة كود ال Xna هي مجانية تماما , و بإمكانك تنزيلها: • Microsoft XNA Game Studio 2.0, the programming environment (free) (Link) • Microsoft Visual Studio C# Express (free) (Link). XNA Game Studio 2.0 will also work with the full version of Visual Studio 2005 . تأكد من إختيارك لنسخة ال C# المعلمة بالأخضر. إبدأ مشروع Xna جديد: بإستخدام هذه البرمجيات التي قمت بتنزيلها , تستطيع أن تبدأ بكتابة برامجك في ال Xna , تستطيع بدء ال Xna Game Studio 2.0 , الموجوده في قائمة إبدأ , وبعدها إختر قائمة ملف => و اختر مشروع جديد (New Project) . إذا كنت تملك نسخه كاملة الفيجوال ستديو , بإمكانك فتح مشروع بالطريقه العاديه و إختيار Xna Game Studio 2.0 من قائمة المشاريع على اليسار. نحتاج نوع مشروع Windows Game (2.0) . نشر اللعبة إلى ال Xbox360 سوف يتم مناقشته فيما بعد. الآن أكتب اسم اللعبة في خانة إسم المشروع انا اخترت “XNAtutorial” بعد ذلك إضغط موافق OK ! هكذا تم إنشاء مشروع Xna . في متصفح المشروع "Solution Explorer" على يمين الشاشة تستطيع ان ترى أن المشروع يحتوي على ملفين للكود و هما “Game1.CS” و “Program.CS” تستطيع مشاهدة ما يحتويانه من كود عن طريق الضغط على بالزر الأيمن للماوس و إختيار “View Code” . عندما تريد ان تشغل المشروع سوف يبدأ البرنامج التنفيذ من ملف ال “Program.CS” , في الدالة "Function" الرئيسية “Main” . ببساطة هذه الدالة تقوم بإستدعاء الكود الموجود في ملف ال “Game1.CS” . بكل الأحوال لا يلزمنا تغيير اي شيئ في ملف ال “Program.CS” .   تركيبة البرنامج : افتح ملف ال “Game1.CS” . ستجد انه يحتوي على العديد من الملاحظات “Comments” باللون اأخضر , (بإمكانك حذفها), بإمكاننا الآن إستكشاف تركيبة برنامج لعبة ال Xna . الدالة المشيدة "Constructor Function" المسماه “Game1()” و التي يتم إستدعائها عند بدء التشغيل. بشكل عام تستعمل هذه الدالة لتحميل بعض المتغيرات الازمة بواسطة إطار عمل ال Xna . الدالة الإستهلالية “Initialize()” و التي يتم إستدعائها ايضا عند بدء تشغيل اللعبة. هذه هي الدالة التي تلزم لنضع فيها الكود الخاص بالتجهيز للعبة "Initialization" . الدالة “LoadContent()” , و التي تستخدم لإستيراد الموارد الازمه للعبة (مثل الصور و العناصر و الأصوات) إضافة إلى البيانات المتعلقة ببطاقة الرسوميات . الدالة “UnLoadContent” هي المكان المناسب لإلغاء تحميل كل ما ذكر سابقا (إن لزم). الدالة “Update()” هي الدالة التي يتم إستدعائها في كل إطار من إطارات سير اللعبة “Frame” و التي تساوي بالضبط 60 مره. في هذه الدالة سوف نضع الكود الخاص بنا اللازم لتحديث محتوى اللعبة أثناء تشغيلها, على سبيل المثال الكود الذي يقرأ من لوحة المفاتيح, و الكود الذي يقوم بتحديث العناصر الهندسية في المشهد. الدالة “Draw()” و التي يتم إستدعائها كلما سمح الكمبيوتر (أو بشكل أخص بطاقة الرسوميات) . حيث يتم في هذه الدالة وضع الكود الازم لعملية رسم محتويات المشهد على الشاشة بشكل فعلي. كما ترى فإنه لايلزمنا كود من أجل فتح شاشة معينة (مثل ال DirectX) , حيث سوف تتم هذه الخطوة بشكل تلقائي. عندما تقوم بتشغيل البرنامج من خلال الضغط على “F5” , سوف ترى شاشة زرقاء جميلة و جاهزه :). دعنا الآن ننتقل لمناقشة جهاز الرسوميات “Graphics Device” . بشكل ملخص , جهاز الرسوميات هو رابط مباشر إلى بطاقة الرسوميات او ال “Graphical Adapter”. حيث يمثل ال “Graphics Device” كائن "Object" يمنحك وصول مباشر إلى قطع من ال “Hardware” داخل جهازك. نستطيع تعريف المتغير بسهولة في الكود كمتغير من نوع "GraphicsDevice" , و لأننا سوف نستخدم هذا المتغير بشكل كبير سوف نقوم بعمل إختصار لهذا المتغير. اولا و نقوم بتعريف هذا المتغير, من خلال إضافة السطر التالي في بدية الصنف "Class" بالضبط فوق الدالة “Game1()” : GraphicsDevice device; بشكل واضح نحتاج لملئ هذا المتغير, و ذلك من خلال وضع السطر التالي في الدالة “LoadContent” : device = graphics.GraphicsDevice; بعد ذلك نحتاج إلى تحديد أشياء إضافية متعلقة بالشاشة , مثل حجم الشاشة و عنوانها, طبعا ذلك يتم بوضع الكود التالي في الدالة “Initialize” : graphics.PreferredBackBufferWidth = 500; graphics.PreferredBackBufferHeight = 500; graphics.IsFullScreen = false; graphics.ApplyChanges(); Window.Title = "Riemer's 2D XNA Tutorial"; في السطر الأول و الثاني يتم تحديد حجم الذاكرة الخلفية “BackBuffer” , التي تحتوي على ما سوف يتم رسمه على الشاشة. في السطر الثالث نقوم بتحديد فيما إذا كنا نريد تشغيل اللعبه في وضع ملئ الشاشة ام لا, بعد ذلك نقوم بتطبيق التغيرات. في السطر الأخير يتم تحديد عنوان الشاشة. الآن قم بتشغيل البرنامج "F5" يجب ان يظهر لك شاشة بحجم 500 * 500 بكسل , مع العنوان الذي قمت بوضعه: بعد كل درس سوف احاول ان اقترح بعض المسائل, لمساعدتك على ممارسة ما قمت بتعلمه في هذا الدرس. بعد المسائل سوف اقوم بوضع كامل الكود للمشروع مع التغيرات التي قمنا بها في الدرس. سوف اقوم بحذف الملاحظات "Comments" لذلك سوف يبدو الكود مضغوط قليلا. ملاحظة هامة: إذا قمت بعمل نسخ و لصق للكود في ملف ال "Game.CS" الخاص بك, تأكد من قيامك بتغيير اسم ال “Namespace” في ملف ال “Program.CS” الخاص بك إلى “XNAtutorial” (إذا لم يكن كذلك اصلا). ال “Namespace” هو نفس الأسم الذي قمت بتحديده عند قيامك بإنشاء مشروع جديد.   • بإمكانك تجربة حل المسائل التاليه , بناء على ما تعلمته من الدرس: • غير حجم الشاشة إلي 800 * 600. • إجعل اللعبة تعمل في وضع ملئ الشاشة بدلا من وضع الشاشة العادية (إستخدم Alt + F4 لإيقاف البرنامج). كود المشروع حتى الآن : انسخ الكودusing [color= #990000;]System[/color][color= #339933;];[/color] using [color= #990000;]System[/color][color= #339933;].[/color]Collections[color= #339933;].[/color]Generic[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]Audio[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]Content[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]GamerServices[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]Graphics[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]Input[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]Net[color= #339933;];[/color] using Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]Storage[color= #339933;];[/color]  namespace XNAtutorial [color= #009900;]{[/color] [color= #000000; font-weight: bold;]public[/color] [color= #000000; font-weight: bold;]class[/color] Game1 [color= #339933;]:[/color] Microsoft[color= #339933;].[/color]Xna[color= #339933;].[/color]Framework[color= #339933;].[/color]Game [color= #009900;]{[/color] GraphicsDeviceManager graphics[color= #339933;];[/color] SpriteBatch spriteBatch[color= #339933;];[/color] GraphicsDevice device[color= #339933;];[/color]  [color= #000000; font-weight: bold;]public[/color] Game1[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] graphics [color= #339933;]=[/color] [color= #000000; font-weight: bold;]new[/color] GraphicsDeviceManager[color= #009900;]([/color]this[color= #009900;])[/color][color= #339933;];[/color] Content[color= #339933;].[/color]RootDirectory [color= #339933;]=[/color] [color= #0000ff;]"Content"[/color][color= #339933;];[/color] [color= #009900;]}[/color]  protected override void Initialize[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] graphics[color= #339933;].[/color]PreferredBackBufferWidth [color= #339933;]=[/color] [color= #cc66cc;]500[/color][color= #339933;];[/color] graphics[color= #339933;].[/color]PreferredBackBufferHeight [color= #339933;]=[/color] [color= #cc66cc;]500[/color][color= #339933;];[/color] graphics[color= #339933;].[/color]IsFullScreen [color= #339933;]=[/color] [color= #000000; font-weight: bold;]false[/color][color= #339933;];[/color] graphics[color= #339933;].[/color]ApplyChanges[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color] Window[color= #339933;].[/color]Title [color= #339933;]=[/color] [color= #0000ff;]"Riemer's 2D XNA Tutorial"[/color][color= #339933;];[/color]  base[color= #339933;].[/color]Initialize[color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color]  protected override void LoadContent[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] device [color= #339933;]=[/color] graphics[color= #339933;].[/color]GraphicsDevice[color= #339933;];[/color] spriteBatch [color= #339933;]=[/color] [color= #000000; font-weight: bold;]new[/color] SpriteBatch[color= #009900;]([/color]device[color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color]  protected override void UnloadContent[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] [color= #009900;]}[/color]  protected override void Update[color= #009900;]([/color]GameTime gameTime[color= #009900;])[/color] [color= #009900;]{[/color] [color= #b1b100;]if[/color] [color= #009900;]([/color]GamePad[color= #339933;].[/color]GetState[color= #009900;]([/color]PlayerIndex[color= #339933;].[/color]One[color= #009900;])[/color][color= #339933;].[/color]Buttons[color= #339933;].[/color]Back [color= #339933;]==[/color] ButtonState[color= #339933;].[/color]Pressed[color= #009900;])[/color] this[color= #339933;].[/color][color= #990000;]Exit[/color][color= #009900;]([/color][color= #009900;])[/color][color= #339933;];[/color]  base[color= #339933;].[/color]Update[color= #009900;]([/color]gameTime[color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color]  protected override void Draw[color= #009900;]([/color]GameTime gameTime[color= #009900;])[/color] [color= #009900;]{[/color] graphics[color= #339933;].[/color]GraphicsDevice[color= #339933;].[/color]Clear[color= #009900;]([/color]Color[color= #339933;].[/color]CornflowerBlue[color= #009900;])[/color][color= #339933;];[/color]  base[color= #339933;].[/color]Draw[color= #009900;]([/color]gameTime[color= #009900;])[/color][color= #339933;];[/color] [color= #009900;]}[/color] [color= #009900;]}[/color] [color= #009900;]}[/color]   ملف PDF __________________________________Xna.pdf إنتقل إلى الدرس التالي ==>> أو تابع مناقشة الأعضاء
  4. بســم الله الـرحمــن الرحيــم الحمد لله و الصلاة و السلام على رسول الله.. في هذا الموضوع سوف أضع إن شاء الله روابط لدروس سلسلة تعلم 3D Xna لكي يسهل الوصول إليها. الدروس مترجمة من موقع http://www.riemers.net لمؤلفها Riemer Grootjans. السلسلة الأولى الدرس الأول الدرس الثاني الدرس الثالث الدرس الرابع الدرس الخامس الدرس السادس الدرس السابع الدرس الثامن الدرس التاسع الدرس العاشر الدرس الحادي عشر الدرس الثاني عشر الدرس الثالث عشر والأخير بالتوفيق..
  5. بسم الله الرحمن الرحيم اللهم صلي و سلم و بارك على سيد الأنبياء محمد. أما بعد سأقوم بإذن الله في هذا الموضوع بوضع روابط لدروس سلسلة دروس تعلم 3D Xna السلسلة الثانية، لكي يسهل الوصول إليها. الدروس مترجمة من موقع http://www.riemers.net لمؤلفها Riemer Grootjans. رابط الدروس الاصليه: http://www.riemers.net/eng/Tutorials/XNA/Csharp/series2.php السلسلة الثانية الدرس الأول الدرس الثاني الدرس الثالث الدرس الرابع الدرس الخامس الدرس السادس الدرس السابع الدرس الثامن الدرس التاسع الدرس العاشر الدرس الحادي عشر الدرس الثاني عشر الدرس الثالث عشر الدرس الرابع عشر و الأخير تم بحمد الله
  6. بســم الله الـرحمــن الرحيــم الدرس الثاني <<== إذهب إلى الدرس السابق أهلا بكم في الدرس الثاني من سلسلة دروس تعلم ال Xna , في هذا الدرس سوف نقوم برسم خلفية اللعبة. الخطوة الأولى في عملية إنشاء لعبة ثنائية الأبعاد هي عملية تصيير “Render” صورة ثنائية الأبعاد. في ال Xna, من السهل جدا عمل ذلك. كمثال أول سوف نقوم بتصيير صورتين على كامل الشاشة. الأولى سوف تكون صورة الأرضية الخلفية و التي تحتوي على مشهد السماء و الجبال. وفوق هذه الصورة سوف نقوم بتصيير صورة الأرضية الأمامية التي تحتوي على التضاريس. بداية يجب علينا تنزيل الصور من خلال الروابط التالية هناو الرابط هنا(أو من خلال المرفقات). الآن إذهب إلى المشروع الذي قمنا بإنشائه في الدرس السابق, و إذهب إلى “Solution Explorer” مربع صغير في الركن العلوي الأيسر من الشاشة, يحتوي على كل ملفات المشروع. بعدها ابحث عن مجلد ال “Content” و بعدها إضغط بالزر اليمين على المجلد و إختر Add->Existing Item , كما هو موضح في الصورة التالية: من خلال الشاشة المفتوحة قم بالتصفح حتى تصل إلى موقع الصورتان اللتان قمت بتنزيلهما سابقا. إختر ملفات الصوره و بعدها إضغط إضافة "Add" . هكذا سوف يتم نسخ الملف إلى مجلد ال “Content” في مشروعك. يجب أن يظهر الملف اسفل مجلد ال “Content” كما في الصورة: بعد تحميل الصوره إلى مشروع ال Xna الخاص بك, يجب أن نقوم بإنشاء متغير في الكود, بحيث يتم ربط المتغير مع الصورة. وجود المتغير هو شرط أساسي, مما يمكننا من الوصول إلى الصورة من خلال الكود. قم بإضافة المتغير في أعلى الكود , فوق الدالة “Game1()” . Texture2D backgroundTexture; قمنا بتعريف المتغير بحيث يكون النوع “Texture2D” . في برمجة الألعاب تدعى الصور بالخامات “Textures” او اشباح “Sprite” , لهذا سميت بهذا الأسم. المتغير من نوع “Textuere2D” يستخدم للربط مع الصورة , كما أنه يستخدم من اجل عملية التصيير للصورة , او الوصول إلى معلومات الألوان في الصورة (كما سنفعل لاحقا في أحد الدروس القادمة). بشكل واضخ, نحتاج الآن لكي نربط المتغير مع ملف الصورة التي قمنا بإستيرادها لمشروع ال Xna. يتم ذلك من خلال وضع الكود التالي في الدالة “LoadContent” . backgroundTexture = Content.Load<Texture2D> ("background"); في هذا السطر يتم ربط المتغير مع الصورة. الوسيط “background” يمثل اسم الملف الذي تم إستيراده, وهو “background.jpg”. طبعا لا يهم إذا كانت صورتك تحمل الإمتداد JPG او BMP أو PNG أو حتى اي تنسيق للصور. فقط قم بإستيراد ملف الصورة إلى المشروع و قم بربط الملف مع المتغير. بعدما قمنا بربط المتغير مع الصوره نحن الآن جاهزين لرسم الصورة على الشاشة. يزودنا الXna بأداة سهلة جدا و فعالة جدا من أجل ذلك: SpriteBatch . يمثل أيضا متغير موجود فعليا بشكل مسبق في الكود , حيث يتم إنشائه عند إنشاء مشروع Xna جديد. بإمكانك البحث عنه في الكود : فهو معرف في اعلى الكود و تم إستهلاله في دالة “LoadContent” . ال SpriteBatch هي ما يعنيه إسمها فعليا : فهي تتيح لنا القيام بعملية تصيير لحزم من الأشباح “sprites” (الصور ثنائية البعد) . حتى الآن سوف نقوم بعمل تصيير لمره واحدة , لكن بالإمكان إستخدام SpriteBatch واحد لعمل تصيير لكمية كبيرة من الصور. الجيد ان كل ذلك يتم بإستخدام اجزاء التسريع في كرت الشاشة. بما أن ال SpriteBatch قد تم تجهزيه مسبقا, نستطيع الآن رسم المتغيرات. يجب ان تتم هذه العملية في دالة ال “Draw”, لكننا سوف نقوم بعمل دالة صغيرة للقيام بذلك. السبب الوحيد لعمل ذلك هو أن الدالة “Draw” سوف يصبح شكلها فوضوي في نهاية سلسلة الدروس , لأننا سوف نقوم برسم عدد كبير من الصور. إذن قم بإضافة دالة جديدة في نهاية الكود, بعد دالة ال “Draw()” مباشرة: private void DrawScenery() { } عندما نريد أن نرسم صورة ثنائية البعد على الشاشة, بشكل أساسي لدينا خيارين: • نقوم بتحديد الموقع العلوي الأيسر لزاوية الصورة. • أو بإمكاننا تحديد مستطيل على الشاشة يمثل المكان الذي نريد أن نرسم الصورة فيه. بما أننا نريد ان تغطي صورة الخلفية لدينا كامل الشاشة, سوف نختار الخيار الثاني. سوف نستخدم الخيار الأول في الدرس التالي. عندما نريد تحديد المستطيل المرتبط بكامل الشاشة سوف نحتاج أن نعرف عرض وطول الشاشة. بشكل واضح بما أننا قمنا بتحديد حجم الشاشة ب 500 * 500 بكسل, نحن نعرف حجم الشاشه فعليا. لكن بالتأكيد نحن نريد ان تقوم لعبتنا بضبط نفسها بشكل تلقائي مهما تغير حجم الشاشة لاحقا. إذن سوف نقوم بإستخدام العرض و الطول للشاشة الخاصه بنا, حيث سوف نقوم بإستخدام متغيريين لتمثيل الطول و العرض. في أعلى الكود: int screenWidth; int screenHeight; إضافة إلى ذلك ضع الكود التالي في نهاية الدالة “LoadContent” , حيث سوف يتم تخزين قيم هذه المتغيرات: screenWidth = device.PresentationParameters.BackBufferWidth; screenHeight = device.PresentationParameters.BackBufferHeight; بما أننا حصلنا الآن على حجم الشاشة, نستطيع العودة الآن إلى الدالة DrawScenery و تعريف المستطيل الذي يغطي كامل الشاشة: Rectangle screenRectangle = new Rectangle(0, 0, screenWidth, screenHeight); spriteBatch.Draw(backgroundTexture, screenRectangle, Color.White); السطر الأول يقوم بإنشاء المستطيل, زاويته العليا اليسرى في الإحداثيات (0,0) و له العرض و الطول المساوي للشاشة. ملاحظة هامة: في برمجة الألعاب , الإحداثي (0,0) يمثل الزاوية العلوية اليسرى للشاشة. المحور X الموجب يمثل الإتجاه لليمين, إضافة إلى أن المحور Y الموجب يمثل الإتجاه للأسفل. السطر الأخير يطلب من ال SpriteBatch أن يقوم برسم الصورة ! السطر يطلب من ال SpriteBatch أن يرسم ال backgroundTexture , ممتدة على كامل الشاشة. سوف نقوم بمناقشة الوسيط الأخير في الدرس القادم بإذن الله, لكن بشكل عام يمكنك ان تفترض أن Color.White تعني ان الصورة يجب ان يتم تصييرها بإستخدام ألوانها الأصلية. هذا السطر من الكود يقوم بإضافة صورة الخلفية إلى قائمة التي يجب على ال SpriteBatch ان يقوم برسمها (حتى الآن صورة واحدة). هذا يقوم (بشكل غير مباشر) برسم الصورة على الشاشة. و لكن يجب أولا أن نقوم بتشغيل “Start” لل SpriteBatch , بعد ذلك عليك عليك إضافة الصور إلى قائمة الصور الخاصة بها, بعدها عليك أن تصدر أمر التصيير لل SpriteBatch. إذن إذهب إلى دالة الرسم “Draw”, و تأكد أن الكود لديك مشابه للتالي: protected override void Draw(GameTime gameTime) { graphics.GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); DrawScenery(); spriteBatch.End(); base.Draw(gameTime); } السطر الأول يقوم بمسح الشاشة بلون من إختيارنا. بعدها , قمنا ببدء ال SpriteBatch, إذن نستطيع أن نقوم بإضافة الصور إلى القائمة الخاصه بها من أجل الرسم. بعدها نقوم بإستدعاء الدالة DrawScenery, التي تضيف صورة واحدة إلى القائمة الخاصة بال SpriteBatch . في النهاية , نقوم بإنهاء “End” ال SpriteBatch , التي تقوم بشكل فعلي بالطلب من ال SpriteBatch أن يقوم بعملية الرسم لقائمة الصور على الشاشة. السطر الأخير يقوم بإستدعاء دالة الرسم لأي من عناصر اللعبة “GameComponents”الأخرى المرفقه للعبة. عندما تقوم بتشغيل هذا الكود, صورة الخلفية يجب أن تظهر على الشاشة, بشكل جميل :lol: , نلاحظ أن الصورة مضغوطة بحيث تلائم حجم الشاشة! الآن عندما تقوم بتغيير حجم الشاشة , سوف تقوم الصورة بضبط حجمها لكي تتلائم مع حجم الشاشة بشكل تلقائي. الآن بما أن صورة الأرضية الخلفية في مكانها الصحيح , دعنا نقم برسم صورة الأرضية الأمامية. في الدروس التاليه سوف نقوم برسم التضاريس بشكل ديناميكي بحيث أننا سوف نحصل على شكل جديد للتضاريس في كل مرة نشغل فيها البرنامج. الآن سوف نقوم ببساطة بتحميل الصورة التي قمت بحفظها في بداية الدرس. إبدأ بتنفيذ الخطوات الثلاثة السابقة نفسها: 1) قم بإستيراد الصورة “foreground.png” إلي مجلد ال “Content” في ال “Solution Explorer” 2) أضف المتغير في أعلى الكود Texture2D foregroundTexture; 3) قم بتجهيز المتغير في الدالة “LoadContent” : foregroundTexture = Content.Load<Texture2D> ("foreground"); لتصيير هذه الصورة فوق صورة الأرضية الخلفية, ببساطة قم بإضافة السطر التالي إلى نهاية كود الدالة DrawScencery: spriteBatch.Draw(foregroundTexture, screenRectangle, Color.White); الذي يطلب من ال SpriteBatch ان يرسم ال foregroundTexture , بحيث أنها تغطي كامل الشاشة, بألوانها الأصلية. الآن عندما تقوم بتشغيل البرنامج , سوف ترى ان صورة الأرضية الأمامية قد تم رسمها بشكل جميل فوق الأرضية الخلفية ! عندما تقوم بفتح الملف foreground.png في الويندوز , تستطيع ان تلاحظ ان الجزء فوق التضاريس شفاف. لهذا قمت بإختيار ملفات ال PNG بدلا من تنسيق ال JPG لأنه لا يستطيع تخزين معلومات المناطق الشفافة. بما أننا قمنا بإضافة صورة الأرضية الخلفية إلى قائمة ال SpriteBatch, و بعدها قمنا بإضافة صورة الأرضية الأمامية, تم رسم صورة الأرضية الخلفية اولا. عند التنفيذ يجب أن يكون لديك النتيجة التالية: الكود النهائي الذي وصل إليه المشروع هو : انسخ الكود  using System; using System.[color= #202020;]Collections[/color].[color= #202020;]Generic[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]Audio[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]Content[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]GamerServices[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]Graphics[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]Input[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]Net[/color]; using Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]Storage[/color];  namespace XNAtutorial [color= #009900;]{[/color] public class Game1 [color= #339933;]:[/color] Microsoft.[color= #202020;]Xna[/color].[color= #202020;]Framework[/color].[color= #202020;]Game[/color] [color= #009900;]{[/color] GraphicsDeviceManager graphics; SpriteBatch spriteBatch; GraphicsDevice device;  Texture2D backgroundTexture; Texture2D foregroundTexture;  [color= #993333;]int[/color] screenWidth; [color= #993333;]int[/color] screenHeight;  public Game1[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] graphics [color= #339933;]=[/color] new GraphicsDeviceManager[color= #009900;]([/color]this[color= #009900;])[/color]; Content.[color= #202020;]RootDirectory[/color] [color= #339933;]=[/color] [color= #ff0000;]"Content"[/color]; [color= #009900;]}[/color]  protected override [color= #993333;]void[/color] Initialize[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] graphics.[color= #202020;]PreferredBackBufferWidth[/color] [color= #339933;]=[/color] [color= #cc66cc;]500[/color]; graphics.[color= #202020;]PreferredBackBufferHeight[/color] [color= #339933;]=[/color] [color= #cc66cc;]500[/color]; graphics.[color= #202020;]IsFullScreen[/color] [color= #339933;]=[/color] [color= #000000; font-weight: bold;]false[/color]; graphics.[color= #202020;]ApplyChanges[/color][color= #009900;]([/color][color= #009900;])[/color]; Window.[color= #202020;]Title[/color] [color= #339933;]=[/color] [color= #ff0000;]"Riemer's 2D XNA Tutorial"[/color];  base.[color= #202020;]Initialize[/color][color= #009900;]([/color][color= #009900;])[/color]; [color= #009900;]}[/color]  protected override [color= #993333;]void[/color] LoadContent[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] device [color= #339933;]=[/color] graphics.[color= #202020;]GraphicsDevice[/color]; spriteBatch [color= #339933;]=[/color] new SpriteBatch[color= #009900;]([/color]device[color= #009900;])[/color];   backgroundTexture [color= #339933;]=[/color] Content.[color= #202020;]Load[/color]<Texture2D> [color= #009900;]([/color][color= #ff0000;]"background"[/color][color= #009900;])[/color]; foregroundTexture [color= #339933;]=[/color] Content.[color= #202020;]Load[/color]<Texture2D> [color= #009900;]([/color][color= #ff0000;]"foreground"[/color][color= #009900;])[/color]; screenWidth [color= #339933;]=[/color] device.[color= #202020;]PresentationParameters[/color].[color= #202020;]BackBufferWidth[/color]; screenHeight [color= #339933;]=[/color] device.[color= #202020;]PresentationParameters[/color].[color= #202020;]BackBufferHeight[/color];  [color= #009900;]}[/color]  protected override [color= #993333;]void[/color] UnloadContent[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] [color= #009900;]}[/color]  protected override [color= #993333;]void[/color] Update[color= #009900;]([/color]GameTime gameTime[color= #009900;])[/color] [color= #009900;]{[/color] [color= #b1b100;]if[/color] [color= #009900;]([/color]GamePad.[color= #202020;]GetState[/color][color= #009900;]([/color]PlayerIndex.[color= #202020;]One[/color][color= #009900;])[/color].[color= #202020;]Buttons[/color].[color= #202020;]Back[/color] [color= #339933;]==[/color] ButtonState.[color= #202020;]Pressed[/color][color= #009900;])[/color] this.[color= #202020;]Exit[/color][color= #009900;]([/color][color= #009900;])[/color];  base.[color= #202020;]Update[/color][color= #009900;]([/color]gameTime[color= #009900;])[/color]; [color= #009900;]}[/color]  protected override [color= #993333;]void[/color] Draw[color= #009900;]([/color]GameTime gameTime[color= #009900;])[/color] [color= #009900;]{[/color] graphics.[color= #202020;]GraphicsDevice[/color].[color= #202020;]Clear[/color][color= #009900;]([/color]Color.[color= #202020;]CornflowerBlue[/color][color= #009900;])[/color];  spriteBatch.[color= #202020;]Begin[/color][color= #009900;]([/color][color= #009900;])[/color]; DrawScenery[color= #009900;]([/color][color= #009900;])[/color]; spriteBatch.[color= #202020;]End[/color][color= #009900;]([/color][color= #009900;])[/color];  base.[color= #202020;]Draw[/color][color= #009900;]([/color]gameTime[color= #009900;])[/color]; [color= #009900;]}[/color]  private [color= #993333;]void[/color] DrawScenery[color= #009900;]([/color][color= #009900;])[/color] [color= #009900;]{[/color] Rectangle screenRectangle [color= #339933;]=[/color] new Rectangle[color= #009900;]([/color][color= #cc66cc;]0[/color], [color= #cc66cc;]0[/color], screenWidth, screenHeight[color= #009900;])[/color]; spriteBatch.[color= #202020;]Draw[/color][color= #009900;]([/color]backgroundTexture, screenRectangle, Color.[color= #202020;]White[/color][color= #009900;])[/color]; spriteBatch.[color= #202020;]Draw[/color][color= #009900;]([/color]foregroundTexture, screenRectangle, Color.[color= #202020;]White[/color][color= #009900;])[/color]; [color= #009900;]}[/color] [color= #009900;]}[/color] [color= #009900;]}[/color]   الملفات الآزمة لتنفيذ الدرس L2.zip نسخة عن الدرس بصيغة ال PDF Learn_Xna2.pdf تحياتي :wub:
  7. كيف أسوي ألعاب

    1- تعلم البرمجة بلغة ال Java 2- تعلم البرمجة لأحد محركات الرسوميات،، لنقل OpenGL 3-تعلم بعض تقنيات الذكاء الإصطناعي و التحكم بالألعاب. 4-ضع فكرة اللعبة التي تريدها 5-قم ببرمجتها!!
  8. صراحة إستعمل الكثير من المشغلات ،، و كان من بينها ال Go، و فعلا انه من أفضل المشغلات و أجملها ، أيضا لاحظت أنه في معظم الأحيان أسرع من المشغلات الأخرى (بما فيها الإفتراضية للسامسونج مثلا). ميزه تعجبني جدا في هذا المشغل هو خاصية البحث عن التطبيقات في قائمة التطبيقات حيث يمكنك كتابة حرف أو حرفين من إسم التطبيق و سيتكفل المشغل بالعثور عليه بسرعة كبيرة... شكرا على المقال الجميل
  9. مستوى أكبر كثيرا من الإبداع مع نفس الخدمة، ولكن مستخدم آخر :haha: :haha: :haha:
  10. ههههههههههههههههههه هذي الأفضل :haha:
  11. لأنه إعلان تجاري، ولا أحمد مهتم بالمنتج أيضا يجب نقله إلى قسم الإعلانات
  12. فكرة الدرس ممتازة صراحة، ولكن لو تحاول تستخدم لهجة فصية ستكون الفائدة أكبر بالتأكيد مشكور جدا، ولا مانع من رأيي أن تقوم بنشر الدرس مباشرة في المشاركة (بدل إرفاق ملف Word) ولكن حاول أن تكون الكتابة بالفصحى. أيضا إذا كنت تنوي عمل سلسلة دروس، لو يكون هنالك خطة للعمل. مشكور جدا
  13. لا يجب طلب الإجابة على السؤال من خلال البريد راجع قواعد طرح المشاركة http://www.arabteam2000-forum.com/index.php?showtopic=29343 ======= سأبقي الموضوع مفتوحا للنقاش
  14. http://www.arabteam2000-forum.com/index.php?app=core&module=search&do=search&andor_type=&sid=45881664e2022ebbba9d6f2659e43c42&cType=forum&cId=206&search_term=%CF%E1%DD%ED&search_app=forums&st=25
  15. هناك بيئة بسيطة و سهلة جدا بالإمكان إستخدامها و أتوقع تكلفتها الإجمالية أقل من الطريقة الأصلية وهي بإستخدام Corona SDK تتميز هذه البيئة أيضا بدعم الفيزياء بشكل ممتاز إضافة للوظائف الأخرى الطبيعية
  16. جيد قم بوضع الحل من أجل الإفادة
  17. مره سويتها حسب ما بتذكر بكل بساطة Notepad++ بالإضافة إلى Regular Expression بسيط لحذف ال Tags! طبعا داخل الإكسبرشن بتقدر تضيف إستثناء بخصوص التاجز التي ترغب بإبقائها. أو إذا بدك حل سخيف جدا، إفتح ملف ال HTML في المتصفح ثم قم بنسخ النص الذي سوف يظهر لك :D !!
  18. ههههههههههه و هاقد أجبت عن السؤال الذي يدور في خاطري دائما، من خلال موضوعك اللذيذ هذا :happy: يعطيك العافية فائدة جميله :)
  19. "صدرت موافقة معالي وزير الشؤون الإسلامية والأوقاف والدعوة والإرشاد، المشرف العام على مجمع الملك فهد لطباعة المصحف الشريف على إطلاق الخط الحاسوبي : خط الرسم العثماني – حفص وهو أحد الخطوط الحاسوبية المتوافقة مع الترميز الدولي Unicode، خُصِّصَ لكتابة نص المصحف الشريف المطابق للرسم العثماني لمصحف المدينة النبوية برواية حفص عن عاصم. تمّ تصميمه وبرمجته في وحدة البحوث والتطوير بإدارة الحاسب الآلي بالمجمع، وقام بكتابة أحرفه وبناء تراكيبه المختلفة خطاط مصحف المدينة النبوية الدكتور عثمان طه، وتمت مراجعته واعتماده من قبل اللجنة العلمية لمراجعة المصحف الشريف بالمجمع. يهدف المشروع إلى دعم بيئة البرمجيات الإسلامية بخطوط حاسوبية لنص المصحف الشريف بالرسم العثماني الموافق لمصحف المدينة النبوية، على هيئة TTF مدققة وخالية من الأخطاء، يسهل تداولها واستخدامها في البرمجيات والتطبيقات الحاسوبية ومحررات النصوص ومواقع الإنترنت ونحوها. يخطط المجمع لنشر النسخة المذكورة وتوزيعها مجاناً لتحلّ محل النسخ الأخرى. كما يجري العمل على استكمال إنتاج الخطوط المصحفية بالرسم العثماني لبقية الروايات الأخرى إن شاء الله. أهم المميزات: - التوافق مع الترميز المعياري الدولي Unicode، مما يعني .. - صغر حجم الملف (ملف واحد لا يتجاوز 250 كيلوبات). - مراجع ومعتمد من اللجنة العلمية لمراجعة المصحف الشريف بالمجمع. - تمّ صفه بالكامل باستخدام لوحة المفاتيح العادية، دون الحاجة إلى إدراج أي رموز لا تتوافق مع النظام المعياري Unicode. وهذا يفيد في إمكان استخدام النص المذكور في عمليات الإحصاء للكلمات والأحرف والمصطلحات الخاصة بالضبط والرسم. - تمّ إرفاق وثيقة (وورد) تحتوي على كامل نص القرآن الكريم طبقاً للرسم العثماني الموافق لمصحف المدينة النبوية. كما تم تنفيذ مصادقة رقمية على الوثيقة المذكورة Digital Signature - يتوافق (خط الرسم العثماني – حفص) مع جميع أنظمة التشغيل ومتصفحات الإنترنت والبرامج التي تدعم خطوط Open Type. http://itwadi.com/node/1756 ملاحظة يمكنك تنزيل نسخة عن الخط و نسخة عن المصحف الشريف في ملف وورد من المصدر
  20. بالضبط، و المميز أيضا في الموضوع أن هذا الخط يعتمد على معايير الخطوط المعروفة بحيث سيكون بالإمكان دمجه مع أي تطبيق كان بكل بساطة و بدون الحاجة لعمليات إضافية.
  21. أيضا شباب فلسطينيين (من جامعتي :happy: ) طورو نظام مشابه منذ فتره قريبة. http://www.wafa.ps/humanity/atemplate.php?id=103484
  22. لا يوجد أي إشارة من الموقع أن من يقوم بالتصويت هو جوجل!! طبعا أنا أعرف أن جوجل ليست مسؤله عن هكذا تصويت، يعني بدون الحاجة للبحث في الموقع أصلا!!
  23. إذا الاب توب جديد، ممكن الموضوع له علاقة بتعريف كرت الشاشة، تأكدي إن كرت الشاشة معرف بشكل صحيح.
  24. أبسط حل (و هو أنجح الحلول على الإطلاق) كمبيوتر جديد :D مع كرت شاشة جيد. حل آخر (إقتراح) إذا كنتي قد قمتي بتنزيل النسخة الأخيرة من ال Xna (النسخة الرابعه)، حاولي تنزيل نسخة أقدم منه (النسخة الثانية مثلا) فلربما يكون متطلبات كرت الشاشه لديه أقل و تتوافق مع الكارت لديك