Flash AS 3.0 – ทำให้วัตถุที่ต้องการหันตามเมาส์หรือวัตถุอื่นๆ

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

จากรูปวงกลมหนึ่งหน่วย

สิ่งที่เรารู้คือ
y คือด้านตรงข้ามมุม หาได้จากผลต่างของตำแหน่งของเมาส์ในแกน x กับตำแหน่งของวัตถุในแกน x
x คือด้านประชิดมุม หาได้จากผลต่างของตำแหน่งของเมาส์ในแกน y กับตำแหน่งของวัตถุในแกน y

ควาวนี้สิ่งที่เราต้องหาคือมุม θ ของวัตถุที่ทำกับเมาส์ ถ้าเรารู้มุมก็จะให้วัตถุหมุนไปตามมุมนั้น วัตถุก็จะเหมือนมองไปยังเมาส์ เข้าใจป่ะ ? ฮ่าๆๆ

ความยาวที่เรารู้ก็คือ ข้าม/ชิด = y/x = tan
ในคลาส Math ของ AS3
มีอยู่ 3 ตัวที่เกี่ยวข้อง ลองพิจารณาดูก่อน ว่าเราจะให้เมธอดอะไรดีในการคำนวน

1. Math.tan(x:Number) ใส่ค่ามุมเป็นเรเดียน คืนค่าเป็นค่าของ Tangent
– เราไม่รู้มุมเรเดียน จึงใช้เมธอดนี้ไม่ได้

2. Math.atan(x:Number) ใส่ค่าของ Tangent เพื่อหาค่าของมุมเป็นเรเดียน
– เรารู้ค่าของ tan ซึ่งก็คือ อัตราส่วนของ y/x จึงใช้เมธอดนี้ได้ ซึ่งมันจะคืนค่าเป็นเรเดียน เมื่อลองใช้ดูจะพบว่ามันจะคืนค่าเป็นเรเดียนอยู่ระหว่าง -π/2 กับ +π/2 ซึ่งจะเป็นรูปครึ่งวงกลมฝั่งขวาเท่านั้น ถ้าเราเลื่อนเมาส์มาฝั่งซ้าย มุมของวัตถุกับเมาส์ื มันจะอยู่ตรงข้ามกันทันที เพราะฉะนั้นเมธอดนี้ยังคงใช้ไม่ได้

3. Math.atan2(y:Number,x:Number)
– มาถึงเมธอดอีกอันซึ่งมันจะให้ใส่ค่าความยาว y และ x แล้วมันจะหาอัตราส่วน คืนค่าออกมาเป็นมุมเรเดียน ซึ่งเราจะใช้ตัวนี้แหละ เพราะเห็นหลายๆ คนเขาก็ใช้ตัวนี้
จากนั้น เราต้องแปลงจาก เรเดียนเป็นองศา ถึงจะเอาไปใช้ได้

ที่ผ่านมาด้านบน ลืมๆ ไปซะ ผมแค่อยากจะอธิบายที่มาที่ไปเฉยๆ ว่าทำไมต้องใช้ atan2 แต่ก็ต้องบอกว่าผมเองก็ไม่เก่งคณิตศาสตร์เลยอ่ะ -.- ถ้าผิดก็บอกได้ครับ

เอาล่ะ มาทำให้วัตถุหันตามเมาส์กันดีกว่า

1. วาดรูปอะไรซักอย่าง แล้วแปลงเป็น Symbol [F8] ตั้งชื่อ mc

**โดยด้านที่จะให้หันไปนั้น จะต้องขนาดกับแกน x ซึ่งหมายถึงการเริ่มที่ 0 องศา

2. เปิดแถบ action โดยคลิกที่เฟรมแล้วกด [F9] หรือคลิกขวาแล้วเลือก Action
– หาความยาวของด้าย x,y
ตำแหน่งวัตถุที่เป็นผู้นำ – ตำแหน่งวัตถุที่จะให้หันตาม (ทั้งในแกน x และ y)
จะได้
mouseX – mc.x;
mouseY – mc.y;

– ใช้เหตุการณ์ Mouse Move หรือจะใช้ Enter Frame ก็ได้

– การแปลงเรเดียนเป็นองศา หรือองศาเป็นเรเดียนมีสูตรอยู่ว่า
radians = degrees * Math.PI/180
degrees = radians * 180/Math.PI

โค้ดทั้งหมด

import flash.events.MouseEvent;
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
function onMove(evt:MouseEvent):void
{
var distanceX:Number = mouseX - mc.x;
var distanceY:Number = mouseY - mc.y;
var radians:Number = Math.atan2(distanceY,distanceX);
var degrees:Number = radians * 180 / Math.PI; //แปลงเรเดียนเป็นองศา
mc.rotation = degrees;
}

ตัวอย่าง

แค่นี้แหละ ง่ายมาก โอ้วเสร็จแล้วหรอ แล้วมันเอาไปทำอะไรได้เนี่ย -3-
ก็แล้วแต่จะเอาไปประยุกต์ (อีกและ) เช่นทำเกมที่ให้ยานหันตามเมาส์ แล้วเรากดยิง ทำตาหันตามเมาส์ หรือจะหันตามวัตถุอย่างอื่นก็ได้

ลองดูอีกตัวอย่าง
มีลูกศร 3 อัน ให้ สีแดงหันไปทางสีเขียว, สีเขียวหันไปทางสีดำ, สีดำหันไปทางสีแดง

โค้ดทั้งหมด

stage.addEventListener(Event.ENTER_FRAME, onFollow);
for (var i:int =1; i<=3; i++)
{
var mymc:MovieClip= null;
mymc = this["mc" + i];
mymc.buttonMode = true;
mymc.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
mymc.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
}
function onDrag(evt:Event):void{
evt.currentTarget.startDrag();
}
function onStopDrag(evt:Event):void{
evt.currentTarget.stopDrag();
}

function onFollow(evt:Event):void{
//mc 1
var disX:Number = mc2.x – mc1.x;
var disY:Number = mc2.y – mc1.y;
var radians:Number = Math.atan2(disY,disX);
var degrees:Number = radians * 180 / Math.PI;
mc1.rotation = degrees;
//mc 2
var disX2:Number = mc3.x – mc2.x;
var disY2:Number = mc3.y – mc2.y;
var radians2:Number = Math.atan2(disY2,disX2);
var degrees2:Number = radians2 * 180 / Math.PI;
mc2.rotation = degrees2;
//mc 3
var disX3:Number = mc1.x – mc3.x;
var disY3:Number = mc1.y – mc3.y;
var radians3:Number = Math.atan2(disY3,disX3);
var degrees3:Number = radians3 * 180 / Math.PI;
mc3.rotation = degrees3;
}

สำหรับวันนี้ Zzz

Ref.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Math.html