Search the Community

This may turn out to be more of a CSS question than a Phaser question, but what is the magic formula for making the Phaser canvas exactly fill the browser viewport without any scrollbars? I have tried using window.innerWidth and window.innerHeight and that almost works, but the canvas seems to turn out a little too big and gives me a vertical scrollbar. Even with padding: 0 and margin: 0 on everything (html, body, div, canvas) I end up with a few pixels worth of scroll. The same thing seems to happen in both Firefox and Chrome. Any suggestions?

Hi everyone I have a texture which I use it in Graphics.lineTextureStyle : the whole code goes like this : const app = new PIXI.Application({ antialias: true , width:1000 , height:1000 , backgroundColor: 0xFFFFFF }); document.body.appendChild(app.view); const texture = PIXI.Texture.from('./a.png'); // the size of image file : 900*900 const g = new PIXI.Graphics(); g.lineTextureStyle({width:40 , texture:texture , alignment:0}); g.beginFill(0); g.drawRect(0,0 , 900,900); // the size of rectangle : 900*900 g.endFill(); app.stage.addChild(g); the result : now I want to change the size of rectangle to 400*400 but texture stays the same size so most of texture gets clipped like so : how to change the size of texture to match it with the size of rectangle ?

Noob here using Phaser. But here's my issue: I'm struggling to get to a perfect scale on the game I'm building. The best option for me so far is Phaser.ScaleManager.RESIZE; But this method doesn't have a limit to the canvas size. If an user has a huge screen, say 30 inches, he'd have a lot of advantage over an user with a medium size screen, say 17 inches. The 30 inches user would have much more view of the world. I've tried to set the canvas to a fixed size, like 1280x720, then dynamically resize the canvas style. And using Phaser.ScaleManager.SHOW_ALL; But it doesn't do the trick because it shows the black borders and I can't get rid of it. To make it clear what I want to achieve, I'm building an online multiplayer game (.io). If you notice the most famous .io games like agar.io, diep.io and slither.io, the game scale is perfect for any screen size. If the screen is too big, the game doesn't show more screen. It just adjusts for a more zoomed game. Here's a gif of what I need and how my game is now: agar.io: https://gyazo.com/94a41e06816b8dc9a1fd4608c0cfa525 Notice that in agario, the screen only goes so far before the game starts to scale. My game: https://gyazo.com/4269ecfb1253b9ddbcd6e917ad1a8602 Notice how much of the world I can see after scaling my game. Meaning that there is no limit for the canvas. Please let me know if you need more information in order to help me out here! Thanks in advance!

Hi I have an image like the picture below. I need to resize this image.(between x2 and x10) When I resized with Canvas's own features, I couldn't get the image I wanted. The image was pixelated. I used OpenCV's javascript library for this. (To be able to do interpolation) But here I did not get the exact result I wanted and it was slow in speed(40 - 60 ms). The resizing speed should be between about 10 - 20 ms. Then I wanted to write an algorithm myself, but I could not prevent pixelation, and the image I wanted was not revealed. In fact, if I can make gradient for each pixel according to the pixels around it (right, left, down and up), I think I can get the image I want. Is there anyone who can help me with this?

Hi guys, I have a problem when try to resize the world. This is the code: this.map = this.game.add.tilemap('test'); this.map.addTilesetImage('tile', 'tile'); this.layer = this.map.createLayer(0); this.map.setCollisionBetween(1, 100, true, 'blockedLayer'); this.layer.resizeWorld(); In the photos you can see that the world is not resizing, i dont know what is happening, any idea? i want to try to resolve this for myself XD

I embedded Phaser3s' canvas parent in a bootstrap table (FlexGrid) and am trying to get fullscreen and window resize to work as expected. <main role="main" class="container"> <div class="container"> <div class="row"> <div class="col"> <!-- the problem doesn't occur without the bootstrap flexbox (i.e. when there's just this div) --> <div id="phaser3MainView"></div> </div></div></div> </main> There are three distinct approaches i've worked on. First, i've tried to disable the ScaleManagers auto features and see what happens, but after returning from fullscreen, hit areas don't seem to work anymore. Here's a annotated example for that: https://codepen.io/gyzkard/pen/gJZxro var config = { type: Phaser.AUTO, scale: { mode: Phaser.Scale.NONE, autoCenter: Phaser.Scale.Center.NO_CENTER, zoom: Phaser.Scale.NO_ZOOM, Second, i've tried to use the ScaleManagers auto features. I tested all combinations, but none worked for me. Here's a annotated example for that: https://codepen.io/gyzkard/pen/EzGLEy var config = { type: Phaser.AUTO, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, zoom: Phaser.Scale.MAX_ZOOM, Finally, i tried to come up with a custom solution and tried to work around the system. Here's a annotated and working example: https://codepen.io/gyzkard/pen/PvXBxm function getFullscreenSize() { var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; return {x:x, y:y}; } function calcZoom() { let x, y; if (game.scale.isFullscreen) { let size = getFullscreenSize(); x = size.x; y = size.y; } else { x = Math.min(game.scale.canvas.parentNode.clientWidth, window.innerWidth); y = Math.min(game.scale.canvas.parentNode.clientHeight, window.innerHeight); } let zoomH = x / game.config.width; let zoomV = y / game.config.height; return Math.min(zoomH, zoomV); } var lastZoom = 1; window.onresize = function (event) { let zoom = calcZoom(); game.scale.setZoom(zoom); if (!game.scale.isFullscreen && zoom > lastZoom) { game.scale.canvas.style.width = "8000px"; game.scale.canvas.style.height = "6000px"; setTimeout(function() { let zoom = calcZoom(); game.scale.canvas.style.width = game.config.width * zoom + "px"; game.scale.canvas.style.height = game.config.height * zoom + "px"; lastZoom = zoom; }, 1); } else { game.scale.canvas.style.width = game.config.width * zoom + "px"; game.scale.canvas.style.height = game.config.height * zoom + "px"; } lastZoom = zoom; if (game.scale.isFullscreen) { let size = getFullscreenSize(); if (size.x > size.y) { let offsetX = (size.x - size.y) / 2; game.scale.canvas.style.marginLeft = offsetX / zoom + 'px'; game.scale.refresh(); } } else { game.scale.canvas.style.marginLeft = '0px'; game.scale.refresh(); } }; Now my question is how this is ment to be solved. The setup seems to clearly violate the "Parent and Display canvas containment guidelines" from Phaser-CE ( https://photonstorm.github.io/phaser-ce/Phaser.ScaleManager.html#toc-3 ) but there is nothing like that mentioned in the Phaser 3 notes ( https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/ ). The hacks from the third approach seem to work, at least in the small test environments i played around with, but i'm wondering if that's just luck and if there's an actual painless solution for this kind of setup or if it's as forbidden as it's been for Phaser-CE. I'm new to Phaser and not good with javascript, so please forgive me the maybe strange style. Note: This same question has also been posted to phaser.discourse.group

My game does not scale correctly when the browser loads the game while the window size is made smaller. Another scenario is while in game state, the game will resize correctly, If I try to make the window bigger once again the game will be made out of scale and not usable really. this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

I have a very simple Pixijs project that display a image. There is no animation or anything in it. I wrote simple code to adjust the app size when the user resize the browser window. function resize() { var dis = Math.min(window.innerHeight, window.innerWidth); app.view.width = dis; app.view.height = dis; } window.onresize = function(event) { resize(); }; The problem I have is the canvas get resized, but the content inside it does not redraw. Is there a function in pixi that I can call to redraw or update the canvas?

Hello, I'm trying to scale the layers of my map, but when I try it shows part of the following tiles, some idea of how to solve this ?, the map is created in tiled, the spritesheet is 16 x 16: CODE create function: map = this.make.tilemap({'key':'01'}); const TilesPacked = map.addTilesetImage('tiles_packed', 'tiles_packed'); const SnowExpansion = map.addTilesetImage('snow-expansion', 'snow-expansion'); groundLayer = map.createDynamicLayer('Wall', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Ground = map.createStaticLayer('Ground', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const OverGround = map.createDynamicLayer('OverGround', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Npc = map.createDynamicLayer('NPC', [TilesPacked,SnowExpansion], 0, 0).setScale(2); player = this.physics.add.sprite(16*3, 16*3, 'characters', 1).setBounce(0.2).setScale(2); preload function: this.load.image('tiles_packed', 'sprites/tiles_packed.png'); this.load.spritesheet('characters', 'sprites/characters.png', {frameWidth:16, framaeHeight:16}); this.load.image('snow-expansion', 'sprites/snow-expansion.png'); this.load.tilemapTiledJSON('01', 'sprites/Maps/02.json');

Hello everyone! I'm new here and my first question is how to make my Phaser game fill all the document? I mean, take for example Slither.io, if you resize the browser, the game view will adjust to fit the same resolution while it is ocupying all the document. I wanna do the same thing to my game. How can I achieve this? Thank you for answer me!

Bowmasters.Preloader = function(game){ }; Bowmasters.Preloader.prototype = { preload: function() { let logo = this.add.sprite(this.game.world.centerX -120, this.game.world.centerY - 100, 'logo').scale.setTo(scaleRatio, scaleRatio); let bar = this.add.sprite(this.game.world.centerX-300,this.game.world.centerY, 'bar'); bar.scale.setTo(scaleRatio, scaleRatio); //without next line loading sprite looks good, not cropped this.load.setPreloadSprite(bar); this.load.image('background', 'assets/Resources/BG/bm_bg.png'); this.load.image('ground', 'assets/Resources/BG/bm_ground.png'); this.load.image('icon_thor', 'assets/Resources/UI/icon_thor_odinson.png'); this.load.image('icon_loki', 'assets/Resources/UI/icon_upgrade_loki.png'); }, create: function() { this.state.start('Game'); } }; this.load.setPreloadSprite(bar) sprite looks good. After using bar.scale.setTo it becomes like: This is my code, i am gonna to create loadind scene but i have a problem with loading bar. This was too big, and when i try to scale it becomes cropped as on the screenshots. Give me the hint please how to repair it.

So, my code: // create app like new PIXI.Application({ width: 1024, height: 540, // ... // to do something // ... renderer.resize(4096,2056) // then replace textures to hi-res , etc // and try to get png file from canvas var data = renderer.extract.base64() and... data is 1024 x 540 ... How to get data with new (resized) resolutions? Tnx

If you try to resize window you'll see it will only resize scene (engine) but not Viewport. http://www.babylonjs-playground.com/#17DP89#8 How I can update Viewport . Any advice please?

Hey, I'm kind of stuck trying to work out what's happening with my game. I've been having issues getting my game responsive, so I tried... well, everything I can think of, really. I've brought my game all the way down to four near-empty files; boot.js, preload.js, menu.js and app.js, and I'm getting nothing on resize events. I'm using Phaser 2.6.2, I've got "this.scale.setMode = Phaser.ScaleManager.RESIZE" in my boot.js's init function, I've got a resize handler in my menu just titled 'resize' with nothing but "console.log('resize')" inside of it, and nothing happens on resize. I don't understand at all. I found a guide someone put together that has really similar architecture to my project (http://www.netexl.com/blog/making-of-a-responsive-game-in-phaser-part-2/) and even looking at that person's game.js in dev tools and comparing against my game, I can't see how we differ (outside of me keeping my various methods in separate files) or how I've screwed up. Resize just plain doesn't fire on my project, even when it's as simple as logging something to console. Note: I'm able to get other things to log to console just fine, it's just that the resize method doesn't do what it's supposed to do. I'd like to be able to show the whole code for my project if possible, but I fully understand why that's not - if it helps, I can stick all my barebones stuff into a single file and huck it up on jsbin or something similar. Still - does anyone have any clue where I could start looking as to why setting my ScaleManager to RESIZE doesn't fire my resize command?

Hi. I'm new to phaser and to this forum. I have a problem that I would like to ask for some help with. I'm trying to import a level from a JSON file exported from a 3rd party level editor that is not meant to be used with Phaser or any other 3rd party engine. It is just me trying to use the JSON coming from the editor to load the level in Phaser and I have some problem with rotation and scale of the sprites. The level editor rotate the sprites around a center point and scale the sprites from the origin point. In Phaser, I set the position of the anchor point to match the position of the origin point and set the position of the pivot point to match the position of the center point for each sprite and it works for getting the position and the rotation of the sprites but when I scale a sprite in the editor, it does not appear right in Phaser. This is how it looks like in the editor: And this is how it looks like in Phaser after import: Notice the distance between the two sprites. It does not match and I think it is because in the editor the sprite is scaled from the top left corner of the sprite (origin/anchor point) while in phaser it is scaled from the center of the sprite (pivot point). At least If I don't change the position of the pivot point, the scale and position works but then rotation is off because in the editor the sprite is rotated around the center point which is in the middle by default. In any case I can't find a solution to this. I can't get the scale match without messing up the rotation or the rotation without messing up the scale because of the two points. When I check the values, everything seems to match. Position, rotation, scale but it still does not look the same in Phaser. I hope someone did have the same problem with rotating and scaling sprites in Phaser and already figured a solution. What I would like to know specifically, is there any way to rotate a sprite around a middle point without changing the position of the anchor and pivot point or is there any way to scale a sprite from the anchor point instead of the pivot point? Because the problem seems to be in Phaser the sprites are scaled and rotated around the pivot point but in this case I need to scale it and rotate it in two separated points to get the same result as in the level editor. I would appreciate any help. Thank you.

Hello, Is there a way to get the size of an object after the window has been resized? (Whole scene gets scaled down/up). planet2.getBoundingInfo().boundingBox.vectorsWorld; but it only displays 1.25 no matter how much I resize my browser window

Hello, On my iOS devices (iPhone 4S, iPad Mini) when I resize the WebGL renderer, the elements of my stage are briefly scaled with the new size of the stage before being re-render with their original size. I just want to resize the drawing zone without changing the size of the children. The behaviour only occur on iOS with the WebGL renderer. I've made a jsFiddle to show the problem : http://jsfiddle.net/ntvLas1x/1/embedded/result/ . To reproduce, just click several times on the resize button from an iOS device and you will see the red square changing size. Thanks in advance, Louis

Hi all, Hopefully, this is just something quick I'm missing... I have initialized my game with the resolution of 500x800 and SCALE_MODE is set to RESIZE; In portrait orientation, the game is the correct size of 500x800, however, when I rotate the device and would expect the game to now be 800x500 it is actually 500x313. I'm thinking I'm just missing something that I need to manually resize or update or something, but I'm having trouble finding what I need by searching around. Anyone know how to accomplish what I'm expecting? Thanks.

Hi, I just learned some basics of using tilemaps. I created a tilemap using Tiled, containing 32x32px tiles. The problem is, I can't resize the entire tilemap to fit the entire canvas. I need the layer in the tilemap or the world itself to fit the canvas. scale.setTo() works, but that's relative and I want to set the width and height to that of the game's canvas. Changing displayWidth and width doesn't seem to have any effects. The tilemap still appears small in the upper left corner of the canvas. Any suggestions guys? Code: var playLevel = { create: function() { this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer = this.map.createLayer('Ground'); this.map.setCollisionBetween(1, 200, true, 'Ground'); this.groundLayer.resizeWorld(); }, update: function() { } } EDIT: I just found out that changing width and height DOES work. But for some reason, instead of the tilemap's width being 32 * 20 = 640, it returned 940, which is the width of the canvas. But the tilemap itself looks to be 640 pixels wide, so I don't know why the width and height properties don't correspond to the actual ones. So I guess I can't use it?

1. How to resize the window at any time when I change my window size. Something weird will occur in my app now like the image below.(the right size should be black) 2. How can I directly access mouse local position without listening to an event. I want to deliver my mouse local position to the server even if the mouse doesn't move at all. Thx a lot!!

So I'm currently using Phaser 2.9.1 and had a weird issue I've been struggling with today. If I use scaleMode RESIZE, then whenever the window resizes, the camera gets stuck at 0,0 and wont move anymore. Debugging reveals that the update function is called and the camera x,y are changed whenever the buttons to move the camera are pressed. However, it's like they are changed back right away again. One theory I had was that the world gets resized to the browser innerWidth and innerHeight upon resizing with that scaleMode. I found a thread after a while that fixed my problem. The problem now is that I want to know why it works.... So, doing the following in my create function: game.world.resize(5000, 5000); game.world.setBounds(0, 0, 5000, 5000); works, for some reason. Only doing resize does not work and I have to use setBounds there. But according to the docs, resize sets the size of the world and setBounds sets the camera to 0,0 and then sets the size of the world. Why would that make a difference when the browser is resized after the game has been created and the update function is running? If anyone could shed some light on this, I would greatly appreciate it :-). Also creds to Zekko and Carlos in the post above, for solving the issue 2 years ago

Hi guys, I'm having an issue with Phaser.ScaleManager.RESIZE set. As expected, it resizes the game to the size of the window. However, whenever the window is resized, camera.y gets set to 0 and doesn't respond anymore. Even setting camera.y directly in the update function doesn't do anything. Interestingly, camera.x doesn't seem to be affected. Restarting the game state fixes it, but that doesn't solve that fact that I'm now unable to move the camera after resizing the window. A similar issue seems to be reported in this post, but there was never a reply. Does anyone have any ideas what could be the problem? Any and all help will be much appreciated! Cheers, Zekko

Hello everyone, this is my first time posting here and I am incredibly new to babylon .I've scoured the net looking for a solution to this problem with none yet. I'm using engine.resize() on window resize listener and this seems to work when I resize the window vertically. However, there seems to be no horizontal scaling available and when resizing the window horizontally, the image gets cut off instead of shrinking. Anybody have a solution?

Hi I want to know how I can resize a Phaser game to exactly the current size of the browser window. I modified the My First Phaser Game example as follows: var game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.RESIZE; and did relative positioning of the ground element: var ground = platforms.create(0, game.world.height - 64, 'ground'); The result is that I am unable to see the ground because it is too low I also positioned a platform this way and it does not move up when I make the browser window smaller, although this should cause game.world.height to decrease. I figured that I have to make the game keep track of the window size changes, so I put the following into the update function: game.world.width = window.innerWidth * window.devicePixelRatio; game.world.height = window.innerHeight * window.devicePixelRatio; That did not change the situation. My goal is for all game elements to be positioned in relation to the bottom boundary of the game. Also, I need the game to adjust its height to the extent of what is seen in the browser window. Code attached. Any ideas? index.html

Hi everyone! I'm currently building a Phaser tap tap like game for mobile devices. Using Phaser for the first time, I digged into the hard topic of scaling my game for multiple screen sizes and pixel ratios. After looking at every available scale modes, I choosed to go for Phaser.ScaleManager.RESIZE which looks perfect for what I want (changes the Game size to match the display size). The game looks good on my desktop screen but seems blurry when using an iPhone or Samsung Galaxy S8. I looked at many forum topics but the answer to the question of making a game "responsive" doesn't look clear. Is there anything I can do to make my texts and pictures not blurry on devices where the pixel ratio is higher than 1? Like scaling my game according to the pixel ratio without distorting it?