azizsoft
01-02-2015, 06:27 PM
http://img39.imageshack.us/img39/1332/virusx.gif
التصادم
Collisions
التصادم هو ملامسة كائنين أو أكثر لبعضهما البعض على سبيل المثال لاحظ هاته الصورة اصطدام سيارة بحائط نحن نلاحظ هذا المشهد بالعين المجردة وفي برنامج الفلاش كيف نعرف أو نتحقق من هذا التصادم من عدمه ذلك ما سنتناوله في هذا الموضوع .
http://www.mediafire.com/convkey/09b7/041sht8882d4z47zg.jpg
اختبار التصادم :
مهم جدا ان نتعرف على هاته الجزئية في لغة اكشن سكريبت وكيف يتم التعامل مع الكائنات واختبار عملية التلامس أو التصادم من عدمه فعند وصولنا الى طريقة انجازها بكل يسر في مشروع معين يمكن أن ننفذ بواسطتها أفكار وتفطبيقات عديدة .
نمر مباشرة للموضوع بشرح يسير ليستفيد المتلقي بأكثر قدر .
طرق التصادم
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);
ستلاخظ الصورة التالية
http://www.mediafire.com/convkey/135d/57vbn5t88vgbfuezg.jpg
الكود السابق هو عبارة على اضافة كائنين مربع اول ومربع ثاني بالاحداثيات والخصائص المبينة ونلاحظ بالعين المجردة أنهما متلامسين وكيف سنتاكد برمجيا
من ذلك ؟
سيكون عن طريق الدالة hitTestObject() اذن نضيف سطر تحت الكود السابق وهو التالي :
trace(obj1.hitTestObject(obj2));
عند تجربة المشروع ستلاحظ في نافذة المخرجات القيمة true وهذا طبيعي باعتبار تحقق التلامس او التصادم
الان فوق هذا السطر الاخير trace اضف هذا الكود ليصبح كما يلي :
obj2.y = 100
trace(obj1.hitTestObject(obj2));
ستلاحظ في نافذة المخرجات القيمة false وهذا طبيعي باعتبار عدم تحقق التصادم او التلامس
هاته الدالة hitTestObject() لاتختبر التلامس بين الكائنات في حد ذاتها ولكن تختبر فقط على احداثيات الاطار الخارجي للعنصر ولاحظ الصورة التالية
http://www.mediafire.com/convkey/c670/d78hy2h4uhk3dbwzg.jpg
يعني يتم اختبار التلامس بين حدود اطار الكائن وليس الكائن نفسه واعتبارا أن هاته الدالة هي تابعة لكلاس DisplayObject فان هذا الاخير يوفر وظيفتين getBounds() و getRect() لمعرفة احداثيات اطار العنصر والتحكم فيها ولمزيد التعرف عليهما اضغط هنا (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#getBounds%28%29) .
بعد أن تعرفنا على كيفية اختبار التصادم او التلامس بين كائنين لنتعرف الان على كيفية اختبار كائن بمفرده في المسرح على سبيل المثال تجاوز احداثيات معينة نحددها نحن أو تجاوز احداثيات مسرح العمل بنفسه كما تمثله الصورة التالية :
http://www.mediafire.com/convkey/d036/42wtd82b6boss3azg.jpg
لنختبر الان حدود مسرح العمل من خلال اضافة مربع يتبع الماوس وكل ما عليك هو تحريك الماوس في كل الاتجهات اذن افتح مشروع جديد واضف مباشرة هذا الكود
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 يتم الاختبار على اطار هذا العنصر وهاته الطريقة تصبح هامة جدا خصوصا عند برمجة لعبة صيد حيونات أو قنص
وهنا تكون هاته الدالة لازمة لاختبار تلامس مؤشر الماوس مع مكان مدقق في الكائن الضحية كما في الصورة
http://www.mediafire.com/convkey/2b16/a5if3dvbc3f69q1zg.jpg
نشرح الأمر افتح مشروع جديد اضف دائرة وحولها الى موفي كليب اعطه اسم 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);
}
}
الشرح القادم هو تبسيط اكثر لما سبق ذكره بارفاق ملفات مفتوحة مختلفة بخصوص ما يمكن انجازه
http://up.graaam.com/img/c254fbbb25128f204e18c9c273464a02.png
التصادم
Collisions
التصادم هو ملامسة كائنين أو أكثر لبعضهما البعض على سبيل المثال لاحظ هاته الصورة اصطدام سيارة بحائط نحن نلاحظ هذا المشهد بالعين المجردة وفي برنامج الفلاش كيف نعرف أو نتحقق من هذا التصادم من عدمه ذلك ما سنتناوله في هذا الموضوع .
http://www.mediafire.com/convkey/09b7/041sht8882d4z47zg.jpg
اختبار التصادم :
مهم جدا ان نتعرف على هاته الجزئية في لغة اكشن سكريبت وكيف يتم التعامل مع الكائنات واختبار عملية التلامس أو التصادم من عدمه فعند وصولنا الى طريقة انجازها بكل يسر في مشروع معين يمكن أن ننفذ بواسطتها أفكار وتفطبيقات عديدة .
نمر مباشرة للموضوع بشرح يسير ليستفيد المتلقي بأكثر قدر .
طرق التصادم
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);
ستلاخظ الصورة التالية
http://www.mediafire.com/convkey/135d/57vbn5t88vgbfuezg.jpg
الكود السابق هو عبارة على اضافة كائنين مربع اول ومربع ثاني بالاحداثيات والخصائص المبينة ونلاحظ بالعين المجردة أنهما متلامسين وكيف سنتاكد برمجيا
من ذلك ؟
سيكون عن طريق الدالة hitTestObject() اذن نضيف سطر تحت الكود السابق وهو التالي :
trace(obj1.hitTestObject(obj2));
عند تجربة المشروع ستلاحظ في نافذة المخرجات القيمة true وهذا طبيعي باعتبار تحقق التلامس او التصادم
الان فوق هذا السطر الاخير trace اضف هذا الكود ليصبح كما يلي :
obj2.y = 100
trace(obj1.hitTestObject(obj2));
ستلاحظ في نافذة المخرجات القيمة false وهذا طبيعي باعتبار عدم تحقق التصادم او التلامس
هاته الدالة hitTestObject() لاتختبر التلامس بين الكائنات في حد ذاتها ولكن تختبر فقط على احداثيات الاطار الخارجي للعنصر ولاحظ الصورة التالية
http://www.mediafire.com/convkey/c670/d78hy2h4uhk3dbwzg.jpg
يعني يتم اختبار التلامس بين حدود اطار الكائن وليس الكائن نفسه واعتبارا أن هاته الدالة هي تابعة لكلاس DisplayObject فان هذا الاخير يوفر وظيفتين getBounds() و getRect() لمعرفة احداثيات اطار العنصر والتحكم فيها ولمزيد التعرف عليهما اضغط هنا (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#getBounds%28%29) .
بعد أن تعرفنا على كيفية اختبار التصادم او التلامس بين كائنين لنتعرف الان على كيفية اختبار كائن بمفرده في المسرح على سبيل المثال تجاوز احداثيات معينة نحددها نحن أو تجاوز احداثيات مسرح العمل بنفسه كما تمثله الصورة التالية :
http://www.mediafire.com/convkey/d036/42wtd82b6boss3azg.jpg
لنختبر الان حدود مسرح العمل من خلال اضافة مربع يتبع الماوس وكل ما عليك هو تحريك الماوس في كل الاتجهات اذن افتح مشروع جديد واضف مباشرة هذا الكود
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 يتم الاختبار على اطار هذا العنصر وهاته الطريقة تصبح هامة جدا خصوصا عند برمجة لعبة صيد حيونات أو قنص
وهنا تكون هاته الدالة لازمة لاختبار تلامس مؤشر الماوس مع مكان مدقق في الكائن الضحية كما في الصورة
http://www.mediafire.com/convkey/2b16/a5if3dvbc3f69q1zg.jpg
نشرح الأمر افتح مشروع جديد اضف دائرة وحولها الى موفي كليب اعطه اسم 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);
}
}
الشرح القادم هو تبسيط اكثر لما سبق ذكره بارفاق ملفات مفتوحة مختلفة بخصوص ما يمكن انجازه
http://up.graaam.com/img/c254fbbb25128f204e18c9c273464a02.png