さて、ActionScript3.0(as3)を使ってアイソメトリックな世界を簡単に作れるライブラリー「as3isolib」の解説2回目。
概要やインストール方法については前回の記事を見てみてください。

今回は、アイソメトリックな空間について説明します。

座標系について
as3isolibで扱う空間は、各軸が90度で交差する直行座標系とは違い、次の様な座標系となります。
以下では、この独特の座標系をIsometric座標系だと長いので、ISO座標系と呼ぶことにします。(本当はなんて呼ぶのかは知りません)

ISO座標系は、IsoGridクラスを使うと簡単に表示できます。
デバッグで大活躍します。
グリッドのサイズはデフォルトで25pxですが、
cellSizeプロパティに値をセットすることで変更できます。

package
{
 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 grid:IsoGrid = new IsoGrid();
 
 // ISOな空間を描画するコンテナ
 var scene:IsoScene = new IsoScene();
 scene.hostContainer = this;
 
 scene.addChild( grid );
 
 // レンダリングして表示する
 scene.render();
 }
 }
}

IsoMath
直行座標系とISO座標系との橋渡しをするのが、IsoMathクラスです。
IsoMathを使うと簡単に直交座標系の値をISO座標系に変換できます。

Flashには、flash.geomパッケージに、座標を表すPointクラスがありますが、as3isolibには、そのクラスを拡張したPtクラスがありますのでそちらと組み合わせて利用します。

IsoMath.screenToIso( Pt )で、直交座標系からISO座標系の座標を出せます。
試しに直交座標系(50, 50)をISO座標系に変換してみると(75, 25, 0)と出ました。
(赤い点が直交座標系(50, 50)の場所. 座標の原点は共通 )

デフォルトでは、1グリッドが25ピクセルになるので、x軸方向に3マス(25×3=75)、y軸方向に1マス(25×1=25)で合ってそうです。

上の図を出すActionScript3.0(as3)でのソースは次の通り

package
{
import as3isolib.display.scene.IsoGrid;
import as3isolib.display.scene.IsoScene;
import as3isolib.geom.IsoMath;
import as3isolib.geom.Pt;

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

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

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

// ISOな空間を描画するコンテナ
var scene:IsoScene = new IsoScene();
scene.hostContainer = this;

scene.addChild( grid );

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

// 分かりやすい様に点を打っておく
var dot:Sprite = new Sprite();
dot.graphics.beginFill( 0xFF0000 );
dot.graphics.drawCircle( 0, 0, 5 );
dot.x = 50;
dot.y = 50;
addChild( dot );

var pt:Pt = new Pt( 50, 50, 0 );
IsoMath.screenToIso( pt );
trace( pt.x, pt.y, pt.z ); // 75, 25, 0
}
}
}

逆に、IsoMath.IsoToScreen( Pt )で、ISO座標系から直交座標系の座標を出せます。
箱を作って、ISO座標を( 75, 25, 50 )にセット。直交座標系では、( 50, 0 )と出ました。(赤い点)
何か合ってそうです。(もちろん合っています)

package
{
 import as3isolib.core.ClassFactory;
 import as3isolib.display.primitive.IsoBox;
 import as3isolib.display.renderers.DefaultSceneLayoutRenderer;
 import as3isolib.display.renderers.DefaultShadowRenderer;
 import as3isolib.display.scene.IsoGrid;
 import as3isolib.display.scene.IsoScene;
 import as3isolib.geom.IsoMath;
 import as3isolib.geom.Pt;
 
 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 grid:IsoGrid = new IsoGrid();
 
 var box:IsoBox = new IsoBox();
 box.moveTo( 75, 25, 50 );
 
 // ISOな空間を描画するコンテナ
 var scene:IsoScene = new IsoScene();
 // 分かりやすい様に影を表示
 scene.styleRenderers = [ new ClassFactory( DefaultShadowRenderer ) ];
 scene.hostContainer = this;
 
 scene.addChild( grid );
 scene.addChild( box );
 
 // レンダリングして表示する
 scene.render();
 
 var pt:Pt = new Pt( 75, 25, 50 ); // 箱の座標をセット
 IsoMath.isoToScreen( pt );
 trace( pt.x, pt.y  ); // 50, 0
 
 // ためしに、50, 0に点を打ってみる
 var dot:Sprite = new Sprite();
 dot.graphics.beginFill( 0xFF0000 );
 dot.graphics.drawCircle( 0, 0, 5 );
 dot.x = 50;
 dot.y = 0;
 addChild( dot );
 }
 }
}

ISO座標系での長さの概念

ISO座標系では、

　・x座標方向の長さはwidth

　・y座標方向の長さはlength

　・z座標方向への長さはheight

という変数で定義します。そして、箱の底の奥が、座標点となります。

上の箱に赤い点が入っている図を見ると、確かに赤い点が箱の底の奥あたりを指していますね。

as3isolibのブログに貼ってある図が分かりやすくて、慣れるまでは毎日見ていたので、こちらにも貼っておきます。

といったところでISO座標系の説明はおしまいです！
次回は、as3isolibでの独自のイベントハンドリングについて説明したいと思います。

as3isolib 解説2 「ISO座標系」