away3d and starling resizing issue

Question

I am having problems trying to resize correctly both away3d Gold and Starling in stage3d both working in a single game.

I have 4 starling instances and 1 Away3d instance handled by stage3dProxys.

This all work PERFECT on the initial size. Problems start when resizing the game in a browser.

The game .swf will be loaded by another parent .swf  in the end, but when the game is loaded directly on it's own HTML template the same thing happens.

What I have for now is:

   

stage.addEventListener( Event.RESIZE, onResize, false, 0, true );

    private function onResize(event:Event):void {
            _stage3DProxy.width = stage.stageWidth;
            _stage3DProxy.height = stage.stageHeight;
    
    
        }

It is working for starling instances, but not for away 3d instance. AND  it does not show the cutted images that should be outside the stage.

I also tried unsuccesfully:

   

starling.stage.stageWidth = this.stage.stageWidth;
             starling.stage.stageHeight = this.stage.stageHeight;

             var viewPort:Rectangle = RectangleUtil.fit(
                new Rectangle(0, 0, stage.stageWidth, stage.stageHeight),
                new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight),
            ScaleMode.NO_BORDER);

         Starling.current.viewPort = viewPort;

What I want to achieve is what you achieve in traditional Flash when setting the Size to "percentage"  the scale to:"NO_BORDER" and the align to: "Top Center" with a min height and width.

How to achieve this?

Thank you

Matej

Answer 1

Away3D

Well, I figured out that the way to re-size was to update the view. And the that you can center or re-position either positioning the flash.display.Sprite container where the Away scene was added or the view it-self.

It's tricky thought cause you have to find out that the view's methods for scaleX & scaleY are 'DEAD END's, meaning that they are empty methods that make no change what so ever. So you really MUST & can change only the width & height properties.

here al list of all the DEAD END methods of theView3D just as they appear in the source code:

// dead ends:
    override public function set z(value : Number) : void {}
    override public function set scaleZ(value : Number) : void {}
    override public function set rotation(value : Number) : void {}
    override public function set rotationX(value : Number) : void {}
    override public function set rotationY(value : Number) : void {}
    override public function set rotationZ(value : Number) : void {}
    override public function set transform(value : Transform) : void {}
    override public function set scaleX(value : Number) : void {}
    override public function set scaleY(value : Number) : void {}

Starling

What worked in our project after experimentation of the team is the following:

Goal: To re-size a background just as it would work when setting the Size to percentage the scale to:NO_BORDER and the align to: Top Center.

//Necessary variables
public var backgroundContainerStage:Starling;
public var anyOtherContainerStage:Starling;
public var stage3dProxy:Stage3DProxy;
public var scaleRatio:Number;
public var originalHeight:Number = 900;

// ... {HACK} ... {HACK}
// Add your Listeners in the constructor for Event.AddedToStage 
// and set the handler to init... Or any other method you prefer to add the 
// listener on the `Event.RESIZE`. 
//
// Also populate the stage3DProxy how ever you wish. 
// We did it this way: 
//_stage3DProxy = Stage3DManager.getInstance(stage).getFreeStage3DProxy();
//
// ... {HACK} ... {HACK}

public function init(event:Event=null):void{
  stage.addEventListener( Event.RESIZE, onResize, false, 0, true );
}

// The IMPORTANT PART !!!!!!!!
public function onResize():void  {
  scaleRatio = stage.stageHeight/originalHeight;
  backgroundContainerStage.stage.stageWidth =
      anyOtherContainerStage.stage.stageWidth =
          stage3dProxy.width = stage.stageWidth;

  // Need to get the Starling Sprite cause the the Starling instances don't allow to
  // set values for their `x` and `y` properties.
  var background: Sprite = backgroundContainerStage.getChildByName('background') as Sprite;
  var uiContainer: Sprite = anyOtherContainerStage.getChildByName('uiContainer') as Sprite;
  //First, RE-SIZE
  background.scaleX = background.scaleY =
     uiContainer.scaleX = uiContainer.scaleY = scaleRatio;

  //Then, RE-POSITION top-Center
  background.x =
     uiContainer.x = stage.stageWidth - background.width >>1;

}