Next Post Previous Post

1 Feb 2010

DisplayObject.rotationX,Y,Z

Posted by derRaab

Just a quick note about working with DisplayObject.rotationX,Y,Z:

Keep in mind that your DisplayObject rotates around it's center point. This may result in weird optics if you forget to align your DisplayObject properly.

Update: Well, there is much more to know!

There's need for an DisplayObjectContainer with an properly assigned PerspectiveProjection.

Copy & paste this code and you'll see what I'm talking about:

Actionscript:
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener( Event.RESIZE, onStageResize );

function onStageResize( event : Event ) : void
{
    draw();
}

function createRectSprite( w : int, h : int, rotationY : Number, container : Sprite, useProjection : Boolean ) : Sprite
{
    // 3D object
    var graphicSprite : Sprite = new Sprite();
        graphicSprite.name = "graphicSprite";
        graphicSprite.rotationY = rotationY;
        graphicSprite.buttonMode = true;
        graphicSprite.useHandCursor = true;

    // Make sure 3D objects content is centered
    var g : Graphics = graphicSprite.graphics;
        g.beginFill( 0, .5 );
        g.drawRect( w * -.5, h * -.5, w, h );
        g.endFill();

    // 3D Container
    var containerSprite : Sprite = new Sprite();
        containerSprite.addChild( graphicSprite );

    // Apply projection to 3D Container instead of 3D Object
    if ( useProjection )
    {
        var projection:PerspectiveProjection = new PerspectiveProjection();             
            projection.projectionCenter = new Point( 0, 0 );

        containerSprite.transform.perspectiveProjection = projection;
    }
       
    // Visualize center
    g = containerSprite.graphics;
    g.beginFill( 0xff0000 );
    g.drawCircle( 0, 0, 2 );
    g.endFill();

    container.addChild( containerSprite );   
    return containerSprite;
}

var left : Sprite;
var right : Sprite;
 
function draw() : void
{
    while ( numChildren> 0 ) { removeChildAt( 0 ); }

    var container : Sprite = new Sprite()
        container.name = "container";
        container.x = stage.stageWidth * .5;
        container.y = stage.stageHeight * .5;
    addChild( container );

    var stepX : int = stage.stageWidth / 3;

    var w : int = 200;
    var h : int = 200;

    left = createRectSprite( w, h, -60, this, true );
    left.name = "left";
    left.x = stepX;

    right = createRectSprite( w, h, 60, this, true );
    right.name = "right";
    right.x = stepX * 2;
   
    left.y =
    right.y = stage.stageHeight * .5;
}
 
function onEventHitTest( event : Event ) : void
{
    var containerSprite : DisplayObjectContainer;
    var graphicSprite : DisplayObject;
   
    containerSprite = this.getChildByName( "left" ) as DisplayObjectContainer;
    graphicSprite = containerSprite.getChildByName( "graphicSprite" ) as DisplayObject;
   
    trace( "hit left containerSprite:", containerSprite.hitTestPoint( mouseX, mouseY, true ) );
    trace( "hit left graphicSprite:", graphicSprite.hitTestPoint( mouseX, mouseY, true ) );
   
    containerSprite = this.getChildByName( "right" ) as DisplayObjectContainer;
    graphicSprite = containerSprite.getChildByName( "graphicSprite" ) as DisplayObject;
   
    trace( "hit right containerSprite:", containerSprite.hitTestPoint( mouseX, mouseY, true ) );
    trace( "hit right graphicSprite:", graphicSprite.hitTestPoint( mouseX, mouseY, true ) );
    trace( "" );
}

stage.addEventListener( MouseEvent.MOUSE_DOWN, onEventHitTest );
 
draw();

Leave a Reply

Message: