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.
Starling stage resizing
(27 posts) (17 voices)-
Posted 1 year ago #
-
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 # -
Thanks for the answer.
But when I resize theviewPortmanually, starling-stage graphics scaled.Posted 1 year ago # -
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 # -
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 # -
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 # -
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 # -
How about scale the content when viewport changed problem still in Starling1.0?
Posted 1 year ago # -
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 # -
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 # -
Makuro, could you describe your problem in more detail? Or maybe prepare a small demo project for me to try?
Posted 1 year ago # -
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 # -
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 # -
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 # -
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 # -
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 # -
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 # -
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 # -
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 # -
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-desktopAnyone else having/solved this issue?
Thanks!
Posted 9 months ago # -
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 # -
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 # -
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 # -
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 # -
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 # -
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 #
Reply
You must log in to post.