Search the Community

Showing results for tags 'resize'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 70 results

  1. 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, and, 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: Notice that in agario, the screen only goes so far before the game starts to scale. My game: 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!
  2. 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.
  3. 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
  4. WebGL resize stage blinking on iOS

    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 : . 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
  5. Make tilemap/world fit in game?

    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() { ='tilemap');'sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer ='Ground');, 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?
  6. 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.
  7. 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!!
  8. 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:, 5000);, 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
  9. Resize method not firing? At all?

    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 ( 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?
  10. 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, - 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 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: = window.innerWidth * window.devicePixelRatio; = 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
  11. 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?
  12. Resize platformer like Melon JS

    Hi, First I apologise if this has already been covered but I have searched and searched and not found a clear answer. In basic terms, I am trying to build a horizontal scrolling platformer that resizes as you change the size of its container. The functionality that I am trying to achieve can be seen in the Melon JS engine and results in no blank bars to the left & right or top & bottom. Thanks in advance. David
  13. Hey all! I'm trying to update my game every time the screen is resized or turned from portrait to landscape and visa versa. What I'm doing right now is using window.onresize = this.resize(); but resize() is being called every frame. Does anyone either know why this isn't working or how to do this better? Thank you!!!
  14. Mask not redrawing correctly

    Similar to this post, I am applying a mask to a group, and then clearing and redrawing the mask each update after things are re positioned. It was working fine, but then I made some changes to some other code that shouldn't affect the masking, but now for some reason the masked area is not updating, even though the Phaser.Graphics.graphicsData.shape appears to be in the right place. Here's my update code: if (this.buttonMask) { this.buttonMask.clear(); this.buttonMask.beginFill(0xffffff); let buttonMaskWidth = // my calculations to figure out the width let buttonMaskLeft = // my calculations to ficure out the X coord this.buttonMask.drawRect(buttonMaskLeft, frameBottom, buttonMaskWidth, this.buttonsGroup.bottom - frameBottom + 2); } And, using the following debug code in render(): if (this.buttonMask.graphicsData) { this.buttonMask.graphicsData.forEach((gdata) => {, '#0f0', false); }); } I can see that the shape that should be used for the mask is in the right place, but the masking effect is still only occurring where the initial rectangle was drawn when the stage first loads. Here's the initial load with masking in the correct place (the green lines are the debug rectangle): And here is after resizing the browser window and re positioning elements. The green debug rectangle is in the correct place, and the buttons are in the correct place, but the masking effect has not moved: Any ideas as to what could be going wrong? I'm not seeing any errors in the console.
  15. Hey there, let me give you my problem as visual as possible ( attached file ). It seems like safari / fb in app browser does not use my ScaleManager.RESIZE as requested. I had some issues calling my resize function on oriantation change, so i implemented this: window.onresize = function(event) { them.resize(game.width, game.height); }; And finally added this.resize(game.width, game.height); in the end of my create function. But nothing results the correct view in ios safari / fb in app view. Any suggestions? Thanks
  16. Hi, So... my problem is a bit specific. I will try to reproduce it in the playgroud but I am not sure I will be able to. So I have a Rectangle2d that holds 4 rectangle2d children, the green background is the parent square and the children square are the 4 grey rectangles. I am using the centering and margin system: I used to dispose of those rectangle children and recreate them at certain points in time, storing the newly created children in the same array replacing the hold ones. The problem is that when I resize the window there is a call to Prim2DBase._updatePositioning that returns (NaN, NaN) as the _actualPosition (in the if (hasMargin) ... which they do). And it cause the parent and all its children to disappear from the screen. That's why i though it was linked to the bug @Wingnut mentionned yesterday. There are several variables that are NaN, one of them is Prim2d._size3... but i do not know why, nor do I see where it is define (I only see one definition that sets it to zero... I will look tonight into the typescript source to see if it is there...). This does not happen if I do not dispose of the children prim2d... I had problems with Prim2d.dispose() before, and looking at it, I do not see where the prim2d is actually set to null. Maybe that is the problem? Some kind of persistant reference that interferes with the computation of the rectangles. I will look more into it, but if it is something people have encountered I am interested to know their thoughts. @Nockawa <3 For now I am not disposing of the prims anymore
  17. Resizing Issue with setGameSize

    Hi All, I am working on my first game in phaser and running into a lot of issues currently two of them are bugging me the most. 1) Game resizing : The project demands for the game to go full screen on devices and resize on desktops, I am setting the scaleMode to EXACT_FIT and resizing as follows, window.innerHeight); var groupScaleX = (window.innerWidth) / (this.gameContainer.origWidth); var groupScaleY = (window.innerHeight) / (this.gameContainer.origHeight); this.scaleFactor = groupScaleX < groupScaleY ? groupScaleX : groupScaleY; this.gameContainer.scale.setTo(this.scaleFactor); this.gameContainer.origWidth/origHeight is set to the background image dimensions 1920X1280. Above piece of code works fine on chrome but on FF and safari, the game actually flicker when we try to resize the browser. Also found this issue in another game that was quoted somewhere as a reference : Try to resize the browser with game running the screen flickers even for chrome browser. 2) Also the game on some devices is rendering very poorly and looks like every thing is being Pixelated on the screen which includes all the graphics and text content. As suggested by someone on the forum to pixel align the content as a resolution I have tried that as well, it seems as if the trick works well on chrome but the same issue still persists on other browsers. recalling resize function once again after say ~50ms delay seems to be working currently for me. But I assume that is no good coding practice and there has to be some better workaround for this.
  18. 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;
  19. Hello everyone! Is there a way to change canvas size to preloaded background image size? And only after that do the code at create function. Thanks.
  20. Hi all, I'm new to Phaser and I want to ask about something that became a problem for me and sorry for my bad english. So I have shape sprite that I add child to the background sprite. I want to make the background fit the screen size and it working. I also make the shape sprite anchored to middle (0.5, 0.0) so whatever the shape the position still in the middle. The problem came when I try to create collision. If the size is original size then the collision is correct but when I resize the background the collider start to not fit the sprites. I search for this and found out that if I comment out the anchor then the collider is fit to the sprite again. I also already do setting on body size. Here is the list of code I use //scaling background background.scale.set(game.width, game.height); //add physics game.physics.arcade.enable(shape_sprite) //anchor sprite shape_sprite.anchor.set(0.5, 0); //reset shape_sprite collision shape_sprite.body.setSize( shape_sprite.width*shape_sprite.parent.scale.x, shape_sprite.height*shape_sprite.parent.scale.y, shape_sprite.width*shape_sprite.parent.scale.x/2, 0 ); I think maybe I'm doing it wrong. without anchor: with anchor:
  21. Hi, @jerome @Wingnut I have added a new element to my proyect. However I don't know how can I fix the plane on world when I resize window. If you test it in screen of (1920*1080) resolution, the scene is well. However if you change the window's size, the plane will disappear. I would like to set an unique position over right menu and avoid that plane could move to other place. Moreover, I want to remove specular or diffuse light in this plane so I set the property ( mon1.specularColor = new BABYLON.Color3(0, 0, 0)) but it doesnt work. To make this implementation, I have used the follow example: Link to my scene: Thanks you very much.
  22. For far I did project on pixi.js which scales (canvas just scales with css rules) from min-size 1126x634 to max-size 1920x1080. App centered on screen also with css rules. All graphical assets was resized for resolution 1126x634 (to improve speed of loading). Also there is fullscreen button, which switch on app to fit all screen with max possible size (but no more than 1920x1080). So far so good, but my boss don't like that graphics gets blurry (and specially text suffers) when scaled (and specially in fullscreen mode). And he desided to make two versions of app (1126x634 and 1920x1080) and two versions of graphical assets. So I check the innerWidth/height of the browser and load apropriate version. When user switches to fullscreen mode I also load HD version. This approach have some problems but I think it's possible to do app in that way. So I looking for advise on this approach is it wrong, or are there better ways to do it? I know that pixi.js can load different resolution assets (with @x2 prefix), but how can I improve text rendering when I just replacing graphical assets? And how can it improve view when scaled on the same resolution? Thanks in advise! EDIT: After thinking about my question I want to reformulate it. Is this a good way to switch to fullscreen mode by switching between versions of app? Are there any better ways to achieve similar results in graphic and text quality?
  23. Problem definition: My game will be able to let players resize the window or turn the window into fullscreen when playing the game. There are some sprites and containers on the stage. But when it is resizing, I hope it will not change the size and the location of the sprites and containers, at least not change it when the screen is not too small, which means when the screen is fullscreen or not too small the scale of the sprites and containers will not change. It will only change when the screen is resized to a very small window. But if I don't update the scale of the containers and sprites I can't keep the relative positions of them on the stage. For example I have a textbox and a button in the center of the stage when I resize the window they should stay in the center. I don't know how to do that without updating the scale to current ratio. If I update the scale of the DisplayObjects the graphics stretches and look distorted, but I just want to keep the same size and same relative position as they do in a normal window. my current code: function resize(event) { const w = window.innerWidth; const h = window.innerHeight; let wRatio = w / ENV.GAME_WIDTH; let hRatio = h / ENV.GAME_HEIGHT; this.renderer.resize(Math.ceil(ENV.GAME_WIDTH * wRatio), Math.ceil(ENV.GAME_HEIGHT * hRatio)); this.stage.scale.x = wRatio; this.stage.scale.y = hRatio; } window.addEventListener('resize', resize); This is not very helpful for my purpose. I notice there are getBounds() and getLocalBounds() in the DisplayObject class. Will it be helpful to use these two methods?
  24. How can I resize DisplayObjects on my screen when I resize the window? This is a very common requirement but I can't find tutorial bout this. For example, when I press F11 to make the window fullscreen, the stage and all displayObjects in the stage should adjust its size to fit the screen. When I drag the browser edge to resize the window the objects should also resize to fit the screen. How to achieve this? I have this code now, but it doesn't work very well because the ratio doesn't seem quite right. window.addEventListener('resize', resize); function resize(event) { const w = window.innerWidth; const h = window.innerHeight; let ratio = Math.min( w / GAME_WIDTH, h / GAME_HEIGHT); stage.scale.x = stage.scale.y = ratio; renderer.resize(Math.ceil(GAME_WIDTH * ratio), Math.ceil(GAME_HEIGHT * ratio)); };