モノクロビット

Archive for 5月, 2011

 
上のflashは気にしないでください。
さて今回は前に言ったとおりLive2Dのモデルをビットマップ出力する自作ライブラリの紹介です。
Live2D SDK for Flashはベクターデータしか出力できないのですがこのライブラリを使用するとラスターデータ出力が可能になります。
以前つくったLive2Dモデルをswfに埋め込むライブラリにビットマップ出力機能を追加したものになってます。
スプライトとして受け取ったベクターデータをビットマップ化してから表示させているため通常のスプライト描画より負荷がかかるという難点があります。

//タイムラインに記述しています。

	import jp.live2d.model.Live2DModel;
	import monochromebit.L2dUtilCls;//今回つくったクラス

//自作クラスのインスタンス化
var l2dUtilCls:L2dUtilCls = new L2dUtilCls();
//モデルの入れ物
var l2dAndMod:Live2DModel;
//モデルを入れるビットマップ
var scrBmp:Bitmap = new Bitmap();

//MOB_LIST[xx]のインデックス番号のモデルをセット
l2dAndMod = l2dUtilCls.getModel(1);

//ビットマップ化したLive2Dモデルをセット
//二つ目の引数は拡大縮小 0.5だと1/2  2だと2倍
scrBmp.bitmapData = l2dUtilCls.getBitmapModel(l2dAndMod , 1.5);

			//ビットマップを登録
			stage.addChild(scrBmp);

こんだけです。とっても簡単です。
 

今回つくったクラスの中身

//mobファイルをバイナリとして組み込んでロード
package monochromebit
{
	import jp.live2d.model.Live2DModel;
	import flash.utils.*
	import flash.display.*;
	import flash.geom.*;//マトリックス用
	/**
	 * @author knov
	 * 多量のＭＯＢ埋め込み活用
	 * ビットマップ出力
	 *
	 */
	public class L2dUtilCls{
		public var l2dMod:Live2DModel;

		/**コンストラクタ**/
		public function L2dUtilCls(){}

		//スプライトをビットマップデータ化して返す
		//BitmapData型で返す必要がある
		public function getBitmapModel(l2dMod:Live2DModel,reSize:Number):BitmapData{

			var tmpRect:Rectangle = l2dMod.getCanvasBounds();
			// 透明なBitmapDataを用意。背景を塗りつぶすため
			var modBmd:BitmapData = new BitmapData(tmpRect.width*reSize ,tmpRect.height*reSize,true ,0x00000000);//関数内で作成する必要がある

			//スプライト取得
			var tmpSpt:Sprite = l2dMod.getSprite();

			var mtxElem:Matrix = new Matrix();
			mtxElem.scale(reSize ,reSize);//拡大縮小
			mtxElem.translate(0 ,0);   // 描画位置
			modBmd.draw(tmpSpt,mtxElem,null,null,null,true); //spriteをラスタライズ
			return modBmd;
		}//getBitmapModelEND

		//モデルを生成して返す
		public function getModel(element:int):Live2DModel{
			//MOD_LISTからモデルロード
			l2dMod = loadBinMod(element);//○番めのmob読み込み
			return l2dMod;
		}//getModelEND

		//バイナリからモデルロード
		private function loadBinMod(element:int):Live2DModel{
			var byteArray:ByteArray = new MOB_LIST[element] as ByteArray;
			return Live2DModel.loadFromByteArray(byteArray);
		}//loadBinModEND

include "../moblist.as"//mob登録リスト

	}//classEND
}/**packageEND**/

今回もCS5でflaファイルにメインコードを記述しましたがクラス自体はflex環境でも使用可能です。
実行にはLive2D SDK for Flash 1.0が必要です。
▽ダウンロードはこちら
zipでやる

もうすぐflash CS5.5がリリースされますね。ぼくはアンドロイドアプリ開発をするためにtegra2搭載のたっかいタブレットPCを購入したのですがいつの間にかアンドロイドアプリをCS5で開発するためのプラグインが配布終了していました。かんなりショックを受けたのですがCS5.5でアンドロイドアプリが開発できるようです。というかcs5.5買わせるためにプラグイン配布終了とかえげつなぁ～。adobeえげつなぁ。

とりあえずうちのタブレットは読書専用機になってます。正直もったいないです。読書だけなら一番やっすいクラスのタブレットでも良かったので。

さておきFlashCS5.5の新機能にシンボルのラスタライズが搭載されるみたいですね。どういう機能かというとベクター画像をラスター画像に変換して扱えるという物です。

それのどこがおいしいのかといいますと、ベクターデータをビットマップ化(ラスター画像)することにより高速化できる処理があったり、ビットマップ化することによってできる画像処理などがうまみでしょうか。

ちょっと前にベクターデータを扱っていて困ったことがありましたのでその紹介です。

ベクターデータは半透明化するとスケルトン状態に透明化されてしまいます。見えてはいけない内蔵部分がもろに見えてしまったり。まぁそれはそれで用途があるとおもいますが。

そこでベクター画像をビットマップ化することにより自然な半透明化にすることが可能です。見てもらった方が早いので。

△クリックするとドロイド君カップケーキの色が変わるよ

スプライトのビットマップ化のソース

//透明なBitmapData。背景を塗りつぶすため
modBmd = new BitmapData(146 ,167 ,true ,0x77000000);
 var mtxElem:Matrix = new Matrix();
 //mtxElem.scale(1.1 ,1.1);//拡大縮小
 mtxElem.translate(0 ,0);//位置
 modBmd.draw(modSpt ,mtxElem);//spriteをラスタライズ
 scrBmp1.bitmapData = modBmd;

こないだのLive2Dモデルを組み込むライブラリにLive2Dモデルのビットマップ出力機能を追加したので今度公開します。
利用者がいないのは誰よりも知っているんだよ。