今日から、何日間かにわたって、ActionScript3.0(as3)を使ってアイソメトリックな世界を簡単に作れるライブラリー「as3isolib」について解説していきます。
アイソメトリックとは、物体を斜めから見る投影法だそうですが、難しい事はさておき、as3isolibを使うと、次の様な疑似3Dの世界が作れます。

タクティクスオウガ

アメーバぴぐはいわずもがなですね！
as3isolibは使っていないと技術者懇談会で言っていました。
ただ、ちらっと見えたソースの記述がas3isolibに似ていたので、ベースは参考にしているのではないでしょうか。

変わったところでは、無料英語学習サイト「ココネ」のアバターサービスまぁるでもアイソメトリック座標系を採用しています。

と言ったところで、まずは、ライブラリソースをゲット！
http://code.google.com/p/as3isolib/

「source」タブに書いてあるSVNリポジトリー
http://as3isolib.googlecode.com/svn/trunk/
からチェックアウトするか、

zipで固められている
http://as3isolib.googlecode.com/svn/trunk/fp10/download/as3isolib.v1.core.zip
から手に入れましょう。

展開して、ライブラリにパスを通したら早速「Hello isolib」です。

package
{
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoGrid;
import as3isolib.display.scene.IsoScene;

import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

public class HelloIsolib extends Sprite
{
public function HelloIsolib()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

// 箱を作る
var box:IsoBox = new IsoBox();
// ( x, y, z ) = ( 100, 0, 0 )の位置に移動させる
box.moveTo( 100, 0, 0 );

// アイソメトリックな空間を描画するコンテナ
var scene:IsoScene = new IsoScene();
scene.hostContainer = this;

scene.addChild( box );

// レンダリングして表示する
scene.render();
}
}
}

実行結果はこの通り。
かわいい25px四方の立方体が描画されました。

19行目のIsoBoxはデフォルトで用意されている直方体が作れるクラスです。
setSizeで縦、横、高さを指定できますが、何も指定しないと25px四方になります。

moveTo( x:Number, y:Number, z:Number )　でアイソメトリック空間を移動させることができます。
これは、

box.x = x;
box.y = y;
box.z = z;

と同じ事です。
　
　
次に、アイソメトリックな空間を計算して描画してくれるIsoSceneの登場です。
hostContainerプロパティで、displayListと繋ぎます。

後は描画したい物体をIsoSceneにどんどんaddChildして、最期にrenderメソッドを呼ぶと描画されます。
renderを呼ばない限り何も表示されません。
　
　
真っ白な空間に箱があるだけでは、いまいちピンと来ないので、グリッドを表示させてみましょう。
便利なIsoGridというグリッドを描画するクラスが用意されています。
左上に描画されると分かりにくいのでちょっと位置をずらします。

package
{
import as3isolib.display.primitive.IsoBox;
import as3isolib.display.scene.IsoGrid;
import as3isolib.display.scene.IsoScene;

import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

public class HelloIsolib extends Sprite
{
public function HelloIsolib()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.BOTTOM_RIGHT;

// 箱を作る
var box:IsoBox = new IsoBox();
// ( x, y, z ) = ( 100, 0, 0 )の位置に移動させる
box.moveTo( 100, 0, 0 );

// グリッド
var grid:IsoGrid = new IsoGrid();

// アイソメトリックな空間を描画するコンテナ
var scene:IsoScene = new IsoScene();
scene.hostContainer = this;

scene.addChild( box );
scene.addChild( grid );

// レンダリングして表示する
scene.render();
}
}
}

実行結果は次の通り

何となく、タクティクスオウガのような、ぴぐのような世界がチラ見えて来ました！
ということで、次回に続きます。

次回は、この一風変わったグリッドの座標系について説明していきます。

as3isolib 解説1 「hello isolib」