前回作った車のサンプルをはじめ、
説明に際しては、
画像をFlashに埋め込む
Embedで画像をFlashに埋め込む
Flashで画像を使うにはいろいろな方法がありますが、
[Embed(source='image.png')]
private static const SomeImage:Class;Embedは、
埋め込んだ画像を使う
Embedを使って埋め込んだ画像を使うには、
private bmp:Bitmap = new SomeImage();先ほど定義したSomeImageクラスを使って、
車を描くための画像を埋め込む
前回のサンプルを描画するには、
これらの画像をFlashに埋め込むために、
[Embed(source='floor.png')]
private static const FloorImage:Class;
[Embed(source='body.png')]
private static const BodyImage:Class;
[Embed(source='wheel.png')]
private static const WheelImage:Class;FloorImage、
床の画像を読み込んで表示する
床の画像を読み込み、大きさと位置を調整する
では画像を表示する部分のプログラムの説明に移ります。最初は床を表示するところからです。
先ほどEmbedを使って定義したFloorImageクラスを使って、
// 床の画像を作る
var floorImage:Bitmap = new FloorImage();このプログラムは、
// 画像のサイズを合わせる
floorImage.width = 4 * DRAW_SCALE;
floorImage.height = 0.2 * DRAW_SCALE;
// 床の中心が(0, 0)に来るように、左上にずらす
floorImage.x = -floorImage.width / 2;
floorImage.y = -floorImage.height / 2;大きさは床のサイズ
Spriteを作って画像を表示させる
次に、
// b2BodyのユーザデータとしてSpriteを作る
floor.m_userData = new Sprite();m_
Spriteを作ったら、
// Spriteの場所を物理エンジン内の場所と一致させる
floor.GetUserData().x = floor.GetWorldCenter().x * DRAW_SCALE;
floor.GetUserData().y = floor.GetWorldCenter().y * DRAW_SCALE;GetWorldCenterで得られる座標はメートル単位なので、
floor.GetUserData().addChild(floorImage);
addChild(floor.GetUserData());ここまでの結果のプログラムを、
まだDebugDrawの機能は切っていないので、
その他の物体を表示する
車体の画像を読み込んで表示する
車のそれぞれのパーツについての描画方法は、
// 車体の画像を読み込んで表示する
var bodyImage:Bitmap = new BodyImage()
bodyImage.width = 0.8 * DRAW_SCALE;
bodyImage.height = 0.2 * DRAW_SCALE;
bodyImage.x = -bodyImage.width / 2;
bodyImage.y = -bodyImage.height / 2;
body.m_userData = new Sprite();
body.GetUserData().x = body.GetWorldCenter().x * DRAW_SCALE;
body.GetUserData().y = body.GetWorldCenter().y * DRAW_SCALE;
body.GetUserData().addChild(bodyImage);
addChild(body.GetUserData());このプログラムは、
変数名については、
車輪の画像を読み込んで表示する
この規則に従えば、
// ↓前輪を作り終わった後に書く
var frontWheelImage:Bitmap = new CircleImage();
frontWheelImage.width = 0.3 * DRAW_SCALE;
frontWheelImage.height = 0.3 * DRAW_SCALE
// （略）
// ↓後輪を作り終わった後に書く
var rearWheelImage:Bitmap = new CircleImage();
rearWheelImage.width = 0.3 * DRAW_SCALE;
rearWheelImage.height = 0.3 * DRAW_SCALE;
// （略）ここまでのソースをコンパイルして実行すると、
物理エンジンが動作していないのかというと、
物理エンジンの動作に合わせて画像を動かす
物理エンジン内の時間を進めているのは、
ワールド内のb2Bodyに対するfor文
物理エンジンの動作を反映させるには、
for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
// 物体の位置を更新する処理。中身は後述
}for文の書き方が少し特殊なので説明します。world.
for文の終了条件は単にbとしているので、
全てのb2Bodyに対する処理が終わるとGetNextメソッドがnullを返すので、
b = world.GetBodyList(); // for文の最初で、bは床を指す
// 床の位置を更新する
b = b.GetNext(); // bは車体を指す
// 車体の位置を更新する
b = b.GetNext(); // bは前輪を指す
// 前輪の位置を更新する
b = b.GetNext(); // bは後輪を指す
// 後輪の位置を更新する
b = b.GetNext(); // bにnullが設定され、for文を抜けるb2Bodyの内容をSpriteに反映する
for文の中身には、
// for文の中身
if (b.GetUserData() is Sprite) {
b.GetUserData().x = b.GetWorldCenter().x * DRAW_SCALE;
b.GetUserData().y = b.GetWorldCenter().y * DRAW_SCALE;
b.GetUserData().rotation = b.GetAngle() * 180 / Math.PI;
}b2BodyのユーザデータにSpriteが設定されているとき、
物体の場所は、
このように、
DebugDrawの表示を切る
最後の仕上げに、
完成したソースファイルとFlashがこちらです。ソースファイルは例によってクラス名を変えてあります。
まとめ
画像を読み込んで表示する方法は、
いったんSpriteをb2Bodyに割り当ててしまえば、
次回はコンタクトリスナというものについて説明します。コンタクトとは、