前回作った車のサンプルをはじめ，ここまで説明してきたサンプルでは，描画にDebugDrawを使いました。DebugDrawを使えば簡単に物体の形などを表示することができましたが，線だけなので表現力に欠けます。今回はこれを書き換え，画像を使って車体などを描くようにします。
説明に際しては，前回のラストに完成したDraggableCar.asをベースに修正を加えていく形で進めていきます。
画像をFlashに埋め込む
Embedで画像をFlashに埋め込む
Flashで画像を使うにはいろいろな方法がありますが，今回はEmbedを使った簡単な方法を使います（HTMLのembedタグとは関係ありません）。この方法を使うと，Flashに画像を埋め込むことができます。Embedは次のように書きます。
[Embed(source='image.png')]
private static const SomeImage:Class;
Embedは，クラスのプロパティとして書くのが一般的です。これによりimage.pngという画像がFlash内に埋め込まれます。埋め込まれた画像はSomeImageというクラスとしてActionScriptの中で使うことができます。
埋め込んだ画像を使う
Embedを使って埋め込んだ画像を使うには，次のように書きます。
private bmp:Bitmap = new SomeImage();
先ほど定義したSomeImageクラスを使って，bmpという変数を作っています。ポイントは，bmpをBitmapクラスの変数として作っているところです。SomeImageは画像を埋め込んで作ったクラスなので，実際に使うときにはBitmapクラスの変数として使います。
車を描くための画像を埋め込む
前回のサンプルを描画するには，床，車体，車輪の3つの画像が必要です。以下の画像をダウンロードして，ActionScriptのプログラムと同じディレクトリに置いてください。
これらの画像をFlashに埋め込むために，前回のDraggableCarクラスのプロパティに3つのクラスを追加します。mouseJointプロパティを定義しているところに以下の定義を書き加えてください。
[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，BodyImage，WheelImageの3つのクラスとして画像を埋め込みました。これらを使って車を描きます。
床の画像を読み込んで表示する
床の画像を読み込み，大きさと位置を調整する
では画像を表示する部分のプログラムの説明に移ります。最初は床を表示するところからです。
先ほどEmbedを使って定義したFloorImageクラスを使って，床の画像を読み込みます。
// 床の画像を作る
var floorImage:Bitmap = new FloorImage();
このプログラムは，床を作った直後，つまりb2Bodyクラスのfloorを作ってCreateShapeを呼んだ直後に書きます。次に，画像の大きさと位置を調整します。
// 画像のサイズを合わせる
floorImage.width = 4 * DRAW_SCALE;
floorImage.height = 0.2 * DRAW_SCALE;
// 床の中心が(0, 0)に来るように，左上にずらす
floorImage.x = -floorImage.width / 2;
floorImage.y = -floorImage.height / 2;
大きさは床のサイズ（幅4m，厚さ20cm）に合わせます。場所は，画像の幅と高さの半分だけ左上にずらしておきます。floorImageはこの後SpriteにaddChildするのですが，ここであらかじめx，y座標をずらしておくことで回転などの処理を簡単にすることができます。
Spriteを作って画像を表示させる
次に，b2Bodyクラスのプロパティm_userDataにSpriteクラスの変数を設定します。
// b2BodyのユーザデータとしてSpriteを作る
floor.m_userData = new Sprite();
m_userData（ユーザデータ）は，b2Bodyに対して何かデータを関連付けるときに使うプロパティです。これに，床の画像を表示するためのSpriteを設定しておきます。後で書きますが，m_userDataに表示用のSpriteを設定しておくととても便利です。
Spriteを作ったら，その場所を物理エンジン内の床の場所に一致させます。作成したユーザデータはGetUserDataメソッドで参照できます。
// Spriteの場所を物理エンジン内の場所と一致させる
floor.GetUserData().x = floor.GetWorldCenter().x * DRAW_SCALE;
floor.GetUserData().y = floor.GetWorldCenter().y * DRAW_SCALE;
GetWorldCenterで得られる座標はメートル単位なので，DRAW_SCALEをかけて補正します。最後に，読み込んだ画像floorImageをSpriteに追加し，Sprite自体を画面に追加します。
floor.GetUserData().addChild(floorImage);
addChild(floor.GetUserData());
ここまでの結果のプログラムを，クラス名を変えて置いておきます。
まだDebugDrawの機能は切っていないので，床や車の枠線は表示されたままです。関係する部分のプログラムをコメントアウトすればDebugDrawの機能を切ることができますが，そうすると車がまったく表示されなくなるので，まだ表示は残しておきます。
