さて、ActionScript3.0(as3)を使ってアイソメトリックな世界を簡単に作れるライブラリー「as3isolib」の解説6回目。
概要やインストール方法については解説第一回目 を見てみてください。
今回は、本流からちょっぴり横道にそれて、デバッグで活躍するカラーフィルターについて説明します。
これを使うと次の様に、箱に好きな色を付けることが出来ます。
ソースはこんな感じ
package
{
import as3isolib.display.IsoView;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoScene;
import as3isolib.graphics.SolidColorFill;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
public class IsoColorSample extends Sprite
{
public function IsoColorSample()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
// シーンの作成
var isoScene:IsoScene = new IsoScene();
// 真ん中に表示させたいので、IsoViewを使います
var isoView:IsoView = new IsoView();
isoView.addScene( isoScene );
addChild( isoView );
// 箱の作成
var box:IsoBox = new IsoBox();
// 箱の色をセット。引数は、色(uint)と、α値(Number)
box.fill = new SolidColorFill(0xFF0000, 1);
isoScene.addChild( box );
// レンダリング
isoView.render( true );
}
}
}
fillパラメータに、IFillインタフェースを継承した、SolidColorFillをセットすることで色がつけられます。
IsoBoxの場合は六面全てに違う色を指定することも出来ます。
その場合は、fillsパラメータに配列をセットします。
// 面はindex=0から、上面、右面、左面、背面右、背面左、底です。
// 6面色を付けてもよく分からないので３面だけ。
box.fills = [ new SolidColorFill(0xFF0000, 1), new SolidColorFill(0x0000FF, 1), new SolidColorFill(0x00FF00, 1) ];
Nintendo64のロゴみたいな箱ができました。
これを組み合わせれば次の様な面白い画像も作成できます。
ソースは次の通りです。
package
{
import as3isolib.display.IsoView;
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoScene;
import as3isolib.graphics.SolidColorFill;
import flash.display.Sprite;
public class IsoColorSample2 extends Sprite
{
public function IsoColorSample2()
{
var isoScene:IsoScene = new IsoScene();
var isoView:IsoView = new IsoView();
isoView.addScene( isoScene );
// カメラを動かして、真ん中に表示される様にする
isoView.pan( 40, -30 );
addChild( isoView );
// ドットの色。赤、黄土色、肌色
var colors:Vector.<uint> = new <uint>[ 0xdc2900, 0x8b7300, 0xffa53c ];
// ドット絵の行数
var ROW_NUM:uint = 17;
// ドット絵の列数
var COL_NUM:uint = 12;
// ドット絵
var maps:Vector.<int> = new <int>[
-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
-1, -1, -1, 0, 0, 0, 0, 0, -1, -1, -1, -1,
-1, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, -1,
-1, -1, 1, 1, 1, 2, 2, 1, 2, -1, -1, -1,
-1, 1, 2, 1, 2, 2, 2, 1, 2, 2, 2, -1,
-1, 1, 2, 1, 1, 2, 2, 2, 1, 2, 2, 2,
-1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, -1,
-1, -1, -1, 2, 2, 2, 2, 2, 2, 2, -1, -1,
-1, -1, 1, 1, 0, 1, 1, 1, -1, -1, -1, -1,
-1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, -1,
1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1,
2, 2, 1, 0, 2, 0, 0, 2, 0, 1, 2, 2,
2, 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 2,
2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2,
-1, -1, 0, 0, 0, -1, -1, 0, 0, 0, -1, -1,
-1, 1, 1, 1, -1, -1, -1, -1, 1, 1, 1, -1,
1, 1, 1, 1, -1, -1, -1, -1, 1, 1, 1, 1
];
// ドット絵を描く
for ( var row:int = ROW_NUM-1; row >= 0; row-- )
{
for ( var col:int = 0; col < COL_NUM; col++ )
{
var colorIndex:int = maps[ row*COL_NUM + col ];
if ( colorIndex != -1 )
{
var isoBox:IsoBox = new IsoBox();
var color:uint = colors[ colorIndex ];
// はみ出るので、箱のサイズを8x8x8にする
isoBox.setSize( 8, 8, 8 );
// 箱の色を指定
isoBox.fill = new SolidColorFill( color, 1 );
isoBox.x = isoBox.width * col;
isoBox.z = ( ROW_NUM-1 - row ) * isoBox.height;
isoScene.addChild( isoBox );
}
}
}
// 最後に描画
isoView.render( true );
}
}
}
以上で、カラーフィルターについての説明は終了です！
次回は、ちょっとライブラリーの深い部分について説明していきたいと思います。お楽しみに～