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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 52 results

  1. 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;
  2. 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.
  3. 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:
  4. 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.
  5. 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?
  6. 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?
  7. 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?
  8. 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)); };
  9. I have been searching around and it seems that to be able to support retina displays, the RESIZE scalemode cannot be used. Is this really the case? My game is dependent on the responsiveness and freedom the RESIZE scalemode provides. By setting the resolution according to window.devicePixelRatio, the resolution and the size of all game objects increases. When scaling the game objects down to their appropriate sizes, the click-listeners disappears or gets misplaced. Any nudge in the right direction is very much appreciated!
  10. Hello there. I'm making a simple game to understand phaser better. I have made a simple game using this resolution: phaserGame = new Phaser.Game(480, 720, Phaser.AUTO, ''); So, i can center this on screen etc. However, if i wish the game to be resized to fit the screen in desktop and mobile devices, what would be the best way to do ? Thanks again for any attention
  11. Hey, My code is : var canvass = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "ScreenCanvas", backgroundFill: "#C0C0C040", backgroundRoundRadius: 50 }); I was wondering if this resize behavior was normal, when the canvas is set up it fills the whole screen, i can resize it down with the window, but when the wondow gets bigger than the original size the canvas stop resizing : Begining : Smaller: Larger: The position of the sprite changes between the images, sorry if its confusing, its really the limits of the canvas as seen with rounded borders and color that matters. On the larger size, the rounded border disappear on the right: This happens if I resizes down before resizing up. How can I make it resize to the canvas size for larger sizes ?
  12. Hi guys, I have a problem when try to resize the world. This is the code: ='test');'tile', 'tile'); this.layer =;, 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
  13. I'm working on a game and I'm trying to implement dynamic resizing, but I have some unexplained issues. My game is optimized for a phone portrait layout. Depending on the phone screen size (or browser window size) it should adjust the layout, the width is fixed size but the height is adjusted. So make it taller if necessary and center some sprites or texts. I've created a code example which works, but the resize function gets called many times. So to isolate and test the resize function see this github example: The code example has 4 states: Boot, Preloader, MainMenu, Game. I won't post all the code here, but what I've done is essentially this: // Boot state, in create() setup the scale.setResizeCallback event handler. mygame.Bootup.prototype = { create: function(){, this);, this); }, resizeCallback: function(manager) { // browser window changes size, resize the game var ratio = window.innerHeight / window.innerWidth; if (GAME_WIDTH * ratio > GAME_HEIGHT) { this.scale.setGameSize(GAME_WIDTH, Math.floor(GAME_WIDTH * ratio)) // too tall, adjust height resolution } else { this.scale.setGameSize(GAME_WIDTH, GAME_HEIGHT); // too wide, just use fixed width and empty side bars }; }, onSizeChange: function() { // fire the game resize event for the current state (make sure each state has this); } }; And then both the MainMenu and Game have a resize function that adjusts its layout and positions of sprites, text etc., it's a little similar to this topic. My github code example works, however the resizeCallback function from the Bootup state gets called all the time. It fires many times right from the beginning even before I do anything. I'm not resizing and not switching state or anything, and it get called not once but continually. So my questions is: Why is the onSizeChange event called so often? Is this normal and should I use a different event?
  14. So I've been making a game in Phaser and I want it to auto scale to the size of the window so it is filled but without changing the aspect ratio, I discovered that I could do this using scaleMode = SHOW_ALL and it almost works. If I make the window smaller, the game is scaled down and the aspect ratio is maintained, however, once I've done this I can no longer scale the game up again so it remains in a smaller version even when I make the window bigger again. Here is the code I'm using: this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; = "#AAAAAA"; Thanks in advance for any help!
  15. Hello, I'm having a rough time getting the game to resize to fit the screen on my android tablet. The game insists on anchoring to the bottom left of the screen in portrait mode, at the minimum width and height. (Please see the attached picture.) Here are my initialized vars when the file loads. /* DEFAULTS OPTIMIZED FOR 16x9 */ var standard_width = 360; var standard_height = 640; var screen_16_9_ratio = 1.777777778; var game_width = Math.floor( Math.round(pixel_ratio * standard_width / 2 * screen_16_9_ratio)); var game_height = Math.floor( Math.round(pixel_ratio * standard_height / 2 * screen_16_9_ratio)); var max_game_width = 960; // 3x @ 16X9 var max_game_height = 1706; /* end default dimensions */ And then, in my create() method, which runs before deviceReady() callback. game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setMinMax(game_width, game_height, max_game_width, max_game_height); game.scale.updateLayout(); game.scale.refresh(); Here's my deviceReady() callback. function deviceReady() { device_ready = true; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setMinMax(game_width, game_height, max_game_width, max_game_height); game.scale.forceOrientation(false, true); game.scale.updateLayout(); game.scale.refresh(); } And finally, the loadGame() method which runs right after the deviceready listener is set. IOW, the game loads before deviceReady. (Please correct me if I'm going about this badly, but I can find precious little info on how to load the game on deviceready. window.onload = function() { document.addEventListener("deviceready", deviceReady, false); loadGame(); } function loadGame() { game = new Phaser.Game(game_width, game_height, Phaser.AUTO, 'game'); game.state.add("play", playGame); game.state.start("play"); }
  16. Hi, Im trying solve a problem that i think be simple to a phaser expert dev. My multiplayer game is working nice, but when i resize the browser the game be smaller or blurred with black parts. I need resize browser and camera follow player on center and everything on tiled map stay at the same state if i reload on the new size. Example: 1 - If i start my browser at 800x600 everything will work nice at this resolution. If i resize to 1024x768, the images are blurred and black parts are showed. I need that it resize to be at the same state that if i open on 1024x768 2 - If i start my browser at 1024x768 everything will work nice at this resolution. If i resize to 800x600, the images scale down. I need that everything stay as i reload on 800x600. My starting code: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setScreenSize = true; Can anyone help me?
  17. Hello! Can I know which events are fired upon mobile device resizing? They cause some frustrating difficulties in an effort to make developing easier... I want my canvas height to be 1500px and the user to scroll up and down, while the width is equal to the device width. I want NOTHING more. I tried setting meta tags for it, I tried the different Phaser.ScaleManager stuff, but there is always some sodding event that fires and makes this task a pain in the ***. I have this in my index.html to make the user unable to zoom: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> At the bottom of my create function (my game is called "menu"), I have: menu.scale.scaleMode = Phaser.ScaleManager.RESIZE; menu.scale.fullScreenScaleMode = Phaser.ScaleManager.RESIZE; menu.input.touch.preventDefault = false; The preventDefault is false because otherwise, when the player selects an input field in the menu (to sign in their account), they can't deselect it. The other two lines are a bit complicated. If the scaleMode is default, when you scroll (and the address bar in the browser of the device folds), the resize event is fired. For some reason, that makes you unable to scroll or zoom anymore (it disables zoom without the meta tag too). If you change the device orientation - same thing happens. If you toggle fullscreen, same thing happens. All scaleModes have this result. With RESIZE and the property "height=1500" in the meta tag, however, when the address bar folds, the resize event isn't fired and the problem doesn't occur. If you change orientation or toggle fullscreen, it happens again, though. I tried using the setMinMax too, but that just stretches the canvas (and still doesn't fix the scroll problem). The height of the canvas and the body remain the same. I mean, they don't get resized to device height, so that the scroll disappears. The "overflow" property of the body is "scroll" too. I also tried to set the scaleMode to null, so that nothing happens. Well... it still causes this problem. Those problems are not present in desktop, so it's something related to mobile only and the events upon resizing. The only way something kind of works is when the resize event is not fired. To sum it up, here is what I need: inability to zoom the game (with meta tag), 1500px height that can be scrolled up and down and width that is equal to the device width. I want that in both orientations, with and without fullscreen. In case that can't be achieved, I would appreciate a way to prevent Phaser from doing anything upon resize...
  18. In order to create a fully responsive game, i´d like to listen to the resize event, but it only gets called when i resize the screen to smaller values. This is my code (well, part of it): export default class MainState extends Phaser.State { constructor() { super(); } init() { this.scale.scaleMode = Phaser.ScaleManager.RESIZE; } resize(width, height) { console.log(widht, height); } } In the resize callback, i resize my game elements - they obviously get smaller when i make the screen smaller. But if i increase the size of the window again, the callback never gets called. Is there any workaround for this? Is this a known issue?
  19. I am wondering if there is a way to scale or resize an importMesh. I need to enlarge the mesh from its original import size. I am currently doing the following, but it has no effect on the size of the mesh: BABYLON.SceneLoader.ImportMesh("", "meshes/", selectedMesh, scene, function(addedMeshes) { // tried this addedMeshes[0].scaling.x = 67; // Also tried this addedMeshes[0].scaling = new BABYLON.Vector3(67, 67, 67); }); Is there a way I can just resize/scale the imported mesh?
  20. Good afternoon everyone, I'm having some problems fitting Phaser inside a responsive div. I have already achieved this with bootstrap, but this project requires flexbox -- and it's not working as intended. I have noticed that when Phaser is injected in a div inside a flexbox container, the resize event is not fired when the window changes size. I have tried fitting it in a div with "position: absolute" that follows x, y, width and height properties of the flexbox item, but with no success. Has anyone tried this before? Maybe it's something trivial that I'm missing. Thanks in advance, Pedro Antoninho
  21. Hello! As my game gets the entire window proportionally, I draw more or less stuff depending on the width of the window. It's ok but when I start the game on small window then I resize it, part of the game area stay blank 'cause I just drawed in the start size. So, to get the result I want, by now, when the window resizes I redraw all by restarting the state: window.onresize = function() { gameRatio = window.innerWidth / window.innerHeight; //my default size is 240x160 GAME.scale.setGameSize(Math.ceil(160 * gameRatio), 160); GAME.state.start(GAME.state.current); };The problem is: if the player resizes the window during a gameplay, the state is restarted and he looses what he/she was doing... Is there any other way to redraw all objects when window resizes? Thanks
  22. Hi guys, I'm having a slight problem getting my head round using the Phaser.RESIZE scale mode with devices which have a higher pixel ratio than 1. The game resizes fine, but on modern iOS and android devices, the game loses its 'crispness', and objects become blurry, particularly smaller text. I know this is down to higher pixel densities of these devices, but I've not managed to find a solution for the canvas to utilise these extra pixels, as resize mode seems to be bound to the physical document dimension (I'm creating a responsive game which will fill the device/webpage window on either orientation, so sadly the SHOW_ALL approach won't work). Just wondering if anyone had uncovered any solution, or had any advice, as there doesn't seem to have been any conclusion on other similar posts. Thanks as always!
  23. Hi all, Just a quick post to start a discussion on flexgrids. I know they are still in testing, but its been hard to find any resources or examples of these in use. As I'm planning a responsive game, just wondered if anyone had any success or experience to share of these in action? Thanks! SeeJay
  24. Hi! I have built a resize function that scales my CANVAS accordinly to the space available, it shows more or less objects in the scene depending on the horizontal value and scale the canvas to it. It works but right after it is called, the canvas gets back to its default size!!!! VERY ANOYING! The code: function resizeGame() { var actualWidth = window.innerWidth; var actualHeight = window.innerHeight; GAME.scale.setGameSize( Math.ceil((actualWidth * 160) / actualHeight), 160); var widthToHeight = GAME.width / GAME.height; //4 / 3; var newWidth = window.innerWidth; var newHeight = window.innerHeight; var newWidthToHeight = newWidth / newHeight; if (newWidthToHeight > widthToHeight) { newWidth = newHeight * widthToHeight; = newHeight + 'px'; = newWidth + 'px'; } else { newHeight = newWidth / widthToHeight; = newWidth + 'px'; = newHeight + 'px'; } //atribui o tamanho final = newWidth;}So, my question is: why my game gets back to teh original size (240x160) righr after the page loads??? How to set the style permanent??? Thanks! I'm new to phaser...
  25. Hi guys! Is possible to resize a bitmapdata using scaleMode RESIZE? Any example please? Any help is greatly appreciated!