ActionScript 運動法則 | IT工房

Event.ENTER_FRAMEについて

イベントのENTER_FRAMEを使用するとフレームレートで決められた回数だけ繰り返し処理が実行されます。

フレームレートはfps(Frames Per Second)という単位を使用し、1秒間に何回フレームを更新するかを表します。つまりタイムラインと同じ画面更新がされることになります。

ActionScriptを使用した運動は主にaddEventListenerでENTER_FRAMEを使用して動作させます。。

等速運動

等速運動はインスタンス変数（プロパティ）のx 座標とy 座標を定数で加算するだけです。
これをイベントのENTER_FRAME で繰り返し処理します。

等速運動の例

addEventListener(Event.ENTER_FRAME,onloop);
function onloop (e):void{
ball.x += 100;
ball.y += 100;
｝

FlashにActionScriptを記述する場合、ステージに配置したインスタンスにインスタンス名をつければその時点でクラスをインスタンス化(new)してaddChild()した結果と同じ状態を得ることができます。ballインスタンスはムービークリップでシンボル化されていますのでこれはMovieClip型のインスタンスになります。MovieClip型はさまざまなプロパティとメソッドが用意されておりMovieClip型のインスタンスはそれらのプロパティやメソッドを使用することができます。xやyはMovieClip型が持つx,y座標のプロパティです。これらの座標をENTER_FRAMEで少しづつ座標を移動させて運動を実現しています。
サンプル　

等加速度運動

等加速度運動は等速運動に少し手を加えるだけです。定数部分を少しづつ加算していきます。

等加速度運動の例

addEventListener(Event.ENTER_FRAME,onMove);
ball.ax=1;
function onMove(e){	
	ball.x += ball.ax;
	ball.ax +=1;	
}

上のスクリプトでちょっと不思議な記述があります。ball.axのところです、MovieClip型にはaxというプロパティはありません。ここではスピードを表す変数代わりに使用しています。MovieClip型にはもともと無いプロパティを設定するとそれをプロパティとして使用することができるのです。運動関係のスクリプトではスピードの値をなんらか保持する必要がでてきますが、変数宣言する場合とこのように新しいプロパティを加えた書き方をする場合がありあます。

サンプル　

円運動

一般的に角度はラジアンで表されます。ラジアンは円周に沿った円の半径の長さを持つ円弧に対する角度です。
角度を度からラジアンに変更する場合の計算は以下の通り(公式として覚えましょう）
Ａ度からラジアンに変換
Ａ度＊(Math.PI / 180)
ラジアンから度に変換
ラジアン*(180 / Math.PI)

sin(angle) = y/r ………. y = r*sin(angle)
cos(angle) = x/r ………. x = r*cos(angle)
つまり角度（ラジアン）と半径が決まればｘ座標とｙ座標が判ります。
rが１としてラジアン０なら
cos(0)=1・・・・x=1
sin(0)=0・・・・y=0
角度0（計算はラジアンを使用）の時はx=1,y=0 座標つまり真右の方向です。
同様に考えると90度（計算はラジアンを使用）のときはsin は1でcos は0です。従ってx=0,y=1 となり真下の方向です。180度（計算はラジアンを使用）のときはsin は0でcos は-1です。従ってx=-1,y=0 となり真左の方向、270度（計算はラジアンを使用）のときはsin は-1 でcos は0です。従ってx=0,y=-1 となり真上の方向になります。
ということで、あとは任意の半径を積算すれば好きな大きさの円運動させることができます！！

円運動の例

ball.addEventListener(Event.ENTER_FRAME,onMove);
	var angle:Number = 0;
	var radius:Number = 150;
function onMove(e){
	var radian:Number = degrad(angle);
	var centerX:Number = stage.stageWidth/2;
	var centerY:Number = stage.stageHeight/2;
	ball.x=centerX+radius*Math.cos(radian);
	ball.y=centerY+radius*Math.sin(radian);
	angle += 10;
	angle %= 360;
function degrad(deg:Number):Number{
	return deg*(Math.PI/180);
	}
}

サンプル

重力

重力のシミュレーションはy 方向の加速度に少し手を加えるだけです。
ボールを空中に投げ上げた効果は以下のようにします。
y 速度のみに１を加えて（x 速度は変えません）y の初期値を負の値にするだけです。

重力の例

addEventListener(Event.ENTER_FRAME,onloop);

	var b =- 10;
	
function onloop (evt:Event):void{
	ball.x += 10;
	ball.y += b;
	b  += 1;
}

サンプル

ゼノンのパラドックスを利用した摩擦の表現（分割のパラドックス）

矢が的に向かって飛んでいます。矢は今いる位置と的のちょうど半分の位置を通らねばなりません。
その後その位置と的のちょうど半分の位置を通らねばなりません。
またその後その位置と的のちょうど半分の位置を通らねばなりません。
こうしていくと、矢は無限の課題をクリアーしなくてはならなくなります。
そんな屁理屈を利用した減速の方法です。
具体的には以下のようになります。
ボールの元の位置orig から行き先の位置dest の差を分割回数で割る式になります。
(dest-orig)/coeff

摩擦の表現

addEventListener(Event.ENTER_FRAME,onLoop);
function onLoop(evt:Event):void{
	ball.x += vel(ball.x,mouseX,8);
	ball.y += vel(ball.y,mouseY,8);
}
function vel(orig:Number,dest:Number,coeff:Number):Number{
	return (dest-orig)/coeff;
}

サンプル

フックの法則でバネの動きを表現

弾性はフックの法則を使って簡単に計算できます。
フックの法則
F=-kx
F は結果として生じる力、-k はバネの強さを表す定数、ｘは変形するバネの長さです。

バネの動きを表現

addEventListener(Event.ENTER_FRAME,onMove);
function onMove(e){
	var xVel:Number = 0;
	var yVel:Number = 0;
	addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	xVel = velElastic(ball_mc.x, mouseX, .14, .85, xVel);
	yVel = velElastic(ball_mc.y, mouseY, .14, .85, yVel);
	ball_mc.x += xVel;
	ball_mc.y += yVel;
	}
function velElastic(orig:Number, dest:Number, springConst:Number,
	damp:Number, elas:Number):Number {
	elas += -springConst * (orig - dest);
	return elas *= damp;
	}
}

サンプル

中心点を基準に回転

これは単純にオブジェクトを扇風機のように回転させる方法です。シンボルの中心点を基準に回ります。変形点を基準に回るのではありませんので注意してください。

rect_mc.addEventListener(Event.ENTER_FRAME,kaiten);

function kaiten(e){
	rect_mc.rotation += 10;
}

通常円運動などはラジアンを使用しますが、この回転は角度（rotation）で指定します。
サンプル