この記事のURL

http://www.dango-itimi.com/blog/archives/2005/000710.html


FLASH tips update FlashとImageMagickの連携1

perlから操作できるImageMagickという画像処理ツールがあります。ImageMagickがサーバにインストールされていれば、どなたでも簡単に利用することができます。
今回、次のゲーム製作のためにImageMagickを利用してみることにしました。

dango.pngまず、左のような画像(dango.png)を用意します。今回は小さい白玉のドット絵を用意しました。これをサーバの適当なディレクトリにアップロードします。

次にImageMagickを操作する為のperlスクリプト(img.cgi)を作成します。

#!/usr/local/bin/perl -w

#モジュール使用宣言
use strict;
use CGI qw(:standard);
use Image::Magick;

#読み込み開始
&readImgData();

#指定画像データ読み込み
sub readImgData{

	my $file  = param( 'file' );    #ファイルパス取得
	my $image = Image::Magick->new; #オブジェクト作成
	$image->Read($file);            #ファイル読み込み

	#画像サイズを取得
	my( $width, $height ) = $image->Ping( $file );

	#ヘッダ宣言
	print "Content-type:text/plane\n\n";

	#画像サイズ分繰り返す
	for( my $i=0 ; $i < $height ; $i++, print "\n" ){

		for( my $j=0 ; $j < $width ; $j++ ){

			#RGB値取得
			my( $r, $g, $b ) = split ',', $image->Get( "pixel[ $j, $i ]" );
			my $rgb = '';

			#RGB文字列作成
			foreach( $r, $g, $b ){
			  
			  $_    = int($_ / 256);                  #256で割る
			  $_    = unpack( "H2", pack( "C", $_) ); #10進整数→16進文字列
			  $rgb .= "$_";                           #結合
			}
			#RGB値表示
			print "$rgb,";
		}
	}
}


このスクリプトは何をしているのかといいますと、img.cgi呼び出し時に付与されたパラメータにある画像ファイルを読み込み、その画像ファイルの1ピクセル1ピクセルの色情報を取得し表示しています。画像ファイルの色情報を取得するという部分にImageMagickの機能を利用しています。
img.cgiをdango.pngを配置したディレクトリと同じ階層に配置し、
http://www.dango-itimi.com/blog/swf/8/img.cgi?file=dango.png
といった形で呼び出すと出力結果はこのようになります。→[imgcgi.txt]
全てのピクセルの色情報が書き出されているのが見れると思います。テキストファイルを横にぐいーんと広げると、なんとなく白玉画像にうっすら見えますでしょうか。

次にこのimg.cgiをFlashから呼び出し、その各ピクセル情報を元にムービークリップを複製・色変更処理等を行います。
img.cgiは只のcsvデータを書き出すだけなので、LoadVars.onLoadではなくLoadVars.onDataを用いて読み込んでください。
今回作成したサンプルのファイル一式です→[block.zip]
このサンプルflaファイルを実行すると次のようなものができあがります。

ひとつひとつの丸いムービークリップがdango.pngのひとつひとつのピクセルに対応しています。ここまでくればシメシメですね。
次はFlash側で作成されたこれらムービークリップを利用してゲームにしてみます。

2へ続く

[ FLASH ] [ tips ] [ update ] 投稿者 siratama : 2005年04月28日 21:24

トラックバック

http://www.dango-itimi.com/blog/mt-tb.cgi/672

コメント

以下コメントを書き込むだけでは、管理人には通知が行われません。通知を行いたい場合、管理人の書き込みに「返信」を押してコメントをしていただくか、あるいは Google+, Twitter へご連絡ください。




[EDIT]