Splash Screen on startup

[joshtynjala]

StarlingBootstrap should be able to display a splash screen until Starling is initialized and the application is created. Maybe with a minimum time.

Random notes and ideas:

• iOS can use Default PNG files, but not Android.
• All platforms can display the application icon over a flat color.
• Might use starling.utils.ScaleMode values.

Here's how Flex does it: Adobe Flex 4.6: Define a mobile application and a splash screen

[agentphantom]

What I like about Flex mobile SplashScreen is the "zoom" scale mode. That allows to use a single .png file that will look good enough in most screens and aspect ratios.

If you need help with this feature I can do some testing to see how different scale modes look.

[quick6black]

Hi Josh,

did you make any progress on the splash screen implementation?

thanks,

[joshtynjala]

@quick6black No, I haven't done any work on this one yet.

[leossmith]

this would be awesome :+1:

[pauloamorimbr]

(edited: Don't use this!!! See the corrected solution below in the answers...)

I extended the StarlingBootstrap so that I could have my own splashscreen (bitmap) created without any flickering after the default iOS splash image. I also considered the "zoom" to put the image on the correct place. Since I passed through here when I was looking for a solution, maybe this can help someone else out there: :)

package utils
{
	import flash.display.Bitmap;
	
	import feathers.core.StarlingBootstrap;
	
	public class Bootstrap extends feathers.core.StarlingBootstrap
	{
		private var _info:Object;
		
		public function Bootstrap()
		{
			
			var bmp:Bitmap = BmpSplash(); //Any embedded Bitmap here
			bmp.smoothing = true;
			
			if( bmp.width > bmp.height )
			{
				bmp.height = stage.fullScreenHeight;
				bmp.scaleX = bmp.scaleY;
			}
			else
			{
				bmp.width = stage.fullScreenWidth;
				bmp.scaleY = bmp.scaleX;
			}
			
			bmp.x = (stage.fullScreenWidth - bmp.width) / 2;
			bmp.y = (stage.fullScreenHeight - bmp.height) / 2;
			
			Globals.splashImage = bmp;
			stage.addChild( bmp );
			
			super();
		}
		
		override public function info():Object
		{
			if (!_info)
			{
				_info = {
					rootClassName: "MyApp",
					themeClassName: "themes.MyTheme"
				};
			}
			
			return _info;
		}
		
	}
}

I'm saving a reference to the Bitmap on a Global static variable (ugly, I know) so I can fade it out and then dispose it when I'm done loading and preparing everything.

The main reason for me is the flicker time between the iOS splash goes away and the context3d is created.

If it's too dumb of me I'd like to know also!

Wish you all the best!

[pauloamorimbr]

Ok, it only worked on debug and "Fast" mode. When publishing on iOS with "Standard" mode the app crashes.

@joshtynjala , could you help me solving this, please? What am I missing to extend the StarlingBootstrap?

Help, pls?

[joshtynjala]

I don't see anything wrong with your code. It's probably a bug in the iOS packaging. Sometimes when it optimizes more, these issues pop up, and you can tweak your code a bit to compensate.

The first thing I would try is moving your code in the constructor after the super() call. I could see that potentially being the place where the packaging has an issue.

Next, I would try temporarily remove the code in the constructor to see if your custom bootstrap works simply with your info() override.

Then, I'd try removing only some parts of the constructor code.

Basically, you're trying to narrow down exactly what is causing the crash. Once it stops crashing, you can add smaller parts back in until it crashes again. That'll help you figure out exactly which line it is, and you can try tweaking things to work around the issue.

[pauloamorimbr]

@joshtynjala, Thanks very very much for the answer...it lead me to a good path and I found the problem. Accessing the static variable from the Globals class where I was storing my splash was causing the crash. Wasn't immediate, though....but after loading the theme the app crashed...

So, for everyone who needs this...I've stored the reference on the bootstrap class itself and all worked...no flickering anymore and my client is happy now:

package utils
{
	import flash.display.Bitmap;
	
	import feathers.core.StarlingBootstrap;
	
	public class Bootstrap extends feathers.core.StarlingBootstrap
	{
		private var _info:Object;
		
		[Embed(source="img_splashScreen.png")]
		public var BmpSplash:Class;
		
		public static var splashScreen:Bitmap;
		
		public function Bootstrap()
		{
			
			super();
			
			var bmp:Bitmap = new BmpSplash();
			bmp.smoothing = true;
			
			if( bmp.width > bmp.height )
			{
				bmp.height = stage.fullScreenHeight;
				bmp.scaleX = bmp.scaleY;
			}
			else
			{
				bmp.width = stage.fullScreenWidth;
				bmp.scaleY = bmp.scaleX;
			}
			
			bmp.x = (stage.fullScreenWidth - bmp.width) / 2;
			bmp.y = (stage.fullScreenHeight - bmp.height) / 2;
			
			Bootstrap.splashScreen = bmp;
			stage.addChild( bmp );
			
		}
		
		override public function info():Object
		{
			if (!_info)
			{
				_info = {
					rootClassName: "MyClass",
					themeClassName: "themes.MyTheme"
				};
			}
			
			return _info;
		}
		
	}
}

Enjoy it! :)

(And thanks again, Josh, for the awesome platform!)