さて、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での独自のイベントハンドリングについて説明したいと思います。