Search the Community

Showing results for tags 'scale'.

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

  1. Hello everybody, I making a game with Phaser, but the problem is when I tested my game in different screen size then the assets coordinate is different. Is there any magic way to resolve this. Thanks.
  2. HI everyone, i got a scale bug on ios device with using iframe. game.js use these codes: = Phaser.ScaleManager.SHOW_ALL; = true; = true;;; my file structur : /root/app/game1/1.html /root/app/game2/2.html /root/app/game3/3.html /root/app/index.html for example : index.html use iframe : <iframe src="game1/1.html" class="game-canvas-iframe" id="game_frame">Your browser doesn't support IFrames</iframe> it's working nice on desktop or android device , but on ios device , entire scene will keep scalling and never stoped; and this is test results: visit /root/app/game1/1.html visit /root/app/index.html desktop nice nice android nice nice iphone nice terrible ipad nice terrible here is the example: Nice Page : Bug Page :
  3. Hello everyone! I am just getting in Game development in Phaser. I am trying to create Android application and I am using this: to convert my Phaser code into .apk file. Everything works great and it is the same as in the browser. Also I am scaling the content with devicePixelRatio. However, after the last update(today) of the Android WebView there is a problem with my app... I can't see the whole world and everything is hidden anywhere outside the display. I tried some things, but nothing can fix my problem! I am looking forward for your replies! See the pics before/after:
  4. Batzi

    Pinch to zoom

    So I added HammerJS in my project and got it working. I am trying to zoom in/out to/from a specific point when I am pinching in/out. Basically I need to calculate the midpoint between my 2 fingers. So I did something like this var x1 = game.input.pointer1.worldX;var y1 = game.input.pointer1.worldY;var x2 = game.input.pointer2.worldX;var y2 = game.input.pointer2.worldY;var middleX = (x1+x2)/2;var middleY = (y1+y2)/2;This gives me the point I need to zoom in/out to/from. Keep in mind I using scale to do so and I am doing something like if(pinchin){scale-=0.05;}else if(pinchout){scale+=0.05;}I also have a group of sprites that I am scaling everytime pinch is executed. Here's the tricky part, that middle point (x,y) that I am getting changes on scale so I need to get the point after the scale and move the camera accordingly. If I do something like = middleX * scale; = middleY * scale;It doesn't really work well. In fact, it is not accurate at all and the camera moves in a weird way. How would you do it and what am I missing?
  5. Hi there, i'm facing a weird problem. I'm using a sprite to display an image (1280px * 80px). The available are to show the image is shorter than image. At this point, i compute ratio between image size and area size to get the initial scale factor for sprite. When i run the game on my computer with Chrome, in "tablet mode" with a screen size of 1024*575px (same size as my samsung tablet), the image is fully displayed. I'm happy (Droopy style) When i run the game on my tablet (Samsung galaxy Tab 3 7.0), the image is a bit bigger and is not fully displayed. I log all values (elements sizes, image/area ratio) and values are identical. I don't understand why image is rendered differently with same scale value. What did i miss? Can you help me, it's driving me crazy. Thx. Gauthier.
  6. Hi guys! i am a beginner user 1st time building a game using Phaser. I am trying to build a climbing game where a guy tries climbs up a trunk with obstacles as high as he can. So far, this is what i have got: Currently, the obstacles(rocks) appear across the whole How do i set the game bounds so that the obstacles will only appear within the trunk? I tried using sprite.input.boundsSprite = trunk; and sprite.input.boundsRect = trunk; but it seems its only applicable to bound sprite dragging. Then i tried but from the Phaser docs, do not quite understand how do i set the trunk as the game border. especially when I hope for it to scale so as it will appear right for all devices. Additional info, some of my code: var game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.AUTO); Using tileSprite to create the trunk for player to climb: this.trunk = this.add.tileSprite(Math.ceil( * 0.15), 0, Math.ceil( * 0.7),, 'trunk'); *The background is not a sprite but just a normal sky blue background color. Can you please kindly advice? Thank you!
  7. hi i am trying to design a game like Close Up game( how can i zoom image in the fixed box? when i set sacle property ,it change width and Height image. i want to fix width and height when i change scale property. and show like below image. i see this link ,that code change size of image box. i need to scale my image in the fixed box . please guide me thanks.
  8. 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...
  9. Is there a way to detect the device's resolution on which the game is running? I'd like to scale things in my game based on that. For some reason, when I try my game on a different PC monitor, the height is not always the same so a black bar at the bottom is shown whenever I scroll the camera down. On my PC monitor, that bar isn't shown and it is limited to the edges of the map I am using.
  10. Typescript says you the first call of constructor() should be super() so this isn't possible: constructor() { var devicePixelRatio = Math.min(Math.round(window.devicePixelRatio), 3) || 1; super({ renderer: Phaser.AUTO, width: window.innerWidth * devicePixelRatio, height: window.innerHeight * devicePixelRatio });}But then doing this gets the error: Cannot read property 'setGameSize' of null constructor(gameVars:any) { super({ renderer: Phaser.AUTO, parent: 'canvasContainer' }); var devicePixelRatio = Math.min(Math.round(window.devicePixelRatio), 3) || 1; this.scale.setGameSize(window.innerWidth * devicePixelRatio, window.innerHeight * devicePixelRatio);}When does the ScaleManager come into existence?
  11. Hi guys! Is possible to resize a bitmapdata using scaleMode RESIZE? Any example please? Any help is greatly appreciated!
  12. Why is Phaser duplicating this sprite? It makes it like this in any scale mode. How can I get it appear only one?
  13. So I am having a problem whenever I am zooming out the map. The scale of all the assets are done correctly except when I zoom out, their position on the map change. I am not changing sprite.x/y, it is just that when the map is scaling things move around and I tried doing something like //pseudo-codeif(zoomOut){ sprite.x *= scale; sprite.y *= scale;}but that didn't work since that sent the sprites off the map eventually. Here's an example of what is going on. So this is the game when zoom is maxed out (scale=1) this is when the scale is 0.9 (you can see the sprites aren't where they were originally placed) At scale=0.7 (now it is even more obvious) What do you guys think?
  14. Hi, Pretty new to phaser - wondering if anyone might be able to help me out. I've got a fixed size game area (1000px x 1000px) which i'm using to draw a bunch of rectangles on in fixed positions (a masonry style grid ie/ (The fixed game size lets' me accurately position each rectangle for future use...) Is is possible to take the entire game area and then resize it to fit the current device??? Here's my initial setup code: --- var game; var deviceWidth = document.getElementById("game").offsetWidth; var deviceHeight = document.getElementById("game").style.height; window.onload = function() { gameWidth = 1000; gameHeight = 1000; game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, 'game', {preload:onPreload, create:onCreate, update:onUpdate}); ....
  15. 1) i have a structure: world - stageGroup - boxGroup - 3 sprites when i scale stageGroup 3 sprites do resize, but their debug boxes don't, so the collision system doesn't work. what do you think can be the problem?
  16. Hi guys, What do you think about the following issue? See the canvas using scaleMode RESIZE (width:100%, height:100%) before to open a side menu But after to open the side menu you see: But... This works if you take into account the transforms of the parent element when you get the parent bounds... Thanks in advance, Nicholls
  17. Hi friends, One question... exist any tutorial to scale a game like RunPixieRun? Excuse me and thanks
  18. Hello, i'm trying to add a text child to a sprite s =,0,'bet');s.scale.setTo(0.5, 0.5);t =,0,'100$');s.addChild(t);The problem is the also get scaled with the sprite. is there any way to scale only the sprite ?
  19. 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 =)
  20. 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
  21. Hi there, Is there a way to ignore the global scale of world.scale? I am trying to "zoom in" by scaling the world, but I dont want this to affect my UI elements. I am currently have a method that I call on update that negates the scrolling, although it seems that my negating and the zooming are happening in different updates, so it makes my UI elements shake on the screen while they catch up. I am zooming in by changing the world.scale x and y in a tween, then calling this method every update: _onScaleChanged( scale ) { if ( this.ignoreGlobalScale ) { var ratio = 1 / scale; this.scaleX = ratio; this.scaleY = ratio; } }Any help would be greatly appreciated! Thanks, Dom
  22. I read this blog post by OkijinGames: In the post, he explains how he handles scaling: Is there any way to do this in Phaser? The way I used to handle scaling was to apply a scaling factor to everything in the game, but OkijinGames' method seems much more convenient.
  23. Hello, I understand that we can "zoom" into a displayObjectContainer using the 'scale' property. I currently have one large such container which contains all of my graphics. However, on increasing the scale point, the screen zooms into the top left corner of the screen (presumably some kind of anchor point?). Is there any way to have the screen scale towards a specific point or anchor? i.e Zooming into the cursor position for example. At the moment, the displayObjectContainer seems to have no anchor property. ie. (Can we achieve a 'zoom' into a specific x/y point?) or even just a decimal anchor point of some sort? Much appreciated, Jordan
  24. Hi, I just started working with Pixi.js and am trying to scale down sprites without losing the resolution. For example, if I have an image of size 72x72 and apply a scale to it such as: var texture = PIXI.Texture.fromImage("image.png"); var sprite = new PIXI.Sprite(texture); sprite.scale.x = 0.1; sprite.scale.x = 0.1; This scales the size down nicely, however the image becomes extremely blurry. Is there a way to fix this? I have tried using PIXI.SCALE_MODES.NEAREST but it produces the same effect
  25. Is it possible scale the content of the stage?