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 57 results

  1. 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!!!
  2. 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.
  3. 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
  4. 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
  5. 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.
  6. 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;
  7. 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.
  8. 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:
  9. 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.
  10. 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?
  11. 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?
  12. 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?
  13. 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)); };
  14. 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!
  15. 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
  16. 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 ?
  17. 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
  18. 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?
  19. 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!
  20. 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"); }
  21. 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?
  22. 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...
  23. 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?
  24. 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?
  25. 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