How do I scale my game in Phaser 3?

This is my method for scaling games in Phaser 3. The scaling depends on mathematics to scale the images and place them on the screen by percentage rather than by pixels. Learn more about building phaser games at phasergames.com/learn-more/

[@phillipzamora3612]

You should be so much more popular. You are like a diamond in the rough. I just wanted to find a simple set up for phaser and super simple answers and you are the person!

[@Ergydion]

Something like that should be included in Phaser be default.

[@BillyWestbury]

I am currently mid way through your udemy course on Phaser3, this is a nice little addition, thanks.

[@WClarkson]

Thanks, Billy! This is covered in the Phaser 3 Udemy course, but a lot more in-depth.

[@chadjones4255]

This is so great. It was confusing to find Phaser asking for screen size assumptions. How would anyone possibly know nowadays? Even on a fixed device, screen size changes periodically as the user rotates their phone.

[@angelous2410]

Hello, I'm currently coding a platform game there I'm coding a piece of code that allows me to scale my sprite in the Y-axis then it rotates 90 degrees and in some cases it resets to its initial position and returns to its original size but once this condition is met the condition that allows me to Scale in the Y-axis no longer runs and I'd like to know so that it will reason? this is my piece of code: if (keyboard.up.isDown && !bridge.rotated) { bridge.scaleX = 1; bridge.scaleY += (-0.30); bridge.syncGameObject() } // Rotation of the scale if (keyboard.down.isDown && !bridge.rotated) { bridge.rotated = true; // Apply a collision to the sprite that was enlarged bridge.syncGameObject(). setBodyScale(-bridge.scaleY * 10,bridge.scaleX / 10); // determine the distance at not exceed between the platforms if ( bridge.scaleX > distance + 10) { healthPoints--; bridge.syncGameObject().setDisplaySize(1,10).setBodyScale(1); bridge.body.pos.x = 95; bridge.body.pos.y = 533; } } Translated with www.DeepL.com/Translator

[@sicoles11]

This is great. William what are you using to view the scene on different devices?

[@WClarkson]

When I made the video I just using the developer console, but lately I've been using this website. www.responsinator.com/

[@brucomis4893]

Sublime

[@pebre79]

I wish phaser 3 were in typescript lol. Thanks for posting

[@WClarkson]

pebre79 you can use typescript with phaser

[@Any_key404]

pebre79 Good news, Phaser 4 will be Phaser 3 written in Typescript.

[@clementchesny2306]

Hi WClarkson, Do you have a typescript version of your utilities ?

[@WClarkson]

Sure do. www.npmjs.com/package/phaser-utility Or github.com/williamclarkson/phaser_utility

[@bradleywright5665]

Is there a similar utility set that would support isometric views?

[@WClarkson]

Not to my knowledge

[@fairydhwen6576]

You can just set your game config with the scale property mode: Phaser.Scale.FIT ;)

[@WClarkson]

Great! I've not had much luck with the scale manager but will check it out. Of course, what if your employer/client insists on using Pixi or some other HTML5 framework? Maths won't let you down.

[@vigneshs2886]

That ScaleManager doesn't help with changing aspect ratios. Which is important for developing mobile games without black bars

[@mrsoneji]

Sure, but you will end up with a blurry image or text. With this technique, in addition to make use of devicePixelRatio to gather images according to the dpi of the device you will have a more crispy image.

[@jaagrav6137]

I thought this would work but this will scale your canvas when window size changes, leading to a blurry image. But when you refresh the page with a different screen height and width, well then nothing is scaled based on the screen size.

[@maza100680]

Hey, great video, thx, but I have a question, how do I scale text? is there a way?

[@WClarkson]

Using this method, you can scale any game object, but sometimes it might make the text look distorted. You can also set the font size to a percentage of the screen width.

[@mehmetakyuz5290]

How do you set game config? Which scale mode, width, and height for the game?

[@WClarkson]

The game config is simply an object that is passed into the phaser game. Without it, the game takes on defaults such as a full black screen. It is something like let config={width:300px,height:300,backgroundColor:'red'}

[@mehmetakyuz5290]

@@WClarkson Thank you!

[@yosledev]

Hi, I know this video has a couple years now. I'm trying to figure out how to make it work for scaling all game elements and I'm running into issues. I'm using phaser 3.60. first thing, I had to use the BaseScene from the utilities because the class from Phaser has some properties mismatch: the signature of the method has changed to: new AlignGrid(scene: IBaseScene, rows?: number, cols?: number, width?: number, height?: number): AlignGrid ,so... So in my create (...) this.aGrid = new AlignGrid(this, 11, 11, this.sys.game.config.width, this.sys.game.config.height); this.aGrid.showNumbers(); But no grid is displayed Should I still be using this utility or should I try a different method?

[@WClarkson]

The method should still work. Are you getting anything in the error console?

[@yosledev]

@@WClarkson Solved! had to pass the game width and height to the AlignGrid constructor: this.aGrid = new AlignGrid(this, 11, 11, this.sys.game.config.width, this.sys.game.config.height)

[@hihahahuhujs]

Very hay

[@elahehosseini3933]

Hi, I know this video has a couple years now but I'm trying to figure out does this way affect on quality of my images or not. I used camera to fix my screen and when it zoom out all of my screen become blure...

[@WClarkson]

If you try to scale a small image, it will be blurry. I'm not sure what you mean by using a camera to fix the screen.

[@elahehosseini3933]

It means if we scale large image to small it's not blurry?

[@WClarkson]

It's certainly better to scale down than up. Of course you want to be careful about assets taking too long to load. You'll need to find a balance.

[@mehmetakyuz5290]

Would this work with retina display?

[@WClarkson]

I don't see why it would make a difference. This is based on screen percentages.

[@mehmetakyuz5290]

@@WClarkson I mean yeah, it should work. What I meant was, how does this look since retina display seems more blurry(sprites & texts) than the other type of displays. Any workaround for Phaser 3? Would your solution solves crispiness of the game on retina screens?

[@WClarkson]

@@mehmetakyuz5290 I get what you mean. The technique should still be valid. Of course it would depend on the quality of the image. Device testing is really the only way to be sure.

[@juanscaglia10]

Hello! i have a problem with Phaser 3.24. The console say that: Uncaught TypeError: Cannot read property 'contains' of undefined at PhysicsGroup.contains (phaser.js:20788) at World.collideSpriteVsGroup (phaser.js:102998) at World.collideHandler (phaser.js:102873) at World.collideObjects (phaser.js:102779) at Collider.update (phaser.js:105937) at World.update (phaser.js:101984) at EventEmitter.emit (phaser.js:2046) at Systems.step (phaser.js:36746) at SceneManager.update (phaser.js:80459) at Game.step (phaser.js:142730) this happens when collisions occur

[@WClarkson]

This usually happens when one of the variables that you are passing into the function is not correct. Try logging out the variables just before the line where the error occurs.

[@juanscaglia10]

@@WClarkson Thank you! But those lines are not mine, they are from Phaser. in previous versions of Phaser that did not happen

[@WClarkson]

Right. I mean the groups that you are passing into the function

[@futuristick2768]

Hey, this isn't working for some reason..? All works fine, but in the end, there's no grid, just a black screen.

[@WClarkson]

Futuristick did you use the showNumbers function?

[@futuristick2768]

@@WClarkson Yep, at first it didn't show the grid either. Now I have a different problem. Grid's showing up, numbers aren't. I ran the function.

[@WClarkson]

@@futuristick2768 Any errors in the console? If not, find a way to show me your code. You can use codepen or something like that.

[@pavelmishin7742]

Why do not just use percentage from width and height of game?

[@WClarkson]

Well, I do, but I use a percentage grid.

[@pizdzimizdzikarwasztwarz535]

sometimes ratio is diffrent

[@WClarkson]

@@pizdzimizdzikarwasztwarz535 different from what?

[@brunagobi7393]

and about center the whole screen ?

[@WClarkson]

Do you mean the game in the website or a game object on the canvas?

[@brunagobi7393]

@@WClarkson the game in the website

[@WClarkson]

@@brunagobi7393 You'll have to use some css. Make a div tag above the game and use margin auto in the styling

[@pafiro]

Okay so this is great and all, but now autoCenter doesn't work? How do I center the game on my page with these scripts added???

[@pafiro]

Also, divs aren't doing the trick either

[@WClarkson]

What are you trying to center?

[@pafiro]

@@WClarkson I got it! Don't know what the issue was. Slept on it and then redid the whole thing this morning, now it's working fine. Thanks! I was just trying to center my game on the website but something was broken.