ra66it blog

プリミティブな映像装置として、ソーマトロープやフェナキスチスコープが有名ですが、いずれも何かしらの動力により回転運動を繰り返すことで、残像効果を発生させ、像をアニメーションさせている。

厳密にいえば、PCでの表示自体が残像効果を用いたものではあるが、そこはいったん置いておいて、Box2Dの物理エンジンによる動力（重力やら初速度を与える力）を使って、静止画の連番の像をアニメーションできないかを実験してみました。

で作ったのもは、 http://ra66it.net/lab/choi200804/B2DE7.html です。

右下のUIから数値を入力して、生成する静止画の連番に位置と初速度を与えます。（x,yが位置、vx,vyが初速度）

x:-100, y:200, vx:1500, vy:0

x:150, y:600, vx:900, vy:-2750

x:250, y:650, vx:0, vy:-3000

x:0, y:550, vx:2400, vy:-2300

初速度（vxとかvy）がある一定の値を超えると（1500ぐらい？）Box2DFlashAS3で生成しているオブジェクトが安定した表示に切り替わり（上の画像のような状態）、Box2DFlashAS3を映像装置の動力として使うことができた。

作りとしては、まずflaファイル側はムービークリップに静止画の連番をシーケンスで読み込みました。flvファイルを読み込んだりとかもしたんですが、最終的に静止画の連番に落ち着いた。しかしながら、はじめ90秒分2700枚もの静止画を並べていたが、ちょっと重くなってしまうために、900枚の連番に数を減らした。JPEGの圧縮率も30%まで下げた。

ソースは以下の通り

package{
	import flash.display.Sprite;
	import flash.events.Event;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	
	public class Box2DExample7 extends Sprite{
		var _bodyDef:b2BodyDef;
		var _boxDef:b2BoxDef;
		var _count:int;
		public function Box2DExample7(){
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.minVertex.Set(-1000.0, -1000.0);
			worldAABB.maxVertex.Set(1000.0, 1000.0);
			var gravity:b2Vec2 = new b2Vec2(0.0, 300.0);
			var doSleep:Boolean = true;
			m_world = new b2World(worldAABB, gravity, doSleep);
			_bodyDef = new b2BodyDef();
			_boxDef = new b2BoxDef();
			_bodyDef.userData = new PhysGround();
			_bodyDef.userData.width = _boxDef.extents.x * 2; 
			_bodyDef.userData.height = _boxDef.extents.y * 2; 
			addChild(_bodyDef.userData);
			m_world.CreateBody(_bodyDef);
		}
		
		public function Update(e:Event):void{
			if(_count < 900){
				_count ++;
			} else {
				_count = 1;
			}
			
			_bodyDef = new b2BodyDef();
			_boxDef = new b2BoxDef();
			_boxDef.extents.Set(66.5, 50);
			_boxDef.density = 1.0;
			_boxDef.friction = 0.5;
			_boxDef.restitution = 0.2;
			_bodyDef.AddShape(_boxDef);
			_bodyDef.userData = new MVI_0419_0000_2();
			_bodyDef.userData.gotoAndStop(_count);
			_bodyDef.userData.width = _boxDef.extents.x * 2; 
			_bodyDef.userData.height = _boxDef.extents.y * 2; 
			_bodyDef.position.x = x_stepper.value;
			_bodyDef.position.y = y_stepper.value;
			_bodyDef.linearVelocity = new b2Vec2(vX_stepper.value,vY_stepper.value);
			m_world.CreateBody(_bodyDef);
			addChild(_bodyDef.userData);
			trace(numChildren);
			m_world.Step(m_timeStep, m_iterations);
			for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next){
				if (bb.m_userData is Sprite){
					bb.m_userData.x = bb.m_position.x;
					bb.m_userData.y = bb.m_position.y;
					bb.m_userData.rotation = bb.m_rotation * (180/Math.PI);
				}
			}
		}
		public var m_world:b2World;
		public var m_iterations:int = 10;
		public var m_timeStep:Number = 1/30;
	}
}

なんかほぼ、Box2DFlashAS3のサンプルのままですが。MVI_0419_0000_2をnewした後に、gotoAndStopで表示する画像を切り替えている。画面の外に出てしまったspriteは消す処理を書かないと行けないんだが…。

で、ちょい絶では、たけいくんの発表すごかったですね。ustream越しの人とかにもうけが良かったみたいですし。今後の発表でもホラーロボットを発表するPCにつけておいてほしい。なにか質問があるときは、それ越しでするみたいな。なんだろ、個人的には、積極的にしゃべらせたくなった。ちょっと不思議な感覚を味わった。
参考：
http://d.hatena.ne.jp/hidep22/20080419/1208602137

tags：as3 Box2DFlashAS3 ちょい絶 アニメーション