แนวคิด / แนวทาง : ต้องทราบค่าของมุมก่อนแล้วใช้การเปลี่ยนค่า x, y ของวัตถุในแต่ละเฟรมที่แสดงบนหน้าจอด้วยสูตรเชิงมุมกับตำแหน่งเริ่มต้น
วิธีการ / ขั้นตอน : การทราบมุมก็เหมือนกับการกำหนดทิศทางการเคลื่อนที่ของวัตถุ ใน ActionScript จะต้องใช้ค่าของมุมในหน่วย radian หากทราบค่าในหน่วย degree (องศา) ต้องทำการเปลี่ยนให้เป็นค่า radian ด้วยสูตร แต่เพิ่อให้ง่ายในการออกแบบแล้วเรามักนิยมรับค่ามาเป็น degree ก่อนแล้วเปลี่ยนเป็น radian
radian = degree* Matha.PI /180
แล้วหาค่าการเปลี่ยนแปลงของ x และ y ด้วย สูตร
Xnew = Xold+speed * Math.cos(radian);
Ynew = Yold+speed * Math.sin(radian);
จาก สมการจะเห็นว่าเราต้องการทราบค่าตัวแปรอีกตัวหนึ่งคือ speed ซึ่งเป็นค่าของอัตราการเพิ่มขึ้นหรือลดลงของตำแหน่งวัตถุมีหน่วยเป็น pixel / time
ใช้แนวคิดนี้ร่วมกับการใช้ TimerEvent.TIMER ก็จะทำให้วัตถุมีการเคลื่อนที่แบบเชิงมุมได้
package{
import flash.display.Sprite;
import flash.events.Events;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class AngularMovingObj extends Sprite{
private var _speed:Number = 4; /**** 4 pixels per second ****/
private var _angle:Number=100; /**** degree ****/
public function AngularMovingObj(){
this.drawMe();
this.setPosition(300,30);
var timer:Timer = new Timer(1000,0);
timer.addEventListener(“timer”,moveMe);
/**** change degree to radian ****/
this._angle=this._angle*Math.PI/180;
timer.start();
}
public function setPosition(x:Number,y:Number):void{
this.x=x;
this.y=y;
}
private function drawMe():void{
/**** to draw a red circle with 50 pixels radias ****/
this.graphics.beginFill(0xFF0000,200);
this.graphics.drawCircle(0,0,50);
this.graphics.endFill();
}
private function moveMe(e:TimerEvent):void{
/**** recompute x,y ****/
var newX:Number = Math.cos(this._angle) * this._speed;
var newY:Number = Math.sin(this._angle) * this._speed;
/**** to change position of object ****/
this.x+=newX;
this.y+=newY;
}
}
}
ท่านสามารถทดสอบเปลี่ยนค่าของ _angle, _speed และตำแหน่งเริ่มต้นของวัตถุแล้วสังเกตุผลได้
See Demo
ระดับความยาก : 3
เอกสารอ้างอิง : 1 http://en.wikipedia.org/wiki/Trigonometric_functions
2.http://wonderfl.net/c/hCGO
คำค้น : angular moving,trigonometric,moving object,events,timer,graphics properties
วิธีการ / ขั้นตอน : การทราบมุมก็เหมือนกับการกำหนดทิศทางการเคลื่อนที่ของวัตถุ ใน ActionScript จะต้องใช้ค่าของมุมในหน่วย radian หากทราบค่าในหน่วย degree (องศา) ต้องทำการเปลี่ยนให้เป็นค่า radian ด้วยสูตร แต่เพิ่อให้ง่ายในการออกแบบแล้วเรามักนิยมรับค่ามาเป็น degree ก่อนแล้วเปลี่ยนเป็น radian
radian = degree* Matha.PI /180
แล้วหาค่าการเปลี่ยนแปลงของ x และ y ด้วย สูตร
Xnew = Xold+speed * Math.cos(radian);
Ynew = Yold+speed * Math.sin(radian);
จาก สมการจะเห็นว่าเราต้องการทราบค่าตัวแปรอีกตัวหนึ่งคือ speed ซึ่งเป็นค่าของอัตราการเพิ่มขึ้นหรือลดลงของตำแหน่งวัตถุมีหน่วยเป็น pixel / time
ใช้แนวคิดนี้ร่วมกับการใช้ TimerEvent.TIMER ก็จะทำให้วัตถุมีการเคลื่อนที่แบบเชิงมุมได้
package{
import flash.display.Sprite;
import flash.events.Events;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class AngularMovingObj extends Sprite{
private var _speed:Number = 4; /**** 4 pixels per second ****/
private var _angle:Number=100; /**** degree ****/
public function AngularMovingObj(){
this.drawMe();
this.setPosition(300,30);
var timer:Timer = new Timer(1000,0);
timer.addEventListener(“timer”,moveMe);
/**** change degree to radian ****/
this._angle=this._angle*Math.PI/180;
timer.start();
}
public function setPosition(x:Number,y:Number):void{
this.x=x;
this.y=y;
}
private function drawMe():void{
/**** to draw a red circle with 50 pixels radias ****/
this.graphics.beginFill(0xFF0000,200);
this.graphics.drawCircle(0,0,50);
this.graphics.endFill();
}
private function moveMe(e:TimerEvent):void{
/**** recompute x,y ****/
var newX:Number = Math.cos(this._angle) * this._speed;
var newY:Number = Math.sin(this._angle) * this._speed;
/**** to change position of object ****/
this.x+=newX;
this.y+=newY;
}
}
}
ท่านสามารถทดสอบเปลี่ยนค่าของ _angle, _speed และตำแหน่งเริ่มต้นของวัตถุแล้วสังเกตุผลได้
See Demo
ระดับความยาก : 3
เอกสารอ้างอิง : 1 http://en.wikipedia.org/wiki/Trigonometric_functions
2.http://wonderfl.net/c/hCGO
คำค้น : angular moving,trigonometric,moving object,events,timer,graphics properties
ความคิดเห็น
แสดงความคิดเห็น