Home > Archives > 2008-06

2008-06

ExImageLoaderAlignって便利!


先週参加してきたProgressionのワークショップ。週末にデータを見直していて、「おぉ、これって便利っ!」って感じたことがあったので、エントリしておきます。

ExImageLoaderクラスを使って、画像を読み込んで、配置するときのことです。

private var _loader:ExImageLoader;
(略)
// ExImageLoader インスタンスを作成する
_loader = ExImageLoader( addChild( new ExImageLoader() ) );
_loader.x = 200;
_loader.y = 150;

こんな感じで、ExImageLoaderインスタンスを作成し、x:200、y:150に配置してみました。(イラストで表すと下の様になる)

ExImageLoader(デフォルト)

基準点はExImageLoaderの左上になっています。

ここでちょっとリファレンスを見てみると、ExImageLoaderと似たような感じのExImageLoaderAlignクラスというものがあります。

どうやらこれはExImageLoaderの基準点を決めることが出来るクラスみたいです。

先ほどはx、yの位置だけを設定したので、このクラスを使っていません。

試しに、

private var _loader:ExImageLoader;
(略)
// ExImageLoader インスタンスを作成する
_loader = ExImageLoader( addChild( new ExImageLoader() ) );
_loader.x = 200;
_loader.y = 150;
_loader.align = ExImageLoaderAlign.TOP_LEFT;

のように、TOP_LEFTを入れてみた時と、入れないとき(上記の例)では表示は全く同じでした。

つまり(このクラスを使わないと)デフォルトではExImageLoaderAlign.TOP_LEFT(左上);に設定されるっぽい(?)です。←多分ですが…

左上ではなく中心を(200、150)に持って行きたいときは、TOP_LEFTをCENTERに変更してあげればOK。

private var _loader:ExImageLoader;
(略)
// ExImageLoader インスタンスを作成する
_loader = ExImageLoader( addChild( new ExImageLoader() ) );
_loader.x = 200;
_loader.y = 150;
_loader.align = ExImageLoaderAlign.CENTER;

これをイラストで表すと、下の様になります。

ExImageLoader(センター合わせ)

これって任意の場所に配置するときに、ExImageLoaderのwidthを考慮(width/2を引くとか)しなくてもいいってことですよねぇ…

_loader.align = ExImageLoaderAlign.CENTER;

たった一行書くだけで、この点もクリアされるなんて…

Progression、よ〜く考えて作られています!

Progression Workshop in 大崎に参加してきたよ(後編)


★Progressionのインストール方法&プロジェクトの作り方

progression.libspark.orgのインストールしよう! のページ(同じく)プロジェクトを作ろうのページに詳しく書かれているので、そちらを参照してください。

★Progressionの使い方

progression.libspark.orgのチュートリアル>制作スタイルガイド>クラスベースでの制作スタイルや、東京てら子ワークショップキットを使って、実際に手を動かしてみるのが良いかと思われます。

★ここからは昨日のワークショップで「ここ重要!」と思ったところをメモしていきたいと思います。

●onLoad()とonInit()の違い

onLoad()
階層構造でその階層に来たときに必ず実行される(親子関係があった場合は、きちんと経由してきたよってことを通知するため)
onInit()
到着した目的地だけは実行される

つまり階層構造が三階層あったら、onLoadは各シーンごと毎回(計三回)実行されるけど、onInitは一回(目的地のシーンのonInit)しか実行されないってことらしい…

●コマンドの追加と削除

コマンドを追加する

addCommand(
// 表示リストに追加
new AddChild( progression.container, 追加するもの )

コマンドを削除する

addCommand(
// 表示リストに追加
new AddChild( progression.container, 追加するもの ),
// 表示リストから削除する
new RemoveChild( progression.container, 削除するもの )

コードではAddChildしてからすぐにRemoveChildするように書かれていますが、実際にはAddChildするもの(例えばDoTweenerが設定してあれば、DoTweenerの)の処理が終わってから、RemoveChildされるので心配なし!

あとDoTweenerの設定は、コマンドクラスと一緒のファイルに書くのではなく、キャストクラスとして別ファイルに記述しておいた方が分かりやすいよ!(Progression FrameworkリファレンスのCastSpriteクラスのExampleをご覧になると良いかと思われます)

●Funcコマンドの設定

イベントが終了してから、何かを実行したいってときに便利(画像を読み込んだあとにDoTweenerを設定する)

addCommand(
// 画像を読み込む
new Func( null, _loader.load, [ new URLRequest( _url ) ], 0, _loader, Event.COMPLETE ),

// アニメーションを実行する
new DoTweener( this, {
alpha	:1,
time	:1
} )
);

昨日のワークショップでは、Event.COMPLETEしてから、DoTweenerを実行だよ! という使い方をしていました。
Funcに関しては、(Progression FrameworkリファレンスのFuncクラスのExampleをご覧になると良いかと思われます。

●(CastButtonクラスを継承した)ボタンを作成

CastButtonクラスを継承したボタンを作成すれば、マウスの右クリックでページ移動が可能になる(←便利ですねぇ…)

●ツールチップの表示

HTMLでalt属性を指定したときみたいに、(以下の様にたった一行コードを書くだけで)マウスオーバーでツールチップが表示される(←これまた便利ですねぇ…)

toolTip.text = "ギャラリーページに移動します。";

●シーンの動きと見た目は分断出来るよ!

ボタン一個に対して必ず(移動先のページの)Classファイルが一つ必要ってことではなく、同じ機能のボタンがいくつもあるのだったら、移動先のページのClassファイルは一つで大丈夫だよ!

  1. sceneId = new SceneId( “/index/gallery/photo001″ );のように、ボタンのクラスファイルに移動先の識別子を設定。
  2. _page = new PhotoPage( “images/” + name + “.jpg” );のように、移動先のシーンを作成する。
  3. 表示させる画像に連番をふって、imagesフォルダに入れておく。
  4. こうしておくと、一枚のシーン(クラスファイル)で表示の切り替えが可能になる。

●ボタンも(それぞれ)クラスファイルを作成するのではなく、共通化出来るよ!

サンプルなどでは、ボタン一つにつきクラスファイル一つを作成していますが、別のやり方もあるよ!(参加者の方からのご質問でおまけ的にお話された内容です)

  1. FlashIDE上にボタンを配置(リンケージ設定をしておく:GalleryButton)
  2. プロパティパネル上で、インスタンス名をつけておく(gallerybutton)
  3. GalleryButtonのクラスファイルの(シーンを追加する箇所の)sceneId = new SceneId( “/index/gallery” );をコメントアウトしておく
  4. IndexPageのコンストラクタに以下を記述
  5. GalleryButton( getChildByName( “gallerybutton” ) ).sceneId = new SceneId( “/index/gallery” );

これでGalleryButtonをクリックすると、Galleryページに移動できるようになります。(Contactページとかがある場合は、同じように設定していけばよい)

■ちょっと補足

先ほどのコンストラクタに記述した箇所ですが、

GalleryButton.addChild(getChildByName("gallerybutton")).sceleId = new SceneId("/index/gallery")

このように記述しなくてもいいそうです。こんな感じで記述したら、怒られます!

上記のように設定しなくていい理由をtaka_niumさんから教えて頂きましたので、併せて記載しておきます。

Flash IDE 上で配置してしまっているので、addChild() は不要ですが、getChildByName() の戻り値のままですと、DisplayObject 型で返ってきてしまい、「sceneId プロパティないよ」とコンパイルエラーが発生してしまうので、GalleryButton 型でキャストし直しています。(taka_niumさん)

まとめとしては、使う人によって機能を拡張出来ちゃうってことです。Progression恐るべし!

★次期バージョンからコードネーム『Orbiter(オービタ)』としてアップデートされるみたいです。

Orbiterって何? ってことだったので、単語の意味をgoo辞書で調べてみました。

Orbiter
軌道を回るもの、人工衛星

無限の可能性を秘めている感じがして、今後色々な機能が追加されていくであろうProgression Frameworkの名前にぴったりですね!

新しいバージョンでこんな機能が実装されるよ! みたいなことは、progression.libspark.orgの開発段階のページに書かれています。こちらも併せてご覧下さい。

最後になりましたが、ワークショップを開催して頂きましたアドビさん。講師のtaka_niumさん。SparkProjectのyossyさん(ワークショップにお見えになっていました)。

この場を借りてお礼申し上げます、ありがとうございました!

Progression Workshop in 大崎に参加してきたよ(前編)


Progression Workshop in 大崎に参加してきました。

講師はもちろん、Progressionの開発者taka_niumさん。場所はアドビさんの会議室で行われました。

ワークショップの流れはこんな感じ。

  1. 最新情報の紹介(アドビの西村さん)
  2. Progression FrameWorkとは?
  3. クラスベースでの開発方法
  4. 時期バージョンについて

★最新情報の紹介(アドビの西村さん)

  1. AIR1.1について
  2. FlashPlayer10Betaについて

FlashPlayer10Betaについては、Adobe Edge2008年6月号に詳しく書かれているので、こちらをご覧になるとよいかと思われます。

ここから、本編に突入です。

★最初はProgressionって何? って所から…

  1. ページの移動処理をシンプルに作成できて
  2. 楽しい部分だけ作れて
  3. 作りこみの時間を増やせて
  4. 早く家に帰れて
  5. ユーザビリティに対応してるよ

っていうフレームワークのこと!

つまり、面倒なことはProgressionが全部やってくれるってことです。う~ん、実に素晴らしい!

★Progressionの三大構成要素

  1. シーン
  2. コマンド
  3. キャスト

(一つ一つでも使えるけど)この三つを使いこなせるようになると、Progressionは最大限力を発揮するようになるよ! ってことでした。

それぞれを詳しく見てみましょう!

★シーンって何?

  1. HTMLのように階層構造を作成できる
  2. シーンを移動したときは、ルートを自動検索してくれる
  3. シーンは移動状態に応じたイベントを受け取ることができる
  4. URLの発行はシーン構造と連動している

URLの発行はシーン構造と連動しているというのは、Galleryというシーンを作成したら、URLもhttp://hogehoge/galleryみたいに表示されるということです。

この機能を使うには、オンラインでの URL の同期を有効化しておく必要があります。

// オンラインでの URL 同期を有効化します。
prog.sync = true;

★コマンドって何?

シーン移動時には、ルート上にあるシーンがいろいろなイベントを受け取れるけど、処理としては関数が徐々に呼ばれているだけなので、このままだと非同期処理(イベント待ち)が出来なくなってしまう。そこでコマンドの出番です。

  1. 一つの動作を一つのコマンドで実行するってこと!
  2. シーンの移動の合間合間に実行される

★キャストって何?

シーンのイベントにずらずら書いていくのもいいんだけど…

表示オブジェクトと密接に関連しているコマンド処理は、別に定義したい… そんな時にキャストを使う。

キャストイベントはいつ発生するの?
シーンイベントで、AddChild、RemoveChildを発行したときに実行される!

★クラスベースでの開発方法の流れ

  1. まずはProgressionインスタンスを作成して
  2. rootシーン以下にシーン構造を作成して
  3. それぞれシーンに移動時に処理したいコマンドを作成して
  4. コマンド処理時に表示リストを含む場合は、キャストを作成する

長くなりそうなので、とりあえずここらで終了しておきます。

ランダムにオブジェクトを発生させてみた


クリックしたら、円、四角形、三角形をランダムに発生させ、レールの上を滑り落ちていくようにしてみました。

JavaScriptを有効にしてご覧ください。

三角形の描写は、Box2D>Collision>Shapesフォルダ内のb2PolygonDef.asファイルを参考に作成しました。

vertexCount = 4;
vertices[0].Set(-hx, -hy);
vertices[1].Set( hx, -hy);

vertexCountで作成するオブジェクトの頂点の数を設定し、verticesの配列内にそれぞれ頂点の値をセットしてあげれば、オブジェクトは出来ちゃうみたいなので、これを真似てみました。

// 頂点の数
triangleShapeDef.vertexCount = 3;
					
// 三角形のそれぞれの頂点の座標を設定しておく
triangleShapeDef.vertices[0].Set(0.25,0);
triangleShapeDef.vertices[1].Set(0.5,0.35);
triangleShapeDef.vertices[2].Set(0,0.35);

ソースはこんな感じで書いてみました。

package  {
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.*;
	import Box2D.Dynamics.Joints.*;
	import flash.display.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	////////////////////////////////////////////////////////////////////////////
	//クリックした箇所にランダムにオブジェクトを作成し、レールを滑り落ちていく//
	////////////////////////////////////////////////////////////////////////////
				
	public class DropObject extends Sprite {
		
		// 物理エンジンの管理クラス
		private var world:b2World;
		
		//コンストラクタ
		public function DropObject():void {
			
			//外枠の作成
			var s:Sprite = new Sprite();
			s.graphics.lineStyle(3, 0x00FF00);
            s.graphics.moveTo(0, 0);
            s.graphics.lineTo(500, 0);
            s.graphics.lineTo(500, 375);
            s.graphics.lineTo(0, 375);
            s.graphics.lineTo(0, 0);
            this.addChild(s);
			
			//ステージの設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
			
			////////////////////////////////////////
			// 物理エンジンのセットアップ
			////////////////////////////////////////
			
			// 外枠を定義
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);
			
			// 重力の設定
			var gravity:b2Vec2 = new b2Vec2(0, 10);
			
			// 外枠と重力を指定して、全体のセットアップを行う
			world = new b2World(worldAABB, gravity, true);
			
			////////////////////////////////////////
			// 床の設定あれこれ
			////////////////////////////////////////
			
			// 床1を左から1.75m、上から1mとする
			var floorBodyDef1:b2BodyDef = new b2BodyDef();
			floorBodyDef1.position.Set(1.75, 1);
			floorBodyDef1.angle = 15 * Math.PI / 180;

			// 床1の形を、幅2m、厚さ20cmとする
			// 指定するのはその半分の値
			var floorShapeDef1:b2PolygonDef = new b2PolygonDef();
			floorShapeDef1.SetAsBox(1, 0.1);
			
			// 床2を左から3.5m、上から2mとする
			var floorBodyDef2:b2BodyDef = new b2BodyDef();
			floorBodyDef2.position.Set(3.5, 2);
			floorBodyDef2.angle = -20 * Math.PI / 180;

			// 床2の形を、幅2m、厚さ20cmとする
			// 指定するのはその半分の値
			var floorShapeDef2:b2PolygonDef = new b2PolygonDef();
			floorShapeDef2.SetAsBox(1, 0.1);
			
			// 床3を左から1.75m、上から3mとする
			var floorBodyDef3:b2BodyDef = new b2BodyDef();
			floorBodyDef3.position.Set(1.75, 3);
			floorBodyDef3.angle = 20 * Math.PI / 180;

			// 床3の形を、幅2m、厚さ20cmとする
			// 指定するのはその半分の値
			var floorShapeDef3:b2PolygonDef = new b2PolygonDef();
			floorShapeDef3.SetAsBox(1, 0.1);

			// 上記で設定した床を、それぞれ動かない物体として作成
			var floor1:b2Body = world.CreateStaticBody(floorBodyDef1);
			floor1.CreateShape(floorShapeDef1);
			
			var floor2:b2Body = world.CreateStaticBody(floorBodyDef2);
			floor2.CreateShape(floorShapeDef2);

			var floor3:b2Body = world.CreateStaticBody(floorBodyDef3);
			floor3.CreateShape(floorShapeDef3);
			
			////////////////////////////////////////
			// 描画設定
			////////////////////////////////////////
			
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			debugDraw.m_sprite = this;
			debugDraw.m_drawScale = 100; // 1mを100ピクセルにする
			debugDraw.m_fillAlpha = 0.75; // 不透明度
			debugDraw.m_lineThickness = 1; // 線の太さ
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(debugDraw);
			
			// イベントハンドラの登録
			stage.addEventListener(MouseEvent.CLICK, clickHandler);
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}
		
		private function clickHandler(event:MouseEvent):void {
			//1〜3の間でランダムに生成
			var r:int = Math.floor(Math.random()*3)+1;
			//trace(r);
			
			switch (r){
				//rが1の場合
				case 1:
			
					////////////////////
					//円の設定あれこれ//
					////////////////////
					
					// クリックした箇所に円を表示させる設定
					var bodyDef:b2BodyDef = new b2BodyDef();
					bodyDef.position.Set(event.stageX / 100, event.stageY / 100);
					
					// 円の設定(大きさ、バウンドの値など)
					var shapeDef:b2CircleDef= new b2CircleDef();
					shapeDef.radius = 0.25;
					shapeDef.density = 1;
					shapeDef.restitution = 0.25;
					
					// 円を動く物体として作る
					var body:b2Body = world.CreateDynamicBody(bodyDef);
					body.CreateShape(shapeDef);
					body.SetMassFromShapes();
					
					break;
				
				//rが2の場合
				case 2:
				
					/////////////////////
					//BOXの設定あれこれ//
					/////////////////////
					
					// クリックした箇所にBOXを表示させる設定
					var boxBodyDef:b2BodyDef = new b2BodyDef();
					boxBodyDef.position.Set(event.stageX / 100, event.stageY / 100);
					
					// BOXの形を、幅40cm、高さ40cmとして45度ぐらい右に回す
					var boxShapeDef:b2PolygonDef= new b2PolygonDef();
					boxShapeDef.SetAsOrientedBox(0.2, 0.2, new b2Vec2(0, 0), 0.8);
					boxShapeDef.density = 1;
					boxShapeDef.restitution = 0.2;
					
					// BOXを動く物体として作る
					var boxBody:b2Body = world.CreateDynamicBody(boxBodyDef);
					boxBody.CreateShape(boxShapeDef);
					boxBody.SetMassFromShapes();
					
					break;
				
				//上記以外(3の場合)
				default:
					
					////////////////////////
					//三角形の設定あれこれ//
					////////////////////////
					
					// クリックした箇所に三角形を表示させる設定
					var triangleDef:b2BodyDef = new b2BodyDef();
					triangleDef.position.Set(event.stageX / 100, event.stageY / 100);
					
					// 三角形の設定
					var triangleShapeDef:b2PolygonDef = new b2PolygonDef();
					
					// 頂点の数
					triangleShapeDef.vertexCount = 3;
					
					// 三角形のそれぞれの頂点の座標を設定しておく
					triangleShapeDef.vertices[0].Set(0.25,0);
					triangleShapeDef.vertices[1].Set(0.5,0.35);
					triangleShapeDef.vertices[2].Set(0,0.35);

					triangleShapeDef.density = 1;
					triangleShapeDef.restitution = 0.25;
					triangleShapeDef.friction = 0.25;
					
					// 三角形を動く物体として作る
					var triangleBody:b2Body = world.CreateDynamicBody(triangleDef);
					triangleBody.CreateShape(triangleShapeDef);
					triangleBody.SetMassFromShapes();
					
			}
		}
		
		private function enterFrameHandler(event:Event):void {
			if (world == null) {
				return;
			}
			// フレームレートを24fpsに設定
			world.Step(1 / 24, 10);
		}
	}
}

円がレールの上を転がり落ちる


以前にBOXがレールの上を滑り落ちるものを作りましたが、それを円がレールの上を転がり落ちる様に変更してみました。

マウスのクリックで、クリックした場所に円が作成され、レールに沿って下に落ちていきます。

JavaScriptを有効にしてご覧ください。

ソースはこんな感じ

package  {
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.*;
	import Box2D.Dynamics.Joints.*;
	import flash.display.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	//////////////////////////////////////////////////////////////
	//クリックしたところに円を作成し、レールを滑り落ちてくるFlash
	//////////////////////////////////////////////////////////////
				
	public class DropCircle extends Sprite {
		
		// 物理エンジンの管理クラス
		private var world:b2World;
		
		//コンストラクタ
		public function DropCircle():void {
			
			//外枠の作成
			var s:Sprite = new Sprite();
			s.graphics.lineStyle(3, 0x00FF00);
            s.graphics.moveTo(0, 0);
            s.graphics.lineTo(500, 0);
            s.graphics.lineTo(500, 375);
            s.graphics.lineTo(0, 375);
            s.graphics.lineTo(0, 0);
            this.addChild(s);
			
			//ステージの設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
			
			////////////////////////////////////////
			// 物理エンジンのセットアップ
			////////////////////////////////////////
			
			// 外枠を定義
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);
			
			// 重力の設定
			var gravity:b2Vec2 = new b2Vec2(0, 10);
			
			// 外枠と重力を指定して、物理エンジン全体のセットアップ
			world = new b2World(worldAABB, gravity, true);
			
			////////////////////////////////////////
			// 床の設置
			////////////////////////////////////////
			
			// 床1を左から1.5m、上から0.75mとする
			var floorBodyDef1:b2BodyDef = new b2BodyDef();
			floorBodyDef1.position.Set(1.5, 0.75);
			floorBodyDef1.angle = 15 * Math.PI / 180;

			// 床1の形を、幅1.5m、厚さ20cmとする
			// 指定するのはその半分の値
			var floorShapeDef1:b2PolygonDef = new b2PolygonDef();
			floorShapeDef1.SetAsBox(0.75, 0.1);
			
			// 床2を左から3m、上から1.65mとする
			var floorBodyDef2:b2BodyDef = new b2BodyDef();
			floorBodyDef2.position.Set(3, 1.65);
			floorBodyDef2.angle = -15 * Math.PI / 180;

			// 床2の形を、幅2m、厚さ20cmとする
			// 指定するのはその半分の値
			var floorShapeDef2:b2PolygonDef = new b2PolygonDef();
			floorShapeDef2.SetAsBox(1, 0.1);
			
			// 床3を左から3m、上から2mとする
			var floorBodyDef3:b2BodyDef = new b2BodyDef();
			floorBodyDef3.position.Set(1.5, 2.5);
			floorBodyDef3.angle = 15 * Math.PI / 180;

			// 床3の形を、幅2m、厚さ20cmとする
			// 指定するのはその半分の値
			var floorShapeDef3:b2PolygonDef = new b2PolygonDef();
			floorShapeDef3.SetAsBox(1, 0.1);

			// 床4を左から3.5m、上から3.5mとする
			var floorBodyDef4:b2BodyDef = new b2BodyDef();
			floorBodyDef4.position.Set(3.5, 3.5);
			floorBodyDef4.angle = 0;

			// 床4の形を、幅2.5m、厚さ20cmとする
			// 指定するのはその半分の値
			var floorShapeDef4:b2PolygonDef = new b2PolygonDef();
			floorShapeDef4.SetAsBox(1.25, 0.1);

			// 上記で設定した床を、それぞれ動かない物体として作成
			var floor1:b2Body = world.CreateStaticBody(floorBodyDef1);
			floor1.CreateShape(floorShapeDef1);
			
			var floor2:b2Body = world.CreateStaticBody(floorBodyDef2);
			floor2.CreateShape(floorShapeDef2);

			var floor3:b2Body = world.CreateStaticBody(floorBodyDef3);
			floor3.CreateShape(floorShapeDef3);
			
			var floor4:b2Body = world.CreateStaticBody(floorBodyDef4);
			floor4.CreateShape(floorShapeDef4);
			
			////////////////////////////////////////
			// 描画設定
			////////////////////////////////////////
			
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			debugDraw.m_sprite = this;
			debugDraw.m_drawScale = 100; // 1mを100ピクセルにする
			debugDraw.m_fillAlpha = 0.75; // 不透明度
			debugDraw.m_lineThickness = 1; // 線の太さ
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(debugDraw);
			
			// イベントハンドラを登録する
			stage.addEventListener(MouseEvent.CLICK, clickHandler);
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}
		
		private function clickHandler(event:MouseEvent):void {
						
			////////////////////////////////////////
			// 円の設置
			////////////////////////////////////////
			
			// 円の位置をマウスでクリックした箇所に出現させる
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.position.Set(event.stageX / 100, event.stageY / 100);
			
			// 円の設定(大きさ、バウンドの値など)
			var shapeDef:b2CircleDef= new b2CircleDef();
			shapeDef.radius = 0.25;
			shapeDef.density = 1;
			shapeDef.restitution = 0.25;
			
			// 円を動く物体として作る
			var body:b2Body = world.CreateDynamicBody(bodyDef);
			body.CreateShape(shapeDef);
			body.SetMassFromShapes();
			

		}
		
		private function enterFrameHandler(event:Event):void {
			if (world == null) {
				return;
			}
			// フレームレートを24fpsに設定
			world.Step(1 / 24, 10);
		}
	}
}

今回も『Box2DでActionScript物理プログラミング』(Gihyo.jp)さんの記事を参考にさせていただきました。

Home > Archives > 2008-06

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top