今日から、何日間かにわたって、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四方の立方体が描画されました。
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();
}
}
}
実行結果は次の通り
何となく、タクティクスオウガのような、ぴぐのような世界がチラ見えて来ました！
ということで、次回に続きます。
次回は、この一風変わったグリッドの座標系について説明していきます。