Preloader seems to calculate stage width wrong

Haxe
#1

Two problems I experience:

  1. I cannot set the splash image in the center of stage. It looks like Lib.current.stage.stageWidth and stageHeight don’t give the right numbers.

  2. Font I register in preloader interfere with the other fonts. Probably replaces them ( I could not figure out what is going on, but I get font related errors on other textfields I use in the app if I use the Preloader class )

      import openfl.system.Capabilities;
  import openfl.Lib;
   @:bitmap("assets/images/logo.png") class Splash extends BitmapData {}
     @:font("assets/fonts/Open Sans.ttf") class DefaultFont extends flash.text.Font {}

 @:keep class Preloader extends Sprite {
 
 private var progress:Sprite;
 private var textPercent:TextField;
 private var splashImage:Bitmap;
 
 public function new () {
 	
 	super();
 	construct();

 }
 
 public function construct():Void {
  	
 	Font.registerFont(DefaultFont);
 	Lib.current.stage.color     = 0xFAFAFA;
 	Lib.current.stage.frameRate = 60;
 	
 	// splash image
 	var splashWidth:Float   = (Lib.current.stage.stageWidth / 2) ; / 
 	var splashHeight:Float  = (Lib.current.stage.stageHeight / 2) ; 
 	
 	splashImage = new Bitmap(new Splash(Std.int(splashWidth), Std.int(splashHeight)), PixelSnapping.AUTO, true);

 	splashImage.x = (Lib.current.stage.stageWidth / 2) - splashWidth/2;
 	splashImage.y = (Lib.current.stage.stageHeight / 2) - splashHeight / 2;
 	addChild(splashImage);
         .....
#2

You should try listening for the stage’s Event.RESIZE. It might allow you to reposition the image.

#3

The position is messing up because Splash class does not change the size of the image as required.

I used RESIZE but it did not make any difference. Resize was being called only once so any doubt on stage resizing during the loading time is nil.

What I doubt is there is something wrong with the class “Splash”. It works well till I put the right values of width and height of the bitmap as it’s parameter. But if I put a different value ( to change it’s size), there is no effect on the resultant size of the loaded bitmap. For example, I want to change the logo bitmap according to the stage size. But if I put the new size, there is no effect on the final bitmap. That messes up the calculation.

I tried to copy the loaded bitmap into another bitmap, but that too did not work. Just showing a white blank bitmap:

    splashWidth =  (Lib.current.stage.stageWidth / 2) ;  
splashHeight=  (Lib.current.stage.stageHeight / 2) ;  
	  
var bd:BitmapData =  new Splash(Std.int(splashWidth), Std.int(splashHeight)) ;

	splashImage = new Bitmap( bd , PixelSnapping.AUTO, true);

 	bd = new BitmapData(Std.int(splashWidth), Std.int(splashHeight)) ;

	bd.draw(splashImage);
	 
	splashImage = new Bitmap( bd.clone());

So ultimately I tried this using, and it is working for html5. I however doubt if loading dynamically would fail as compared to embedding the bitmap in some cases when file is heavier.

  BitmapData.loadFromFile ("assets/images/logo.png").onComplete({})

public function construct():Void {
 	
	Font.registerFont(DefaultFont);

BitmapData.loadFromFile ("assets/images/logo.png").onComplete(

function (bitmapData:BitmapData) 
{
		
	splashImage= new Bitmap (bitmapData);


	var sw:Float = splashImage.width ;
	 splashWidth =  (Lib.current.stage.stageWidth / 2) ; //213;
	 splashHeight =  splashImage.height * (splashWidth / sw);

	 splashImage.width = splashWidth;
	 splashImage.height = splashHeight;
	 
	progress = new Sprite();
	
	textPercent = new TextField();

	var tFormat:TextFormat = new TextFormat();
	tFormat.font           = "Open Sans";
	tFormat.color          = 0xAA0000;
	tFormat.size           = 20;
	tFormat.align          = TextFormatAlign.CENTER;
	
	textPercent.defaultTextFormat = tFormat;
	textPercent.width           = Lib.current.stage.stageWidth;

	textPercent.textColor       = 0x000000;
	textPercent.backgroundColor = 0x000000;
	textPercent.text            = "";
	textPercent.selectable      = false;
	textPercent.embedFonts      = true;
	
	addEventListener(Event.COMPLETE, loaderInfo_onComplete);
	addEventListener(ProgressEvent.PROGRESS, loaderInfo_onUpdate);
	
	addChild(progress);
	addChild(splashImage);
	addChild(textPercent);

	Lib.current.stage.addEventListener(Event.RESIZE, resize);

	resize(null);
		
});

}

public function resize(e:Event ):Void 
{

	splashImage.x = (Lib.current.stage.stageWidth / 2) - splashWidth/2;
	splashImage.y = (Lib.current.stage.stageHeight / 2) - splashHeight / 2;
	
	progress.graphics.beginFill (0x4ab4e6);
	progress.graphics.drawRect(0,0, 800,20);
	progress.scaleX = 0.0;
	progress.x = 0;
	progress.y = 0; 
	
	textPercent.x               = 0;
	textPercent.y               =splashImage.y + splashHeight+25 ;
	
}//resize 

public function loaderInfo_onComplete(e:Event):Void {
	trace("LOADING COMPLETE!");
	
};

public function loaderInfo_onUpdate(e:ProgressEvent):Void {
	
	var _bytesTotal:Float  = e.bytesTotal;
	var _bytesLoaded:Float = e.bytesLoaded;
 	
	var _loadedPercent:Float = _bytesLoaded/_bytesTotal*100;
	
	if (_bytesTotal == 0) {
		
		progress.scaleX = 0;
		
	} else {
		
		progress.scaleX = (_loadedPercent/100); // needs to scale from center
		textPercent.text = "Loading...\n"+Std.string( Std.int(_loadedPercent) )+"%";
		
	}
	
}

}