tokyo3.0

actionscript3.0 develop log written by s26

diary

moving

2010515

動きについての考察。
※下記のサンプルはfish,btnという2つのクラスに関しては省略して記載してあります。
(ライブラリに用意しているだけ。)

 

01.一定の速度で移動
常に一定の数だけを足し続ける。

 

– script –

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	public class motion1 extends Sprite {
		public function motion1() {
			moveFish()
		}
		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10;_btn.y = 10;
			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish) ;
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;
			stage.addEventListener(Event.ENTER_FRAME, function() {
				_fish.x += 5
			});
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_fish.x = 0
				_fish.alpha = 1;
			});
		}
	}
}

 

これだと、動きとしては不自然なので、
02.緩急をつけたい
現在地と目的地の一定を足していく。
(stage.stageWidth – _fish.x)/20
目的地との距離は縮まっていくので、
速度はどんどんゆっくりになる。

 

– script –

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class motion2 extends Sprite {

		public function motion2() {
			moveFish()
		}
		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10;_btn.y = 10;
			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish) ;
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;
			stage.addEventListener(Event.ENTER_FRAME, function() {
				_fish.x += (stage.stageWidth - _fish.x)/20
			})
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_fish.x = 0
				_fish.alpha = 1;
			});
		}
	}
}

 

緩急はつけられるけど、
動きとしては一定の減速運動になってしまうので、
03.sinカーブを使用してみる。
sinのカーブでは-π/2~π/2が使いやすいと思う。

 

– script –

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class motion3 extends Sprite {

		public function motion3() {
			moveFish()
		}
		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10;_btn.y = 10;
			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish);
			//初期の位置
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;
			var _count:int = 0
			stage.addEventListener(Event.ENTER_FRAME, function() {
				var _angle:Number = -Math.PI/2 + _count/100*Math.PI
				_fish.x = (Math.sin(_angle) + 1) / 2 *stage.stageWidth;
				_count++;
			});
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_count = 0
				_fish.alpha = 1;
			});
		}
	}
}

 

次に、
04.速度の概念を明示化する
と加速が簡単に行える。

 

– script –

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class motion4 extends Sprite {

		public function motion4() {
			moveFish()
		}
		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10;_btn.y = 10;
			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish);
			//初期の位置
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;
			var _v:Number = 0.1

			stage.addEventListener(Event.ENTER_FRAME, function() {
				_fish.x += _v;
				_v = _v * 1.1;
			});
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_v = 0.01;
				_fish.x = 0;
				_fish.alpha = 1;
			});
		}
	}

}

 

速度を明示化して、
加速はするけど、
05.目的地にも、ゆっくり到着したいので、
残りの距離の割合(stage.stageWidth-_fish.x)/stage.stageWidth;
を速度に用いてみると

 

– script –

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	public class motion5 extends Sprite {
		public function motion5() {
			moveFish()
		}
		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10; _btn.y = 10;

			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish);
			//初期の位置
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;
			var _v:Number = 0.1

			stage.addEventListener(Event.ENTER_FRAME, function() {
				_fish.x += _v*(stage.stageWidth-_fish.x)/stage.stageWidth;
				_v = _v * 1.1;
			});
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_v = 0.01;
				_fish.x = 0;
				_fish.alpha = 1;
			});
		}
	}

}

 

速度の概念とは別に
06.バネの原理で移動をさせる。
バネの力は距離の2乗に比例をするはず。
バネの力だけだと、運動量保存がされてしまう(とまれない)ので、
減速の運動も加える。

 

– script –

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	public class motion6 extends Sprite {
		public function motion6() {
			moveFish()
		}
		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10; _btn.y = 10;

			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish);
			//初期の位置
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;
			var _v:Number = 0.1
			var _k:Number = 0.0003;
			stage.addEventListener(Event.ENTER_FRAME, function() {
				_fish.x += _v;
				_v += Math.abs(stage.stageWidth*3/4 - _fish.x) * (stage.stageWidth*3/4 - _fish.x) * _k;
				_v *= 0.95
			});
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_fish.x = 0;
				_fish.y = stage.stageHeight / 2;
				_v = 0.1
				_fish.alpha = 1;
			});
		}
	}

}

 

こうして、いくつか見てみるけど、Tweenerの中身ってどうなっているのかという。
07.決まった時間で移動をさせる。
フレームレートが落ちても一定のスピードで動くように、時間と位置の関係を明示化している。

 

– script –

package  {

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class motion7 extends Sprite {

		public function motion7() {
			moveFish()
		}

		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10; _btn.y = 10;

			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish);
			//初期の位置
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;

			var _time = 3;
			var _startTime:Number = new Date().getTime();
			stage.addEventListener(Event.ENTER_FRAME, function() {
				var _nowTime:Number = new Date().getTime()-_startTime;
				_fish.x = (stage.stageWidth - 0) * _nowTime / (1000 * _time)
			});
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_startTime = new Date().getTime();
				_fish.alpha = 1;
			});
		}
	}

}

 

上のサンプルだと
transitionがlinerだけど、
08.easeInExpoだと下記のようになる。

 

– script –

package  {

	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class motion8 extends Sprite {

		public function motion8() {
			moveFish()
		}

		private function moveFish():void {
			var _btn:MovieClip = new btn();
			addChild(_btn)
			_btn.x = 10;_btn.y = 10;
			var _fish:MovieClip = new fish();
			_fish.alpha = 0;
			addChild(_fish);
			//初期の位置
			_fish.x = 0;
			_fish.y = stage.stageHeight / 2;
			var _time = 2;
			var _startTime:Number = new Date().getTime();
			stage.addEventListener(Event.ENTER_FRAME, function() {
				var _nowTime:Number = new Date().getTime()-_startTime;
				_fish.x = (stage.stageWidth - 0) * _nowTime / (1000 * _time)* _nowTime / (1000 * _time)* _nowTime / (1000 * _time)
			});
			_btn.addEventListener(MouseEvent.CLICK, function() {
				_startTime = new Date().getTime();
				_fish.alpha = 1;
			})
		}
	}

}

 

コメント

コメントの投稿

* コメントフィード

sidemenu

profile

s26

flasher

category

archive

recently

feed

RSS FEED

search