Unexpected behavior on Nexus 10 (black box over some of the content)

thinkspring

Working through some tests I came across this issue. Before thinking of it as a bug I wanted to make sure I was not doing anything wrong on my side with my init/setup procedures.

I have tested on a few iOS devices (iPad1/2, iPod touch 4th gen) and Android devices (Galaxy S3, Droid Incredible, Nexus 10). The content shows up as expected everywhere- except on the Nexus 10.

I am adjusting the viewPort on stage resize. The issue is that (only on the Nexus 10), a black box appears on stage where nothing is rendered. It looks as as if a Flash display list item was dropped over the top, but the only such item in the test app is one hires stat box (which I removed for a test, to no avail.)

The black box is the same size (roughly 645x860) and appears in the same location of the screen each time (roughly 826x702 within the Nexus 10's 1600x2650 resolution, in portrait mode.)

I've attached a few screenshots with the viewport at 2x, stretched to fit, and stretched uniformly to illustrate what's happening. Strange that it only appears on this one Android device (maybe the crazy-high resolution of the Nexus 10 has something to do with this?)

http://thinkspring.net/share/screenshots/nexus10_stretched_052313.png
http://thinkspring.net/share/screenshots/nexus10_uniform_052313.png
http://thinkspring.net/share/screenshots/nexus10_doubled_052313.png

Pasting my startup class below.

package {
	import flash.display.*;
	import flash.events.Event;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.geom.Rectangle;

	import net.hires.debug.Stats;

	import screens.SpriteSheetExample;

	import starling.core.Starling;
	import starling.display.Sprite;

	[SWF(width="480", height="678", frameRate="60", backgroundColor="#000000")]

	public class SpriteSheet extends Sprite
	{
		private static const APP_WIDTH:int = 480;//480
		private static const APP_HEIGHT:int = 678;//678

		private var stats:Stats;
		private var myStarling:Starling;		

		public function SpriteSheet()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStageEventHandler);
			stage.addEventListener(Event.RESIZE, resizeStage);
		}

		private function init():void
		{
			stats = new Stats();
			addChild(stats);
			var viewport:Rectangle = new Rectangle( 0, 0, APP_WIDTH, APP_HEIGHT );
			var myStarling:Starling = new Starling( SpriteSheetExample, stage, viewport, null, "auto");
			myStarling.start();
		}

		private function onAddedToStageEventHandler( e:Event ):void
		{
			removeEventListener( Event.ADDED_TO_STAGE, onAddedToStageEventHandler );
			init();
		}

		private function resizeStage(evt:Event):void {
			trace('resizeStage');
			var viewPortRectangle:Rectangle = new Rectangle();
			var widthChange = stage.stageWidth/APP_WIDTH;
			viewPortRectangle.width = stage.stageWidth;
			viewPortRectangle.height = APP_HEIGHT*widthChange;
			Starling.current.viewPort = viewPortRectangle;
		}

	}
}

joshtynjala

I've tested Starling content on my Nexus 10 without issues. I'm not sure what that could be.

thinkspring

I think it may be related to the initial stage size vs. the Nexus 10's huge resolution, maybe there is some connection to this thread: http://forum.starling-framework.org/topic/error-3683-on-google-nexus-10#post-29724

The SWF attributes for width/height of the stage are 480x678 (portrait). To fill the screen width-wise with the content, the 480x678 background .png basically ends up 3.33x times larger in scale. I wonder if there is potential problem with this or some correlation to contentScaleFactor technically being above 2 when the content is scaled to fit?

I will test doubling the initial stage size (and background graphic) to see if that helps.

thinkspring

Tried several tests swapping out assets, changing up the stage & scale sizes, etc- but nothing changes. There must be something else going on. Will continue to look into it.

thinkspring

Ultimately I never found out why the code above would cause the display to glitch only on the Nexus 10, but wonder if it has something to do with attempting to alter Starling's viewPort after establishing creating it at a small/standard-ish size- then forcing it up to an extreme 1600x2560.

I did test against the latest beta AIR SDK (and a few older ones) just in case, but the blank space still appeared only on a Nexus 10. It's definitely possible that I am doing something wrong (or ill-advised) in the code above- but I could not determine what.

For a workaround I'm avoiding any resize of the viewport rectangle, instead I just set it once- at the start- and leave it. This is closer to what the demo/scaffold projects do, and the code below scales the content reliably & without issues on any devices I've tested on (including the Nexus 10).

package
{
	import flash.display.Sprite;
	import flash.geom.Rectangle;
	import screens.SpriteSheetExample;
	import starling.core.Starling;
	import starling.utils.RectangleUtil;
	import starling.utils.ScaleMode;

	[SWF(frameRate="60", backgroundColor="#333333")]
	public class SpriteSheetMobile extends Sprite
	{
		private static const APP_WIDTH:int = 480;
		private static const APP_HEIGHT:int = 678;
		public var starlingInstance:Starling;

		public function SpriteSheetMobile()
		{
			var viewPort:Rectangle = RectangleUtil.fit(
			new Rectangle(0, 0, APP_WIDTH, APP_HEIGHT),
			new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight),
			ScaleMode.SHOW_ALL);

			starlingInstance = new Starling(SpriteSheetExample, stage, viewPort);
			starlingInstance.stage.stageWidth = APP_WIDTH;
			starlingInstance.stage.stageHeight = APP_HEIGHT;
			starlingInstance.start();

		}
	}
}

joshtynjala

Consider taking a look at how the Feathers examples do it.

thinkspring

Thanks Josh, I just checked out some of the examples from Feathers. I noticed the special sauce/extra parameters with the RESIZE listener- definitely seems like a more intentional & efficient way to work with events. Helpful to know and I will keep this (and Feathers) in mind for future projects.