إعـــــــلان

تقليص
لا يوجد إعلان حتى الآن.

التصادم في فلاش collision in flash

تقليص
هذا الموضوع مغلق.
X
X
 
  • تصفية - فلترة
  • الوقت
  • عرض
إلغاء تحديد الكل
مشاركات جديدة

  • التصادم في فلاش collision in flash






    التصادم
    Collisions


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



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

    طرق التصادم


    hitTestObject()


    تتم عملية اختبار العناصر objects في مسرح العمل عن طريق هاته الدالة وهي تابعة لكلاس DisplayObject
    وتاخذ معامل واحد بين القوسين وهو الكائن المعني بالاختبار وترجع قيمة بوليانية boolean اما true وتعني تحقق
    التلامس و false عدم تحقق التلامس .
    نشرح ذلك هذا الأمر فتح مشروع جديد ومباشرة الصق الكود التالي في نافذة الاكشن

    كود:
     
     var obj1:Shape = new Shape();
    obj1.graphics.beginFill(0x000000);
    obj1.graphics.drawRect(0, 0, 100, 100);
    var obj2:Shape = new Shape();
    obj2.graphics.beginFill(0x880088);
    obj2.graphics.drawRect(50, 50, 100, 100);
    addChild(obj1);
    addChild(obj2);
    ستلاخظ الصورة التالية


    الكود السابق هو عبارة على اضافة كائنين مربع اول ومربع ثاني بالاحداثيات والخصائص المبينة ونلاحظ بالعين المجردة أنهما متلامسين وكيف سنتاكد برمجيا
    من ذلك ؟
    سيكون عن طريق الدالة hitTestObject() اذن نضيف سطر تحت الكود السابق وهو التالي :

    كود:
    trace(obj1.hitTestObject(obj2));
    عند تجربة المشروع ستلاحظ في نافذة المخرجات القيمة true وهذا طبيعي باعتبار تحقق التلامس او التصادم
    الان فوق هذا السطر الاخير trace اضف هذا الكود ليصبح كما يلي :
    كود:
    obj2.y = 100
    trace(obj1.hitTestObject(obj2));
    ستلاحظ في نافذة المخرجات القيمة false وهذا طبيعي باعتبار عدم تحقق التصادم او التلامس

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


    يعني يتم اختبار التلامس بين حدود اطار الكائن وليس الكائن نفسه واعتبارا أن هاته الدالة هي تابعة لكلاس DisplayObject فان هذا الاخير يوفر وظيفتين getBounds() و getRect() لمعرفة احداثيات اطار العنصر والتحكم فيها ولمزيد التعرف عليهما اضغط هنا .
    بعد أن تعرفنا على كيفية اختبار التصادم او التلامس بين كائنين لنتعرف الان على كيفية اختبار كائن بمفرده في المسرح على سبيل المثال تجاوز احداثيات معينة نحددها نحن أو تجاوز احداثيات مسرح العمل بنفسه كما تمثله الصورة التالية :



    لنختبر الان حدود مسرح العمل من خلال اضافة مربع يتبع الماوس وكل ما عليك هو تحريك الماوس في كل الاتجهات اذن افتح مشروع جديد واضف مباشرة هذا الكود

    كود:
    var rectangle:Shape = new Shape();
    rectangle.graphics.beginFill(0x00BB00);
    rectangle.graphics.drawRect(-50, -50, 100, 100);
    addChild(rectangle);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, deplacer);
    
    function deplacer(event:MouseEvent):void
    {
    rectangle.x = event.stageX;
    rectangle.y = event.stageY;
    }
    ستلاحظ أن المربع الأخضر يتبع حركة الماوس في اي اتجاه واذا اردنا مثلا اختبار خروج هذا الكائن
    من حدود مسرح العمل سنضيف بعض الجمل الشرطية ليصبح الكود الكامل على الشكل التالي :
    عوض هذا الكود بالسابق
    كود:
     var rectangle:Shape = new Shape();
    rectangle.graphics.beginFill(0x00BB00);
    rectangle.graphics.drawRect(-50, -50, 100, 100);
    addChild(rectangle);
    
    stage.addEventListener(MouseEvent.MOUSE_MOVE, deplacer);
    function deplacer(event:MouseEvent):void
    {
    rectangle.x = event.stageX;
    rectangle.y = event.stageY;
    if (rectangle.x - rectangle.width / 2 < 0)
    {
    trace("الى اليسار");
    }
    if (rectangle.y - rectangle.height / 2 < 0)
    {
    trace("الى الأعلى");
    }
    if (rectangle.x + rectangle.width / 2 > stage.stageWidth)
    {
    trace("الى اليمين");
    }
    if (rectangle.y + rectangle.height / 2 > stage.stageHeight)
    {
    trace("الى الأسفل");
    }
    }
    hitTestPoint()


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


    نشرح الأمر افتح مشروع جديد اضف دائرة وحولها الى موفي كليب اعطه اسم maCible وفي طبقة الاكشن
    اضف الكود التالي :

    كود:
    stage.addEventListener(MouseEvent.MOUSE_DOWN, tir);
    function tir(event:MouseEvent):void
    {
    if (maCible.hitTestPoint(event.stageX, event.stageY, true)) {
    trace("لمس الهدف");
    }
    }
    افتراضيا اي عنصر تضيفه الى المسرح يكون داخل اطار ازرق حاول تغيير القيمة في الكود اعلاه من true الى false واختبر تلامس الماوس مع العنصر المذكور وركز في حدود الاطار يعني الفراغات واضغط هناك

    تطبيق لعبة بسيطة كشرح لهاته الدالة

    افتح مشروع جديد واضف فقط الكود التالي ويتعلق بانشاء نسخة من الكائن Shape عبارة عن دائرة واضافتها وسط المسرح من خلال الاحداثيات الاكس والواي

    كود:
    var cible:Shape = new Shape();
    cible.graphics.beginFill(0x880088);
    cible.graphics.drawCircle(0, 0, 50);
    cible.x = stage.stageWidth / 2;
    cible.y = stage.stageHeight / 2;
    addChild(cible);
    var score:int = 0;

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

    كود:
    var vitesseX:int = 1 + Math.random() * 10;
    var vitesseY:int = 1 + Math.random() * 10;
    
    addEventListener(Event.ENTER_FRAME, deplacer);
    function deplacer(event:Event):void
    {
    cible.x += vitesseX;
    cible.y += vitesseY;
    if (cible.x - cible.width / 2 < 0)
    {
    cible.x = cible.width / 2;
    vitesseX = - vitesseX;
    }
    if (cible.y - cible.height / 2 < 0)
    {
    cible.y = cible.height / 2;
    vitesseY = - vitesseY;
    }
    if (cible.x + cible.width / 2 > stage.stageWidth)
    {
    cible.x = stage.stageWidth - cible.width / 2;
    vitesseX = - vitesseX;
    }
    if (cible.y + cible.height / 2 > stage.stageHeight)
    {
    cible.y = stage.stageHeight - cible.height / 2;
    vitesseY = - vitesseY;
    }
    }
    لنستطيع مثلا اضافة تفاعل المستخدم مع هذا الكائن من خلال ضغطات الماوس ونعطيه مقدار 10
    نقاط عند اصابته للكائن نضيف هذا السطر من الاسفل

    كود:
    stage.addEventListener(MouseEvent.CLICK, tir);
    function tir(event:MouseEvent):void
    {
    if (cible.hitTestPoint(event.stageX, event.stageY, true))
    {
    score += 10;
    trace("Score : " + score);
    }    
    }
    الشرح القادم هو تبسيط اكثر لما سبق ذكره بارفاق ملفات مفتوحة مختلفة بخصوص ما يمكن انجازه




  • #2
    بسم الله الرحمن الرحيم

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

    الملف الاول ملف عادي يتمثل في اختبار تصادم كائنين مع اضافة حقل نصي يبرز نتيجة التحقق السالبة والموجبة

    http://download.mrkzy.com/e/0115_8d4ba488f2321.swf

    الملف الثاني يشبهه واضفت فيه موفي كليب وتشغيل ملف صوتي يعملان في حالة التصادم

    http://download.mrkzy.com/e/0115_4c842b2532cb1.swf


    الملف الثالث متقدم نوعا ما يبرز مايمكن انجازه بهاته الدالة انت من الجهة اليسرى حاول ان لاتدخل الكرة في شباكك .
    http://download.mrkzy.com/e/0115_23c0106918201.swf


    الملفات المفتوحة في المرفقات
    الملفات المرفقة

    تعليق


    • #3
      أهلا بعودتك الى الشرح نريد المزيد من الشروحات حتى نتمكن من الفلاش ولغته

      تعليق


      • #4
        قمت بتجربة الشرح على أكثر من كود
        الشرح غاية الوضوح والبساطة
        وفر كثير من الوقت وأوصل الفكرة من أقصر الطرق
        شكرا جزيلا اخى عزيز
        ونتمنى مزيد من الشروحات والدروس مثل هذا الدرس الممتع والهادف

        تعليق


        • #5
          جزاك الله خيرا أخى عزيز

          ماشاء الله عودا حميدا وجهد مشكور

          بارك الله فيك ياطيب

          تعليق


          • #6
            بسم الله الرحمن الرحيم

            اشكر لكم حضوركم الطيب اخواني
            وفقكم الله

            تعليق


            • #7
              بارك الله فيك اخانا شريف

              جهود طيبة وشرح متأني

              تعليق


              • #8
                شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

                تعليق


                • #9
                  السلام عليكم ورحمة الله وبركاته

                  تعليق


                  • #10
                    نفعنا الله بكم

                    تعليق


                    • #11
                      شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

                      تعليق


                      • #12
                        شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

                        تعليق


                        • #13
                          السلام عليكم ورحمة الله وبركاته. لك كل الشكر و التقدير

                          تعليق


                          • #14
                            شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

                            تعليق

                            مواضيع تهمك

                            تقليص

                            المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 06-08-2025 الساعة 11:33 PM
                            المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 06-04-2025 الساعة 05:29 PM
                            المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 05-31-2025 الساعة 10:07 PM
                            المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 05-30-2025 الساعة 11:48 PM
                            المنتدى: التصنيع والانتاج نشرت بواسطة: HaMooooDi الوقت: 05-30-2025 الساعة 09:36 AM
                            يعمل...
                            X