ActionScript最初の一歩(1)

.31 2009 ActionScript comment(-) trackback(0)
ゲームを作ろうと思ったときに最低限必要なことはだいたい次のようなことではないでしょうか。
  • 画像ファイルを表示する
  • キーボードやマウスの状態を取得する
  • タイマーを設定する
  • ファイルの読み書きをする
  • 音声ファイルの再生
逆に言えばこれだけできればマリオみたいなアクションゲームは作れそうです。 そもそもActionScriptを始めようと思ったきっかけはActionScriptでActionGameを作りたくなったことなのでこれだけできれば自分としてはとりあえず満足です。

秋のうちに開発環境は整えていたので今日は上に挙げたもののうち画像周りを制覇することを目標にいろいろ調べてみます。

その前にコンパイル方法。忘れてたのでメモ。
FlashDevelop統合開発環境の場合、ctrl-F8。コマンドラインからなら
% mxmcl hoge.as
でコンパイルできます。


いよいよ本題。
画像を読み込んで表示する
package
{
	// import宣言省略

	public class test_bmp extends Sprite
	{
		public function test_bmp(): void
		{
			init();
		}
		
		private function init(): void
		{
			var loader:Loader = new Loader();
			var request:URLRequest = new URLRequest("CharA.png");
			loader.load(request);
			addChild(loader);
		}
	}
}

ここで使っているLoader、非常に便利なのですが、AS3から導入されたのだそうです。
注意:この方法ではbmpファイルは読み込めないようです。今回はpngファイルを使いました。

デバッグしてみるとFlashPlayerが勝手に伸縮をかけてきて画像が微妙に変になったので次を追加。コンストラクタの頭にでも書いておけばよさそうです。
stage.scaleMode = "noScale";

これで自動伸縮をoffにしています。
あとはこれをhtmlで読み込む方法:
<embed src="test_bmp.swf" type="application/x-shockwave-flash" width="300" height="200">

それからもう一つ。ActionScriptでflashの幅、高さを指定する方法:
[SWF(width="300", height="200", backgroundColor="0xFFCC00", frameRate="24")]

こんなメタタグをimportの後に書いておくといいようです。


次は画像をフラッシュに埋め込んでそれを表示するようにします。

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	
	[SWF(width="300", height="200", backgroundColor="0xFFCC00", frameRate="24")]
	
	public class test_bmp2 extends Sprite
	{
		[Embed(source='CharA.png')]
			private var Image0 : Class;
		public function test_bmp2(): void
		{
			stage.scaleMode = "noScale";
			init();
		}
		
		private function init(): void
		{
			var charBmp: Bitmap = new Image0();
			addChild(charBmp);
		}
	}
}

画像をフラッシュに埋め込むにはEmbedメタタグを使えばいいんですね。(ってかこっちの方がLoadしなくていい分楽ですね。)

続いて画像をコピーするときに背景色を透過するようにします。
initをこんな感じにするとうまくいきました。
private function init(): void
{
	var charBmp: Bitmap = new Image0();
	var bk: BitmapData = new BitmapData(300, 200, true, 0);
	var pt: Point = new Point(0, 0);
	var rc: Rectangle = new Rectangle(0, 0, 244, 192);
	bk.threshold(charBmp.bitmapData, rc, pt, "==", 0x003200c8, 0xffffff, 0xffffff, true);
	var charBmp2: Bitmap = new Bitmap(bk);
	addChild(charBmp2);
}

では最後に画像の一部分を取り出してきて好きなところにコピーする方法。ここまでできればBitBlt相当のことができます。
private function init(): void
{
	var charBmp: Bitmap = new Image0();
	var bk: BitmapData = new BitmapData(300, 200, true, 0);
	var pt: Point = new Point(0, 0);
	var rc: Rectangle = new Rectangle(0, 0, 244, 192);
	charBmp.x = 100;
	charBmp.y = 10;
	bk.threshold(charBmp.bitmapData, rc, pt, "==", 0x003200c8, 0xffffff, 0xffffff, true);
	var charBmp2: Bitmap = new Bitmap(bk);
	
	var disp: BitmapData = new BitmapData(300, 200, true, 0);
	disp.draw(charBmp2, null, null, null, new Rectangle(32, 32, 32, 32), false);
	
	var dispBmp: Bitmap = new Bitmap(disp);
	dispBmp.x = 100;
	dispBmp.y = 30;
	addChild(dispBmp);
}

ひとつ気になるのがメモリの解放。普通のWindowプログラミングでは最後にBtimapを解放したり、 newで作ったオブジェクトに対してはdeleteで解放したりしますがASの場合はどうなんでしょう。
GCがちゃんと機能してくれるなら確かに手動で解放する必要はないんですが本当に大丈夫なんでしょうかね。

とにかくこれでActionGameで最低限必要な画像処理ができるようになりました。

長くなってきたので一旦ここで切ります。 # 諸事情によりこの記事へのコメントは無効にしています。
関連記事

trackbackURL:http://yuranos.blog11.fc2.com/tb.php/18-93e0f4c0