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
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 78 results

  1. 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...
  2. Hi guys! Is possible to resize a bitmapdata using scaleMode RESIZE? Any example please? Any help is greatly appreciated!
  3. Heya, I'm building a game in which I can enter a building, which I'm handling via states. In other words, when my character overlaps with the door, the program starts a new state in which the interior of the building is built. Now, I want the interior to have smaller dimensions than the world, so I want to change the game size when I start this new state. I tried this: create: function(){ //game size was 1000x700, I want to scale it to 700x450 game.width = 700; game.height = 450; //rest of creation code...}I also tried things like changing camera bounds, world bounds, world size, but method above shows the most promise. The problem, however, is that the resize for some reason does not show until I click away from my browser tab and back. Calling game.width in the console yields 700 at all times, but it doesn't show it as such until tabbing out and back. On top of that, the contents of the game (floor, furniture, character) are scaled down when the game resizes, defeating the purpose. I don't understand why it would, since there's no scaling anywhere in my code. Any help would be greatly appreciated.
  4. How can I resize a TilemapLayer? I'm resizing my game on browser resize, and if the size increases the layer is only rendered to an area equal to the old size. Increasing a layer's width/height scales it, but it is not quite what I want. Something equivalent to setBoundsToWorld() (like what the camera have) would be perfect.
  5. I have problem with resize windows game. I've read various posts on the forum but I could not get the correct resize the view of the game. If you rotate the device screen size, I would like to display the game has adapted to the width / height of the display device both horizontally and vertically. When the game started, it is properly scaled up, just turning your exchange device scaling is incorrect. Return to the previous screen orientation device retains its proportions. In template html <meta name="viewport" content="width=device-width, initial-scale=1.0">First script: function preload() { = Phaser.ScaleManager.SHOW_ALL; = true; = true;, false);;;...}function resize() { = Phaser.ScaleManager.SHOW_ALL; = true; = true;, true);;;}When I use this code, game scale correct when game started. When in device: 1. change position with horizontal on vertical, game is bigges and show scroll 2. change position with vertical on horizontal, game is flat Second script: function preload() { = Phaser.ScaleManager.SHOW_ALL; = true;...} function resize () {;} When I use this code, game scale correct when game started. When in device: 1. change position with horizontal on vertical, game is scaled but on left and right is see white background 2. change position with vertical on horizontal, game is scaled but on bottom I see white background I use Phaser 2.3 Does anyone know the solution to my problem? Thank you =)
  6. Hi friends, Help me please, How can I set the TilemapLayer position in the bottom on the canvas when the scale mode is Phaser.ScaleManager.RESIZE? My demo: Thanks in advance, Nicholls
  7. Is it possible scale the content of the stage?
  8. Hello all, previously i asked about how to change screen size dinamically, but even if i do that a few parts of the screen will be unused. Example: ipad's have 768x1024 res, but some phones has 1280x720, so even if i use the scale capabilities from phaser i'll get some screen unused. How you people deal with this? Move camera? Better outer decorations? Looking for ideas, and any comment is welcome.
  9. Hello, Currently I am trying to use scaling mode Phaser.RESIZE. On desktop it seems to be working. However, I have a device with a resolution of 1280 x 720 and a device pixel ratio of 2. So then a logical resolution of 360 x 640. My problem is that whenever I use the Resize scaling mode the game always ends up scaling to the logical resolution, instead of the full resolution. I end up with the game taking up one quadrant of the screen. I have had success with usign Phaser.SHOW_ALL for mobile screens but I want to be able to dynamically switch from landscape and portrait with a fullscreen. Help apprecianted! Thank you
  10. I have a canvas with a set aspect ratio of 16:9 and I am resizing the renderer every time the window size changes game.resize = function() { var original = _default_screenWidth / _default_screenHeight; var designer = window.innerWidth / window.innerHeight; if ( window.innerWidth < _default_screenWidth || window.innerHeight < _default_screenHeight ) { if ( original > designer ) { game.renderer.resize(window.innerWidth,window.innerWidth/original); } else { game.renderer.resize(window.innerHeight*original,window.innerHeight); } = game.renderer.width; = game.renderer.height; game.stage.scale.x = game.renderer.width / _default_screenWidth; game.stage.scale.y = game.renderer.height / _default_screenHeight; } }; window.addEventListener("resize",game.resize);Problem is if I tap certain buttons (PIXI.Container) , they are not firing, only if i tap a little bit lower, so it's only the Y axis that's off. Here is the code for the button if ( ) { button.container.interactive = true; button.container.buttonMode = true; button.container.tap = function() { button.Press(); }; }If the window does not need any scaling then everything works fine.
  11. I'd like to scale in SHOW_ALL mode and once the game fits the width of the screen then use RESIZE mode to eliminate letter-boxing. I've been reading "Guide to the Phaser Scale Manager" but I'm still not entirely sure about how to implement it. Maybe something involving USER_SCALE or resize callbacks? Has anyone already implemented something similar?
  12. Hi, First of all, I'm just moving to Phaser game engine to develop even more quality games. I've been using my own game engine and I enjoyed it. But to keep up with the dev speed, developing more game engine features to follow up my need uses too much time than developing the game itself. So I am expecting some of the features may run as my expectation. As I am just jumping to this, I wish for lots of things to learn from you guys. -- I am currently developing a game that is expecting the game screen height not adjusting the size of the game world. Please see below picture on what happened when I have a bigger height/resize the height (Below are samples only, please don't calculate the width/height based on the picture). Normal, expected Bigger height, the game UI is cut as they become larger. The game is scaled bigger, following the height. Even bigger height, the game UI is further cut as they become larger. Same case as previous one, the game is scaled even further, following the height. My expectation is like one of the game I made: Try starting it with your desktop browser with landscape size, and then try playing with only the height. It gives example that it doesn't scale the game size (the sprite size stays the same). The game is only resized when you play the width of the window. I used the game.scale SHOW_ALL (and tried other options), playing with aspect ratios, and still I can't make it like the game I mentioned. Any solution to this? Thank you!
  13. Hello folks! I'm developing a project which consists of a canvas and a set of menus and navigation tools to navigate into the scene. The project must be available both on desktop and tablet devices (not mobile phone). I have no problem with the desktop version of the project, but the tablet version causes some weird bugs I couldn't fix for now. I test the mobile rendering of the website on Google Chrome Developer Tools with device mode activated (Google Chrome version: 41.0.2272.101). The problem is that, on viewport resizing, the canvas won't resize properly when the width of the viewport gets below 980 px. As my DOM body has a CSS width set at 100%, its min-width follows the highest width among its element. Every element of my body have a CSS width of 100% (including the render canvas). But the width CSS property of the canvas can't get below 980 px (at pixel ration: 1; 1960 px at pixel ration: 2; etc...). And so, the body CSS width get stuck at 980 px too... Also, as the width of the viewport gets lower than 980 px, the height property of the canvas gets higher. I tried a first workaround in the JS code, like this: // engine: the engine used in the canvas// canvas: the DOM canvas element$(window).on("resize", function(){ var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; engine.setSize(width, height); engine.resize(); canvas.width = width; canvas.height = height;});The result is that, even if the canvas in the HTML code gets the corrects width & height, the scene doesn't get the correct size! It looks like the scene is still stuck at 980px wide, and the height continues to rise. I tried a second workaround in the render loop, still in the JS code, like this: _this.engine.runRenderLoop(function(){ _this._scene.render(); var width = window.devicePixelRatio * window.innerWidth; var height = window.devicePixelRatio * window.innerHeight; _this._scene.width = width; _this._scene.height = height;});The result is... still the same situation. Can't set a viewport width below 980 px without getting this problematic situation, and the body doesn't fit into the viewport (you have to horizontally/vertically scroll to see the rest of the DOM body). You can easily reproduce this bug with any BJS playground code, with Google Chrome and device mode activated. Try to reduce the width of the viewport below 980 px and see what happens ;-) if you have any effective solution I'll be glad to see it! :-)
  14. What is the proper technique for resizing an alpha mask before application? I have already loaded the mask using load.image. I've also created a bitmapdata that the mask is to applied to. However, I have been unable to change the mask's size using the code below: var bmd = * 2, this.detectionRange * 2);var finalBmd = * 2, this.detectionRange * 2);var sensorCircleRadius = this.detectionRange * GlobalVariables.pixelToKilometerRatio;var mask = new Phaser.Image(, 0, 0, 'collisionCircle', 0); mask.height = sensorCircleRadius * 2;mask.width = sensorCircleRadius * 2;finalBmd.alphaMask(bmd, mask);
  15. I'm currently using pixi to build an animated navigation menu for a website i'm working on. For the sake of example, imagine a bunch of clickable squares with images in a grid like layout. I've added some "responsiveness" javascript code to the menu to shift items depending on the browser window width as well. It's much like having a lot of floated content that will transition from a grid into a single column at smaller widths. When a user resizes and hits one of these breakpoints I call a resize to the Pixi renderer which in turn resizes the canvas (using renderer.resize(w,h) ) after reflowing content. For most cases, this works perfectly fine. I've noticed, though that when I use the WebGL renderer (I'm using autoDetectRenderer to take advantage of gpu throttling) the displayed content starts offsetting and scaling when the renderer resize is setting a height greater than 4000. The hitAreas and interaction seem to be correct, but all my menu icons are in the wrong position. Through testing, I've noticed that the displayed contents perceived y position decreases (moves up and off of the canvas) as the WebGL renderers height is increased passed 4000 until I can't see the content at all. Strange thing is that this doesn't happen in the regular CanvasRenderer. Any thoughts as to what's going on here?
  16. hi therethis is my first game in phaser. I love it !!! XD. I am newbie in html5. javascript , etc. I was developed C++ in XX century I have several questions. 1.- I am not getting a full screen game with "responsive" this version1 I am using this code in index.htmlvar game = new Phaser.Game("100%", "100%", Phaser.AUTO, '');and this setup in boot.jsthis.scale.scaleMode = Phaser.ScaleManager.RESIZE; but I don´t get that the smartphones load a full screen. Only a little bit of screen. You can check it. 2.- in this version2 : with line in index.htmlvar game = new Phaser.Game(640, 960, Phaser.AUTO, '');and this one in boot.js this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;I get a almost full screen. but the result is not good. In desktop both results are correctI´d like to get a full screen in all smartphones. 3.- also, I have a problem with the music in windows phone.windowsPhone does not load my program if I use mp3 files, and if I use ogg, I cannot hear anything. works but it does not ring'ambiental_1', ['audio/theme_neurorazer.ogg']); it does not working, preloader screen crash.'ambiental_1', ['audio/theme_neurorazer.mp3']); it does not working, The preloader screen crash.'ambiental_1', ['audio/theme_neurorazer.mp3 ,'audio/theme_neurorazer.ogg' ']); any ideas.thks for all.
  17. I have a problem when I get the position of Input (click, touch, etc...) in a event and then try to put a sprite in the same position. This happen when the game is in (100%, 100%) screen mode, i.e , the sprites in a scene are responsive to the screen size. In this case, the position of the sprite is "shifted" a space versus the mouse click, the problem is: this "shift" is not constant, and the image is not exactly in the sprite.x(y) position. More details: I have a image 800 x 600 per example in a sprite, this sprite is responsive to the touch or click event, when this happen, I put a new sprite in the position of the click, but... well, the thing I said at the beginning. Thanks.
  18. I'm trying to figure out how to best detect overlap between a tileSprite that's resizing and relocating every frame (I use it to visualize a physics spring) and a group of sprites with circular P2 bodies attached (in order to remove the spring upon contact). I tried attaching a P2 body to the tileSprite (spring) and call body.setRectangleFromSprite() every frame like so: spring.body.x = x;spring.body.y = y;spring.width = width;spring.body.angle = angle;spring.body.setRectangleFromSprite();...and was planning to enable the body's data.shapes[0].sensor for overlap detection as described here: However, for some reason the body's angle is different from the sprite's angle (see attached images) (I'm ignoring the body's offset for now). The body appears close to perpendicular to the sprite when the sprite is almost vertical, while the body almost matches the angle when the sprite is close to horizontal. Math has always been my Achilles' heel, but this smells like a sine/cosine problem to me. Am I doing something wrong? Or is there an altogether better way of going about this? Many thanks in advance to this wonderful community!
  19. Es posible realizar un Resize en Phaser del Canvas para que funcione como este ejemplo: ? Thanks!
  20. Resizing the window when there is no post process means the views aspect ratio gets updated when the engine.resize() function is used. However resizing the window while a postprocess is enabled means the view gets stretched even while the engine.resize() function is running. The "engine.resize()" function still updates the resolution if there is a post process, since there are no stretched or blurry pixels, it's just the aspect ratio that doesn't change. Everything works if the window is resized and then the page is refreshed but it would be nice for it to update without a refresh (using the "pass" postProcess) Is there a way to update the postprocess ratio when the window is resized? PostProcess code: postProcess0 = new BABYLON.PassPostProcess("Scene copy", 1.0, camera);
  21. Hey, I'm trying new scaleMode.RESIZE. When I try to set game height as percentage value like "100%" or "50%" height of canvas DOM element always 0. <div id="gameContainer"><canvas width="1075" height="0" style="display: block; touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit;"></canvas></div>Width with percentage value works great. // Main.tsvar config:Object = {width: "100%",height: "100%",renderer: Phaser.CANVAS,parent: "gameContainer",transparent: false,antialias: true,enableDebug: Main.development};// Boot.tsvar scale:Phaser.ScaleManager =;scale.scaleMode = Phaser.ScaleManager.RESIZE;scale.pageAlignHorizontally = true;scale.pageAlignVertically = true;if (! scale.forceOrientation(false, true);scale.enterIncorrectOrientation.add(this.onEnterIncorrectOrientation, this);scale.leaveIncorrectOrientation.add(this.onLeaveIncorrectOrientation, this);
  22. I am new to Phaser development and I am currently having trouble figuring out the correct code needed to have a game resize to the full viewport of a browser on window resize without stretching any of the graphics. I am working on a vertical scroller with a tilemap (1024x4608) for the base background/map. On window resize (or orientation change) I would like to be able to adjust the game dimensions to fill up the entire viewport while keeping the same ratio to allow the tilemap not to be distorted. From my tests, it seems that I would want to keep the width the same and adjust the height then let the game scaling do its thing to allow the game to take up the full browser viewport without stretching the tilemap. I just have not been able to figure out the correct ScaleManager settings to make that happen. I tried the following which does scale the game but does not adjust the width/height to take up the whole viewport: Game instantiation: var gameHeight = window.innerHeight * 1024 / window.innerWidth;var game = new Phaser.Game(1024, gameHeight, Phaser.CANVAS, 'test-game');In the window resize function: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.pageAlignHorizontally = true;game.scale.pageAlignVertically = true;game.scale.setScreenSize();game.scale.refresh();And this attempt takes up the whole viewport but does not scale correctly so it stretches the tilemap: In the window resize function: game.scale.setMaximum();game.scale.refresh();Any help would be greatly appreciated.
  23. <deleted>
  24. Hello. I'm using the following code to make my game responsive: = Phaser.ScaleManager.SHOW_ALL;; = true; = true;;But it only change the size if I refresh the page... Is it possible to change when window resize? I saw that in early versions (for example 1.1.3) it resized when the window resized..
  25. Greetings! I'm starting out using phaser for the the first time, but hit a problem blocking most of my further development. I am aiming to create a simple level editor in html5 and have successfully embedded phaser on in its own <div> on my page. When i resize the div, i would like the phaser screen to resize as well, but not scale the content just releaving more of it. I have tried initializing the game at 800x600 and setting the camera size like so,600);Hoping that half of my screen would be cut of,but this did not seem to have any effect as I was left with the exact same result as without the code line. How could i achieve this functionallity with phaser? The closest i have come to something similar is mattguests example in this post. But it seems to have problems with the movement of the camera and the bounds once you resize beyond the initial size. Anyone care to point me in the correct direction?