as3isolib 解説4 「IsoView」

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

今回は、「IsoView」クラスについて説明します。
IsoViewクラスはIsoSceneを使って作ったグリッド世界の表示の仕方をサポートしてくれるクラスです。
3Dソフトなどでおなじみの、カメラのような役割をもっているようです。

まずは、IsoViewクラスを使って、おなじみの箱を表示してみましょう。
　

package
{
　　　　　　　　import as3isolib.display.IsoView;
　　　　　　　　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 IsoViewSample extends Sprite
　　　　　　　　{
　　　　　　　　 　　　　　　　　public function IsoViewSample()
　　　　　　　　 　　　　　　　　{
　　　　　　　　 　　　　　　　　 　　　　　　　　stage.align = StageAlign.TOP_LEFT;
　　　　　　　　 　　　　　　　　 　　　　　　　　stage.scaleMode = StageScaleMode.NO_SCALE;

　　　　　　　　 　　　　　　　　 　　　　　　　　var scene:IsoScene = new IsoScene();
　　　　　　　　 　　　　　　　　 　　　　　　　　var isoView:IsoView = new IsoView();
　　　　　　　　 　　　　　　　　 　　　　　　　　// IsoSceneをIsoViewに追加
　　　　　　　　 　　　　　　　　 　　　　　　　　isoView.addScene( scene );
　　　　　　　　 　　　　　　　　 　　　　　　　　// IsoViewをdisplayListに追加
　　　　　　　　 　　　　　　　　 　　　　　　　　addChild( isoView );

　　　　　　　　 　　　　　　　　 　　　　　　　　// 箱を追加
　　　　　　　　 　　　　　　　　 　　　　　　　　var box:IsoBox = new IsoBox();
　　　　　　　　 　　　　　　　　 　　　　　　　　scene.addChild( box );

　　　　　　　　 　　　　　　　　 　　　　　　　　// 分かりやすいようにグリッドも追加
　　　　　　　　 　　　　　　　　 　　　　　　　　var grid:IsoGrid = new IsoGrid();
　　　　　　　　 　　　　　　　　 　　　　　　　　scene.addChild( grid );

　　　　　　　　 　　　　　　　　 　　　　　　　　// IsoSceneではなく、IsoViewでレンダリング(IsoSceneでやっても問題はありません)
　　　　　　　　 　　　　　　　　 　　　　　　　　isoView.render( true );
　　　　　　　　 　　　　　　　　}
　　　　　　　　}
}





自動的に枠線がついて、IsoSceneを真ん中に表示してくれます。
特にサイズを指定しない場合は表示領域は400 x 250となります。
今までは、IsoSceneのrenderメソッドを呼んでいたところを、IsoViewのrenderを呼んでいます。

IsoViewでは複数のsceneに対応しているので、IsoViewに複数のIsoSceneをaddSceneした後、IsoViewのrenderを呼ぶことで、まとめて全てのシーンをレンダリングすることが出来ます。
　
ちなみに、IsoScene単独で表示させると左上の原点を中心に表示されましたよね。
参考までIsoSceneだけの場合のソースとスクリーンショットは次の通り。
　

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 IsoViewSample2 extends Sprite
　　　　　　　　{
　　　　　　　　 　　　　　　　　public function IsoViewSample2()
　　　　　　　　 　　　　　　　　{
　　　　　　　　 　　　　　　　　 　　　　　　　　stage.align = StageAlign.TOP_LEFT;
　　　　　　　　 　　　　　　　　 　　　　　　　　stage.scaleMode = StageScaleMode.NO_SCALE;

　　　　　　　　 　　　　　　　　 　　　　　　　　var scene:IsoScene = new IsoScene();
　　　　　　　　 　　　　　　　　 　　　　　　　　// IsoSceneをdisplayListに追加
　　　　　　　　 　　　　　　　　 　　　　　　　　scene.hostContainer = this;

　　　　　　　　 　　　　　　　　 　　　　　　　　// 箱を追加
　　　　　　　　 　　　　　　　　 　　　　　　　　var box:IsoBox = new IsoBox();
　　　　　　　　 　　　　　　　　 　　　　　　　　scene.addChild( box );

　　　　　　　　 　　　　　　　　 　　　　　　　　// 分かりやすいようにグリッドも追加
　　　　　　　　 　　　　　　　　 　　　　　　　　var grid:IsoGrid = new IsoGrid();
　　　　　　　　 　　　　　　　　 　　　　　　　　scene.addChild( grid );

　　　　　　　　 　　　　　　　　 　　　　　　　　// レンダリング
　　　　　　　　 　　　　　　　　 　　　　　　　　scene.render( true );
　　　　　　　　 　　　　　　　　}
　　　　　　　　}
}

　



　
おもいっきり見切れていますが左上が原点なので合っています。
　
　
それでは、IsoViewが備えている表示サポート機能について纏めて説明しちゃいます。
とはいえまだ発展途上なのか主要なメソッドは2つだけ。

・zoom ( zoomRate:Number ):void
文字通りズームさせます。(clickでズームイン、Alt+Clickでズームアウトします）

// ソース末尾に追加
addEventListener( MouseEvent.CLICK, _onClick );
function _onClick( e:MouseEvent ):void
{
　　　　　　　　if ( e.altKey )
{
　　　　　　　　isoView.zoom( isoView.currentZoom - 0.1 );
}
else
{
　　　　　　　　isoView.zoom( isoView.currentZoom + 0.1 );
}


・pan ( px:Number, py:Number ):void
IsoViewをカメラに見立てて、「カメラを」どれだけ動かすか。という移動量を指定します。
目的座標じゃなくて、「移動量」です。
どう使うのか、ちょっとナゾです。
　
　
最後にIsoViewの表示状態を変えるプロパティを紹介します。
・setSize( width:Number, height:Number):void
表示するシーンのサイズを指定できます。デフォルトは400 x 250です。
　
・set showBorder( value:Boolean ):void
falseをセットすると枠線を消せます。
　
・set clipContent( value:Boolean ):void
setSizeで指定したサイズにマスクされて表示されますが、clipContentにflaseを指定するとマスクが解除されます。
　
　
IsoViewの説明はこれでおしまいです！
次回は、自分で用意した好きな画像をas3isolib上で表示させる方法について説明します。