as3isolib Actionscript 3 Isometric Library for Flash/Flex

as3isolib is a great isometric library for actionscript 3 by Justin Opitz.  This is a lower level isometric library that could be used in building your own isometric gaming engine or learning more about the popular isometric view in games or other flash content.

From building basic blocks…

To constructing sprites and objects with individual iso objects with their own bounding boxes.


This sample shows a two piece tree, a common issue with sprites in isometric is where to slice them up.  This sample shows a tree with the leaves able to be in front of a character so that you could walk under the tree and be in front of the trunk but covered by the trees.  Essentially height is respected.

Sample code for the tree tutorial:

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

        import flash.display.Loader;
        import flash.display.Sprite;
        import flash.events.Event;
        import flash.net.URLRequest;

        public class IsoApplication extends Sprite
        {
                private var scene:IsoScene;
                private var assets:Object;

                private var loader:Loader

                private function loadAssets ():void
                {
                        loader = new Loader();
                        loader.contentLoaderInfo.addEventListener(Event.INIT, loader_initHandler);
                        loader.load(new URLRequest("assets/swf/assets.swf"));

                }

                private function loader_initHandler (evt:Event):void
                {
                        buildScene();
                }

                private function buildScene ():void
                {
                        scene = new IsoScene();
                        scene.hostContainer = this;
                        scene.container.x = 200;
                        scene.container.y = 200;

                        var treeTrunkClass:Class = loader.contentLoaderInfo.applicationDomain.getDefinition("TreeTrunk") as Class;
                        var treeLeavesClass:Class = loader.contentLoaderInfo.applicationDomain.getDefinition("TreeLeaves") as Class;

                        var grid:IsoGrid = new IsoGrid();
                        grid.showOrigin = false;
                        scene.addChild(grid);

                        var s0:IsoSprite = new IsoSprite();
                        s0.setSize(25, 25, 65);
                        s0.moveTo(50, 50, 0);
                        s0.sprites = [treeTrunkClass];
                        scene.addChild(s0);

                        var s1:IsoSprite = new IsoSprite();
                        s1.setSize(125, 125, 100);
                        s1.moveTo(0, 0, 75);
                        s1.sprites = [treeLeavesClass];
                        scene.addChild(s1);

                        scene.render();
                }

                public function IsoApplication ()
                {
                        loadAssets();
                }
        }
}

current features

  • simple scene creation
  • 3 primitive types
  • base class for displaying user-created content
  • plenty of styling option on vector based primitives
  • integrates well with a variety of tween engines
  • standard 3D isometric positional sorting

So get busy building the flash version of roller coaster tycoon…

Advertisements

10 Responses to “as3isolib Actionscript 3 Isometric Library for Flash/Flex”

  1. Florian Says:

    What about interactivity? Is it already available or planned soon?

  2. jwopitz Says:

    Thanks for the review.

    @Florian
    Yes, you can interact with the isometric objects. Because they are based loosely on the scenegraph implementation, you might want to check out the method I used for the interactive events. Check out the eventDispatcherProxy documentation – http://as3isolib.googlecode.com/svn/trunk/asdoc/eDpLib/events/EventDispatcherProxy.html

    This basically allows the data portion of the iso primitive class to act as the actual interactive object (which is the Sprite on stage). It stands in place of the Sprite for all events.

    Justin

  3. jwopitz Says:

    I should add that the lib is in the Alpha stage so I am constantly trying to morph the API into the best it can be. If anyone has suggestions or would like to help out on the project, please contact me jwopitz [at] gmail [dot] com.

  4. Parantar Says:

    actionscript is too difficult for me

  5. Nexus Says:

    That a good Library ^^ May some exemple on interactivity can help all user =)
    I post my exemple but i’m not sure it’s the best method to do that =/

    import as3isolib.core.ClassFactory;
    import as3isolib.core.IFactory;
    import as3isolib.display.IsoView;
    import as3isolib.display.primitive.IsoBox;
    import as3isolib.display.renderers.DefaultShadowRenderer;
    import as3isolib.display.scene.IsoGrid;
    import as3isolib.display.scene.IsoScene;
    import as3isolib.enum.RenderStyleType;

    import flash.display.Sprite;

    var box:IsoBox = new IsoBox();
    box.styleType = RenderStyleType.SHADED;
    box.faceColors = [0xff0000, 0x00ff00, 0x0000ff, 0xff0000, 0x00ff00, 0x0000ff];
    box.faceAlphas = [1, 1, 1, 1, 1, 1];
    box.setSize(25, 30, 40);
    box.moveTo(0, 0, 10);

    var box2:IsoBox = new IsoBox();
    box2.width = 30;
    box2.length = 30;
    box2.height = 30;
    box2.x = 40;
    box2.y = -40;
    box2.z = 50;
    box2.id = “MovingBox”;

    var grid:IsoGrid = new IsoGrid();
    grid.moveTo(0, 0, 0);
    grid.cellSize = 25;
    grid.showOrigin = false;

    var factory:IFactory = new ClassFactory(DefaultShadowRenderer);
    factory.properties = {shadowColor:0x000000, shadowAlpha:0.15, drawAll:false};

    var scene:IsoScene = new IsoScene();
    scene.addChild(box);
    scene.addChild(box2);
    scene.addChild(grid);
    scene.styleRenderers = [factory];
    scene.render();

    var view:IsoView = new IsoView();
    view.setSize(400, 400);
    view.scene = scene;//look in the future to be able to add more scenes
    addChild(view);
    stage.addEventListener(KeyboardEvent.KEY_DOWN,Moving);

    function Moving(e:KeyboardEvent) {

    //trace(“>”+e);

    //Fleche Gauche
    if (e.keyCode == 37) {
    view.scene.children[IDChild(“MovingBox”)].x = view.scene.children[IDChild(“MovingBox”)].x-1;
    view.scene.render();
    }
    //Fleche Haut
    if (e.keyCode == 38) {
    if (e.shiftKey) {
    view.scene.children[IDChild(“MovingBox”)].z = view.scene.children[IDChild(“MovingBox”)].z-1;
    } else {
    view.scene.children[IDChild(“MovingBox”)].y = view.scene.children[IDChild(“MovingBox”)].y-1;
    }
    view.scene.render();
    }
    //Fleche Droite
    if (e.keyCode == 39) {
    view.scene.children[IDChild(“MovingBox”)].x = view.scene.children[IDChild(“MovingBox”)].x+1;
    view.scene.render();
    }
    //Fleche Bas
    if (e.keyCode == 40) {
    if (e.shiftKey) {
    view.scene.children[IDChild(“MovingBox”)].z = view.scene.children[IDChild(“MovingBox”)].z+1;
    } else {
    view.scene.children[IDChild(“MovingBox”)].y = view.scene.children[IDChild(“MovingBox”)].y+1;
    }
    view.scene.render();
    }
    trace(“~>”+view.scene.children);
    }

    function IDChild(Identifiant:String):int{
    return view.scene.getChildIndex(view.scene.getChildByID(Identifiant));
    }

  6. Flug Brasilien Says:

    Hey.
    Iam a Facility management student, and i must learn a lot about computer programs which are used to build 3-D constructions. Can you tell me wheter i can used the Actionscript 3 Isometric Library only for computer game programming? The reason for my question: Iam searching for new, good programs which give me a chance to build qualitative well 3-D construktions, without a lot of problems!
    Thx for reading, Greets – Flug

  7. DemAS3 Says:

    Does not work. An error 1045 – interface INode is not found!
    What is the problem???

  8. jwopitz Says:

    @DemAS3 did you get this figured out. If not you might try posting to the as3isolib’s user group – http://groups.google.com/group/as3isolib-users-group

    I am also happy to help you in my free time to get things straightened out. email me at as3isolib@gmail.com

  9. jwopitz Says:

    FYI an new release has been uploaded with a few API updates and two new tutorials – http://code.google.com/p/as3isolib/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: