2Dアクション・テンプレート：画像の表示（基本部分）

・Log ・Explain ・・AS3 ・・ActionTemplate

＝画像表示の手順＝

画像を表示するには、以下の手順を踏む。

  • 画像の用意
    • 「〜.png」のような画像を用意する
  • 画像の読み込み
    • AS3では、Embedを使うことで簡単に読み込める
  • 画像の生成
    • こちらも簡単に生成できる
  • 画像の描画登録
    • 生成した画像を登録すれば描画できる

＝画像の用意＝


今の時代ならフリー素材が色々と存在するので、自分で作成する手間は省ける。ただし、「抜き色（透明色）」に対応していない画像の場合は、その対応をしないと表示がおかしくなる。


透明部分を作成するには「GIMP2」などのグラフィックエディタが役に立つが、いまだに「これなら万事OK」と言えるエディタを見つけられないので、あまり深くはつっこまない。それぞれに一長一短があったり、別の問題が発生して時間を取られた経験があったりするので、グラフィックに凝る場合はそれなりの覚悟（と時間）が必要。

＝画像の読み込み＝


例えば「Block.png」という画像を用意した場合、その読み込みは以下のようにしてできる。

  [Embed(source='Block.png')]
   private static var Bitmap_Block: Class;


見た目はややこしいが、表現しているのは「"Block.png"という画像は"Bitmap_Block"というクラスとして生成できますよ」ということだ。


他にも読み込み方法はあるが、この方法ならswfに埋め込めるので、「実行時にはその画像を同じフォルダに用意する必要はない」「ロードの遅延を気にする必要がない」「"ローカルのデータを読み込めない問題"などが起こらない」などのメリットがある。ただ、デメリットとして「直接埋め込むためにswfのサイズが大きくなる」という問題などもある。

＝画像の生成＝


上のように読み込めば、画像の生成は以下のように簡単にできる。

var bmp:Bitmap = new Bitmap_Block();


注意点としては、「Image」ではなく「Bitmap」として生成される点。そのため、「Imageをセットするところ」にセットしようとすると問題が起こることがある。


なので、

var img:Image = new Image();
img.addChild(bmp);


のようにImageの下につけておくと使いまわす時に便利。

＝画像の描画登録＝


あとは、上で生成した画像をMainにて「addChild」で呼べば表示確認はできるのだが、後のことを考えて特殊な対応をしておきたい。具体的な内容についてはまた明日。