อนุบาลงาน ActionSctipt

เย้ ชนะแล้ว ต้องโกงเท่านั้น

shapeFlag เป็น false เอาไว้เช็ค วัตถุ กับ วัตถุ
shapeFlag เป็น true เอาไว้เช็ค จุด กับ วัตถุ

พอ true แล้ว มันเช็ค วัตถุตามรูป shape ได้ แต่ อีกวัตถุต้องเป็นจุดเท่านั้น
มันไม่มีวิธีที่ทำให้  เช็คตามรูป shape ทั้งคู่ ( ใช่ไหม )


จึงลองทำแบบ sensor หลายๆตัว ซึ่งแม่นยำกว่า


แต่ก็แค่นั้น .... ไม่รู้เอามาใช้อะไรอ่ะ พอรู็เรื่องแล้ว
เดี๋ยวทำแบบ sensor มาทิ้งไว้ให้ดูครับ

ว่าแต่ นี่มันอนุบาลแน่เรอะ

  น่าจะ... นะครับ.....
















น้าแอ๊ดเริ่มนะ ผมไม่เกี่ยว 

[hitTest()]

  อนุบาลสิน่า เพราะยังไม่ได้เขียนเลย จารย์ก่อไม่เขียนงั้นผมมั่วล่ะนะ

เริ่มด้วยง่ายๆที่สุด การชนกันของวัตถุ เราจะเช็ค โดยใช้ hitTest()

hitTest(target:Object):Boolean
และ
hitTest(x:Number, y:Number, [shapeFlag:Boolean]):Boolean

คำสั่งนี้จะรีเทอร์นค่าเป็น true หรือ flase

ตัวอย่าง 1 เช่น

<a href="http://img3.f0nt.com/flash/73a40a90438574a399ac58fe6495939b.swf" target="_blank">http://img3.f0nt.com/flash/73a40a90438574a399ac58fe6495939b.swf</a>

ลองลาก ufo มาชนดูครับ 

จากโค้ด

ufo_mc.onPress = function() {
   this.startDrag();
   this.onEnterFrame = function() {
      if (plan_mc.hitTest(ufo_mc)) {
         txt = "HIT !!!";
      } else {
         txt = "";
      }
   };
};
ufo_mc.onRelease = function() {
   delete this.onEnterFrame;
   this.stopDrag();
};

จากโค้ด จะเห็นว่า เราใช้แบบแรก  plan_mc.hitTest(ufo_mc) ( กรณีนี้ shapeFlag = false ครับ )
ซึ่งวิธีนี้ การตรวจการชนจะเป็นแบบกรอบสี่เหลี่ยม ( bounding box  )

- ไม่ว่าวัตถุจะรูปทรงใดก็แล้วแต่ พื้นที่การตรวจจะเป็นสี่เหลี่ยมทั้งคู่แบบในรูปเป็นต้น 

ufo_mc
plan_mc


ตัวอย่าง 2 shapeFlag = true

<a href="http://img3.f0nt.com/flash/8b049dfded250b20d80433c8dda5258a.swf" target="_blank">http://img3.f0nt.com/flash/8b049dfded250b20d80433c8dda5258a.swf</a>

ufo_mc.onPress = function() {
   this.startDrag();
   this.onEnterFrame = function() {
      if (plan_mc.hitTest(ufo_mc._x,ufo_mc._y,true)) {
         txt = "HIT !!!";
      } else {
         txt = "";
      }
   };
};
ufo_mc.onRelease = function() {
   delete this.onEnterFrame;
   this.stopDrag();
};

จากโค้ด plan_mc.hitTest(ufo_mc._x,ufo_mc._y,true)
จะเห็นว่า การชนจะขึ้นอยู่กับ รูปร่างของวัตถุ กับ จุด x,y ( x and y coordinates )  ของคู่กรณี
ีจะชนต่อเมื่อ จุด x,y coordinates  ของ ufo_mc  ชนกับ plan_mc ตามรูปร่าง (shape)
จากตัวอย่างนั้น จุด x,y coordinates ของ ufo_mc จะอยู่กลางตามรูป



ทีนี้ลองกลับโค้ดดูครับ

ufo_mc.hitTest(plan_mc._x,plan_mc._y,true)

ก็จะสลับกันล่ะ  จะชนต่อเมื่อ จุด x,y coordinates  ของ plan_mc  ชนกับ ufo_mc ตามรูปร่าง (shape)

<a href="http://img3.f0nt.com/flash/4ded6dfa28809d692d68b8bb1b7400ef.swf" target="_blank">http://img3.f0nt.com/flash/4ded6dfa28809d692d68b8bb1b7400ef.swf</a>







อ้าววววว ..... ถ้าอยากให้มัน ตรวจโดย shape ทั้ง  คนชน และ คู่กรณี ล่ะ

ทีนี้ต้องเรียกประกันให้วุ่นเลยครับพี่น้อง อิอิ 
ใครอยากแจมเชิญโลด

[มังกร]

  

[ไม่ได้]

ต่อเรื่อง hitTest()

ด้วยความอยากลอง จำลองหาวิธีทำ hitTest() ให้มันตรวจด้วยรูป shape ทั้งสองฝ่าย

ปรากฎว่า ไม่ได้ (หรือป่าว ) มันทำได้แค่

- ฝ่ายแรก เป็นรูปทรง
- ฝ่ายที่สอง ต้องเป็นจุด x,y 
( หรือกลับกัน )

จึงใช้วิธีแบบนี้แทน

- ฝ่ายแรก เป็นรูปทรง
- ฝ่ายที่สอง ต้องเป็นจุด x,y หลายๆจุด ( ขอเรียก sensor แล้วกันนิ )

โดยวิธียังมั่วๆอยู่นิดหน่อย และมั่วต่อๆมาอีกจึงรู้มาอีกว่า
ดูภาพนะ


ในภาพเป็น main_mc ที่มี  sub_mc อยู่ข้างใน
พิกัด(ภายใน)ของ  sub_mc คือ  _x = 14 , _y = 0
มันจะเห็น main_mc เป็นรูท ( อธิบายยากแฮะ    ) ขอเรียกว่ามันอิง local นะ
ไม่ว่าเราจะเรียกค่าพิกัด sub_mc._x , sub_mc._y เมื่อไร
มันจะเป็น x = 14 , _y = 0 แม้ว่า main_mc._x , y จะอยู่ที่ไหนในโลก

ปัญหาที่ผมเจอคือ

ผมลองทำ sensor เป็น mc หลายๆ ตัว อยู่ใน main_mc อีกที เพื่อไว้เป็นจุดเช็ค hitTest
แต่เมื่อเช็คเป็นจุด แต่ค่าพิกัดมัน local อยู่ ซึ่งอิงอยู่ใน main_mc ( ไม่ว่าจะเลื่อน main_mc ไปไหน ค่า sub_mc._x , y ก็ไม่เปลี่ยน)
จึงต้องทำค่าให้มันอิงกับ _root หลักก่อนโดย

public localToGlobal(pt:Object) : Void

// Converts the pt object from the movie clip's (local) coordinates to the Stage (global) coordinates.

อธิบายได้ว่า Converts the pt object from the movie clip's (local) coordinates to the Stage (global) coordinates.
ครับ  ก็ตามนั้นนะครับ ถ้ายังไม่เข้าใจก็....
จาร์ก่อ มาอธิบาย localToGlobal(pt:Object) ง่ายๆหน่อยสิครับ เอาวิธีใช้ง่ายๆด้วยนะครับ

ส่วนวิธีใช้ ยัง งงๆ อยู่ครับ แต่พอเข้าใจ ( เอ๊ะยังไง ) คือ ส่วนนี้ยังลอกวิธีเขามานิดหน่อย ( ขอข้ามไปนะ ให้จารย์ก่อมาอธิบาย)


จึงสรุปได้ว่า
ผมใช้วิธีวาง mc หลายๆตัว เป็น sensor ในการเช็ค hitTest แบบนี้ครับ



แล้วเรียงชื่อ ลูปเช็คครับ ( ยิ่งเยอะ ยิ่งละเอียด) ผมลองใช้ 20 จุด
โค้ด เกินอนุบาลไปนิดเดียวเองครับ ลองดู

ufo_mc.onPress = function() {
   this.startDrag();
   _root.onEnterFrame = function() {
      for (i=1; i<=20; i++) {
         this["point"+i] = {x:ufo_mc["chkmc"+i]._width/2, y:ufo_mc["chkmc"+i]._height/2};
         ufo_mc["chkmc"+i].localToGlobal(this["point"+i]);
         if (plan_mc.hitTest(this["point"+i].x, this["point"+i].y, true)) {
            txt.gotoAndPlay(2)
         }
      }
   };
};
ufo_mc.onRelease = function() {
   delete _root.onEnterFrame;
   this.stopDrag();
};

<a href="http://img3.f0nt.com/flash/0f9f4910a9382528b2ced40e504880b6.swf" target="_blank">http://img3.f0nt.com/flash/0f9f4910a9382528b2ced40e504880b6.swf</a>

ทีนี้ก็สามารถเช็คละเอียดๆ ได้แล้วครับ
แต่ อันนี้ดูเป็นแนวนะครับ โค้ดนี้ใช้งานจริงยังไม่ได้นะครับ
มันจะทำงานหนึ่งครั้ง ต่อ 1 sensor  หาก โดนทั้ง 20 sensor ก็จะทำงาน 20 ครั้งครับ
จริงๆน่าจะลูปเก็บเป็นอาเรย์ครั้งเดียวดีกว่า หรือใครคิดออกเอามาแจมเลยครับ ตอนนี้หมดมุขแล้ว 

เขียนๆทำๆไว้ก่อนไว้มาอ่านทีหลังจะได้ไม่ลืม 

[MovieClip A]

มีพาดพิงด้วยอะ 

ส่วนมาก localToGlobal นี่ ผมไม่ค่อยได้ใช้เลยครับ เพราะเราก็สามารถคำนวณเองได้ง่ายๆ
แบบนี้ครับ

สมมติให้
- MovieClip A รูปสี่เหลี่ยม วางอยู่บน Stage ที่พิกัด 100,100
- MovieClip B รูปสี่เหลี่ยม วางอยู่ใน MovieClip A ที่พิกัด 100,100
- ทั้ง A และ B ต่างก็มี Registration Point (จุดกากบาทที่ใช้อ้างอิงตำแหน่ง) อยู่มุมซ้ายบนของรูป

เอาละครับ ถ้าจะเรียกค่าตำแหน่งของ B ล่ะ?
เราก็สามารถเรียกได้ดังนี้

โค้ด:

trace(A.B._x);

ได้ผลคือ 100 ครับ

แต่ 100 นี่คือพิกัดอะไร?
มันคือ พิกัดของ B ที่อ้างจากจุด 0,0 ของ A ครับ (ดูภาพประกอบ ที่เส้นประสีแดง)

แล้วถ้าเราอยากรู้ว่า B มันอยู่ตำแหน่งไหนของ Stage ล่ะ?

ง่ายๆ เลย คือ เราก็เอาพิกัดของ A มาบวกเพิ่มครับ แบบนี้

โค้ด:

trace(A._x + A.B._x);

ได้ผลคือ 200 ครับ
ดังนั้นเราจะได้พิกัดของ B ที่อยู่บน Stage คือ 200

--------------------
แต่ว่า เราจะมานั่ง + ให้วุ่นวายก็ยังไงอยู่
มันเลยมีคำสั่ง localToGlobal มาให้ครับ

**หมายเหตุ**
วิธีใช้คำสั่งนี้ มันจะดูงงๆ หน่อยนะครับ ผมก็ไม่ค่อยเข้าใจทำไมเค้าทำมาแบบนี้เหมือนกัน 
(เป็นเหตุผลหนึ่งที่ผมเลี่ยงไปใช้วิธีชาวบ้านๆ  )

ขั้นแรก ให้ตั้งตัวแปรชนิด Object ขึ้นมาครับ เพื่อเก็บ Local Coordinates หรือ พิกัดภายใน หรือถ้าดูจากรูปที่ผมแปะ มันคือพิกัดของ B ครับ
(ใน Object ต้องมีชื่อตัวแปร x และ y อยู่ครับ ชื่ออื่นไม่ได้)

โค้ด:

var BPoint = {x: A.B._x, y: A.B._y};

ลองดูค่าพิกัดซิ...

โค้ด:

trace( BPoint.x + ":" + BPoint.y );

ได้ออกมาว่า

100:100

จากนั้น ให้เราทำการเรียก localToGlobal ที่ MovieClip ที่เราอ้างจุดกำเนิดมันมาครับ (อธิบายไงดีหว่า) ถ้าดูจากรูป นั่นคือ MovieClip A น่ะครับ
(เพราะ B อยู่ใน A และพิกัดของ B นั้น จะอ้างอิงจากจุดกำเนิดของ A ครับ)
แล้วก็เอาพิกัดของ B ใส่เข้าไป

โค้ด:

A.localToGlobal( BPoint );

เสร็จแล้ว โปรแกรมจะคำนวณผลพิกัดให้ แล้วเอาค่า ไปแทนที่ค่า x และ y ใน BPoint ให้เองครับ

โค้ด:

trace( BPoint.x + ":" + BPoint.y );

จะได้ผลคือ

200:200

สรุปโค้ดอีกที

โค้ด:

var BPoint = {x: A.B._x, y: A.B._y};
trace( BPoint.x + ":" + BPoint.y ); //100:100

A.localToGlobal( BPoint );

trace( BPoint.x + ":" + BPoint.y ); //200:200

-----------------------

แต่โดยส่วนตัวแล้ว ผมมักจะเช็คแค่ 4 จุดเท่านั้นครับ คือ
- xMin ค่า X ที่ขอบซ้ายของวัตถุ
- xMax  ค่า X ที่ขอบขวาของวัตถุ
- yMin  ค่า Y ที่ขอบบนของวัตถุ
- yMax ค่า Y ที่ขอบล่างของวัตถุ

ซึ่งสามารถหาได้จากคำสั่ง getBounds() ครับผม

โค้ด:

var bounds = A.getBounds();
trace( bounds.xMin );
trace( bounds.xMax );
trace( bounds.yMin );
trace( bounds.yMax );

  ใช้ 4 จุดเองครับ เพราะว่าเกม บางทีถ้าไม่ต้องการความแม่นยำสูงมากๆ ผมก็เอาแค่นี้พอละครับ

ส...ส..ส....ส...ส.ส.สุดยอดดดดดดด   


ขออนุญาต นำข้อมูลไปสอนน้องๆ นะครับ

ปล. มีปัญหากับเรื่อง hit test พอสมควร...แต่รู้สึกตอนนี้โล่งๆ แล้ว

โอ้ว ขอบคุณมากๆ ครับ
เอามาทำเป็นเกมเกิมอะไรเล่นท่าจะสนุกนะ




อ้อ พอดีเคยเจอตัวอย่างในเว็บสอน hitTest เมื่อนานมาแล้วครับ (จำที่มาไม่ได้ละ)
เจอการเช็ก hitTest แบบเช็กตรงขอบของวัตถุด้วยล่ะ แถมเขียนโค้ดไม่ซับซ้อนด้วย
เลยลองทำดู พอเสร็จแล้วมันออกมาเป็นแบบนี้ (ต้องคลิกในแฟลชทีนึงก่อนถึงจะบังคับได้)

<a href="http://img3.f0nt.com/flash/d611f6883551e5c2911ca73a8ab1ca4d.swf" target="_blank">http://img3.f0nt.com/flash/d611f6883551e5c2911ca73a8ab1ca4d.swf</a>

อันนี้คือเขียนโค้ดลงใน mc ตัว อ อ่างเลยครับ
รบกวนจานผู้ชำนาญการช่วยแปลงเป็นโค้ดใน Time Line
ให้เข้าใจง่ายๆ และสละสลวยกว่านี้หน่อยครับ
(พอดีตอนนั้นที่ทำก็แก้มั่วๆ เอาจนได้แบบนี้)


ต้นฉบับ CS3
   v
   v

[มังกร]

ของพี่แอนเช็คยังไงอะครับ กดเอาไอตัวเขียวๆ เดินทะลุ อ ได้นะครับ แล้วก็เหมือนว่าตรงที่เหมือนว่าจะโดนก็กลางลูกเขียวแล้ว

มันมีคำสั่งที่บอกว่า getBound น่ะ
คือเอาขอของก้อนนึงมาปะทะขอบอีกก้อนนึง
ในที่นี้ตูเขียนให้ปกติเราบังคับก้อนเขียวได้อิสระ
แต่พอไปโดน อ ปั๊บ มันจะหนืด

 
เข้าห้องอนุบาล แต่อ่านแล้วปวดกบาลมากครับ 

สงสัยต้องเข้าโรงเรียนกวดวิชาระดับอนุบาลก่อนถึงจะเข้าใจนะเนี่ย ...

ขอทำความเข้าใจกับ  as เยอะๆก่อน แล้วจะแวะมาใหม่นะ ห้องอนุบาล ฯ   

  อ่านหน้าแรกเลยครับ อนุบาลจริงๆ นะ
อย่าพึ่งตกใจครับ หน้าหลังๆ เลยวัยอนุบาลมาแล้วน่ะครับ 

หลังนี่น่าจะเตรียมขึ้นม.ปลายแล้วนะ