Transcript
Page 1: 寺子屋クスール @STATION5

くるくる研究室

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

Page 2: 寺子屋クスール @STATION5

http://labs.kuru2jam.com/

@hara3 @biscuitjam

Page 3: 寺子屋クスール @STATION5

作品紹介

3

http://labs.kuru2jam.com/

くるくる研究室

Page 4: 寺子屋クスール @STATION5

4

科学?!

Page 5: 寺子屋クスール @STATION5

5

センサー大好き!

Page 6: 寺子屋クスール @STATION5

6

Flash Lite 4

Page 7: 寺子屋クスール @STATION5

くるくる研究室

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

Page 8: 寺子屋クスール @STATION5

8

ActionScript3で開発 !

Page 9: 寺子屋クスール @STATION5

9

重力計算をしてみる

Page 10: 寺子屋クスール @STATION5

10

必要なプロパティ

重力加速度 (gravity)

跳ね返り系数 (bounce)

速度 (vy)

Page 11: 寺子屋クスール @STATION5

11

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

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

3.跳ね返る処理

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

Page 12: 寺子屋クスール @STATION5

12

速度

重力加速度

速度

重力加速度

Page 13: 寺子屋クスール @STATION5

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;

}}

Page 14: 寺子屋クスール @STATION5

14

デモ

Page 15: 寺子屋クスール @STATION5

15

タップの判定

Page 16: 寺子屋クスール @STATION5

16

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

function onTouchTap(e:TouchEvent){

addBall(e.stageX,e.stageY);

}

Page 17: 寺子屋クスール @STATION5

17

デモ

Page 18: 寺子屋クスール @STATION5

18

DeciceCentral CS5新機能

Page 19: 寺子屋クスール @STATION5

19

振れます。

Page 20: 寺子屋クスール @STATION5

20

デモ

Page 21: 寺子屋クスール @STATION5

21

加速度の取得

Page 22: 寺子屋クスール @STATION5

22

さようならfscommand2

Page 23: 寺子屋クスール @STATION5

23

Accelerometerクラス

Page 24: 寺子屋クスール @STATION5

24

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

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

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

_updateAccHandler);}

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

}

Page 25: 寺子屋クスール @STATION5

25

「振る」動作の判定

Page 26: 寺子屋クスール @STATION5

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;

}

Page 27: 寺子屋クスール @STATION5

27

デモ

Page 28: 寺子屋クスール @STATION5

28

衝突判定したい!

Page 29: 寺子屋クスール @STATION5

29

計算がめんどい…

Page 30: 寺子屋クスール @STATION5

30

帰りたい…

Page 31: 寺子屋クスール @STATION5

31

そうだ。AS3じゃないか!

Page 32: 寺子屋クスール @STATION5

32

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

Page 33: 寺子屋クスール @STATION5

33

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

Page 34: 寺子屋クスール @STATION5

34

設定の流れ

1.重力を設定

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

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

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

Page 35: 寺子屋クスール @STATION5

35

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

2.性質を設定

3.実体 (Body)を作成

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

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

6.Bodyに性質を適用

Page 36: 寺子屋クスール @STATION5

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);

}

Page 37: 寺子屋クスール @STATION5

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;

・・・続く

Page 38: 寺子屋クスール @STATION5

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);

}

Page 39: 寺子屋クスール @STATION5

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);

}}

}

Page 40: 寺子屋クスール @STATION5

40

デモ

Page 41: 寺子屋クスール @STATION5

41

その他の機能

Page 42: 寺子屋クスール @STATION5

42

マルチタッチMultitouch.inputMode =

MultitouchInputMode.GESTURE;

GPSGeolocationクラス (AIR限定 )

Page 43: 寺子屋クスール @STATION5

43

実機テストしてね

Page 44: 寺子屋クスール @STATION5

おまけ

FlashLite4はできる子

44

Page 45: 寺子屋クスール @STATION5

45

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


Top Related