寺子屋クスール @STATION5

くるくる研究室

ケータイ Flashで物理演算をしてみた

http://labs.kuru2jam.com/

@hara3 @biscuitjam

作品紹介

3

http://labs.kuru2jam.com/

くるくる研究室

4

科学？！

5

センサー大好き！

6

Flash Lite 4

くるくる研究室

ケータイ Flashで物理演算をしてみた

8

ActionScript3で開発 !

9

重力計算をしてみる

10

必要なプロパティ

重力加速度 (gravity)

跳ね返り系数 (bounce)

速度 (vy)

11

計算の手順1.現在の速度に重力加速度を足す

2.今の座標に速度を足す

3.跳ね返る処理

この手順を EnterFrameに書くだけ！

12

速度

重力加速度

速度

重力加速度

13

this.addEventListener(Event.ENTER_FRAME,_enterFrameHandler);

function _enterFrameHandler(e:Event){

//現在の速度に重力加速度を足すvy += gravity;

//今の座標に速度を足すy += vy;

//跳ね返る処理//ボール底の座標がステージの最下部を超えたらif(y + height / 2 > stage.stageHeight){

//ボールの座標をステージの最下部へy = stage.stageHeight – height / 2;

//速度に跳ね返り係数をかけると跳ね返るvy *= bounce;

}}

14

デモ

15

タップの判定

16

タッチイベントthis.addEventListener(TouchEvent.TOUCH_TAP, onTouchTap);

function onTouchTap(e:TouchEvent){

addBall(e.stageX,e.stageY);

}

17

デモ

18

DeciceCentral CS5新機能

19

振れます。

20

デモ

21

加速度の取得

22

さようならfscommand2

23

Accelerometerクラス

24

//Accelerometerオブジェクトを作成するvar acc:Accelerometer = new Accelerometer();

//端末が加速度センサを使えるかチェックするvar isSupportedAcc:Boolean = Accelerometer.isSupported;

if(isSupportedAcc){//加速度の取得開始acc.addEventListener(AccelerometerEvent.UPDATE,

_updateAccHandler);}

function _updateAccHandler(e:AccelerometerEvent){//加速度を取得した時の処理・・・

}

25

「振る」動作の判定

26

//以前かかった力var preF:Number = 0;

function _updateAccHandler(e:AccelerometerEvent){//マグニチュードの計算var ax:Number = e.accelerationX;//X軸方向の加速度var ay:Number = e.accelerationY;//Y軸方向の加速度var az:Number = e.accelerationZ;//Z軸方向の加速度

//端末にかかった力の大きさを計算 (各加速度を二乗して足す )var f:Number = ax * ax + ay * ay + az * az;

//前にかかった力との差を取る。//この差が大きければ、たくさん振ったということvar m:Number = Math.abs(f - preF);

if(m > 0.1){addBall(Math.random() * 240,-30);

}

//以前かかった力として更新preF = f;

}

27

デモ

28

衝突判定したい！

29

計算がめんどい…

30

帰りたい…

31

そうだ。AS3じゃないか！

32

AS3神様、力をお貸し下さい

33

Box2DFlashAS3http://sourceforge.net/projects/box2dflash/

34

設定の流れ

1.重力を設定

2.シミュレーションの場 (world)を作成

3.個々のオブジェクトを作成

4.シミュレーション実行

35

オブジェクトの作成1.形を設定

2.性質を設定

3.実体 (Body)を作成

4.Bodyとムービークリップを結びつける

5.Bodyをワールド内に生成する

6.Bodyに性質を適用

36

(実際のコードから抜粋 )

function initBox2d(){//重力設定var gravity:b2Vec2 = new b2Vec2(0.0, 10.0);

//ワールドを設定_world = new b2World( gravity, true);

//ボールを生成addBall(120,40);

//更新addEventListener(Event.ENTER_FRAME, update);

}

37

function addBall(xx:Number, yy:Number){//ボールの形を作成var circleDef : b2CircleShape = new b2CircleShape();var radius : uint = 20;circleDef.SetRadius(radius / _m_physScale);

//ボールの性質を設定_fixtureDef.friction = 10;_fixtureDef.density = 10;_fixtureDef.restitution = 0.9;_fixtureDef.shape = circleDef;

・・・続く

38

(続き )

//ボールのボディを設定var bodyDef : b2BodyDef = new b2BodyDef();bodyDef.type = b2Body.b2_dynamicBody;//重力の影響を受けるようにするbodyDef.position.Set(xx / _m_physScale, yy / _m_physScale);//ボディとムービークリップ (Ball)を結びつけるbodyDef.userData = new Ball();bodyDef.userData.x = bodyDef.position.x;bodyDef.userData.y = bodyDef.position.y;addChild(bodyDef.userData);//ムービークリップ (Ball)を画面表示

//作成した bodyDefをワールド内に生成するvar circleBody : b2Body = _world.CreateBody(bodyDef);

//生成した circleBodyにボールの性質を適用circleBody.CreateFixture(_fixtureDef);

}

39

function update(e:Event):void{//ワールド内の時間をすすめる_world.Step(_m_timeStep, _m_iterations, _m_positionIterations);_world.ClearForces();

//ワールド内のボディの状態をムービークリップに対応させるfor (var bb:b2Body = _world.GetBodyList(); bb; bb = bb.GetNext()){

var mc:MovieClip = MovieClip(bb.GetUserData());if (mc){

mc.x = bb.GetPosition().x * _m_physScale;mc.y = bb.GetPosition().y * _m_physScale;mc.rotation = bb.GetAngle() * (180 / Math.PI);

}}

}

40

デモ

41

その他の機能

42

マルチタッチMultitouch.inputMode =

MultitouchInputMode.GESTURE;

GPSGeolocationクラス (AIR限定 )

43

実機テストしてね

おまけ

FlashLite4はできる子

44

45

ありがとうございました。