Starling stage resizing « Starling Forum

Starling Forum » Starling Framework » Troubleshooting

Starling stage resizing

(27 posts) (17 voices)

Started 1 year ago by hissorrow
Latest reply from starlingmageddon

Tags:

hissorrow

Novice Bird
Joined: Sep '11
Posts: 7

Starling stage doesn't resize while resizing native stage. starling.events.ResizeEvent.RESIZE dispatched, but starling.display.Stage.stageWidth and starling.display.Stage.stageHeight don't changed. I test it in IE 9.

Posted 1 year ago #

myzerov

Hatchling
Joined: Sep '11
Posts: 4

I solve this problem simply by changing starling-stage size (and ViewPort also) everytime when resize event is popped up:

stage.addEventListener(ResizeEvent.RESIZE, onResize);
 
private function onResize(e:ResizeEvent):void
{
      // set rectangle dimensions for viewPort:
      var viewPortRectangle:Rectangle = new Rectangle();
      viewPortRectangle.width = e.width; viewPortRectangle.height = e.height
 
      // resize the viewport:
      Starling.current.viewPort = viewPortRectangle;
 
      // assign the new stage width and height:
      stage.stageWidth = e.width;
      stage.stageHeight = e.height;
}

Posted 1 year ago #

hissorrow

Novice Bird
Joined: Sep '11
Posts: 7

Thanks for the answer.
But when I resize the viewPort manually, starling-stage graphics scaled.

Posted 1 year ago #
yester

Hatchling
Joined: Oct '11
Posts: 3

For those arriving here because ResizeEvent.RESIZE never dispatches,
I had to put both
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
and suddenly of course it worked ^^'

Posted 1 year ago #
Daniel

Primary Feather
Joined: Jan '10
Posts: 2,444

Yes, yester, that's the way to do it. That has nothing to do with Starling, though: the Flash Player needs to settings to dispatch resize events, and Starling relies on those. (I was caught by surprise on that issue, myself, when I implemented it.)

Posted 1 year ago #

reppinfreedom

Hatchling
Joined: Oct '11
Posts: 1

Btw, weird glitch here... "private function resizeStage(e:Event) {" < Makes scene full window.

"private function resizeStage(e:ResizeEvent) {" Just places the window in the top left and doesn't expand the 3d rendering area.

Also, when in a zoomed scene... Button hit areas are not correct. Not sure if thats a bug or you need to adjust for that somehow?

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
 
	import starling.core.*;
	import starling.events.*;
 
	public class Startup extends Sprite {
		private var mStarling:Starling;
 
		public function Startup() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			mStarling = new Starling(Game,stage);
			mStarling.enableErrorChecking = false;
			mStarling.start();
			stage.addEventListener(ResizeEvent.RESIZE, resizeStage);
		}
		private function resizeStage(e:Event) {
			var viewPortRectangle:Rectangle = new Rectangle();
			viewPortRectangle.width = stage.stageWidth;
			viewPortRectangle.height = stage.stageHeight;
			Starling.current.viewPort = viewPortRectangle;
 
			mStarling.stage.stageWidth = stage.stageWidth;
			mStarling.stage.stageHeight = stage.stageHeight;
		}
	}
}

Posted 1 year ago #

thiagoofelix

Hatchling
Joined: Nov '11
Posts: 1
I had the same problem. I started starling with a default viewport using 320x480 resolution:
var viewPortRectangle:Rectangle = new Rectangle(); viewPortRectangle.width = 320; viewPortRectangle.height = 480; mStarling = new Starling(Game, stage,viewPortRectangle);
Because all my Game was made based in this resolution.

I subscribe to listening the Event.Resize:
stage.addEventListener(Event.RESIZE, resizeStage);
And in the handler i create a new viewport for starling:
protected function resizeStage(event:Event):void { var viewPortRectangle:Rectangle = new Rectangle(); viewPortRectangle.width = stage.stageWidth; viewPortRectangle.height = stage.stageHeight; Starling.current.viewPort = viewPortRectangle; }
I would like to scale the content to te new resolution ( just to fit the new size, does not matter the aspectRation yet ). It visually works, but the touchs hit tests stop working after this.

There is someone that know a better way to archive this? or a fix to the hit test problem after changing the viewPort resolution?

[]'s
Posted 1 year ago #
Daniel

Primary Feather
Joined: Jan '10
Posts: 2,444

Sorry for the extremely late response, guys! I completely overlooked this thread.

You're right, there was a bug with the mouse coordinates! I just fixed it.

Thanks for pointing me at that!

Posted 1 year ago #
wlxhhr

Novice Bird
Joined: Mar '12
Posts: 12

How about scale the content when viewport changed problem still in Starling1.0?

Posted 1 year ago #
Daniel

Primary Feather
Joined: Jan '10
Posts: 2,444
Which problem do you mean? I think all viewport related things should be fixed; just be sure to use
stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT;
That works best for most situations.
Posted 1 year ago #
Makuro

Hatchling
Joined: Mar '12
Posts: 2

I have the same problem thiagoofelix wrote but using AIR 3.2 on Mobile. Is possible to scale viewport but leave aspect ratio with the original size? Or tell starling to do hit tests with a "scale factor"?

Posted 1 year ago #
Daniel

Primary Feather
Joined: Jan '10
Posts: 2,444

Makuro, could you describe your problem in more detail? Or maybe prepare a small demo project for me to try?

Posted 1 year ago #

Mistakenness

Senior Bird
Joined: Mar '12
Posts: 90

Hi,
I'm testing starling for mobile on Flash Pro, my stage size is set to 960 x 640, so I can target many devices.

package
{
 
	import flash.display.MovieClip;
	import flash.events.*;
	import starling.core.*;
	import starling.events.*;
	import net.hires.debug.Stats;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.geom.*;
 
	public class Main extends MovieClip
	{
		protected var mStarling:Starling;
 
		public function Main()
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			var viewPortRectangle:Rectangle = new Rectangle();
			viewPortRectangle.width = stage.stageWidth;
			viewPortRectangle.height = stage.stageHeight;
 
			mStarling = new Starling(Game,stage,viewPortRectangle);
			addChild( new Stats() );
 
			mStarling.start();
			stage.addEventListener(ResizeEvent.RESIZE, resizeStage);
		}
		private function resizeStage(e:Event)
		{
			var viewPortRectangle:Rectangle = new Rectangle();
			viewPortRectangle.width = stage.stageWidth;
			viewPortRectangle.height = stage.stageHeight;
			Starling.current.viewPort = viewPortRectangle;
		}
	}
}

On the iPad everything works well, it scales up the content, but strangely on iPod Touch 4th generation i got this :

http://uptiki.altervista.org/viewer.php?file=qvgvderbfb234a69g2gp.png

If I don't set the ResizeEvent, on iPad obviously it doesn't scale, but on iPad everything works.

I'm using the latest swc file you download from this site.

Regards

Posted 1 year ago #

as3gpu

Novice Bird
Joined: Oct '11
Posts: 8

Hello there,

quoting "hissorrow", I have the same issue.
At runtime, when modifying the Starling current viewPort, the rendering increases/decreases in size, but it messes with the scaling.
The native stage is:
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

but it still stretches the stage3d like crazy. Any clue? I've tried it all

Thanks!

Posted 1 year ago #
as3gpu

Novice Bird
Joined: Oct '11
Posts: 8

Nevermind. Found solution! If you want your stage to scale 1:1, make sure you also manually change the starling stage properties, in ADDITION to setting the viewPort boundaries:

getStarling().viewPort = new Rectangle(0, 0, STAGE_WIDTH, STAGE_HEIGHT);
getStarling().stage.stageWidth = STAGE_WIDTH;
getStarling().stage.stageHeight = STAGE_HEIGHT;

Posted 1 year ago #

Andrius

Expert Bird
Joined: Apr '12
Posts: 183

Hello, I'm getting a very strange error when trying to listen to ResizeEvet: TypeError: Error #1034: Type Coercion failed: cannot convert flash.events::Event@39b60b1 to starling.events.ResizeEvent.
And it looks like I am doing every thing the same as everybody else in this forum, that's my code:

package  {
 
	import flash.display.MovieClip;
	import flash.geom.Rectangle;
	import starling.core.Starling;
	import starling.events.ResizeEvent;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
 
	public class Main extends MovieClip {
 
		//[SWF(width="640", height="960")]
 
		public function Main() {
			// constructor code
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			var viewPortRectangle:Rectangle = new Rectangle();
			viewPortRectangle.width =  stage.stageWidth;
			viewPortRectangle.height =  stage.stageHeight;
 
			trace("works");
 
			var star:Starling = new Starling(Game, stage,viewPortRectangle);
			Starling.multitouchEnabled = true;
			star.simulateMultitouch = true;
		    star.start();	
 
		stage.addEventListener(ResizeEvent.RESIZE, onResize2);
		}
 
		private function onResize2(e:ResizeEvent):void
		{
			  // set rectangle dimensions for viewPort:
			  var viewPortRectangle:Rectangle = new Rectangle();
			  viewPortRectangle.width = e.width; viewPortRectangle.height = e.height
 
			  // resize the viewport:
			  Starling.current.viewPort = viewPortRectangle;
 
			  // assign the new stage width and height:
			  stage.stageWidth = stage.stageWidth;
			  stage.stageHeight = stage.stageHeight;
		}
 
   }
}

Any help will be appreciated!

Posted 1 year ago #

Jeff

Moderating Owl
Joined: Nov '11
Posts: 1,286

Andrius123, this class is your startup class, so when you do

stage.addEventListener(ResizeEvent.RESIZE, onResize2);

you are actually talking to the flash stage and registering a handler that will receive a flash.events.Event and not a starling.events.ResizeEvent which is why you are getting the error message about coercion.

The reason why the register works in the first place is it is string based and flash.events.Event.RESIZE and starling.events.ResizeEvent.RESIZE both == 'resize'

So in your case, if you want to listen to resize events in your startup class registered with the flash stage, use flash.events.Event with your onResize2 handler. if you were actually listening to Starling's version you would be registering it on the Starling's stage and then would use the ResizeEvent class in the handler.

[EDIT]
Another problem I see with your code is you need to call Starling.multitouchEnabled = true *before* you create your Starling instance or it will have no effect.

Posted 1 year ago #
Andrius

Expert Bird
Joined: Apr '12
Posts: 183
Thanks allot for a quick and informative answer Jeff, now in the same class I did this:
Starling.current.stage.addEventListener(ResizeEvent.RESIZE, onResize2);
and the error is gone
Posted 1 year ago #
Andrius

Expert Bird
Joined: Apr '12
Posts: 183
After a long time of testing and playing around with supporting both retina and standard resolution iPhone display, I find out that when doing:
star.addEventListener(Event.CONTEXT3D_CREATE, function(e:Event):void { viewPortRectangle.width = stage.stageWidth; viewPortRectangle.height = stage.stageHeight; star.stage.stageWidth = 320; star.stage.stageHeight = 480; });
all object on the stage are scaled up and they look really bad and blurred (especially text). So I managed to do that in a little different way: First of all my SWF is 320x480 and I don't listen to ResizeEvent or CONTEXT3D_CREATE event at all. So I check if app is running on iPhone with retina display via system.Capabilities:
if(Capabilities.screenResolutionX == 640 || Capabilities.screenResolutionY == 960) { Game.GlobalScale = 2; }
and if it does I change the value of GlobalScale integer variable to 2 witch is in my Game.as class. (the default value for GlobalScale is 1). And finally I multiply every number witch indicates any size or position by GlobalScale. So for example if I have a textField with font size of 16 and I want to place it on coordinate (100;100). On iPhone 3Gs all numbers(width, height and font size) will be multiplied by 1(witch is the default value of GlobalScale) and will be the same, but on retina display those numbers will be multiplied by 2 witch will give me good quality of text and correct position on the screen.
Posted 1 year ago #
Andrius

Expert Bird
Joined: Apr '12
Posts: 183

By the way I don'd know if this is the best way of doing that so if it isn't please let me know what you use

Posted 1 year ago #
Patrick

Senior Bird
Joined: Jul '12
Posts: 75

Hello, I have been trying to figure this out since last night with no luck.
I am working on an iPad3 only app but I can't see the full stage when I am testing on the desktop.
I posted here. http://forum.starling-framework.org/topic/ipad3-app-on-the-desktop

Anyone else having/solved this issue?

Thanks!

Posted 9 months ago #
Ender22

Hatchling
Joined: Feb '13
Posts: 4

Hello,

I got the viewport scaling to work nicely for all of my starling content.
However my title screen has gui elements that i didnt want to recreate with starling so i use the native stage on that screen... how can i make the native stage also scale accordingly the way the starling viewport does?

Because right now the native stage stays small in the top corner while the rest of the game (starling content) fits the ipad screen nicely.

Thanks for any help.

Posted 3 months ago #
Jeff

Moderating Owl
Joined: Nov '11
Posts: 1,286

To which parent are you adding your native stage content?

Starling provides a nativeOverlay parent on the native stage through Starling.current.nativeOverlay, and if you add your native stage content to this, Starling will update the scale of the nativeOverlay as the Starling stage viewports and stage width/heights change.

Posted 3 months ago #
Ender22

Hatchling
Joined: Feb '13
Posts: 4

Ah brilliant, the native overlay... awesome, exactly what I needed.
Before I was just using Starling.current.nativeStage.
Thanks so much Jeff~

Posted 3 months ago #

Astraport

Senior Bird
Joined: Jun '12
Posts: 114

Just interested in this issue.

I create two sets of graphics for buttons. One 64 x 64 for the resolutions less than 1024 (iphone, android phones), the other 128 x 128 - for 1024 and more (tablets).

I created atlases, arranged in folders. Now the main app class, which prepares the assets, all sizes and runs Starling`s main class that loads the textures and adds elements and create my buttons.

My device scaleFactor = 2 and the buttons must be in 2 times bigger, but it does not. Despite the fact that load atlases from folder 'x2', textures have of the actual size of 64, and the native size - 128. All because I listen flash.events.Event.RESIZE, it reduces all the elements twice. If i do not use this approach, the buttons as needed for 128, but now the other sizes bigger than need and some giant fields on the edges, not stretched scene.

Here is my app starting code:

stage.scaleMode = StageScaleMode.NO_SCALE;
         stage.align = StageAlign.TOP_LEFT;
         iOS = Capabilities.manufacturer.indexOf("iOS") != -1;
         mouseEnabled = mouseChildren = false;
         Starling.handleLostContext = false;
         Starling.multitouchEnabled = !iOS;
 
         var viewPort:Rectangle = RectangleUtil.fit(
            new Rectangle(0, 0, stage.stageWidth, stage.stageHeight),
            new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight),
            ScaleMode.SHOW_ALL);
         trace (viewPort.width)
         var scaleFactor:int = viewPort.width < 960 ? 1 : 2;
 
         var appDir:File = File.applicationDirectory;
         assets = new AssetManager(scaleFactor);
         assets.verbose = Capabilities.isDebugger;
         assets.enqueue(
            appDir.resolvePath("assets/audio"),
            appDir.resolvePath(formatString("assets/fonts/{0}x", scaleFactor)),
            appDir.resolvePath(formatString("assets/textures/{0}x", scaleFactor))
         );
 
         starling = new Starling(Main, stage, viewPort);
         starling.stage.stageWidth  = this.stage.stageWidth;  // <- same size on all devices!
         starling.stage.stageHeight = this.stage.stageHeight; // <- same size on all devices!
         starling.simulateMultitouch  = false;
         starling.enableErrorChecking = false;
 
         starling.addEventListener(starling.events.Event.ROOT_CREATED, function():void
         {
            var game:Main = starling.root as Main ;
            game.start(assets);
            starling.start();
         });
 
// If i comment line below the buttons are normal, but display great white fields on the edges
         this.stage.addEventListener(flash.events.Event.RESIZE, stageResized, false, int.MAX_VALUE, true);
         NativeApplication.nativeApplication.addEventListener(
            flash.events.Event.ACTIVATE, function (e:*):void { starling.start(); });
 
         NativeApplication.nativeApplication.addEventListener(
            flash.events.Event.DEACTIVATE, function (e:*):void { starling.stop(); });
      }
 
      private function stageResized(e:flash.events.Event):void
      {
         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.SHOW_ALL);
 
         Starling.current.viewPort = viewPort;
      }

Starling start class

public function start(assets:AssetManager):void
      {
         sAssets = assets;
 
         mLoadingProgress = new ProgressBar();
         mLoadingProgress.x = (this.width  - mLoadingProgress.width) / 2;
         mLoadingProgress.y = (this.height - mLoadingProgress.height) / 2;
         mLoadingProgress.y = this.height * 0.7;
         addChild(mLoadingProgress);
 
         assets.loadQueue(function(ratio:Number):void
         {
            mLoadingProgress.value = ratio;
            if (ratio == 1)
               Starling.juggler.delayCall(function():void
               {
                  mLoadingProgress.removeFromParent(true);
                  mLoadingProgress = null;
                  addChild(new MainPage());
               }, 0.15);
         });
      }
 
      public static function get assets():AssetManager { return sAssets; }

And the button creation

public class NewMenuButton extends Button
   {
      public static const SIZE:int = 64;
 
      public function NewMenuButton(icon:String)
      {
         trace(Main.assets.getTexture(icon).width);
         defaultIcon = new Image(Main.assets.getTexture(icon));
         disabledIcon = new Image(Main.assets.getTexture(icon));
         downIcon = new Image(Main.assets.getTexture(icon));
 
         downIcon.scaleX = downIcon.scaleY = 0.8;
         disabledIcon.alpha = 0.35;
 
         width = SIZE;
         height = SIZE;
      }
}

Posted 3 months ago #

THX

Hatchling
Joined: Apr '13
Posts: 1

Sorry, all discussed resize-solutions don't work for me.

Either the Starling scene gets clipped and/or skewed. Is there a working example of a resizable web application (ScaleMode.NONE, StageAlign.TOP_LEFT) that deals with every window size and doesn't scale its content?

Thanks in advance!

Posted 1 month ago #

starlingmageddon

Hatchling
Joined: Apr '13
Posts: 1

Doesn't work for me too, I have a Startup Class

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
 
	import starling.core.*;
	import starling.events.ResizeEvent;
 
	public class Startup extends Sprite {
		private var mStarling:Starling;
 
		public function Startup() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			mStarling = new Starling(Game,stage);
			mStarling.enableErrorChecking = false;
			mStarling.start();
			stage.addEventListener(ResizeEvent.RESIZE, resizeStage);
		}
 
		private function resizeStage(e:Event):void {
			var viewPortRectangle:Rectangle = new Rectangle();
			viewPortRectangle.width = stage.stageWidth;
			viewPortRectangle.height = stage.stageHeight;
			Starling.current.viewPort = viewPortRectangle;
 
			mStarling.stage.stageWidth = stage.stageWidth;
			mStarling.stage.stageHeight = stage.stageHeight;
 
			trace("resize");
		}
	}
}

from trace i see that the event is correctly fired, but the swf does not stretch to the correct size...

Posted 1 month ago #

RSS feed for this topic

Reply

You must log in to post.