Search the Community

Showing results for tags 'resize'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 61 results

  1. 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
  2. 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?
  3. 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
  4. 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) => { this.game.debug.rectangle(gdata.shape, '#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.
  5. 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!!!
  6. 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
  7. 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
  8. 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 this.game.scale.setGameSize(window.innerWidth, 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 : http://www.goodboydigital.com/runpixierun/. 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.
  9. 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;
  10. 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.
  11. 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:
  12. 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:http://www.babylonjs-playground.com/#1WROZH#12 Link to my scene: http://217.217.131.1:8081/subsuelo/ Thanks you very much.
  13. 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?
  14. Scale on resize

    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?
  15. 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?
  16. 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)); };
  17. 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!
  18. Best way to resize for mobile

    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
  19. 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 ?
  20. 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
  21. 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: https://github.com/BdR76/phaserresize/ 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.game.scale.setResizeCallback(this.resizeCallback, this); this.game.scale.onSizeChange.add(this.onSizeChange, 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) this.game.state.callbackContext.resize(); } }; 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?
  22. 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; this.game.stage.backgroundColor = "#AAAAAA"; Thanks in advance for any help!
  23. Game resizing woes after deviceReady

    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"); }
  24. Game not resize when resize browser

    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?