Scaling the stage


#1

Hi, I’ve been trying to scale my game based on the size of the window, and I found this good post which seemed like it would work. Unfortunately, the screen doesn’t actually scale at all. I’m using lime 6.4.0 and openfl 8.4.1.

Has this method of setting the scaleX/Y been deprecated? All the posts I’ve seen refer to the linked post are a couple years old.


#2

Have you further details about what is working or not ?
You may easily retrieve pertinent values, trace them and see where you stuck…

I’ve cleaned a few things, to let the FLASH resize with the normal event system.

package ;

import openfl.display.StageScaleMode;
import openfl.display.Sprite;
import openfl.events.Event;
import openfl.Lib;


class Test extends Sprite
{

	private static inline var NOMINAL_WIDTH:Int = 100;
	private static inline var NOMINAL_HEIGHT:Int = 100;

	public function new()
	{
		super();
	
		trace( "this.width = " + this.width );
		trace( "this.height = " + this.height );
		trace( "stage.stageWidth = " + stage.stageWidth );
		trace( "stage.stageHeight = " + stage.stageHeight );
		
		#if flash
			//stage.scaleMode = StageScaleMode.SHOW_ALL;
			//stage.align = untyped "";
			stage.addEventListener(Event.RESIZE, onResize);
		#else
			stage.addEventListener(Event.RESIZE, onResize);
			onResize(null);
		#end
		
		addEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
		
	}
	private function onAddedToStage( _e:Event ):Void
	{
		trace( "onAddedToStage()" );
		trace( "this.width = " + this.width );
		trace( "this.height = " + this.height );
		trace( "stage.stageWidth = " + stage.stageWidth );
		trace( "stage.stageHeight = " + stage.stageHeight );
	}

	private function onResize( _e:Event ):Void
	{
		trace( "onResize()" );
		trace( "this.width = " + this.width );
		trace( "this.height = " + this.height );
		trace( "stage.stageWidth = " + stage.stageWidth );
		trace( "stage.stageHeight = " + stage.stageHeight );
		
		graphics.clear();
		//graphics.lineStyle(10, 0x00FF00, 1 );
		graphics.beginFill(0x0000FF, 1 );
		graphics.drawRect( 0, 0, NOMINAL_WIDTH, NOMINAL_HEIGHT );
		
		var stageScaleX:Float = stage.stageWidth / NOMINAL_WIDTH;
		var stageScaleY:Float = stage.stageHeight / NOMINAL_HEIGHT;
		
		var stageScale:Float = Math.min(stageScaleX, stageScaleY);
		
		Lib.current.x = 0;
		Lib.current.y = 0;
		Lib.current.scaleX = stageScale;
		Lib.current.scaleY = stageScale;
		
		if ( stageScaleX > stageScaleY )
			Lib.current.x = (stage.stageWidth - NOMINAL_WIDTH * stageScale) / 2;
		else
			Lib.current.y = (stage.stageHeight - NOMINAL_HEIGHT * stageScale) / 2;
	}
}

And the result is “normal”.
If I specify a square NOMINAL format and redraw the background of the stage at each resize.
The square is well respected, and centered, as expected.


#3

Hmm. It seems I made a mistake. I’m using HaxePunk on top of OpenFL/Lime, and the HaxePunk resizing functions don’t seem to work correctly right now, so I thought I’d try to directly access the stage and resize it myself. I mistakenly thought that Lib.current.stage would point to the same resource HaxePunk was using, but it doesn’t (should have been obvious :p).

After making a new project to test that code, I can confirm that it does scale as expected.

Unfortunately it looks like I’ll need to figure out why resizing the screen as in the HaxePunk demo also moves everything (or doesn’t update the camera?) so that most graphics are offscreen. If I could figure out how much it’s offset I could manually adjust the camera position, but I haven’t found a way to get that info yet.


#4

Afraid I can’t be of any help about HaxepPunk.

It remains opensource like his predecessor, doesn’t it ?
So, you may up-trace where all this is resolved ?


#5

Yes, I’m going to be combing through the HaxePunk source to try to solve this.

Thanks for your help! :slight_smile:


#6

Try using HaxePunk’s built-in scale modes (demo).

If that doesn’t work either or you want more control, you could try advanced-layout. It supports HaxePunk, though the support isn’t well tested.


#7

I originally was using HaxePunk’s built in scale modes and following the demo, but I’ve been having some issues getting it to work.

I’ll definitely take a closer look at advanced-layout though, thanks!