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

  1. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  2. Hello, community! I've just started using Phaser 3, and it's a pleasant experience. Special thanks to team for TypeScript definitions. I'm currently trying to implement scale logic for my game. I've read in this blog post that developers considered to change `ScaleManager` in Phaser 3, but I didn't find one in sources. I've also tried to take a look at how resize is handler in Mario platformer from pinned topic. Author used this: scaleMode: 0, //Phaser.ScaleManager.EXACT_FIT, ... but I didn't find `scaleMode` in Config.js object, and also didn't find any reference in Game.js object to this config property. It seems this was a way to scale game in Phaser 2, but not anymore. My current idea is to put all game objects in a 'parent' frame (not sure which object should I used for this btw..), and scale this 'frame' in each Scene on 'resize' event. This feels awkwardly wrong to me, and I'm looking for better approach. Would be very grateful for a hint where to look, or an advise on how to properly implement scaling. Thank you!
  3. sta-ger

    Scaling down big images quality

    Hello! I have a trouble when scaling down big assets. I just have a stage contains some sprite and i'm doing: stage.scale.x = stage.scale.y = 0.2; As a result I have an ugly ragged image. I found a solutions for a simple canvas drawing without pixi from here Can I achive the same smooth effect after rescaling in PIXI?
  4. I'm having a hard time trying to do something that should be quite straightforward, so I'm not sure what I'm missing. How do we scale an image (to use as a game background) to fit the window? This is my approach, which doesn't work: preload() { this.load.image('bg', 'space3.png'); } create() { const bg = this.add.image(0, 0, 'bg'); bg.width = window.innerWidth; bg.height = window.innerHeight - this.parent.canvasOffset; // I would like to use and but those values don't exist } If I use bg.scaleX and bg.scaleY and set the values to 2.0, it does work, but what I want is to scale it to fit the window/viewport.
  5. Hi everyone, I'm trying to figure out how to 'reset/readjust' a sprites collider after adjusting the sprites scale. The initial collider setup ( size/offset) is working perfectly at scale 1, with the following : sprite.setSize(44,64,true); sprite.body.offset.y = 44; scaling works great for both sprite and collider with : sprite.setScale(2); the issue is when i set the scale ( to 2 in this example ), the collider now has an offset. is there a built in way to 'reset' this collider so it aligns with the sprite? thanks for your help. var config = { parent: 'container', type: Phaser.WEBGL, width: 300, height: 300, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: true } }, scene: { preload: preload, create: create } }; let game = new Phaser.Game(config); let sprite; function preload () { this.load.image('00', '00.png'); } function create () { sprite = this.physics.add.image(400, 300, '00'); sprite.setSize(44,64,true); sprite.body.offset.y = 44; sprite.setScale(2); sprite.setVelocity(100, 200).setBounce(1, 1).setCollideWorldBounds(true).setGravityY(200); }
  6. Hello everybody, Long time I haven't post anything here as my life with babylonjs is going smooth and well. But unfortunetly I am now stuck! I am looking for a way to adapt an advanced texture size depending on the mesh size so that the text on it will keep the same font and shape. I have made a playground to make my request more clear : Thanks a lot! Pichou
  7. I have sprites which are all anchored at 0.5 for x and y, and they are often "flipped" via (e.g.) someSprite.scale.x *= -1. Because their anchors are centered, they don't move immediately because of this. However, changing to a negative scale mucks with their size and coordinates, because now a 20px-wide sprite will report a width of -20px, and it also interprets changes to its position inverse to what they were before (sprite.x++ will cause it to move up on the screen). This makes sense and everything, but the sprites' movement and activity is not always related to their scale. I know there must be a simple way to make a mirrored "copy" of a texture which can be swapped out on a single sprite without having to change its scale from positive to negative constantly.
  8. Shex

    Scale a tilesprite

    Hi In Phaser2, it was possible to scale a TileSprite so the sprite inside was scaled while being tiled. It doesn't seem to be there anymore in Phase3. Is there a way to achieve this? Thanks!
  9. mattbrand

    Scaling and input fields

    In my game I have a form that I built with Orange Games' input plugin ( The input form working great on computer, but on mobile when you tap into an input field, it zooms in, and becomes impossible to see what you're doing, or go to the next field. I tried using scale prevention with meta tags: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> and: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> but my game uses "game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL" to look good on all resolutions. So when I put in the meta tags, it doesn't scale initially, and it is too big on mobile. Is there any way to use a meta tag that allows for initial scaling on mobile, but then freezes the scale in order to prevent zooming on input fields?
  10. hi, after get the examples from : i'm searching to modify the object of the tiles, but i can't modify the alpha and the scale (=> see //HERE THE PROBLEM). how do you do to reach that ? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update ,render: render}); function preload() { // tiles are 16x16 each game.load.image('tiles', 'tiles.png'); } var cursors; var currentDataString; function create() { // Create some map data dynamically // Map size is 128x128 tiles var data = ''; for (var y = 0; y < 128; y++) { for (var x = 0; x < 128; x++) { data += game.rnd.between(0, 20).toString(); if (x < 127) { data += ','; } } if (y < 127) { data += "\n"; } } // console.log(data); // Add data to the cache game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV); // Create our map (the 16x16 is the tile size) map = game.add.tilemap('dynamicMap', 16, 16); // 'tiles' = cache image key, 16x16 = tile size map.addTilesetImage('tiles', 'tiles', 16, 16); // 0 is important layer = map.createLayer(0); // Scroll it layer.resizeWorld(); game.physics.startSystem(Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); // Our painting marker marker =; marker.lineStyle(2, 0xffffff, 1); marker.drawRect(0, 0, 32, 32); game.input.addMoveCallback(updateMarker, this); game.input.onDown.add(getTileProperties, this); cursors = game.input.keyboard.createCursorKeys(); } function getTileProperties() { var x = layer.getTileX(game.input.activePointer.worldX); var y = layer.getTileY(game.input.activePointer.worldY); var tile = map.getTile(x, y, layer); console.log(tile) //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// //HERE THE PROBLEM tile.scale.x=.1 tile.alpha=.1 // Note: JSON.stringify will convert the object tile properties to a string currentDataString = JSON.stringify( ); = true; } function updateMarker() { marker.x = layer.getTileX(game.input.activePointer.worldX) * 32; marker.y = layer.getTileY(game.input.activePointer.worldY) * 32; } function update() { if (cursors.left.isDown) {; } else if (cursors.right.isDown) {; } if (cursors.up.isDown) {; } else if (cursors.down.isDown) {; } } function render() { if(currentDataString){ game.debug.text('Tile properties: ' + currentDataString, 16, 550); } else { game.debug.text("Click on a tile to reveal the properties of the tile", 16, 550); } }
  11. I started working on game, which I would like to publish on Android and ios market. How I can set resolution or scale game to most popular devices? I found on google that the most popular resolution is (480, 320) var game = new Phaser.Game(480, 320, Phaser.CANVAS); I test my game (sample asstes) on Asus Zenphone GO (resolution: 720 x 1280 pixels) and this is how it looks (white space on top and sides). How developers scale their games to fit all phones?
  12. Noob here using Phaser. But here's my issue: I'm struggling to get to a perfect scale on the game I'm building. The best option for me so far is Phaser.ScaleManager.RESIZE; But this method doesn't have a limit to the canvas size. If an user has a huge screen, say 30 inches, he'd have a lot of advantage over an user with a medium size screen, say 17 inches. The 30 inches user would have much more view of the world. I've tried to set the canvas to a fixed size, like 1280x720, then dynamically resize the canvas style. And using Phaser.ScaleManager.SHOW_ALL; But it doesn't do the trick because it shows the black borders and I can't get rid of it. To make it clear what I want to achieve, I'm building an online multiplayer game (.io). If you notice the most famous .io games like, and, the game scale is perfect for any screen size. If the screen is too big, the game doesn't show more screen. It just adjusts for a more zoomed game. Here's a gif of what I need and how my game is now: Notice that in agario, the screen only goes so far before the game starts to scale. My game: Notice how much of the world I can see after scaling my game. Meaning that there is no limit for the canvas. Please let me know if you need more information in order to help me out here! Thanks in advance!
  13. I'm trying to make my mesh smaller during its linear velocity movement. But unfortunately, as soon as I set the scaling, it stops the movement. How can I scale down my mesh in size without interrupting the movement? Is there an elegant way without having to calculate positions myself? See my example, where the movement stops after 1sec when trying to scale:
  14. Hi, I'm currently making a litlle top-down shooter game with Phaser. I'm using the method bellow to aim towards the mouse's position. sprite.rotation = game.physics.arcade.angleToPointer(sprite); This work very well, but I would like to allow the player to zoom in and out. I was following this idea : which use the method; But when I change the world's scaling, the angleToPointer() method is completly lost and it's impossible to aim. You can try this little exemple I've made to understand what goes wrong : Do someone has an idea to fix this? Thanks for you futur help
  15. Hi. I'm new to phaser and to this forum. I have a problem that I would like to ask for some help with. I'm trying to import a level from a JSON file exported from a 3rd party level editor that is not meant to be used with Phaser or any other 3rd party engine. It is just me trying to use the JSON coming from the editor to load the level in Phaser and I have some problem with rotation and scale of the sprites. The level editor rotate the sprites around a center point and scale the sprites from the origin point. In Phaser, I set the position of the anchor point to match the position of the origin point and set the position of the pivot point to match the position of the center point for each sprite and it works for getting the position and the rotation of the sprites but when I scale a sprite in the editor, it does not appear right in Phaser. This is how it looks like in the editor: And this is how it looks like in Phaser after import: Notice the distance between the two sprites. It does not match and I think it is because in the editor the sprite is scaled from the top left corner of the sprite (origin/anchor point) while in phaser it is scaled from the center of the sprite (pivot point). At least If I don't change the position of the pivot point, the scale and position works but then rotation is off because in the editor the sprite is rotated around the center point which is in the middle by default. In any case I can't find a solution to this. I can't get the scale match without messing up the rotation or the rotation without messing up the scale because of the two points. When I check the values, everything seems to match. Position, rotation, scale but it still does not look the same in Phaser. I hope someone did have the same problem with rotating and scaling sprites in Phaser and already figured a solution. What I would like to know specifically, is there any way to rotate a sprite around a middle point without changing the position of the anchor and pivot point or is there any way to scale a sprite from the anchor point instead of the pivot point? Because the problem seems to be in Phaser the sprites are scaled and rotated around the pivot point but in this case I need to scale it and rotate it in two separated points to get the same result as in the level editor. I would appreciate any help. Thank you.
  16. Hi All. Maybe it seems strangely but how I can before use scale9 for sprite2D, scale this sprite without scale9 and after that applying to this sprite scale9? Why I need this? For optimization! I have canvas size 1280x720, then I am make the size for this canvas 640x360 and scale = 2 and for all sprite2D objects on this canvas I set scale = 0.5 and in results we have few resolution for canvas and good quality for all sprite2D objects. But some sprites uses scale9 and if I set scale 0.5 for this sprites, then this sprites at once uses scale9 but I need use just scale 0.5 and after that apply scale9. This is what I get if scale of canvas = 1 and the button scaleX = 1.5, scaleY = 1 (uses scale9) But what I get if scale canvas = 2 and button scaleX = 0.75, scaleY = 0.5 (uses scale9) Need to apply scale 0.5 as original scale and then apply for a new size of sprite the scale9 grid. How I can to do this? Thanks!
  17. satguru

    Matrix decompose scaling bug

    @Deltakosh The matrix decompose returns wrong scale value when scale is negative see Here scling.z is being set to -2, decompose returns +2 I think the bug got introduced by this change Fixed matrix decomposition with negative scaling
  18. Hello, Is there a way to get the size of an object after the window has been resized? (Whole scene gets scaled down/up). planet2.getBoundingInfo().boundingBox.vectorsWorld; but it only displays 1.25 no matter how much I resize my browser window
  19. I did a function resize to resize the game follow the size of the screen and at the end of this function I do : game.scale.refresh(); But I would like to catch the event of this function like this : var scaleRefresh = game.scale.refresh(); scaleRefresh.onComplete.add(function(){ //DO stuff }); But it's not work how can I do this?
  20. TomLeGrand

    Problems due to world's scaling

    Hi there, Before reading, I want you to know that you can test my little code here : (Arrows to move the player and mousse to aim in a direction) So, I had some problems using the camera.follow (), moveToPointer () and world.scale.set () functions simultaneously. It seems that the world's scaling influence the x and y properties of world's object (like the camera, the input, etc...). To be more specific, I can't use the camera.follow(player), because the player get out from the camera at some point. The only solution I found was to set the x and y camera's values in the update function but now I don't know how I can get a "smooth effect" without using the camera.follow() function. The moveToPointer() method react badly too, the farthest I go, the worst It get, even with game.input.scale.set(). I'll be glad if you can help me to fix the camera and the moveToPointer() methods
  21. I'm working on a "fake zoom" function that looks like this: class Zoomer extends Phaser.Group { zoom = (amount = { x: 1.5, y: 1.5 }) => { this.x = -((amount.x * ( / 2)) - ( / 2)); this.y = - (amount.x * ( * 1.15)); this.scale.setTo(amount.x, amount.y); } } The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all. This is how I usually create masks on a Phaser.Sprite: createMask() { const graphics =, this.y); graphics.beginFill(0xFFFFFF); graphics.drawRect(0, 0, this.width, this.height); this.addChild(graphics); this.mask = graphics; } How can I make the group scaling/repositioning include the group's sprites' masks as well?
  22. Hi all, Hopefully, this is just something quick I'm missing... I have initialized my game with the resolution of 500x800 and SCALE_MODE is set to RESIZE; In portrait orientation, the game is the correct size of 500x800, however, when I rotate the device and would expect the game to now be 800x500 it is actually 500x313. I'm thinking I'm just missing something that I need to manually resize or update or something, but I'm having trouble finding what I need by searching around. Anyone know how to accomplish what I'm expecting? Thanks.
  23. gtspina

    Fix position after scale

    Hi guys. I'm trying to do a "zoom in" effect on a GUI_Object. But when scaling the image leaves the original collision field. How to keep the image centered with the collision field of the button? Before click: After click: Code: game.UI.ButtonInit = me.GUI_Object.extend({ init: function (x, y, image) { this._super(me.GUI_Object, "init", [x, y, { image: image, }]); this.anchorPoint.set(0, 0); this.floating = false; }, onClick: function () { this._super(me.Sprite, "scale", [.8, .8]); }, update: function () { return true; }, draw: function (renderer) { this._super(me.GUI_Object, "draw", [renderer]); } });
  24. udbhav

    Make tilemap/world fit in game?

    Hi, I just learned some basics of using tilemaps. I created a tilemap using Tiled, containing 32x32px tiles. The problem is, I can't resize the entire tilemap to fit the entire canvas. I need the layer in the tilemap or the world itself to fit the canvas. scale.setTo() works, but that's relative and I want to set the width and height to that of the game's canvas. Changing displayWidth and width doesn't seem to have any effects. The tilemap still appears small in the upper left corner of the canvas. Any suggestions guys? Code: var playLevel = { create: function() { ='tilemap');'sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer ='Ground');, 200, true, 'Ground'); this.groundLayer.resizeWorld(); }, update: function() { } } EDIT: I just found out that changing width and height DOES work. But for some reason, instead of the tilemap's width being 32 * 20 = 640, it returned 940, which is the width of the canvas. But the tilemap itself looks to be 640 pixels wide, so I don't know why the width and height properties don't correspond to the actual ones. So I guess I can't use it?
  25. estudillod

    Help with scales?

    So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following: // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this: // Here we create the ground. var ground = platforms.create(0, - 64, 'ground'); Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks! Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background? tutorial.html part9.html