Nice Guy

ScaleManager.SHOW_ALL

Recommended Posts

On 10/3/2017 at 1:10 AM, rich said:

There is no Scale Manager in Phaser 3 yet.

Hello

Still not? Could you please share info when it might be implemented?

Or maybe somebody has the well-written plugin for that? 

Thank you!

Share this post


Link to post
Share on other sites
2 hours ago, samme said:

Thank you very much for sharing!

I know this way to make resizing with css, but, unfortunately, it is not enough for me

I wanna use build in features like it was in phaser 2 to make games fully responsive to all screen sizes

I'm aimed to do the best user-friendly and customer loved games, so it would be great to know if it planned to do in phaser 3 or I should it develop by my own
 

Share this post


Link to post
Share on other sites

I'm using code from that example (game and cameras resize) + some basic css.
It could be part of Phaser, but honestly that's all I will ever need. If you want proper responsive game, you have to implement it yourself anyway.

phaser3-resizing-compressed.gif.24710c79c1613486cb759fd8ba530db3.gif

This is my custom ScaleManager's initialize method that I call after I create the Game instance (Haxe code).

public static function initialize(game:Dynamic):Void {
	function resize() {
		var w = js.Browser.window.innerWidth;
		var h = js.Browser.window.innerHeight;
		var scale = Math.min(w / Config.DEFAULT_WIDTH, h / Config.DEFAULT_HEIGHT);
		
		game.canvas.setAttribute('style',
			' -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1);' +
			' -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');' +
			' transform-origin: top left;'
		);
		
		width = w / scale;
		height = h / scale;
		game.resize(width, height);
		game.scene.scenes.forEach(function (scene) {
			scene.cameras.main.setViewport(0, 0, width, height);
		});
	}
	
	js.Browser.window.addEventListener('resize', resize);
	if(game.isBooted) resize();
	else game.events.once('boot', resize);
}

 

Share this post


Link to post
Share on other sites
14 hours ago, Antriel said:

This is my custom ScaleManager's initialize method that I call after I create the Game instance (Haxe code).

Thanks a lot for sharing this example. Very interesting one!

And... On your gif... Is it a browser or some tool? Just interesting

Share this post


Link to post
Share on other sites

I'm using code from that example (game and cameras resize) + some basic css.
It could be part of Phaser, but honestly that's all I will ever need. If you want proper responsive game, you have to implement it yourself anyway.



Hi Antriel,

I'm a beginner in game development, I'm confused where to add that "public static function initialize(game:Dynamic):Void {" function and how to call it. So, Can you help me. Can you please share a sample working code of a resize demo feature.


Thanks in Advance.

Share this post


Link to post
Share on other sites
24 minutes ago, Mayjo Antony said:

Hi Antriel,

I'm a beginner in game development, I'm confused where to add that "public static function initialize(game:Dynamic):Void {" function and how to call it. So, Can you help me. Can you please share a sample working code of a resize demo feature.


Thanks in Advance.

It's a snippet from my Haxe code. It's basically a static function I call right after I create a game instance, so you could just copy what's inside. Also `js.Browser.window` is just Haxe's way to get to the global window property, in js you can just access `window` directly I think. Otherwise it should work as is.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.