Math in Flash

Giảng viên: Pham Tien Dung

Rectangle, Collision detection and Basic Animation

I. Rectangle, drag – drop and masking

II. Collision detection:

III. Basic animation :1. Radian ,degree ,

2. velocity and accleration .

3. Boundary and Friction .

4. Easing and Spring .

Phần I : Drag –Drop and Rectangle

• Rectangle : mội đối tượng hình khối chữ nhật bao gồm có các thuộc tính cơ bản như x, y, width, height

• Đối tượng này được sử dụng rất nhiều trong Flash và thông thường là các trường hợp mà hàm sử dụng cần một tham số truyền vào để xác định diện tích (hay khu vực) ứng dụng và xử lý

VD: hàm startDrag() có tham số thứ hai là một biến kiểu Rectangle để xác định diện tích khu vực drag - drop .

• Drag : Sử dụng hàm startDrag()

• Drop : Sử dụng hàm stopDrag()

• Hai hàm startDrag() và stopDrag() có trong class Sprite chỉ Sprite, MovieClip hoặc các đối tượng custom cấp cao hơn mới có thể sử dụng

• Hàm startDrag() có hai tham số – lockCenter : Boolean – giá trị mặc định là false, sử

dụng điểm registration point của đối tượng làm điểm bắt đầu drag. Nếu giá trị truyền vào là true thí điểm drag là điểm click chuột

– Bounds : Rectangle (giải thích phần dưới)– giá trị mặc định là null, không giới hạn khu vực drag-drop (trừ khi chuột di ra khỏi stage). Nếu có giá trị truyền vào thì khu vực drag-drop sẽ nằm diện tích hình khối đã truyền vào

Masking

• Ý nghĩa và cách sử dụng giống như trong flash IDE.

• Class DisplayObject có một thuộc tính mask để tham chiếu đến đối tượng mask toàn bộ hình ảnh có trong nó (lưu ý là chỉ được sử dụng một mask so với nhiều mask trong flash IDE)

Ví dụ

var objectMask:Sprite = new Sprite();

objectMask.graphics.beginFill(0);

objectMask.graphics.drawCircle(0,0,100);

objectMask.graphics.endFill();

this.addChild(objectMask);

objectMask.x = this.width /2;

objectMask.y = this.height/2;

this.mask = objectMask;

(Hãy thử sử dụng những mã lệnh trên trong một file flash có một bức ảnh làm hình nền xem ).

Phần II : Collision detection

• Các kiểu va chạm cơ bản trong Flash– Va chạm theo đường bound hàm

hitTestObject()– Va chạm theo điểm hàm hitTestPoint()

• Sử dụng hàm hitTestObject:

• Bên trong hàm chỉ có một tham số là đối tượng display object được sử dụng để kiểm tra va chạm với đối tượng đã gọi hàm.

• Vd :

• mc1.hitTestObject(mc2) Kiểm tra va chạm của đối tượng mc1 với mc2 (lưu ý cả hai

đều phải là các display object).

• Kiểu xác định va chạm này sử dụng đường bound của 2 đối tượng.

• Ví dụ example\bin\UsingHitTestObject.swf

• Sử dụng hitTestPoint

• Bên trong hàm có 3 tham số, 2 tham số đầu tương ứng với tọa độ x, y của tọa độ cần kiểm chứng. Tham số thứ 3 là một biến boolean xác định xem kiểu va chạm là theo đường biên hay theo hình khối bên trong.

• Ví dụ example\bin\UsingHitTestPoint.swf

Phần III:Basic animation

I. Radian and Degree:1. Khái niệm: Radian và degree đều là những khái niệm để chỉ số đo của một góc,một vòng tròn có 360 degrees (chúng ta hay gọi là độ) tương ứng với 2 PI radians.( 1 PI xấp xỉ bằng 3.1416 ).

Flash sử dụng cả degree và radian :– Degree : Moi người đã quen với khái niệm 360 độ và ở đây

degree ám chỉ số đo góc tính bằng độ. Trong Flash degree thường được sử dụng để xác định hướng và góc quay của đối tượng .

– Radian : Một khái niệm tương đối lạ ,tuy nhiên khi bạn đã làm quen với các con số : 360 degree = 2 Pi radian ; 90 degree = ½ radian thì mọi chuyện sẽ dễ dàng hơn .Trong Flash radian thường dùng để xác định vị trí toạ độ của đối tượng

• Công thức thay đổi giá trị góc giữa radian và degree:

radians = degrees * Math.PI / 180 ;

degrees = radians *180 / Math.PI ;

• Hệ trục toạ độ trong Flash khác với hệ trục toạ độ thực:– Hệ trục toạ độ thực:

– Hệ trục toạ độ trong Flash :

Có trục oy hướng xuống dưới (ngược với thực)

• Số đo góc trong Flash cũng trái ngược với số đo góc thực :– Số đo góc thực :

• Số đo góc trong Flash:

2. Ứng dụng trong Flash:– Xác định góc (hay góc quay của đối tượng):

Object.rotation = angle

// Object.rotation : Góc của đối tượng (mặc định ban đầu là 0 nếu ko được gán giá trị

//angle : số đo góc được gán cho đối tượng (được tính bằng degree tức là mang giá trị từ-180180).

– Tạo các chuyển động hình tròn

Need:• Center position : toạ độ trung tâm• Radius : bán kính hình tròn (khoảng cách giữa đối

tượng và tâm – đơn vị là pitxel)• Angle :Góc quay (phải được chuyển sang radian).

Ví dụ muốn quay một vật theo hình tròn có tâm là trung tâm stage và bán kính là 200:

var angle:int = 5;

var radius:int = 200

var ball:Ball = new Ball();// vật thể là 1 quả bóng

ball.x= stage.stageWidth/2+radius;

addChild(ball);

addEventListener(Event.ENTER_FRAME,rotateBall);

function rotateBall(e:Event):void{

angle +=20;

var radian:Number = angle * Math.PI / 180;

//chuyển số đo góc từ degree sang radian

ball.x=Math.cos(radian) * radius;//vi tri ơ trục x

ball.y=Math.sin(radian)*radius;//vị trí ơ trục y

}

II. Velocity and Accleration :1. Velocity:

• Khái niệm:Velocity (gần giống như vector) là sự tổng hợp của • Direction (phương và hướng)• Speed (độ dài đoẳn thằng – được tính bằng pitxel).• Sự khác biệt lớn nhất giữa vector và velocity là

magnitude(hay độ lớn)của vector luôn dương trong khi velocit có speed âm nghĩa là vector đó có hướng đối diện .

• Một số vector thông thường

Một velocity có speed âm nghĩa là nó quay về phía đối diện:

• Ứng dụng :– Velocity thường được dùng để xác định vị trí

và hướng của đối tượng tại thời điểm tiếp theo (đói với Flash thì thừơng đó là các Frame kế tiếp).

– Velocity thường đựoc xác định nhờ vào :• Toạ độ ban đầu • Speed định sẵn (hay radius);• Góc quay kế tiếp hoặc toạ độ điểm kế .

– Biết trước góc quay :• Thường là các ứng dụng di chuyển đối tượng theo

bàn phím

– Biết trước toạ độ :• Thường để xác định hướng di chuyển cho các đối

tượng tới các đối tượng khác (đuổi theo) như di chuyển theo chuột).

2. Accleration:

• Khái niệm :– Accleration (gia tốc) là sự thay đổi của

velocity theo hướng tăng dần hay giảm dần ,– Velocity thay đổi vị trí của đối

tượng ,accleration thay đổi velocity.

• Ứng dụng:– Accleration sử dụng để tạo ra gia tốc cho đối

tượng (phương tiện di chuyển)– Accleration tạo ra môi trường “giả trọng lực”.

III. Boundary and Friction:

1. Boundary:

– Khái niệm:

• Environments boundary là khái niệm để chỉ khu vực hay giới hạn vùng quan sát (trong Flash thì giới hạn của chúng ta là toàn bộ hay 1 phần của stage).Trong đa số trường hợp thì environments boundary thường là các khối hình chữ nhật.

– Ví dụ:

– Khi ta nói một đối tượng ball có environtment boundary là stage thì có nghĩa là nó bị bao quanh bởi bốn đường biên của stage là top ,bottom, right, left.

if(ball.x > stage.stageWidth) {

// do something

} else if(ball.x < 0) {

// do something

}

if(ball.y > stage.stageHeight) {

// do something

} else if(ball.y < 0) {

// do something

}

• Boundary có nhiều ứng dụng tùy thuộc theo những mục đích riêng, chủ yếu có bốn cách ứng xử khi đối tượng vượt ra khỏi boundary :

– Nó bị xóa đi– Đưa trở lại màn hình và coi như là một đối tượng (ví dụ

như game paddleball).– Đưa trở lại màn hình ở một vị trí khác– Bật ngược trở lại (Bouncing).

• Bouncing:– Khi một vật bật ngược trở lại thi nó thường có :

» Ngược chiều x: nếu va vào right hay left;» Ngược chiêu y : nếu va vào top hay bottom

2. Friction:

• Khái niệm:

– Friction (lực ma sát) là khái niệm để chỉ lực tác động khiến cho veclocity của đối tượng giảm dần về 0 (chỉ giảm speed của veclocity) .

• Ứng dụng:

– Normal way:

» Lấy độ lớn của veclocity trừ đi friction :speed- = friction.

Tuy nhiên friction chỉ có thể giảm veclocity của đối tượng về 0

nên cần có thêm điều kiện

if(speed > friction) speed -= friction;

else speed = 0;

Easy way:Mặc định nếu như ko có friction thì veclocity của đối tượng

sẽ có speed tối đa (speed*1) , nếu có thêm friction, thay vì trừ đi ta sẽ nhân với hiệu của 1 và friction. Chẳng hạn như friction bằng 0.3 thì :

vx*=0.7;

vy*=0.7;

Với cách này ta sẽ không phải quan tâm đến việc speed có lớn hơn friction hay ko

IV. Easing and Spring:

Easing và Spring là 2 khái niệm để chỉ cách di

chuyển của một đối tượng, cả 2 kỹ thuật trên đều có

những điểm chung :– Gán 1 điểm đích– Xác định khoảng cách giữa đối tượng và đích– Chuyển động của đối tượng tỷ lệ với khoảng cách, khoảng

cách càng lớn chuyển động càng lớn

1. Easing:

– Kỹ thuật Easing (chậm dần) được sử dụng thông qua các bước sau:

1. Xác định tỷ lệ chuyển động, số này phải là một phân số của 1(1/2, 1/3, 1/4, 1/5 ….)

2. Xác định đích

3. Tính khoảng cách giữa đích và đối tượng

4. Nhân khoảng cách với tỷ lệ chuyện động xác định ở trên, kết quả sẽ là veclocity của đối tượng.

5. Cộng veclocity đó với vị trí hiện tại

6. Làm lại bước 3 cho đến khi đối tượng đến đích .

• Ví dụ:

Tạo một chuyển động spring của đối tượng ball có

các số liệu sau:• Tọa độ ban đầu là (0,200);• Đích là trung tâm stage• Tỷ lệ chuyển động là 0.2;

Code:

//tỷ lệ chuyển động

var spring:Number=0.2;

//đích đến

var targetX:Number = stage.stageWidth/2;

var targetY:Number = stage.stageHeight/2;

//tạo đối tượng và xác định tọa độ

var ball:Ball=new Ball();

ball.x=0;

ball.y=200;

//bắt sự kiện enterframe

addEventListener(Event.EnterFrame, actionOnFrame);

function actionOnFrame(e:Event):void{

//khoảng cách

var dx:Number = ball.x-target.x;

var dy:Number = ball.y-target.y;

//nhan voi ty le

var vx:Number = dx*spring;

var vy:Number = dy*spring;

//cong voi vi tri hien tai

ball.x+=vx;

ball.y+=vy;

}

2. Spring:

Kỹ thuật Spring (lực kéo) được sử dụng thông qua các

bước sau :

1. Xác định tỷ lệ chuyển động, số này phải là một phân số của 1(1/2, 1/3, 1/4, 1/5 ….)

2. Xác định đích

3. Tính khoảng cách giữa đích và đối tượng

4. Nhân khoảng cách với tỷ lệ chuyện động xác định ở trên, kết quả sẽ là accleration của đối tượng.

5. Cộng accleration đó với veclocity hiện tại.

Khi thử làm một ví dụ giống như trên bạn sẽ thấy một vấn đề đó

là các chuyển động đó sẽ diễn ra liên tục không bao giờ ngững,

cần sử dụng friction để làm chậm chuyển động đó lại .

var spring:Number = 0.2;

var targetX:Number = stage.stageWidth/2;

var targetY:Number = stage.stageHeight/2;

var ball:Ball=new Ball();

ball.x=0;

ball.y=200;

addChild(ball)

//khơi tạo veclocity và accleration

var vx:Number=0;

var vy:Number=0

var ax:Number=0;

var ay:Number=0;

//bắt sự kiện enterframe

addEventListener(Event.ENTER_FRAME, actionOnFrame);

function actionOnFrame(e:Event):void{

//khoảng cách

var dx:Number = targetX – ball.x;

var dy:Number = targetY – ball.y;

//nhan voi ty le

var ax:Number = dx*spring;

var ay:Number = dy*spring;

//cong voi veclocity hien tai

vx+=ax;

vy+=ay;

ball.x+=vx;

ball.y+=vy;

}

var spring:Number = 0.2;

var friction:Number=0.95;

var targetX:Number = stage.stageWidth/2;var targetY:Number = stage.stageHeight/2;var ball:Ball=new Ball();ball.x=0;ball.y=200;addChild(ball)//khơi tạo veclocity và acclerationvar vx:Number=0;var vy:Number=0var ax:Number=0;var ay:Number=0;//bắt sự kiện enterframeaddEventListener(Event.ENTER_FRAME,

actionOnFrame);function actionOnFrame(e:Event):void{//khoảng cáchvar dx:Number = targetX – ball.x;var dy:Number = targetY – ball.y;//nhan voi ty levar ax:Number = dx*spring;var ay:Number = dy*spring;

//cong voi veclocity hien tai

vx+=ax;vx*=friction;

vy+=ay;vy*=friction;

ball.x+=vx;

ball.y+=vy;

}

Home work

1. Tạo một đối tượng “mũi tên” trên màn hình sao cho đầu mũi tên đó luôn quay theo hướng của con chuột.

2. Tạo thêm nhiều đối tượng “ball” xuất hiện và di chuyển trên màn hình “ngang dọc” tùy ý sao cho: đầu mũi tên luôn hướng về quả bóng ở gần nó nhất.

3. Tạo một đối tượng “car” trên màn hình có khả năng di chuyển với đầy đủ các hiệu ứng:

• Gia tốc• Lực ma sát.